@govtechsg/sgds-web-component 3.30.1-rc.0 → 3.30.1-rc.10

package/react/components/Input/sgds-input.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { 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 { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\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()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\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   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\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  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\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  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-input.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","formPlaceholderStyles","inputStyle","SgdsSpinner","SgdsIcon","classMap","nothing","ifDefined","live","property","defaultValue","state","watch"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { 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 { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\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()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\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   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\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  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\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(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}

package/react/components/Input/sgds-input.js

@@ -131,6 +131,12 @@ var SgdsInput = class extends SgdsFormValidatorMixin(FormControlElement) {
 	_handleDisabledChange() {
 		this.setInvalid(false);
 	}
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
+	}
 	_renderInput() {
 		const wantFeedbackStyle = this.hasFeedback === "both" || this.hasFeedback === "style";
 		const wantFeedbackText = this.hasFeedback === "both" || this.hasFeedback === "text";
@@ -297,6 +303,7 @@ __decorate([state()], SgdsInput.prototype, "_isTouched", void 0);
 __decorate([state()], SgdsInput.prototype, "_showPassword", void 0);
 __decorate([watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleIsTouched", null);
 __decorate([watch("disabled", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleDisabledChange", null);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsInput.prototype, "_handleValueChange", null);
 //#endregion
 export { SgdsInput, SgdsInput as default };
 

package/react/components/Input/sgds-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { 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 { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\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()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\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   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\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  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\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  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-input.js","names":["formTextControlStyles","formPlaceholderStyles","inputStyle"],"sources":["../../../../src/components/Input/sgds-input.ts"],"sourcesContent":["import { 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 { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport formPlaceholderStyles from \"../../styles/form-placeholder.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport type { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport { SgdsSpinner } from \"../Spinner/sgds-spinner\";\nimport inputStyle from \"./input.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/**\n * @summary Text inputs allow your users to enter letters, numbers and symbols on a single line.\n *\n * @slot icon - The slot for leading icon of text input\n * @slot trailing-icon - The slot for trailing icon of text input. When present, it overrides valid icon and loading spinner rendered when valid prop or loading prop are true\n * @slot action - The slot for call to action of the text input. It is recommended to use sgds-icon-button within this slot\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-invalid - Emitted when input is invalid\n * @event sgds-valid - Emitted when input is valid\n *\n */\nexport class SgdsInput extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, formPlaceholderStyles, inputStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-spinner\": SgdsSpinner,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @property({ reflect: true }) type:\n    | \"email\"\n    | \"number\"\n    | \"password\"\n    | \"search\"\n    | \"tel\"\n    | \"text\"\n    | \"time\"\n    | \"url\"\n    | \"datetime-local\" = \"text\";\n\n  /** The prefix of the input */\n  @property({ type: String }) prefix: string;\n\n  /** The suffix of the input */\n  @property({ type: String }) suffix: string;\n\n  /** Sets the minimum length of the input */\n  @property({ type: Number, reflect: true }) minlength: number;\n\n  /** Sets the maximum length of the input */\n  @property({ type: Number, reflect: true }) maxlength: number;\n\n  /** The input's minimum value. Only applies number input types. */\n  @property() min: number;\n\n  /** The input's maximum value. Only applies number input types. */\n  @property() max: number;\n\n  /** The input's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"placeholder\";\n\n  /** A pattern to validate input against. */\n  @property({ type: String }) pattern: string;\n\n  /** Autofocus the input */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Controlling of autocomplete behaviour */\n  @property({ type: String, reflect: true }) autocomplete = \"on\";\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to number input types.\n   */\n  @property() step: number | \"any\";\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  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback: string;\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()\n  defaultValue = \"\";\n\n  /** Marks the component as valid. */\n  @property({ type: Boolean, reflect: true }) valid = false;\n\n  /** Marks the component as loading. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the input. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /**The input's value attribute. */\n  @property({ reflect: true }) value = \"\";\n\n  @state() protected _isTouched = false;\n\n  @state() private _showPassword = false;\n\n  /** Sets focus on the input. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n  /** Sets blur on the input. */\n  public blur() {\n    this.input.blur();\n  }\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   * Checks for validity without any native error popup message\n   */\n  public setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._mixinSetValidity(flags, message, anchor);\n  }\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  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n  private _handleClick() {\n    this.focus();\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsChange = this.emit(\"sgds-change\", { cancelable: true });\n\n    if (sgdsChange.defaultPrevented) return;\n\n    super._mixinHandleChange(e);\n  }\n  protected _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    const sgdsInput = this.emit(\"sgds-input\", { cancelable: true });\n\n    if (sgdsInput.defaultPrevented) return;\n\n    super._mixinHandleInputChange(e);\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\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(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n    const ariaDescribedBy =\n      [\n        this.hintText ? `${this._controlId}Help` : \"\",\n        this.invalid && wantFeedbackText ? `${this._controlId}-invalid` : \"\"\n      ]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n    return html`\n      <div\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        ${this.prefix ? html`<span class=\"form-control-prefix\">${this.prefix}</span>` : nothing}\n        <input\n          class=\"form-control\"\n          type=${this._inputType()}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          pattern=${ifDefined(this.pattern)}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${live(this.value)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          step=${ifDefined(this.step as number)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${() => this.setInvalid(true)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n          aria-describedby=${ifDefined(ariaDescribedBy)}\n          .autocomplete=${this.autocomplete}\n        />\n        ${this.type === \"password\" ? this._renderPasswordToggle() : nothing}\n        ${this.suffix ? html`<span class=\"form-control-suffix\">${this.suffix}</span>` : nothing}\n        <slot name=\"trailing-icon\">\n          ${this.loading ? html`<sgds-spinner size=\"sm\"></sgds-spinner>` : nothing}\n          ${this.valid ? html`<sgds-icon name=\"check-circle-fill\" class=\"valid-icon\"></sgds-icon>` : nothing}\n        </slot>\n      </div>\n    `;\n  }\n  protected _renderPasswordToggle() {\n    return html`<sgds-icon\n      tabIndex=\"0\"\n      role=\"button\"\n      aria-label=${this._showPassword ? \"Hide password\" : \"Show password\"}\n      name=${this._showPassword ? \"eye-slash-fill\" : \"eye-fill\"}\n      @click=${() => (this._showPassword = !this._showPassword)}\n    ></sgds-icon>`;\n  }\n  protected _inputType() {\n    if (this.type === \"password\" && this._showPassword) {\n      return \"text\";\n    }\n    return this.type;\n  }\n  protected _renderFeedback() {\n    const wantFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return this.invalid && wantFeedbackText\n      ? html` <div class=\"invalid-feedback-container\">\n          <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n          <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n            ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n          </div>\n        </div>`\n      : html`${this._renderHintText()}`;\n  }\n  protected _renderLabel() {\n    const labelTemplate = html`\n      <label\n        for=${this._controlId}\n        id=${this._labelId}\n        class=${classMap({\n          \"form-label\": true,\n          required: this.required\n        })}\n        >${this.label}</label\n      >\n    `;\n    return this.label && labelTemplate;\n  }\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        ${this._renderLabel()}\n        <div class=\"form-control-row\">\n          ${this._renderInput()}\n          <slot name=\"action\"></slot>\n        </div>\n        ${this._renderFeedback()}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsInput;\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav-dropdown.css
-var css_248z = require("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;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.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;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);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}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}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 = require("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;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.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;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);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}.toggler-wrapper{color:inherit;flex:1}slot[name=toggler]::slotted(*){color:inherit!important}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)}}`;
 //#endregion
 exports.default = css_248z;
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-dropdown.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  flex: 1;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"mainnav-dropdown.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n/* Toggler wrapper — inherits color from .nav-link which handles tone/expand */\n.toggler-wrapper {\n  flex: 1;\n  color: inherit;\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  color: inherit !important;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Mainnav/mainnav-dropdown.css
-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;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.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;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);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}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}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;background:none;border:none;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-family:inherit;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-align:left;text-decoration:none;width:100%}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.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;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);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}.toggler-wrapper{color:inherit;flex:1}slot[name=toggler]::slotted(*){color:inherit!important}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)}}`;
 //#endregion
 export { css_248z as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) slot[name=\"toggler\"]::slotted(*) {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) slot[name=\"toggler\"]::slotted(*) {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  flex: 1;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}
+{"version":3,"file":"mainnav-dropdown.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-dropdown.css"],"sourcesContent":[":host([expand=\"always\"]) .nav-link {\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n}\n\n@media (min-width: 512px) {\n  :host([expand=\"sm\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 768px) {\n  :host([expand=\"md\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1024px) {\n  :host(:not([expand])) .nav-link,\n  :host([expand=\"lg\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1280px) {\n  :host([expand=\"xl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n@media (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .nav-link {\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n  }\n}\n\n.nav-link {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  cursor: pointer;\n  align-items: center;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  background: none;\n  border: none;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) .nav-link,\n:host([tone^=\"gradient\"][expand=\"always\"]) .nav-link {\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .nav-link,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .nav-link {\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n.nav-link:not(.disabled).active,\n.nav-link.show {\n  color: var(--sgds-primary-color-default);\n  border-color: var(--sgds-primary-border-color-default);\n}\n\n.nav-link:not(.disabled):hover {\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link:not(.disabled):focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  color: var(--sgds-primary-color-default);\n}\n\n.nav-link.disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n.dropdown-items {\n  position: absolute;\n  top: 0;\n  left: 100%;\n  width: 100%;\n  height: 100%;\n  padding: var(--sgds-padding-md) 0px;\n  background-color: var(--sgds-surface-default);\n  overflow-y: auto;\n}\n\n.dropdown-items a {\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  color: var(--sgds-color-default);\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  max-width: var(--sgds-mainnav-max-width, 1440px);\n  margin: auto;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n.dropdown-items a:hover {\n  color: var(--sgds-primary-color-default);\n}\n\n/* .dropdown-items a:focus,\n.dropdown-items a:focus-visible {\n  outline: 0;\n} */\n\n.dropdown-items a:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n  outline-offset: -5px;\n  color: var(--sgds-primary-color-default);\n}\n\n/* Toggler wrapper — inherits color from .nav-link which handles tone/expand */\n.toggler-wrapper {\n  flex: 1;\n  color: inherit;\n}\n\nslot[name=\"toggler\"]::slotted(*) {\n  color: inherit !important;\n}\n\nsgds-dropdown {\n  display: block;\n  height: 100%;\n}\n\n@media screen and (min-width: 1024px) {\n  .nav-link,\n  .dropdown-items a {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}"],"mappings":""}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav-item.css
-var css_248z = require("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);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@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);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = require("lit").css`.mainnav-item{--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}:host([expand=always]) .mainnav-item{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]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host(:not([disabled])[active]) .mainnav-item{--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)}:host([tone=brand][expand=always]) .mainnav-item,:host([tone^=gradient][expand=always]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .mainnav-item,:host([tone^=gradient][expand=sm]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .mainnav-item,:host([tone^=gradient][expand=md]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .mainnav-item,:host([tone^=gradient][expand=lg]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .mainnav-item,:host([tone^=gradient][expand=xl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .mainnav-item,:host([tone^=gradient][expand=xxl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}.mainnav-item:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .mainnav-item{cursor:not-allowed;opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){.mainnav-item{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}::slotted(*){color:inherit!important;text-decoration:none!important}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 exports.default = css_248z;
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-item.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":[":host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  display: flex;\n  cursor: pointer;\n  height: auto !important;\n  text-decoration: none !important;\n  align-items: center;\n  color: var(--sgds-color-default) !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*) {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n:host(:not([disabled])[active]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:active) {\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:active) {\n  color: var(--sgds-primary-color-default) !important;\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"mainnav-item.cjs.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default);\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default);\n}\n\n/* Tone brand/gradient — color */\n\n:host([tone=\"brand\"][expand=\"always\"]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Focus-within — outline on wrapper, anchor inherits color */\n\n.mainnav-item:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n  .mainnav-item {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n/* ===== ::slotted (light DOM — minimal anchor overrides) ===== */\n\n::slotted(*) {\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Focus-visible — suppress anchor outline, wrapper handles it */\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Mainnav/mainnav-item.css
-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);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@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);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = css`.mainnav-item{--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}:host([expand=always]) .mainnav-item{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]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) .mainnav-item{border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) .mainnav-item{background-color:var(--sgds-bg-translucent-subtle)}}:host(:not([disabled])[active]) .mainnav-item{--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)}:host([tone=brand][expand=always]) .mainnav-item,:host([tone^=gradient][expand=always]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .mainnav-item,:host([tone^=gradient][expand=sm]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .mainnav-item,:host([tone^=gradient][expand=md]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .mainnav-item,:host([tone^=gradient][expand=lg]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .mainnav-item,:host([tone^=gradient][expand=xl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .mainnav-item,:host([tone^=gradient][expand=xxl]) .mainnav-item{--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)}}:host([tone=brand][expand=always]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=always]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=sm]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=md]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=lg]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) .mainnav-item,:host([tone^=gradient][expand=xxl]:not([disabled])[active]) .mainnav-item{border-color:var(--sgds-color-fixed-light)}}.mainnav-item:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) .mainnav-item{cursor:not-allowed;opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){.mainnav-item{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}::slotted(*){color:inherit!important;text-decoration:none!important}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":[":host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) ::slotted(*) {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  display: flex;\n  cursor: pointer;\n  height: auto !important;\n  text-decoration: none !important;\n  align-items: center;\n  color: var(--sgds-color-default) !important;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  box-sizing: border-box;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n}\n\n:host([tone=\"brand\"][expand=\"always\"]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*) {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*) {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  ::slotted(*) {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n:host(:not([disabled])[active]) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n}\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(*),\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) ::slotted(a:hover) {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light) !important;\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(*),\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) ::slotted(a:hover) {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light) !important;\n  }\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:active) {\n  color: var(--sgds-color-default) !important;\n}\n\n:host(:not([disabled])[active]) ::slotted(a:active) {\n  color: var(--sgds-primary-color-default) !important;\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default) !important;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"mainnav-item.js","names":[],"sources":["../../../../src/components/Mainnav/mainnav-item.css"],"sourcesContent":["/* ===== .mainnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.mainnav-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs, 20px);\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);\n  --sgds-link-color-default: var(--sgds-color-default);\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default);\n}\n\n/* Expand variants — border-bottom active indicator + min-height */\n\n:host([expand=\"always\"]) .mainnav-item {\n  border-bottom: var(--sgds-border-width-4) solid transparent;\n  min-height: 100%;\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) .mainnav-item {\n    border-bottom: var(--sgds-border-width-4) solid transparent;\n    min-height: 100%;\n    padding: 0px var(--sgds-padding-md);\n  }\n\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    border-color: var(--sgds-primary-border-color-default);\n  }\n}\n\n/* Mobile active — background-color */\n\n@media screen and (max-width: 511px) {\n  :host(:not([disabled])[active][expand=\"sm\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 767px) {\n  :host(:not([disabled])[active][expand=\"md\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host(:not([disabled])[active][expand=\"lg\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1279px) {\n  :host(:not([disabled])[active][expand=\"xl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n@media screen and (max-width: 1439px) {\n  :host(:not([disabled])[active][expand=\"xxl\"]) .mainnav-item {\n    background-color: var(--sgds-bg-translucent-subtle);\n  }\n}\n\n/* Active state — color */\n\n:host(:not([disabled])[active]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-primary-color-default);\n}\n\n/* Tone brand/gradient — color */\n\n:host([tone=\"brand\"][expand=\"always\"]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]) .mainnav-item {\n  --sgds-link-color-default: var(--sgds-color-fixed-light);\n  --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n  color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]) .mainnav-item {\n    --sgds-link-color-default: var(--sgds-color-fixed-light);\n    --sgds-link-color-emphasis: var(--sgds-color-fixed-light);\n    color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Tone brand/gradient — active border-color */\n\n:host([tone=\"brand\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item,\n:host([tone^=\"gradient\"][expand=\"always\"]:not([disabled])[active]) .mainnav-item {\n  border-color: var(--sgds-color-fixed-light);\n}\n\n@media screen and (min-width: 512px) {\n  :host([tone=\"brand\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"sm\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([tone=\"brand\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"md\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([tone=\"brand\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"lg\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([tone=\"brand\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([tone=\"brand\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item,\n  :host([tone^=\"gradient\"][expand=\"xxl\"]:not([disabled])[active]) .mainnav-item {\n    border-color: var(--sgds-color-fixed-light);\n  }\n}\n\n/* Focus-within — outline on wrapper, anchor inherits color */\n\n.mainnav-item:focus-within {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* Disabled */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n/* Desktop padding override */\n\n@media screen and (min-width: 1024px) {\n  .mainnav-item {\n    padding: var(--sgds-padding-sm) var(--sgds-mainnav-padding-x);\n  }\n}\n\n/* ===== ::slotted (light DOM — minimal anchor overrides) ===== */\n\n::slotted(*) {\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\n/* Focus-visible — suppress anchor outline, wrapper handles it */\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Mainnav/mainnav.css
-var css_248z = require("lit").css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand,::slotted(.navbar-brand){align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,::slotted(.navbar-brand:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;
+var css_248z = require("lit").css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;align-self:center;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-40);text-decoration:none;white-space:nowrap}.navbar-brand ::slotted(img){height:100%}.navbar-brand:focus-visible,.navbar-brand:focus-within{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-brand ::slotted(a:focus-visible){outline:none}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)!important}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{align-items:center;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.navbar-end--empty{display:none}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}slot.slot-empty{display:none}`;
 //#endregion
 exports.default = css_248z;