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

package/react/components/Button/sgds-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.cjs.js","names":["ButtonElement","FormSubmitController","HasSlotController","anchorStyles","buttonStyles","classMap","ifDefined","sanitizeHref","property"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,aAAb,cAAgCA,uBAAAA,QAAc;;;EAIJ,KAAA,uBAAA,IAAIC,6BAAAA,qBAAqB,MAAM,EACrE,OAAO,UAA4B;GAGjC,IAAI,MAAM,aAAa,MAAM,GAAG;IAC9B,MAAM,MAAM,MAAM,YAAY;IAC9B,MAAM,SAAS,MAAM,aAAa,MAAM;IACxC,OAAO,IAAI,eAAe,MAAM;GAClC;GAGA,OAAO,MAAM,QAAQ,MAAM;EAC7B,EACF,CAAC;EAQgF,KAAA,OAAA;EA0BzB,KAAA,YAAA;EAGT,KAAA,kBAAA;EAGC,KAAA,mBAAA;EAEX,KAAA,oBAAA,IAAIC,aAAAA,kBAAkB,MAAM,YAAY,WAAW;EAiB1D,KAAA,sBAAA;GAC5B,IAAI,KAAK,SAAS,UAChB,KAAK,qBAAqB,OAAO,IAAI;GAEvC,IAAI,KAAK,SAAS,SAChB,KAAK,qBAAqB,MAAM,IAAI;EAExC;;;EAlFgB,KAAA,SAAA;GAAC,GAAGF,uBAAAA,QAAc;GAAQG,eAAAA;GAAcC,eAAAA;EAAY;;CA4DpE,UAAU;EACR,IAAI,CAAC,KAAK,iBAAiB,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,UAAU;EACxF,IAAI,CAAC,KAAK,kBAAkB,KAAK,mBAAmB,KAAK,kBAAkB,KAAK,WAAW;CAC7F;CAEA,aAAgC,OAAmB;EACjD,IAAI,KAAK,YAAY,KAAK,SAAS;GACjC,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EACA,KAAK,oBAAoB,SAAS,KAAK,aAAa;EACpD,KAAK,iBAAiB,SAAS,KAAK,aAAa;CACnD;CAWA,SAAS;EACP,MAAM,SAAS,KAAK;EACpB,MAAM,MAAM,SAAS,mBAAA,OAAO,MAAM,mBAAA,OAAO;EACzC,MAAM,SAAS,CAAC,KAAK,mBAAmB,CAAC,KAAK;EAE9C,OAAO,mBAAA,IAAI;SACN,IAAI;sBACQC,GAAAA,4BAAAA,SAAAA,CAAS;GACpB,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,iBAAiB,KAAK;GACtB,kBAAkB,KAAK;GACvB,WAAW;GACX,SAAS,KAAK;EAChB,CAAC,EAAE;qBACSC,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,QAAQ,EAAE;gBACnDA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,IAAI,EAAE;gBAC1CA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,IAAI,EAAE;iBACzCA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,KAAK,EAAE;gBAC5CA,GAAAA,6BAAAA,UAAAA,CAAU,SAASC,gBAAAA,aAAa,KAAK,IAAI,IAAI,KAAA,CAAS,EAAE;kBACtDD,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAK,SAAS,KAAA,CAAS,EAAE;oBAC1CA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAK,WAAW,KAAA,CAAS,EAAE;eACnDA,GAAAA,6BAAAA,UAAAA,CAAU,UAAU,KAAK,WAAW,WAAW,wBAAwB,KAAA,CAAS,EAAE;gBACjFA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,WAAW,KAAA,CAAS,EAAE;wBAChC,KAAK,YAAY,KAAK,UAAU,SAAS,QAAQ;mBACtD,KAAK,WAAW,OAAO,IAAI;iBAC7B,KAAK,aAAa;mBAChB,KAAK,eAAe;iBACtB,KAAK,aAAa;gBACnB,KAAK,YAAY;sBACZA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,UAAU,YAAY,KAAK,SAAS,EAAE;;SAGjE,KAAK,UACD,mBAAA,IAAI;uBACKA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAAE;uBAC9CA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,mBAAmB,KAAK,MAAM,KAAK,OAAO,CAAC,EAAE;iCAErE,mBAAA,IAAI;;+CAGT;;UAEE,IAAI;;CAEZ;AACF;AAhHGE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAKxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAGjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAGjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,WAAW;CAAkB,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,kBAAA,KAAA,CAAA;AAItEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAQjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,aAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,WAAA,WAAA,mBAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,WAAA,WAAA,oBAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-button.cjs.js","names":["ButtonElement","FormSubmitController","HasSlotController","anchorStyles","buttonStyles","classMap","ifDefined","sanitizeHref","property"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span role=\"presentation\"><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,aAAb,cAAgCA,uBAAAA,QAAc;;;EAIJ,KAAA,uBAAA,IAAIC,6BAAAA,qBAAqB,MAAM,EACrE,OAAO,UAA4B;GAGjC,IAAI,MAAM,aAAa,MAAM,GAAG;IAC9B,MAAM,MAAM,MAAM,YAAY;IAC9B,MAAM,SAAS,MAAM,aAAa,MAAM;IACxC,OAAO,IAAI,eAAe,MAAM;GAClC;GAGA,OAAO,MAAM,QAAQ,MAAM;EAC7B,EACF,CAAC;EAQgF,KAAA,OAAA;EA0BzB,KAAA,YAAA;EAGT,KAAA,kBAAA;EAGC,KAAA,mBAAA;EAEX,KAAA,oBAAA,IAAIC,aAAAA,kBAAkB,MAAM,YAAY,WAAW;EAiB1D,KAAA,sBAAA;GAC5B,IAAI,KAAK,SAAS,UAChB,KAAK,qBAAqB,OAAO,IAAI;GAEvC,IAAI,KAAK,SAAS,SAChB,KAAK,qBAAqB,MAAM,IAAI;EAExC;;;EAlFgB,KAAA,SAAA;GAAC,GAAGF,uBAAAA,QAAc;GAAQG,eAAAA;GAAcC,eAAAA;EAAY;;CA4DpE,UAAU;EACR,IAAI,CAAC,KAAK,iBAAiB,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,UAAU;EACxF,IAAI,CAAC,KAAK,kBAAkB,KAAK,mBAAmB,KAAK,kBAAkB,KAAK,WAAW;CAC7F;CAEA,aAAgC,OAAmB;EACjD,IAAI,KAAK,YAAY,KAAK,SAAS;GACjC,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB;EACF;EACA,KAAK,oBAAoB,SAAS,KAAK,aAAa;EACpD,KAAK,iBAAiB,SAAS,KAAK,aAAa;CACnD;CAWA,SAAS;EACP,MAAM,SAAS,KAAK;EACpB,MAAM,MAAM,SAAS,mBAAA,OAAO,MAAM,mBAAA,OAAO;EACzC,MAAM,SAAS,CAAC,KAAK,mBAAmB,CAAC,KAAK;EAE9C,OAAO,mBAAA,IAAI;SACN,IAAI;sBACQC,GAAAA,4BAAAA,SAAAA,CAAS;GACpB,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,iBAAiB,KAAK;GACtB,kBAAkB,KAAK;GACvB,WAAW;GACX,SAAS,KAAK;EAChB,CAAC,EAAE;qBACSC,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,QAAQ,EAAE;gBACnDA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,IAAI,EAAE;gBAC1CA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,IAAI,EAAE;iBACzCA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAA,IAAY,KAAK,KAAK,EAAE;gBAC5CA,GAAAA,6BAAAA,UAAAA,CAAU,SAASC,gBAAAA,aAAa,KAAK,IAAI,IAAI,KAAA,CAAS,EAAE;kBACtDD,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAK,SAAS,KAAA,CAAS,EAAE;oBAC1CA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,KAAK,WAAW,KAAA,CAAS,EAAE;eACnDA,GAAAA,6BAAAA,UAAAA,CAAU,UAAU,KAAK,WAAW,WAAW,wBAAwB,KAAA,CAAS,EAAE;gBACjFA,GAAAA,6BAAAA,UAAAA,CAAU,SAAS,WAAW,KAAA,CAAS,EAAE;wBAChC,KAAK,YAAY,KAAK,UAAU,SAAS,QAAQ;mBACtD,KAAK,WAAW,OAAO,IAAI;iBAC7B,KAAK,aAAa;mBAChB,KAAK,eAAe;iBACtB,KAAK,aAAa;gBACnB,KAAK,YAAY;sBACZA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,UAAU,YAAY,KAAK,SAAS,EAAE;;SAGjE,KAAK,UACD,mBAAA,IAAI;uBACKA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,mBAAmB,KAAK,IAAI,CAAC,EAAE;uBAC9CA,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,mBAAmB,KAAK,MAAM,KAAK,OAAO,CAAC,EAAE;iCAErE,mBAAA,IAAI;;+CAGT;;UAEE,IAAI;;CAEZ;AACF;AAhHGE,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAKxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAGjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAGjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,WAAW;CAAkB,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,kBAAA,KAAA,CAAA;AAItEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AAQjEA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,aAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,WAAA,WAAA,mBAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,WAAA,WAAA,oBAAA,KAAA,CAAA"}

package/react/components/Button/sgds-button.js

@@ -99,7 +99,7 @@ var SgdsButton = class extends ButtonElement {
                size=${ifDefined(this._assignSpinnerSize(this.size))}
                tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}
              ></sgds-spinner>` : html`<slot name="leftIcon"></slot>
-               <span><slot></slot></span>
+               <span role="presentation"><slot></slot></span>
                <slot name="rightIcon"></slot>`}
       
       </${tag}>

package/react/components/Button/sgds-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-button.js","names":["anchorStyles","buttonStyles"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-button.js","names":["anchorStyles","buttonStyles"],"sources":["../../../../src/components/Button/sgds-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport ButtonElement from \"../../base/button-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { FormSubmitController } from \"../../utils/formSubmitController\";\nimport anchorStyles from \"../../styles/anchor.css\";\nimport buttonStyles from \"./button.css\";\n\nexport type ButtonVariant = \"primary\" | \"outline\" | \"ghost\" | \"danger\";\n\n/**\n * @summary Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.\n *\n * @slot default - The button's label.\n * @slot leftIcon - The slot for icon to the left of the button text\n * @slot rightIcon - The slot for icon to the right of the button text\n *\n * @event sgds-blur - Emitted when the button is blurred.\n * @event sgds-focus - Emitted when the button is focused.\n *\n *\n */\nexport class SgdsButton extends ButtonElement {\n  static styles = [...ButtonElement.styles, anchorStyles, buttonStyles];\n\n  /** @internal */\n  private readonly formSubmitController = new FormSubmitController(this, {\n    form: (input: HTMLInputElement) => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute(\"form\")) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute(\"form\");\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest(\"form\");\n    }\n  });\n  /** The name of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) name: string;\n\n  /** The value of the button, submitted as a name/value pair with form data only when this button is the submitter. Only works with `type=\"submit\"`. Has no effect when the button is rendered as a link (i.e. when `href` is set). */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */\n  @property({ type: String, reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"button\";\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property({ type: String, reflect: true }) form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formaction\" }) formAction: string;\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ type: String, reflect: true, attribute: \"formmethod\" }) formMethod: \"post\" | \"get\";\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: \"formnovalidate\", type: Boolean, reflect: true })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ type: String, reflect: true, attribute: \"formtarget\" }) formTarget:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | string;\n\n  /** When set, the button will be in full width. */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  /** Used only for SSR to indicate the presence of the `leftIcon` slot. */\n  @property({ type: Boolean }) hasLeftIconSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `rightIcon` slot. */\n  @property({ type: Boolean }) hasRightIconSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"leftIcon\", \"rightIcon\");\n\n  updated() {\n    if (!this.hasLeftIconSlot) this.hasLeftIconSlot = this.hasSlotController.test(\"leftIcon\");\n    if (!this.hasRightIconSlot) this.hasRightIconSlot = this.hasSlotController.test(\"rightIcon\");\n  }\n\n  protected override _handleClick(event: MouseEvent) {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    if (this.type === \"submit\") {\n      this.formSubmitController.submit(this);\n    }\n    if (this.type === \"reset\") {\n      this.formSubmitController.reset(this);\n    }\n  };\n\n  render() {\n    const isLink = this.href;\n    const tag = isLink ? literal`a` : literal`button`;\n    const noIcon = !this.hasLeftIconSlot && !this.hasRightIconSlot;\n\n    return html`\n      <${tag}\n        class=\"btn ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          \"has-left-icon\": this.hasLeftIconSlot,\n          \"has-right-icon\": this.hasRightIconSlot,\n          \"no-icon\": noIcon,\n          loading: this.loading\n        })}\"\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        type=${ifDefined(isLink ? undefined : this.type)}\n        name=${ifDefined(isLink ? undefined : this.name)}\n        value=${ifDefined(isLink ? undefined : this.value)}\n        href=${ifDefined(isLink ? sanitizeHref(this.href) : undefined)}\n        target=${ifDefined(isLink ? this.target : undefined)}\n        download=${ifDefined(isLink ? this.download : undefined)}\n        rel=${ifDefined(isLink && this.target === \"_blank\" ? \"noreferrer noopener\" : undefined)}\n        role=${ifDefined(isLink ? \"button\" : undefined)}\n        aria-disabled=${this.disabled || this.loading ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        @click=${this._handleClick}\n        @keydown=${this._handleKeydown}\n        @focus=${this._handleFocus}\n        @blur=${this._handleBlur}\n        aria-label=${ifDefined(this.loading ? \"Loading\" : this.ariaLabel)}\n      >\n       ${\n         this.loading\n           ? html`<sgds-spinner\n               size=${ifDefined(this._assignSpinnerSize(this.size))}\n               tone=${ifDefined(this._assignSpinnerTone(this.tone, this.variant))}\n             ></sgds-spinner>`\n           : html`<slot name=\"leftIcon\"></slot>\n               <span role=\"presentation\"><slot></slot></span>\n               <slot name=\"rightIcon\"></slot>`\n       }\n      \n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsButton;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.cjs.js

@@ -36,6 +36,7 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		this.indeterminate = false;
 		this.required = false;
 		this.noValidate = false;
+		this.ariaLabel = "";
 		this.invalidFeedback = "";
 		this._isTouched = false;
 		this._handleHostClick = (e) => {
@@ -157,6 +158,7 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
           type="checkbox"
           id=${this._controlId}
           aria-invalid=${this.invalid ? "true" : "false"}
+          aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel || void 0)}
           name=${(0, lit_directives_if_defined_js.ifDefined)(this.name)}
           ?indeterminate=${this.indeterminate}
           ?required=${this.required}
@@ -211,6 +213,7 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	type: Boolean,
 	reflect: true
 })], SgdsCheckbox.prototype, "noValidate", void 0);
+require_decorate.default([(0, lit_decorators_js.property)({ type: String })], SgdsCheckbox.prototype, "ariaLabel", void 0);
 require_decorate.default([(0, lit_decorators_js.property)({
 	type: String,
 	reflect: true

package/react/components/Checkbox/sgds-checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","HasSlotController","formCheckStyles","checkboxStyle","SgdsIcon","classMap","ifDefined","live","nothing","property","defaultValue","state","watch"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/Checkbox/sgds-checkbox.js

@@ -36,6 +36,7 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		this.indeterminate = false;
 		this.required = false;
 		this.noValidate = false;
+		this.ariaLabel = "";
 		this.invalidFeedback = "";
 		this._isTouched = false;
 		this._handleHostClick = (e) => {
@@ -157,6 +158,7 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
           type="checkbox"
           id=${this._controlId}
           aria-invalid=${this.invalid ? "true" : "false"}
+          aria-label=${ifDefined(this.ariaLabel || void 0)}
           name=${ifDefined(this.name)}
           ?indeterminate=${this.indeterminate}
           ?required=${this.required}
@@ -211,6 +213,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], SgdsCheckbox.prototype, "noValidate", void 0);
+__decorate([property({ type: String })], SgdsCheckbox.prototype, "ariaLabel", void 0);
 __decorate([property({
 	type: String,
 	reflect: true

package/react/components/Checkbox/sgds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","names":["formCheckStyles","checkboxStyle"],"sources":["../../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n * @event sgds-invalid - Emitted when the checkbox's invalid state is set to true.\n * @event sgds-valid - Emitted when the checkbox's invalid state is set to false.\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the checkbox. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Accessible label forwarded to the internal input's aria-label. Use when no visible label slot is used. */\n  @property({ type: String }) ariaLabel = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          aria-label=${ifDefined(this.ariaLabel || undefined)}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        ${hasDefaultSlot\n          ? html`<label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>`\n          : nothing}\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"mappings":"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"}

package/react/components/CloseButton/close-button.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/CloseButton/close-button.css
-var css_248z = require("lit").css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = require("lit").css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn-close:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/CloseButton/close-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.cjs.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"close-button.cjs.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn-close:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}

package/react/components/CloseButton/close-button.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/CloseButton/close-button.css
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn-close:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}:host([disabled]) .btn-close{cursor:not-allowed;opacity:var(--sgds-opacity-40);pointer-events:none}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/CloseButton/close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"close-button.js","names":[],"sources":["../../../../src/components/CloseButton/close-button.css"],"sourcesContent":[":host {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n  display: inline-flex;\n}\n\n:host([size=\"sm\"]) .btn-close {\n  width: var(--sgds-dimension-24);\n  height: var(--sgds-dimension-24);\n}\n\n:host([tone=\"fixed-light\"]) .btn-close {\n  color: var(--sgds-color-fixed-light);\n}\n\n:host([tone=\"fixed-dark\"]) .btn-close {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.btn-close {\n  position: relative;\n  cursor: pointer;\n  border: 0;\n  padding: 0;\n  width: var(--sgds-dimension-32);\n  height: var(--sgds-dimension-32);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-close-btn-border-radius);\n  background-color: var(--sgds-bg-transparent);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.btn-close:hover,\n.btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent);\n}\n:host([tone=\"fixed-light\"]) .btn-close:hover,\n:host([tone=\"fixed-light\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-light);\n}\n:host([tone=\"fixed-dark\"]) .btn-close:hover,\n:host([tone=\"fixed-dark\"]) .btn-close:focus-visible {\n  background-color: var(--sgds-bg-translucent-fixed-dark);\n}\n\n.btn-close:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn-close:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n:host([disabled]) .btn-close {\n  cursor: not-allowed;\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}

package/react/components/DataTable/data-table.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/DataTable/data-table.css
-var css_248z = require("lit").css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}`;
+var css_248z = require("lit").css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}.visually-hidden{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/DataTable/data-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.cjs.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below */\n:host {\n  display: contents;\n}\n\n/* ── sgds-data-table ──────────────────────────────────────────── */\n:host([layout=\"fixed\"]) .table {\n  table-layout: fixed;\n}\n\n.table {\n  display: table;\n  width: 100%;\n  table-layout: auto;\n  border-collapse: collapse;\n}\n\n.table-container {\n  overflow-x: auto;\n}\n\n.data-table {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--sgds-dimension-56);\n  border: var(--sgds-border-width-1) solid;\n  border-color: var(--sgds-border-color-muted);\n  border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n  display: table-row;\n}\n\n.skeleton-cell {\n  display: table-cell;\n  vertical-align: middle;\n  height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--sgds-dimension-128);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-text-color-subtle);\n}\n\n/* hover / expanded states — set CSS custom property on the row host,\n   cells inherit it across the shadow boundary */\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n  background-color: var(--sgds-bg-translucent-subtle);\n  transition: background-color 0.15s ease;\n}\n\n/* ── sgds-data-table-cell / sgds-data-table-head ─────────────── */\ntd,\nth {\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n  cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\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  font-family: var(--sgds-font-family-brand);\n  font-size: var(--sgds-font-size-label-sm);\n  font-style: normal;\n  line-height: var(--sgds-line-height-2-xs);\n  letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n  color: var(--sgds-color-default);\n  font-weight: var(--sgds-font-weight-semibold);\n  gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n  font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n}\n\n.sort-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sgds-dimension-20);\n  height: var(--sgds-dimension-20);\n  padding: 0;\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-form-border-radius-sm);\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-subtle);\n  cursor: pointer;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n  color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-muted);\n  cursor: not-allowed;\n}\n\n.sort-button.active {\n  background-color: var(--sgds-primary-surface-translucent);\n  color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n  display: inline-flex;\n}\n\n.data-table-head.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.data-table-cell.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n/* control cell variants — applied as classes on the host */\n.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n  padding: var(--sgds-padding-md);\n  cursor: pointer;\n}\n\n/* ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n  padding: 0;\n  border: 0;\n}\n\n.expandable-content {\n  background-color: var(--sgds-surface-raised);\n  padding: var(--sgds-padding-2-xl);\n  padding-left: var(--sgds-padding-4-xl);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"data-table.cjs.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below */\n:host {\n  display: contents;\n}\n\n/* ── sgds-data-table ──────────────────────────────────────────── */\n:host([layout=\"fixed\"]) .table {\n  table-layout: fixed;\n}\n\n.table {\n  display: table;\n  width: 100%;\n  table-layout: auto;\n  border-collapse: collapse;\n}\n\n.table-container {\n  overflow-x: auto;\n}\n\n.data-table {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--sgds-dimension-56);\n  border: var(--sgds-border-width-1) solid;\n  border-color: var(--sgds-border-color-muted);\n  border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n  display: table-row;\n}\n\n.skeleton-cell {\n  display: table-cell;\n  vertical-align: middle;\n  height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--sgds-dimension-128);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-text-color-subtle);\n}\n\n/* hover / expanded states — set CSS custom property on the row host,\n   cells inherit it across the shadow boundary */\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n  background-color: var(--sgds-bg-translucent-subtle);\n  transition: background-color 0.15s ease;\n}\n\n/* ── sgds-data-table-cell / sgds-data-table-head ─────────────── */\ntd,\nth {\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n  cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\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  font-family: var(--sgds-font-family-brand);\n  font-size: var(--sgds-font-size-label-sm);\n  font-style: normal;\n  line-height: var(--sgds-line-height-2-xs);\n  letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n  color: var(--sgds-color-default);\n  font-weight: var(--sgds-font-weight-semibold);\n  gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n  font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n}\n\n.sort-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sgds-dimension-20);\n  height: var(--sgds-dimension-20);\n  padding: 0;\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-form-border-radius-sm);\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-subtle);\n  cursor: pointer;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n  color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-muted);\n  cursor: not-allowed;\n}\n\n.sort-button.active {\n  background-color: var(--sgds-primary-surface-translucent);\n  color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n  display: inline-flex;\n}\n\n.data-table-head.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.data-table-cell.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n/* control cell variants — applied as classes on the host */\n.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n  padding: var(--sgds-padding-md);\n  cursor: pointer;\n}\n\n/* ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n  padding: 0;\n  border: 0;\n}\n\n.expandable-content {\n  background-color: var(--sgds-surface-raised);\n  padding: var(--sgds-padding-2-xl);\n  padding-left: var(--sgds-padding-4-xl);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n  display: none;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/react/components/DataTable/data-table.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/DataTable/data-table.css
-var css_248z = css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}`;
+var css_248z = css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.table-container{overflow-x:auto}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-none);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.skeleton-row{display:table-row}.skeleton-cell{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}.skeleton-cell.control-cell{width:var(--sgds-dimension-56)}.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex;justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}th[data-sorting]{cursor:pointer}th[data-sorting]:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.data-table-cell,.data-table-head,.footer,.no-data{align-items:center;display:flex;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-sm);font-style:normal;letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.data-table-head ::slotted(sgds-data-table-head){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.data-table-cell{font-weight:var(--sgds-font-weight-regular)}.data-table-cell ::slotted(sgds-data-table-cell){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-sm);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-20);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-20)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}.visually-hidden{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/DataTable/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below */\n:host {\n  display: contents;\n}\n\n/* ── sgds-data-table ──────────────────────────────────────────── */\n:host([layout=\"fixed\"]) .table {\n  table-layout: fixed;\n}\n\n.table {\n  display: table;\n  width: 100%;\n  table-layout: auto;\n  border-collapse: collapse;\n}\n\n.table-container {\n  overflow-x: auto;\n}\n\n.data-table {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--sgds-dimension-56);\n  border: var(--sgds-border-width-1) solid;\n  border-color: var(--sgds-border-color-muted);\n  border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n  display: table-row;\n}\n\n.skeleton-cell {\n  display: table-cell;\n  vertical-align: middle;\n  height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--sgds-dimension-128);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-text-color-subtle);\n}\n\n/* hover / expanded states — set CSS custom property on the row host,\n   cells inherit it across the shadow boundary */\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n  background-color: var(--sgds-bg-translucent-subtle);\n  transition: background-color 0.15s ease;\n}\n\n/* ── sgds-data-table-cell / sgds-data-table-head ─────────────── */\ntd,\nth {\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n  cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\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  font-family: var(--sgds-font-family-brand);\n  font-size: var(--sgds-font-size-label-sm);\n  font-style: normal;\n  line-height: var(--sgds-line-height-2-xs);\n  letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n  color: var(--sgds-color-default);\n  font-weight: var(--sgds-font-weight-semibold);\n  gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n  font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n}\n\n.sort-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sgds-dimension-20);\n  height: var(--sgds-dimension-20);\n  padding: 0;\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-form-border-radius-sm);\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-subtle);\n  cursor: pointer;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n  color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-muted);\n  cursor: not-allowed;\n}\n\n.sort-button.active {\n  background-color: var(--sgds-primary-surface-translucent);\n  color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n  display: inline-flex;\n}\n\n.data-table-head.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.data-table-cell.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n/* control cell variants — applied as classes on the host */\n.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n  padding: var(--sgds-padding-md);\n  cursor: pointer;\n}\n\n/* ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n  padding: 0;\n  border: 0;\n}\n\n.expandable-content {\n  background-color: var(--sgds-surface-raised);\n  padding: var(--sgds-padding-2-xl);\n  padding-left: var(--sgds-padding-4-xl);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"data-table.js","names":[],"sources":["../../../../src/components/DataTable/data-table.css"],"sourcesContent":["/* shared default — overridden per component below */\n:host {\n  display: contents;\n}\n\n/* ── sgds-data-table ──────────────────────────────────────────── */\n:host([layout=\"fixed\"]) .table {\n  table-layout: fixed;\n}\n\n.table {\n  display: table;\n  width: 100%;\n  table-layout: auto;\n  border-collapse: collapse;\n}\n\n.table-container {\n  overflow-x: auto;\n}\n\n.data-table {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--sgds-dimension-56);\n  border: var(--sgds-border-width-1) solid;\n  border-color: var(--sgds-border-color-muted);\n  border-radius: var(--sgds-border-radius-none);\n}\n\n.footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n}\n\n.skeleton-row {\n  display: table-row;\n}\n\n.skeleton-cell {\n  display: table-cell;\n  vertical-align: middle;\n  height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.skeleton-cell.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n.no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--sgds-dimension-128);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  color: var(--sgds-text-color-subtle);\n}\n\n/* hover / expanded states — set CSS custom property on the row host,\n   cells inherit it across the shadow boundary */\ntr:hover:not([data-header-row]),\n.active:not(.sort-icon) {\n  background-color: var(--sgds-bg-translucent-subtle);\n  transition: background-color 0.15s ease;\n}\n\n/* ── sgds-data-table-cell / sgds-data-table-head ─────────────── */\ntd,\nth {\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nth[data-sorting] {\n  cursor: pointer;\n}\n\nth[data-sorting]:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.data-table-cell,\n.data-table-head,\n.footer,\n.no-data {\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  font-family: var(--sgds-font-family-brand);\n  font-size: var(--sgds-font-size-label-sm);\n  font-style: normal;\n  line-height: var(--sgds-line-height-2-xs);\n  letter-spacing: var(--sgds-letter-spacing-normal);\n}\n\n.data-table-head {\n  color: var(--sgds-color-default);\n  font-weight: var(--sgds-font-weight-semibold);\n  gap: var(--sgds-gap-2-xs);\n}\n\n.data-table-head ::slotted(sgds-data-table-head) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.data-table-cell {\n  font-weight: var(--sgds-font-weight-regular);\n}\n\n.data-table-cell ::slotted(sgds-data-table-cell) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n}\n\n.sort-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sgds-dimension-20);\n  height: var(--sgds-dimension-20);\n  padding: 0;\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-form-border-radius-sm);\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-subtle);\n  cursor: pointer;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n}\n\n.sort-button:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n  color: var(--sgds-color-default);\n}\n\n.sort-button:focus,\n.sort-button:focus-visible {\n  background-color: var(--sgds-bg-translucent-subtle);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.sort-button:disabled {\n  background-color: var(--sgds-bg-transparent);\n  color: var(--sgds-color-muted);\n  cursor: not-allowed;\n}\n\n.sort-button.active {\n  background-color: var(--sgds-primary-surface-translucent);\n  color: var(--sgds-primary-color-default);\n}\n\n.sort-icon {\n  display: inline-flex;\n}\n\n.data-table-head.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.data-table-cell.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n/* control cell variants — applied as classes on the host */\n.control-cell {\n  width: var(--sgds-dimension-56);\n}\n\n:host(.checkbox-cell) .data-table-cell,\n:host(.checkbox-cell) .data-table-head {\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n\n:host(.expand-cell) .data-table-cell {\n  padding: var(--sgds-padding-md);\n  cursor: pointer;\n}\n\n/* ── expandable content row ───────────────────────────────────── */\n.expandable-td {\n  padding: 0;\n  border: 0;\n}\n\n.expandable-content {\n  background-color: var(--sgds-surface-raised);\n  padding: var(--sgds-padding-2-xl);\n  padding-left: var(--sgds-padding-4-xl);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.hidden {\n  display: none;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/react/components/DataTable/sgds-data-table-row.cjs.js

@@ -179,7 +179,7 @@ var SgdsDataTableRow = class extends require_sgds_element.default {
     </td>`;
 	}
 	_renderExpandCell() {
-		if (this._isHeaderRow) return lit.html`<th class="control-cell" scope="col"></th>`;
+		if (this._isHeaderRow) return lit.html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>`;
 		return lit.html`<td class="control-cell" @click=${this._toggleExpand} @keydown=${this._onExpandKeyDown} tabindex="0">
       <div class="data-table-cell expand-cell">
         <sgds-icon name=${this.open ? "chevron-up" : "chevron-down"} size="md"></sgds-icon>
@@ -187,16 +187,24 @@ var SgdsDataTableRow = class extends require_sgds_element.default {
     </td>`;
 	}
 	_renderExpandPlaceholder() {
-		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col"></th>` : lit.html`<td class="control-cell"></td>`;
+		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col"><span class="visually-hidden">Expand</span></th>` : lit.html`<td class="control-cell"></td>`;
 	}
 	_renderCheckboxCell() {
 		return this._isHeaderRow ? lit.html`<th class="control-cell" scope="col">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select all rows"}
+            ></sgds-checkbox>
           </div>
         </th>` : lit.html`<td class="control-cell">
           <div class="data-table-cell checkbox-cell">
-            <sgds-checkbox .checked=${this.checked} @sgds-change=${this._onCheckboxChange}></sgds-checkbox>
+            <sgds-checkbox
+              .checked=${this.checked}
+              @sgds-change=${this._onCheckboxChange}
+              .ariaLabel=${"Select row"}
+            ></sgds-checkbox>
           </div>
         </td>`;
 	}