@govtechsg/sgds-web-component 3.19.0-rc.0 → 3.19.0-rc.3

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.cjs.js","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 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 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 */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\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  /** 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  /**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._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\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        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\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"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","nothing","formCheckStyles","checkboxStyle","__decorate","property","defaultValue","state","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.cjs.js","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 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 */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\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  /** 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  /**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._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\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        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\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"],"names":["SgdsFormValidatorMixin","FormControlElement","html","classMap","ifDefined","live","nothing","formCheckStyles","checkboxStyle","SgdsIcon","__decorate","property","defaultValue","state","watch"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 import FormControlElement from '../../base/form-control-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
@@ -173,12 +174,7 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
             ? html `
             <div class="invalid-feedback-container">
               <slot name="invalidIcon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path
-                    d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                    fill="currentColor"
-                  />
-                </svg>
+                <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
               </slot>
               <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
                 ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -190,6 +186,10 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
     }
 }
 SgdsCheckbox.styles = [...FormControlElement.styles, css_248z, css_248z$1];
+/**@internal */
+SgdsCheckbox.dependencies = {
+    "sgds-icon": SgdsIcon
+};
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCheckbox.prototype, "value", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","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 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 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 */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\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  /** 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  /**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._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\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        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\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"],"names":["formCheckStyles","checkboxStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","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 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 */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\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  /** 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  /**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._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\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        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\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"],"names":["formCheckStyles","checkboxStyle"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = 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,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,: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,: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)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = 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,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,: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,: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)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=close-button.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-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,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,: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,: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)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+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,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,: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,: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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

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

@@ -37,7 +37,7 @@ class SgdsCloseButton extends sgdsElement["default"] {
     render() {
         return lit.html `
       <button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
-        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+        <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-close-button.cjs.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n  /** The tone of the close button */\n  @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n    warnUnregisteredElements(\"sgds-icon\");\n  }\n  render() {\n    return html`\n      <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n        <sgds-icon name=\"cross\" size=${this.size}></sgds-icon>\n      </button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["SgdsElement","warnUnregisteredElements","html","closeButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtCC,mCAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAC7C,qCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;KAE3C,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,sBAAiB,CAA5C,CAA8C;AAGhBC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-close-button.cjs.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n  /** The tone of the close button */\n  @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n    warnUnregisteredElements(\"sgds-icon\");\n  }\n  render() {\n    return html`\n      <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n        <sgds-icon name=\"cross\" size=\"sm\"></sgds-icon>\n      </button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["SgdsElement","warnUnregisteredElements","html","closeButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtCC,mCAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;KAG/E,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,sBAAiB,CAA5C,CAA8C;AAGhBC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -33,7 +33,7 @@ class SgdsCloseButton extends SgdsElement {
     render() {
         return html `
       <button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
-        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+        <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-close-button.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n  /** The tone of the close button */\n  @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n    warnUnregisteredElements(\"sgds-icon\");\n  }\n  render() {\n    return html`\n      <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n        <sgds-icon name=\"cross\" size=${this.size}></sgds-icon>\n      </button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtC,wBAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;AAC7C,qCAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;KAE3C,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAiB,CAA5C,CAA8C;AAGhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-close-button.js","sources":["../../../../src/components/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { warnUnregisteredElements } from \"../../utils/ce-registry\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n  /** The tone of the close button */\n  @property({ type: String, reflect: true }) tone: \"default\" | \"fixed-dark\" | \"fixed-light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    /** Cannot register sgds-icon as dependency due to some circular dependencies, so we check and warn instead */\n    warnUnregisteredElements(\"sgds-icon\");\n  }\n  render() {\n    return html`\n      <button class=\"btn-close\" aria-label=\"Close button\" @click=${this._handleClick}>\n        <sgds-icon name=\"cross\" size=\"sm\"></sgds-icon>\n      </button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;AAKA;;;AAGG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAI6C,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;;QAEzB,IAAI,CAAA,IAAA,GAA6C,SAAS,CAAC;QAO9F,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAeH;IAtBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;AAMD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;QAGtC,wBAAwB,CAAC,WAAW,CAAC,CAAC;KACvC;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACoD,iEAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;KAG/E,CAAC;KACH;;AA5BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAiB,CAA5C,CAA8C;AAGhB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA4D,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Datepicker/datepicker-calendar.cjs2.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-20);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-20);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = lit.css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=datepicker-calendar.cjs2.js.map

package/react/components/Datepicker/datepicker-calendar2.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);line-height:var(--sgds-line-height-20);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-20);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
+var css_248z = css`.datepicker-body{color:var(--sgds-form-color-default);display:flex;justify-content:center}table{border-collapse:collapse;text-align:center}.monthpicker,.yearpicker{display:grid;grid-template-columns:repeat(3,6rem);grid-template-rows:repeat(4,2.5rem)}button.month,button.year{background-color:transparent;border:0;border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative}button.month.active:not(.selected-ends),button.year.active:not(.selected-ends),td[data-day].active:not(.selected-ends){background-color:var(--sgds-primary-surface-translucent);border-radius:0;cursor:pointer}button.month:hover:not(.active),button.year:hover:not(.active),td[data-day]:hover:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle);cursor:pointer}button.month:focus:not(.active),button.year:focus:not(.active),td[data-day]:focus:not(.disabled):not(.selected-ends):not(.active){background-color:var(--sgds-bg-translucent-subtle)}button.month:focus-visible,button.year:focus-visible,td[data-day]:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}button.month.active:not(.selected-ends):focus,button.year.active:not(.selected-ends):focus,td[data-day].active:not(.selected-ends):focus{border-radius:var(--sgds-form-border-radius-sm)}button.year.active{background-color:var(--sgds-primary-surface-translucent);cursor:pointer}td,th{border-radius:var(--sgds-form-border-radius-sm);font-size:var(--sgds-font-size-label-sm);height:var(--sgds-form-height-lg);line-height:var(--sgds-line-height-2-xs);padding:0;position:relative;width:var(--sgds-form-width-md)}th{font-weight:var(--sgds-font-weight-semibold)}td[data-day]{cursor:pointer}button.month.active.selected-ends,button.year.active.selected-ends,td[data-day].active.selected-ends{background-color:var(--sgds-form-primary-surface-default);color:var(--sgds-form-color-fixed-light)}button.month.active.selected-ends:focus,button.month.active.selected-ends:hover,button.year.active.selected-ends:focus,button.year.active.selected-ends:hover,td[data-day].active.selected-ends:focus,td[data-day].active.selected-ends:hover{background-color:var(--sgds-form-primary-surface-emphasis)}td[data-day].disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.today{align-items:center;display:flex;flex-direction:column;justify-content:center}.today:after{background-color:var(--sgds-form-primary-surface-default);bottom:6px;content:".";line-height:4px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235A42C0'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;width:4px}.today.active.selected-ends:after{background-color:var(--sgds-form-color-inverse)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=datepicker-calendar2.js.map

package/react/components/Dropdown/dropdown-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown-item.cjs.js.map

package/react/components/Dropdown/dropdown-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-item.js.map

package/react/components/Link/link.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--color-emphasis:var(--sgds-link-color-emphasis);display:inline-flex;vertical-align:middle}:host([tone=danger]),:host([variant=danger]){--color-emphasis:var(--sgds-danger-color-emphasis)}:host([tone=neutral]),:host([variant=neutral]){--color-emphasis:var(--sgds-color-default)}:host([tone=fixed-light]),:host([variant=light]){--color-emphasis:var(--sgds-color-fixed-light)}:host([variant=dark]) :host([tone=fixed-dark]){--color-emphasis:var(--sgds-color-fixed-dark)}:host([tone=danger]) .nav-link::slotted(a),:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([tone=danger]) .nav-link::slotted(a:focus),:host([tone=danger]) .nav-link::slotted(a:focus-visible),:host([tone=danger]) .nav-link::slotted(a:hover),:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-danger-color-emphasis);color:var(--color-emphasis,--sgds-danger-color-emphasis)}:host([tone=neutral]) .nav-link::slotted(a),:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([tone=neutral]) .nav-link::slotted(a:focus),:host([tone=neutral]) .nav-link::slotted(a:focus-visible),:host([tone=neutral]) .nav-link::slotted(a:hover),:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-default);color:var(--color-emphasis,--sgds-color-default)}:host([tone=fixed-light]) .nav-link::slotted(a),:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([tone=fixed-light]) .nav-link::slotted(a:focus),:host([tone=fixed-light]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-light]) .nav-link::slotted(a:hover),:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-light);color:var(--color-emphasis,--sgds-color-fixed-light)}:host([tone=fixed-dark]) .nav-link::slotted(a),:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([tone=fixed-dark]) .nav-link::slotted(a:focus),:host([tone=fixed-dark]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-dark]) .nav-link::slotted(a:hover),:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-dark);color:var(--color-emphasis,--sgds-color-fixed-dark)}:host([size=md]) .nav-link::slotted(a){--text-underline-offset:3px;font-size:var(--sgds-font-size-16)!important;line-height:var(--sgds-line-height-24)!important}:host([size=lg]) .nav-link::slotted(a){--text-underline-offset:4px;font-size:var(--sgds-font-size-20)!important;line-height:var(--sgds-line-height-32)!important}:host([size=sm]) .nav-link::slotted(a){--text-underline-offset:2.8px;font-size:var(--sgds-font-size-14)!important;line-height:var(--sgds-line-height-20)!important}:host([size=xs]) .nav-link::slotted(a){--text-underline-offset:2.2px;font-size:var(--sgds-font-size-12)!important;line-height:var(--sgds-line-height-16)!important}.nav-link::slotted(a):after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important}:host([size=xs]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-sm)!important;width:var(--sgds-icon-size-sm)!important}:host([size=sm]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-md)!important;width:var(--sgds-icon-size-md)!important}:host([size=md]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-lg)!important;width:var(--sgds-icon-size-lg)!important}:host([size=lg]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-xl)!important;width:var(--sgds-icon-size-xl)!important}::slotted(*){align-items:center;display:flex}.nav-link::slotted(a:focus-visible:not([disabled])){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}.nav-link::slotted(a){color:var(--sgds-link-color-default)!important;cursor:pointer}:host(:not([active])) .nav-link::slotted(a:not(:hover)){text-decoration:underline solid transparent!important;text-underline-offset:0;transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){color:var(--color-emphasis)!important}.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){text-decoration-color:var(--color-emphasis)!important;text-underline-offset:var(--text-underline-offset);transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a[disabled]),:host([disabled]) .nav-link::slotted(a){text-decoration:none!important}@media (prefers-reduced-motion:reduce){.nav-link::slotted(a:hover),:host(:not([active])) .nav-link::slotted(a:not(:hover)),:host([active]) .nav-link::slotted(a){transition:none}}`;
+var css_248z = lit.css`:host{--color-emphasis:var(--sgds-link-color-emphasis);display:inline-flex;vertical-align:middle}:host([tone=danger]),:host([variant=danger]){--color-emphasis:var(--sgds-danger-color-emphasis)}:host([tone=neutral]),:host([variant=neutral]){--color-emphasis:var(--sgds-color-default)}:host([tone=fixed-light]),:host([variant=light]){--color-emphasis:var(--sgds-color-fixed-light)}:host([variant=dark]) :host([tone=fixed-dark]){--color-emphasis:var(--sgds-color-fixed-dark)}:host([tone=danger]) .nav-link::slotted(a),:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([tone=danger]) .nav-link::slotted(a:focus),:host([tone=danger]) .nav-link::slotted(a:focus-visible),:host([tone=danger]) .nav-link::slotted(a:hover),:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-danger-color-emphasis);color:var(--color-emphasis,--sgds-danger-color-emphasis)}:host([tone=neutral]) .nav-link::slotted(a),:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([tone=neutral]) .nav-link::slotted(a:focus),:host([tone=neutral]) .nav-link::slotted(a:focus-visible),:host([tone=neutral]) .nav-link::slotted(a:hover),:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-default);color:var(--color-emphasis,--sgds-color-default)}:host([tone=fixed-light]) .nav-link::slotted(a),:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([tone=fixed-light]) .nav-link::slotted(a:focus),:host([tone=fixed-light]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-light]) .nav-link::slotted(a:hover),:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-light);color:var(--color-emphasis,--sgds-color-fixed-light)}:host([tone=fixed-dark]) .nav-link::slotted(a),:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([tone=fixed-dark]) .nav-link::slotted(a:focus),:host([tone=fixed-dark]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-dark]) .nav-link::slotted(a:hover),:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-dark);color:var(--color-emphasis,--sgds-color-fixed-dark)}:host([size=md]) .nav-link::slotted(a){--text-underline-offset:3px;font-size:var(--sgds-font-size-16)!important;line-height:var(--sgds-line-height-24)!important}:host([size=lg]) .nav-link::slotted(a){--text-underline-offset:4px;font-size:var(--sgds-font-size-20)!important;line-height:var(--sgds-line-height-32)!important}:host([size=sm]) .nav-link::slotted(a){--text-underline-offset:2.8px;font-size:var(--sgds-font-size-14)!important;line-height:var(--sgds-line-height-20)!important}:host([size=xs]) .nav-link::slotted(a){--text-underline-offset:2.2px;font-size:var(--sgds-font-size-12)!important;line-height:var(--sgds-line-height-16)!important}.nav-link::slotted(a):after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important}:host([size=xs]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-sm)!important;width:var(--sgds-icon-size-sm)!important}:host([size=sm]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-md)!important;width:var(--sgds-icon-size-md)!important}:host([size=md]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-lg)!important;width:var(--sgds-icon-size-lg)!important}:host([size=lg]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-xl)!important;width:var(--sgds-icon-size-xl)!important}::slotted(*){align-items:center;display:flex}.nav-link::slotted(a:focus-visible:not([disabled])){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-40)}.nav-link::slotted(a){color:var(--sgds-link-color-default)!important;cursor:pointer}:host(:not([active])) .nav-link::slotted(a:not(:hover)){text-decoration:underline solid transparent!important;text-underline-offset:0;transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){color:var(--color-emphasis)!important}.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){text-decoration-color:var(--color-emphasis)!important;text-underline-offset:var(--text-underline-offset);transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a[disabled]),:host([disabled]) .nav-link::slotted(a){text-decoration:none!important}@media (prefers-reduced-motion:reduce){.nav-link::slotted(a:hover),:host(:not([active])) .nav-link::slotted(a:not(:hover)),:host([active]) .nav-link::slotted(a){transition:none}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=link.cjs.js.map

package/react/components/Link/link.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--color-emphasis:var(--sgds-link-color-emphasis);display:inline-flex;vertical-align:middle}:host([tone=danger]),:host([variant=danger]){--color-emphasis:var(--sgds-danger-color-emphasis)}:host([tone=neutral]),:host([variant=neutral]){--color-emphasis:var(--sgds-color-default)}:host([tone=fixed-light]),:host([variant=light]){--color-emphasis:var(--sgds-color-fixed-light)}:host([variant=dark]) :host([tone=fixed-dark]){--color-emphasis:var(--sgds-color-fixed-dark)}:host([tone=danger]) .nav-link::slotted(a),:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([tone=danger]) .nav-link::slotted(a:focus),:host([tone=danger]) .nav-link::slotted(a:focus-visible),:host([tone=danger]) .nav-link::slotted(a:hover),:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-danger-color-emphasis);color:var(--color-emphasis,--sgds-danger-color-emphasis)}:host([tone=neutral]) .nav-link::slotted(a),:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([tone=neutral]) .nav-link::slotted(a:focus),:host([tone=neutral]) .nav-link::slotted(a:focus-visible),:host([tone=neutral]) .nav-link::slotted(a:hover),:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-default);color:var(--color-emphasis,--sgds-color-default)}:host([tone=fixed-light]) .nav-link::slotted(a),:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([tone=fixed-light]) .nav-link::slotted(a:focus),:host([tone=fixed-light]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-light]) .nav-link::slotted(a:hover),:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-light);color:var(--color-emphasis,--sgds-color-fixed-light)}:host([tone=fixed-dark]) .nav-link::slotted(a),:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([tone=fixed-dark]) .nav-link::slotted(a:focus),:host([tone=fixed-dark]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-dark]) .nav-link::slotted(a:hover),:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-dark);color:var(--color-emphasis,--sgds-color-fixed-dark)}:host([size=md]) .nav-link::slotted(a){--text-underline-offset:3px;font-size:var(--sgds-font-size-16)!important;line-height:var(--sgds-line-height-24)!important}:host([size=lg]) .nav-link::slotted(a){--text-underline-offset:4px;font-size:var(--sgds-font-size-20)!important;line-height:var(--sgds-line-height-32)!important}:host([size=sm]) .nav-link::slotted(a){--text-underline-offset:2.8px;font-size:var(--sgds-font-size-14)!important;line-height:var(--sgds-line-height-20)!important}:host([size=xs]) .nav-link::slotted(a){--text-underline-offset:2.2px;font-size:var(--sgds-font-size-12)!important;line-height:var(--sgds-line-height-16)!important}.nav-link::slotted(a):after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important}:host([size=xs]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-sm)!important;width:var(--sgds-icon-size-sm)!important}:host([size=sm]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-md)!important;width:var(--sgds-icon-size-md)!important}:host([size=md]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-lg)!important;width:var(--sgds-icon-size-lg)!important}:host([size=lg]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-xl)!important;width:var(--sgds-icon-size-xl)!important}::slotted(*){align-items:center;display:flex}.nav-link::slotted(a:focus-visible:not([disabled])){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-50)}.nav-link::slotted(a){color:var(--sgds-link-color-default)!important;cursor:pointer}:host(:not([active])) .nav-link::slotted(a:not(:hover)){text-decoration:underline solid transparent!important;text-underline-offset:0;transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){color:var(--color-emphasis)!important}.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){text-decoration-color:var(--color-emphasis)!important;text-underline-offset:var(--text-underline-offset);transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a[disabled]),:host([disabled]) .nav-link::slotted(a){text-decoration:none!important}@media (prefers-reduced-motion:reduce){.nav-link::slotted(a:hover),:host(:not([active])) .nav-link::slotted(a:not(:hover)),:host([active]) .nav-link::slotted(a){transition:none}}`;
+var css_248z = css`:host{--color-emphasis:var(--sgds-link-color-emphasis);display:inline-flex;vertical-align:middle}:host([tone=danger]),:host([variant=danger]){--color-emphasis:var(--sgds-danger-color-emphasis)}:host([tone=neutral]),:host([variant=neutral]){--color-emphasis:var(--sgds-color-default)}:host([tone=fixed-light]),:host([variant=light]){--color-emphasis:var(--sgds-color-fixed-light)}:host([variant=dark]) :host([tone=fixed-dark]){--color-emphasis:var(--sgds-color-fixed-dark)}:host([tone=danger]) .nav-link::slotted(a),:host([variant=danger]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-danger-color-default);color:var(--sgds-link-color-default,--sgds-danger-color-default)}:host([tone=danger]) .nav-link::slotted(a:focus),:host([tone=danger]) .nav-link::slotted(a:focus-visible),:host([tone=danger]) .nav-link::slotted(a:hover),:host([variant=danger]) .nav-link::slotted(a:focus),:host([variant=danger]) .nav-link::slotted(a:focus-visible),:host([variant=danger]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-danger-color-emphasis);color:var(--color-emphasis,--sgds-danger-color-emphasis)}:host([tone=neutral]) .nav-link::slotted(a),:host([variant=neutral]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,--sgds-color-default)}:host([tone=neutral]) .nav-link::slotted(a:focus),:host([tone=neutral]) .nav-link::slotted(a:focus-visible),:host([tone=neutral]) .nav-link::slotted(a:hover),:host([variant=neutral]) .nav-link::slotted(a:focus),:host([variant=neutral]) .nav-link::slotted(a:focus-visible),:host([variant=neutral]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-default);color:var(--color-emphasis,--sgds-color-default)}:host([tone=fixed-light]) .nav-link::slotted(a),:host([variant=light]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-light);color:var(--sgds-link-color-default,--sgds-color-fixed-light)}:host([tone=fixed-light]) .nav-link::slotted(a:focus),:host([tone=fixed-light]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-light]) .nav-link::slotted(a:hover),:host([variant=light]) .nav-link::slotted(a:focus),:host([variant=light]) .nav-link::slotted(a:focus-visible),:host([variant=light]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-light);color:var(--color-emphasis,--sgds-color-fixed-light)}:host([tone=fixed-dark]) .nav-link::slotted(a),:host([variant=dark]) .nav-link::slotted(a){--sgds-link-color-default:var(--sgds-color-fixed-dark);color:var(--sgds-link-color-default,--sgds-color-fixed-dark)}:host([tone=fixed-dark]) .nav-link::slotted(a:focus),:host([tone=fixed-dark]) .nav-link::slotted(a:focus-visible),:host([tone=fixed-dark]) .nav-link::slotted(a:hover),:host([variant=dark]) .nav-link::slotted(a:focus),:host([variant=dark]) .nav-link::slotted(a:focus-visible),:host([variant=dark]) .nav-link::slotted(a:hover){--color-emphasis:var(--sgds-color-fixed-dark);color:var(--color-emphasis,--sgds-color-fixed-dark)}:host([size=md]) .nav-link::slotted(a){--text-underline-offset:3px;font-size:var(--sgds-font-size-16)!important;line-height:var(--sgds-line-height-24)!important}:host([size=lg]) .nav-link::slotted(a){--text-underline-offset:4px;font-size:var(--sgds-font-size-20)!important;line-height:var(--sgds-line-height-32)!important}:host([size=sm]) .nav-link::slotted(a){--text-underline-offset:2.8px;font-size:var(--sgds-font-size-14)!important;line-height:var(--sgds-line-height-20)!important}:host([size=xs]) .nav-link::slotted(a){--text-underline-offset:2.2px;font-size:var(--sgds-font-size-12)!important;line-height:var(--sgds-line-height-16)!important}.nav-link::slotted(a):after{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035Zm2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5Z' fill='%230E0E0E'/%3E%3C/svg%3E")!important}:host([size=xs]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-sm)!important;width:var(--sgds-icon-size-sm)!important}:host([size=sm]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-md)!important;width:var(--sgds-icon-size-md)!important}:host([size=md]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-lg)!important;width:var(--sgds-icon-size-lg)!important}:host([size=lg]) .nav-link::slotted(a):after{height:var(--sgds-icon-size-xl)!important;width:var(--sgds-icon-size-xl)!important}::slotted(*){align-items:center;display:flex}.nav-link::slotted(a:focus-visible:not([disabled])){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link::slotted(a[disabled]){cursor:not-allowed;opacity:var(--sgds-opacity-40)}.nav-link::slotted(a){color:var(--sgds-link-color-default)!important;cursor:pointer}:host(:not([active])) .nav-link::slotted(a:not(:hover)){text-decoration:underline solid transparent!important;text-underline-offset:0;transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a:focus),.nav-link::slotted(a:focus-visible),.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){color:var(--color-emphasis)!important}.nav-link::slotted(a:hover),:host([active]) .nav-link::slotted(a){text-decoration-color:var(--color-emphasis)!important;text-underline-offset:var(--text-underline-offset);transition:text-underline-offset var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter),text-decoration-color var(--sgds-motion-duration-standard) var(--sgds-motion-easing-enter)}.nav-link::slotted(a[disabled]),:host([disabled]) .nav-link::slotted(a){text-decoration:none!important}@media (prefers-reduced-motion:reduce){.nav-link::slotted(a:hover),:host(:not([active])) .nav-link::slotted(a:not(:hover)),:host([active]) .nav-link::slotted(a){transition:none}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=link.js.map

package/react/components/Mainnav/mainnav-dropdown.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-dropdown.cjs.js.map

package/react/components/Mainnav/mainnav-dropdown.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:var(--sgds-gap-xs);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-xs);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-dropdown.js.map

package/react/components/Mainnav/mainnav-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-item.cjs.js.map

package/react/components/Mainnav/mainnav-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important;text-decoration:none}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-item.js.map

package/react/components/Pagination/pagination.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.page-link:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-14);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-14)}`;
+var css_248z = lit.css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.page-link:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-40)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-14);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-14)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=pagination.cjs.js.map

package/react/components/Pagination/pagination.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.page-link:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-50)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-14);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-14)}`;
+var css_248z = css`ul{margin-bottom:1rem;margin-top:0;padding-left:2rem}svg{vertical-align:middle}.pagination{display:inline-flex;gap:var(--sgds-gap-2-xs);list-style:none;padding-left:0}.page-link{align-items:center;background-color:var(--sgds-bg-transparent);border-radius:var(--sgds-border-radius-md);display:flex;height:var(--sgds-dimension-48);justify-content:center;width:var(--sgds-dimension-48)}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:focus,.page-link:not(.ellipsis):hover{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.page-link:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.page-item>.page-link:not(.ellipsis){cursor:pointer}.page-item.active .page-link{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.ellipsis-disabled,.page-item.disabled .page-link{opacity:var(--sgds-opacity-40)}.ellipsis-disabled{cursor:not-allowed;pointer-events:none}.pagination-sm .page-link{font-size:var(--sgds-font-size-14);height:var(--sgds-dimension-40);width:var(--sgds-dimension-40)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pagination-description{align-items:center;display:flex}.pagination-sm .pagination-description{font-size:var(--sgds-font-size-14)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=pagination.js.map

package/react/components/Radio/radio-group.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`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)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;
+var css_248z = lit.css`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)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=radio-group.cjs.js.map