@govtechsg/sgds-web-component 3.23.0-rc.2 → 3.23.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.23.0-rc.2",
+  "version": "3.23.0-rc.4",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/card-element.cjs.js

@@ -37,7 +37,7 @@ class CardElement extends sgdsElement["default"] {
         return;
     }
     _forwardAnchorAttributes(anchor) {
-        const SKIP = new Set(["class", "style", "id"]);
+        const SKIP = new Set(["class", "style", "id", "slot", "tabindex"]);
         if (!(anchor === null || anchor === void 0 ? void 0 : anchor.href) ||
             anchor.href.startsWith("javascript:") ||
             anchor.href.startsWith("data:") ||

package/react/base/card-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n  }\n}\n"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","query","property"],"mappings":"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"}
+{"version":3,"file":"card-element.cjs.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\", \"slot\", \"tabindex\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n  }\n}\n"],"names":["SgdsElement","textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle","__decorate","query","property"],"mappings":"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"}

package/react/base/card-element.js

@@ -33,7 +33,7 @@ class CardElement extends SgdsElement {
         return;
     }
     _forwardAnchorAttributes(anchor) {
-        const SKIP = new Set(["class", "style", "id"]);
+        const SKIP = new Set(["class", "style", "id", "slot", "tabindex"]);
         if (!(anchor === null || anchor === void 0 ? void 0 : anchor.href) ||
             anchor.href.startsWith("javascript:") ||
             anchor.href.startsWith("data:") ||

package/react/base/card-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n  }\n}\n"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":"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"}
+{"version":3,"file":"card-element.js","sources":["../../../src/base/card-element.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { SgdsLink } from \"../components/Link/sgds-link\";\nimport { CardOrientation } from \"../components/Card/types\";\nimport SgdsElement from \"./sgds-element\";\nimport cardStyle from \"./card.css\";\nimport textStyles from \"../styles/text-variants.css\";\nimport bgStyles from \"../styles/bg-variants.css\";\nimport borderStyles from \"../styles/border-variants.css\";\nimport headerStyles from \"../styles/header-class.css\";\nimport paragraphStyles from \"../styles/paragraph.css\";\n\nexport class CardElement extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, bgStyles, borderStyles, headerStyles, paragraphStyles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** Extends the link passed in either `footer` or `link`(deprecated) slot.\n   */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** When true, hides the default border of the card. */\n  @property({ type: Boolean, reflect: true }) hideBorder = false;\n\n  /** When true, applies a tinted background color to the card. */\n  @property({ type: Boolean, reflect: true }) tinted = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  protected _forwardAnchorAttributes(anchor: HTMLAnchorElement | null) {\n    const SKIP = new Set([\"class\", \"style\", \"id\", \"slot\", \"tabindex\"]);\n    if (\n      !anchor?.href ||\n      anchor.href.startsWith(\"javascript:\") ||\n      anchor.href.startsWith(\"data:\") ||\n      anchor.href.startsWith(\"vbscript:\")\n    ) {\n      return;\n    }\n\n    for (const { name, value } of Array.from(anchor.attributes)) {\n      if (!SKIP.has(name) && !name.startsWith(\"on\")) {\n        this.card.setAttribute(name, value);\n      }\n    }\n  }\n\n  warnLinkSlotMisused(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>\n      | Array<SgdsLink>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n  }\n}\n"],"names":["textStyles","bgStyles","borderStyles","headerStyles","paragraphStyles","cardStyle"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = lit.css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=checkbox-group.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-regular)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = css`:host{--sgds-checkbox-group-gap:var(--sgds-spacer-2)}fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.label-hint-container .form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.checkbox-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.checkbox-group-validation-input{display:none}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox-group.js.map

package/react/components/ComboBox/sgds-combo-box-option.cjs.js

@@ -31,7 +31,7 @@ class SgdsComboBoxOption extends optionElement.OptionElement {
           </sgds-checkbox>
         `
                 : lit.html `
-          <div class="normal-item-content">
+          <div class="normal-item-content" role="presentation">
             <slot></slot>
             ${this.active ? lit.html ` <sgds-icon name="check"></sgds-icon> ` : lit.nothing}
           </div>

package/react/components/ComboBox/sgds-combo-box-option.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsComboBox from \"./sgds-combo-box\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const parent = this.parentElement as SgdsComboBox;\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAOA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAcnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAA6B,CAAC;QAClD,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAtBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-combo-box-option.cjs.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsComboBox from \"./sgds-combo-box\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const parent = this.parentElement as SgdsComboBox;\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\" role=\"presentation\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon","SgdsCheckbox","__decorate","property"],"mappings":";;;;;;;;;;;;AAOA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQA,2BAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAcnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChBC,QAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACDA,QAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAA6B,CAAC;QAClD,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAtBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAEC,iBAAQ;AACrB,IAAA,eAAe,EAAEC,yBAAY;AAC9B,CAH2B,CAG1B;AAM0CC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/ComboBox/sgds-combo-box-option.js

@@ -27,7 +27,7 @@ class SgdsComboBoxOption extends OptionElement {
           </sgds-checkbox>
         `
                 : html `
-          <div class="normal-item-content">
+          <div class="normal-item-content" role="presentation">
             <slot></slot>
             ${this.active ? html ` <sgds-icon name="check"></sgds-icon> ` : nothing}
           </div>

package/react/components/ComboBox/sgds-combo-box-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsComboBox from \"./sgds-combo-box\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const parent = this.parentElement as SgdsComboBox;\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAOA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAcnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAA6B,CAAC;QAClD,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAtBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-combo-box-option.js","sources":["../../../../src/components/ComboBox/sgds-combo-box-option.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsCheckbox from \"../Checkbox/sgds-checkbox\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsComboBox from \"./sgds-combo-box\";\n\n/**\n * @summary ComboBoxOption is the option of the Combobox\n *\n * @slot default - The label of the option\n */\nexport class SgdsComboBoxOption extends OptionElement {\n  /** @internal */\n  static override dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-checkbox\": SgdsCheckbox\n  };\n\n  /**\n   * @internal If true, this item is rendered as a checkbox item.\n   * This property is controlled by its combo box parent\n   */\n  @property({ type: Boolean, reflect: true }) checkbox = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const parent = this.parentElement as SgdsComboBox;\n    if (parent?.multiSelect) {\n      this.checkbox = true;\n    }\n  }\n\n  protected _renderItemContent = () => {\n    return this.checkbox\n      ? html`\n          <sgds-checkbox .checked=${this.active} .disabled=${this.disabled}>\n            <slot></slot>\n          </sgds-checkbox>\n        `\n      : html`\n          <div class=\"normal-item-content\" role=\"presentation\">\n            <slot></slot>\n            ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n          </div>\n        `;\n  };\n}\n\nexport default SgdsComboBoxOption;\n"],"names":[],"mappings":";;;;;;;;AAOA;;;;AAIG;AACG,MAAO,kBAAmB,SAAQ,aAAa,CAAA;AAArD,IAAA,WAAA,GAAA;;AAOE;;;AAGG;QACyC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAcnD,IAAkB,CAAA,kBAAA,GAAG,MAAK;YAClC,OAAO,IAAI,CAAC,QAAQ;kBAChB,IAAI,CAAA,CAAA;AACwB,kCAAA,EAAA,IAAI,CAAC,MAAM,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;AAGjE,QAAA,CAAA;kBACD,IAAI,CAAA,CAAA;;;cAGE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;;SAEzE,CAAC;AACR,SAAC,CAAC;KACH;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAA6B,CAAC;QAClD,IAAI,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAE,WAAW,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;;AAtBD;AACgB,kBAAA,CAAA,YAAY,GAAG;AAC7B,IAAA,WAAW,EAAE,QAAQ;AACrB,IAAA,eAAe,EAAE,YAAY;AAC9B,CAH2B,CAG1B;AAM0C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
+var css_248z = lit.css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=input.cjs.js.map

package/react/components/Input/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
+var css_248z = css`:host{--input-border-radius:var(--sgds-form-border-radius-md);--input-min-width:var(--sgds-dimension-160)}.form-control-container{min-width:var(--input-min-width)}:host(.quantity-toggle) input::-webkit-inner-spin-button{appearance:none;margin:0}:host(.quantity-toggle) input{text-align:center}.form-control-prefix,.form-control-suffix{color:var(--sgds-form-color-subtle);display:flex;flex-shrink:0;font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs)}.form-control-group.quantity-toggle{padding:0}sgds-icon[role=button]{cursor:pointer}sgds-icon[role=button]:focus,sgds-icon[role=button]:focus-visible{outline:var(--sgds-form-outline-focus)}.form-control-row{align-items:center;display:flex;gap:var(--sgds-gap-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=input.js.map

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

@@ -16,7 +16,7 @@ class SgdsSelectOption extends optionElement.OptionElement {
     constructor() {
         super(...arguments);
         this._renderItemContent = () => {
-            return lit.html `<div class="normal-item-content">
+            return lit.html `<div class="normal-item-content" role="presentation">
       <slot></slot>
       ${this.active ? lit.html ` <sgds-icon name="check"></sgds-icon> ` : lit.nothing}
     </div>`;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-select-option.cjs.js","sources":["../../../../src/components/Select/sgds-select-option.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary SelectOption is the option of the Select\n *\n * @slot default - The label of the option\n */\nexport class SgdsSelectOption extends OptionElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  protected _renderItemContent = () => {\n    return html`<div class=\"normal-item-content\">\n      <slot></slot>\n      ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n    </div>`;\n  };\n}\n\nexport default SgdsSelectOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon"],"mappings":";;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQA,2BAAa,CAAA;AAAnD,IAAA,WAAA,GAAA;;QAMY,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAClC,YAAA,OAAOC,QAAI,CAAA,CAAA;;QAEP,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;WACjE,CAAC;AACV,SAAC,CAAC;KACH;;AAXC;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB;;;;;"}
+{"version":3,"file":"sgds-select-option.cjs.js","sources":["../../../../src/components/Select/sgds-select-option.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary SelectOption is the option of the Select\n *\n * @slot default - The label of the option\n */\nexport class SgdsSelectOption extends OptionElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  protected _renderItemContent = () => {\n    return html`<div class=\"normal-item-content\" role=\"presentation\">\n      <slot></slot>\n      ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n    </div>`;\n  };\n}\n\nexport default SgdsSelectOption;\n"],"names":["OptionElement","html","nothing","SgdsIcon"],"mappings":";;;;;;;;;AAIA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQA,2BAAa,CAAA;AAAnD,IAAA,WAAA,GAAA;;QAMY,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAClC,YAAA,OAAOC,QAAI,CAAA,CAAA;;QAEP,IAAI,CAAC,MAAM,GAAGA,QAAI,CAAA,CAAwC,sCAAA,CAAA,GAAGC,WAAO,CAAA;WACjE,CAAC;AACV,SAAC,CAAC;KACH;;AAXC;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB;;;;;"}

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

@@ -12,7 +12,7 @@ class SgdsSelectOption extends OptionElement {
     constructor() {
         super(...arguments);
         this._renderItemContent = () => {
-            return html `<div class="normal-item-content">
+            return html `<div class="normal-item-content" role="presentation">
       <slot></slot>
       ${this.active ? html ` <sgds-icon name="check"></sgds-icon> ` : nothing}
     </div>`;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-select-option.js","sources":["../../../../src/components/Select/sgds-select-option.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary SelectOption is the option of the Select\n *\n * @slot default - The label of the option\n */\nexport class SgdsSelectOption extends OptionElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  protected _renderItemContent = () => {\n    return html`<div class=\"normal-item-content\">\n      <slot></slot>\n      ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n    </div>`;\n  };\n}\n\nexport default SgdsSelectOption;\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQ,aAAa,CAAA;AAAnD,IAAA,WAAA,GAAA;;QAMY,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAClC,YAAA,OAAO,IAAI,CAAA,CAAA;;QAEP,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;WACjE,CAAC;AACV,SAAC,CAAC;KACH;;AAXC;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB;;;;"}
+{"version":3,"file":"sgds-select-option.js","sources":["../../../../src/components/Select/sgds-select-option.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { OptionElement } from \"../../base/option-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\n/**\n * @summary SelectOption is the option of the Select\n *\n * @slot default - The label of the option\n */\nexport class SgdsSelectOption extends OptionElement {\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  protected _renderItemContent = () => {\n    return html`<div class=\"normal-item-content\" role=\"presentation\">\n      <slot></slot>\n      ${this.active ? html` <sgds-icon name=\"check\"></sgds-icon> ` : nothing}\n    </div>`;\n  };\n}\n\nexport default SgdsSelectOption;\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACG,MAAO,gBAAiB,SAAQ,aAAa,CAAA;AAAnD,IAAA,WAAA,GAAA;;QAMY,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAClC,YAAA,OAAO,IAAI,CAAA,CAAA;;QAEP,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,CAAwC,sCAAA,CAAA,GAAG,OAAO,CAAA;WACjE,CAAC;AACV,SAAC,CAAC;KACH;;AAXC;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB;;;;"}

package/react/index.cjs.js

@@ -8,10 +8,10 @@ var index$1 = require('./accordion/index.cjs.js');
 var index$2 = require('./alert-link/index.cjs.js');
 var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
-var index$5 = require('./button/index.cjs.js');
-var index$6 = require('./card/index.cjs.js');
-var index$7 = require('./breadcrumb-item/index.cjs.js');
-var index$8 = require('./breadcrumb/index.cjs.js');
+var index$5 = require('./breadcrumb-item/index.cjs.js');
+var index$6 = require('./breadcrumb/index.cjs.js');
+var index$7 = require('./button/index.cjs.js');
+var index$8 = require('./card/index.cjs.js');
 var index$9 = require('./checkbox-group/index.cjs.js');
 var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
@@ -84,10 +84,10 @@ exports.SgdsAccordion = index$1["default"];
 exports.SgdsAlertLink = index$2["default"];
 exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
-exports.SgdsButton = index$5["default"];
-exports.SgdsCard = index$6["default"];
-exports.SgdsBreadcrumbItem = index$7["default"];
-exports.SgdsBreadcrumb = index$8["default"];
+exports.SgdsBreadcrumbItem = index$5["default"];
+exports.SgdsBreadcrumb = index$6["default"];
+exports.SgdsButton = index$7["default"];
+exports.SgdsCard = index$8["default"];
 exports.SgdsCheckboxGroup = index$9["default"];
 exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];

package/react/index.d.ts

@@ -3,10 +3,10 @@ export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
-export { default as SgdsButton } from './button';
-export { default as SgdsCard } from './card';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
+export { default as SgdsButton } from './button';
+export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';

package/react/index.js

@@ -4,10 +4,10 @@ export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
-export { default as SgdsButton } from './button/index.js';
-export { default as SgdsCard } from './card/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
+export { default as SgdsButton } from './button/index.js';
+export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';

package/react/styles/form-label.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = lit.css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-label.cjs.js.map

package/react/styles/form-label.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map

package/react/styles/form-text-control.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/styles/form-label.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/types/react.d.ts

@@ -181,6 +181,20 @@ Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
+  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
+  active?: boolean;
+}
+
+// ── Breadcrumb ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
+}
+
 // ── Button ─────────────────────────────────────────────────────────────
 
 export interface SgdsButtonProps extends SgdsBaseProps {
@@ -262,20 +276,6 @@ export interface SgdsCardProps extends SgdsBaseProps {
   orientation?: CardOrientation;
 }
 
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
-  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
-  active?: boolean;
-}
-
-// ── Breadcrumb ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
-}
-
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
@@ -1716,10 +1716,10 @@ declare module "react" {
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
-      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
+      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
@@ -1799,10 +1799,10 @@ declare global {
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
     "sgds-badge": HTMLElement;
-    "sgds-button": HTMLElement;
-    "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
+    "sgds-button": HTMLElement;
+    "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;