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

package/package.json

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

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

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ require_decorate.default([(0, lit_decorators_js.property)({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 require_decorate.default([(0, lit_decorators_js.state)()], SgdsCheckbox.prototype, "_isTouched", void 0);
+require_decorate.default([require_watch.watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+require_decorate.default([require_watch.watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 require_decorate.default([require_watch.watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 require_decorate.default([require_watch.watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

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

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

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

@@ -93,6 +93,18 @@ var SgdsCheckbox = class extends SgdsFormValidatorMixin(FormControlElement) {
 		e.preventDefault();
 		this.invalid = true;
 	}
+	/** Override mixin to match native checkbox: send value only when checked, default to "on". */
+	_mixinSetFormValue() {
+		super._mixinSetFormValue(this.checked ? this.value ?? "on" : null);
+	}
+	/** @internal */
+	_handleCheckedChange() {
+		this._mixinSetFormValue();
+	}
+	/** @internal */
+	_handleValueChange() {
+		this._mixinSetFormValue();
+	}
 	/** @internal */
 	_handleDisabledChange() {
 		this.setInvalid(false);
@@ -219,6 +231,8 @@ __decorate([property({
 	reflect: true
 })], SgdsCheckbox.prototype, "invalidFeedback", void 0);
 __decorate([state()], SgdsCheckbox.prototype, "_isTouched", void 0);
+__decorate([watch("checked", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleCheckedChange", null);
+__decorate([watch("value", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleValueChange", null);
 __decorate([watch("disabled", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleDisabledChange", null);
 __decorate([watch("_isTouched", { waitUntilFirstUpdate: true })], SgdsCheckbox.prototype, "_handleIsTouched", null);
 //#endregion

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

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

package/react/components/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{align-items:center;box-sizing:border-box;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}: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%}: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%}: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%}: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%}: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([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)}}:host([disabled]) .mainnav-item{opacity:var(--sgds-opacity-40)}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}: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}@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}}@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}}@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}}@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}}@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}}@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}`;
 //#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}\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}\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  }\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  }\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  }\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  }\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  }\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/* 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/* Disabled — opacity */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\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}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n/* Tone brand/gradient — color overrides */\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@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\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\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\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\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\n/* Desktop padding override */\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/* Active state — color */\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/* Hover states */\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/* Tone brand/gradient — active + hover color overrides */\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/* Disabled hover */\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/* Active press states */\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/* Focus-visible */\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/* Disabled — cursor */\n\n:host([disabled]) ::slotted(*) {\n  cursor: not-allowed;\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{align-items:center;box-sizing:border-box;display:flex;font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs,20px)}:host([expand=always]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}@media screen and (min-width:512px){:host([expand=sm]) .mainnav-item{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%}: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%}: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%}: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%}: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%}: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([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)}}:host([disabled]) .mainnav-item{opacity:var(--sgds-opacity-40)}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;height:auto!important;padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([expand=always]) ::slotted(*){padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){padding:0 var(--sgds-padding-md)}}: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}@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}}@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}}@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}}@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}}@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}}@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}`;
 //#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}\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}\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  }\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  }\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  }\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  }\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  }\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/* 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/* Disabled — opacity */\n\n:host([disabled]) .mainnav-item {\n  opacity: var(--sgds-opacity-40);\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\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}\n\n/* Expand variants — padding */\n\n:host([expand=\"always\"]) ::slotted(*) {\n  padding: 0px var(--sgds-padding-md);\n}\n\n@media screen and (min-width: 512px) {\n  :host([expand=\"sm\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  :host([expand=\"md\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  :host([expand=\"lg\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1280px) {\n  :host([expand=\"xl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n@media screen and (min-width: 1440px) {\n  :host([expand=\"xxl\"]) ::slotted(*) {\n    padding: 0px var(--sgds-padding-md);\n  }\n}\n\n/* Tone brand/gradient — color overrides */\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@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\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\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\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\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\n/* Desktop padding override */\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/* Active state — color */\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/* Hover states */\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/* Tone brand/gradient — active + hover color overrides */\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/* Disabled hover */\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/* Active press states */\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/* Focus-visible */\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/* Disabled — cursor */\n\n:host([disabled]) ::slotted(*) {\n  cursor: not-allowed;\n}\n"],"mappings":""}

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

@@ -50,7 +50,7 @@ var SgdsMainnavItem = class extends require_sgds_element.default {
 		}
 	}
 	render() {
-		return lit.html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return lit.html`<div class="mainnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 require_decorate.default([(0, lit_decorators_js.property)({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","names":["SgdsElement","mainnavItemStyle","property","watch"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AA3DGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","names":["SgdsElement","mainnavItemStyle","property","watch"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<div class=\"mainnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AA3DGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

@@ -50,7 +50,7 @@ var SgdsMainnavItem = class extends SgdsElement {
 		}
 	}
 	render() {
-		return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return html`<div class="mainnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 __decorate([property({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","names":["mainnavItemStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,YAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AA3DG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-mainnav-item.js","names":["mainnavItemStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<div class=\"mainnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,YAAY;;;EAKtC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAUxD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,wDAAwD;GACtE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;IACpC;GACF;GAEA,OAAO,iBAAiB,UAAU,MAAa;IAG7C,EAFiB,OACM,QAAQ,cACzB,CAAC,CAAC,KAAK;GACf,CAAC;EACH;CACF;CAEA,SAAS;EACP,OAAO,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AA3DG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

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