npm - @govtechsg/sgds-web-component - Versions diffs - 3.6.0-rc.2 → 3.6.0 - Mend

@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (233) hide show

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

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

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

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

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

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

package/react/components/Link/link.js CHANGED Viewed

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

package/react/components/Link/sgds-link.cjs.js CHANGED Viewed

@@ -19,10 +19,19 @@ class SgdsLink extends sgdsElement["default"] {
         super(...arguments);
         /** Determines the size of the link */
         this.size = "md";
-        /** when true, sets the active stylings of the link */
+        /** Sets the colour of the link @deprecated since 3.6.0 */
         this.variant = "primary";
+        /** Sets the colour of the link, replaces variant prop  */
+        this.tone = "primary";
+        /** When true, sets the active stylings of the link */
+        this.active = false;
+        /** Disables the link */
+        this.disabled = false;
     }
     _processAnchor(anchor) {
+        if (this.disabled) {
+            anchor.setAttribute("disabled", "true");
+        }
         if (anchor.hasAttribute("disabled")) {
             anchor.setAttribute("href", "javascript:void(0)");
             anchor.setAttribute("tabindex", "-1");
@@ -32,8 +41,16 @@ class SgdsLink extends sgdsElement["default"] {
         }
     }
     _processIcon(anchor) {
+        const linkToIconSizeMapping = {
+            xs: "sm",
+            sm: "md",
+            md: "lg",
+            lg: "xl"
+        };
         const icons = anchor.querySelectorAll("sgds-icon");
         icons.forEach(icon => {
+            // icon.size = linkToIconSizeMapping[this.size]
+            icon.setAttribute("size", linkToIconSizeMapping[this.size]);
             icon.classList.remove("icon-left", "icon-right");
             if (!icon.previousElementSibling && !icon.previousSibling) {
                 icon.classList.add("icon-left");
@@ -62,7 +79,7 @@ class SgdsLink extends sgdsElement["default"] {
     }
     render() {
         /** When removing href, link is no longer focusable */
-        return lit.html `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
+        return lit.html `<slot class="nav-link " @slotchange=${this._handleSlotChange}></slot> `;
     }
 }
 SgdsLink.styles = [...sgdsElement["default"].styles, link["default"]];
@@ -72,6 +89,15 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsLink.prototype, "variant", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsLink.prototype, "tone", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsLink.prototype, "active", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsLink.prototype, "disabled", void 0);
 exports.SgdsLink = SgdsLink;
 exports["default"] = SgdsLink;

package/react/components/Link/sgds-link.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/*\n @summary Link allows users to click and navigate their way from page to page\n \n @slot default - Pass in a single anchor tag here\n /\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /* Determines the size of the link /\n @property({ type: String, reflect: true })\n size: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" = \"md\";\n /* ~~when~~ ~~true~~, ~~sets~~ the ~~active~~ ~~stylings~~ of the link /\n @property({ type: String, reflect: true })\n ~~variant~~: \"primary\" \| \"danger\" \| \"neutral\" \| \"light\" \| \"dark\" = \"primary\";\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const icons = anchor.querySelectorAll(\"sgds-icon\");\n\n icons.forEach(icon => {\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /* When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot~~>`;\~~n }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":";;;;;;;;;;;~~AAIA~~;;;;AAIG;AACG,MAAO,QAAS,SAAQA,sBAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;~~KAoD1E~~;~~AAlDS~~,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;~~QAC5C~~,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,~~CAAC~~,WAAW,CAAC,CAAC;~~AAEnD~~,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;~~YACnB~~,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAOC,QAAI,CAAA,CAAA,~~mCAAA~~,~~EAAsC~~,IAAI,CAAC,iBAAiB,~~UAAU~~,CAAC;~~KACnF~~;;~~AAzDM~~,QAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,eAAU,CAArC,CAAuC;AAGpDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvCD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
1	+ {"version":3,"file":"sgds-link.cjs.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/*\n @summary Link allows users to click and navigate their way from page to page\n \n @slot default - Pass in a single anchor tag here\n /\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /* Determines the size of the link /\n @property({ type: String, reflect: true })\n size: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" = \"md\";\n /* Sets the colour of the link @deprecated since 3.6.0 /\n @property({ type: String, reflect: true })\n variant: \"primary\" \| \"danger\" \| \"neutral\" \| \"light\" \| \"dark\" = \"primary\";\n /* Sets the colour of the link, replaces variant prop /\n @property({ type: String, reflect: true })\n tone: \"primary\" \| \"danger\" \| \"neutral\" \| \"fixed-light\" \| \"fixed-dark\" = \"primary\";\n /* When true, sets the active stylings of the link /\n @property({ type: Boolean, reflect: true })\n active = false;\n /* Disables the link /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (this.disabled) {\n anchor.setAttribute(\"disabled\", \"true\");\n }\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const linkToIconSizeMapping = {\n xs: \"sm\",\n sm: \"md\",\n md: \"lg\",\n lg: \"xl\"\n };\n const icons = anchor.querySelectorAll<SgdsIcon>(\"sgds-icon\");\n\n icons.forEach(icon => {\n // icon.size = linkToIconSizeMapping[this.size]\n icon.setAttribute(\"size\", linkToIconSizeMapping[this.size]);\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /* When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link \" @slotchange=${this._handleSlotChange}></slot> `;\n }\n}\n\nexport default SgdsLink;\n"],"names":["SgdsElement","html","linkStyles","__decorate","property"],"mappings":"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"}

package/react/components/Link/sgds-link.js CHANGED Viewed

@@ -15,10 +15,19 @@ class SgdsLink extends SgdsElement {
         super(...arguments);
         /** Determines the size of the link */
         this.size = "md";
-        /** when true, sets the active stylings of the link */
+        /** Sets the colour of the link @deprecated since 3.6.0 */
         this.variant = "primary";
+        /** Sets the colour of the link, replaces variant prop  */
+        this.tone = "primary";
+        /** When true, sets the active stylings of the link */
+        this.active = false;
+        /** Disables the link */
+        this.disabled = false;
     }
     _processAnchor(anchor) {
+        if (this.disabled) {
+            anchor.setAttribute("disabled", "true");
+        }
         if (anchor.hasAttribute("disabled")) {
             anchor.setAttribute("href", "javascript:void(0)");
             anchor.setAttribute("tabindex", "-1");
@@ -28,8 +37,16 @@ class SgdsLink extends SgdsElement {
         }
     }
     _processIcon(anchor) {
+        const linkToIconSizeMapping = {
+            xs: "sm",
+            sm: "md",
+            md: "lg",
+            lg: "xl"
+        };
         const icons = anchor.querySelectorAll("sgds-icon");
         icons.forEach(icon => {
+            // icon.size = linkToIconSizeMapping[this.size]
+            icon.setAttribute("size", linkToIconSizeMapping[this.size]);
             icon.classList.remove("icon-left", "icon-right");
             if (!icon.previousElementSibling && !icon.previousSibling) {
                 icon.classList.add("icon-left");
@@ -58,7 +75,7 @@ class SgdsLink extends SgdsElement {
     }
     render() {
         /** When removing href, link is no longer focusable */
-        return html `<slot class="nav-link" @slotchange=${this._handleSlotChange}></slot>`;
+        return html `<slot class="nav-link " @slotchange=${this._handleSlotChange}></slot> `;
     }
 }
 SgdsLink.styles = [...SgdsElement.styles, css_248z];
@@ -68,6 +85,15 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsLink.prototype, "tone", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsLink.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsLink.prototype, "disabled", void 0);
 export { SgdsLink, SgdsLink as default };
 //# sourceMappingURL=sgds-link.js.map

package/react/components/Link/sgds-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\n/*\n @summary Link allows users to click and navigate their way from page to page\n \n @slot default - Pass in a single anchor tag here\n /\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /* Determines the size of the link /\n @property({ type: String, reflect: true })\n size: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" = \"md\";\n /* ~~when~~ ~~true~~, ~~sets~~ the ~~active~~ ~~stylings~~ of the link /\n @property({ type: String, reflect: true })\n ~~variant~~: \"primary\" \| \"danger\" \| \"neutral\" \| \"light\" \| \"dark\" = \"primary\";\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const icons = anchor.querySelectorAll(\"sgds-icon\");\n\n icons.forEach(icon => {\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /* When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link\" @slotchange=${this._handleSlotChange}></slot~~>`;\~~n }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":";;;;;;;~~AAIA~~;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAIE,IAAI,CAAA,IAAA,GAA8B,IAAI,CAAC;;QAGvC,IAAO,CAAA,OAAA,GAAwD,SAAS,CAAC;~~KAoD1E~~;~~AAlDS~~,IAAA,cAAc,CAAC,MAAyB,EAAA;AAC9C,QAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,YAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACvC;aAAM;AACL,YAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACtC;KACF;AAEO,IAAA,YAAY,CAAC,MAAyB,EAAA;~~QAC5C~~,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,~~CAAC~~,WAAW,CAAC,CAAC;~~AAEnD~~,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;~~YACnB~~,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;YAEjD,IAAI,CAAC,IAAI,CAAC,sBAAsB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;aACjC;YAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;aAClC;AACH,SAAC,CAAC,CAAC;KACJ;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,MAAM,GAAI,CAAC,CAAC,MAA0B;AACzC,aAAA,gBAAgB,EAAE;AAClB,aAAA,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAsB,CAAC;QAErE,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,MAAM,EAAE;AACV,YAAA,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;KACF;IAED,MAAM,GAAA;;AAEJ,QAAA,OAAO,IAAI,CAAA,CAAA,~~mCAAA~~,~~EAAsC~~,IAAI,CAAC,iBAAiB,~~UAAU~~,CAAC;~~KACnF~~;;~~AAzDM~~,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAGpD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACH,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvC,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC+B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"sgds-link.js","sources":["../../../../src/components/Link/sgds-link.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport linkStyles from \"./link.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n/*\n @summary Link allows users to click and navigate their way from page to page\n \n @slot default - Pass in a single anchor tag here\n /\nexport class SgdsLink extends SgdsElement {\n static styles = [...SgdsElement.styles, linkStyles];\n /* Determines the size of the link /\n @property({ type: String, reflect: true })\n size: \"xs\" \| \"sm\" \| \"md\" \| \"lg\" = \"md\";\n /* Sets the colour of the link @deprecated since 3.6.0 /\n @property({ type: String, reflect: true })\n variant: \"primary\" \| \"danger\" \| \"neutral\" \| \"light\" \| \"dark\" = \"primary\";\n /* Sets the colour of the link, replaces variant prop /\n @property({ type: String, reflect: true })\n tone: \"primary\" \| \"danger\" \| \"neutral\" \| \"fixed-light\" \| \"fixed-dark\" = \"primary\";\n /* When true, sets the active stylings of the link /\n @property({ type: Boolean, reflect: true })\n active = false;\n /* Disables the link /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n private _processAnchor(anchor: HTMLAnchorElement) {\n if (this.disabled) {\n anchor.setAttribute(\"disabled\", \"true\");\n }\n if (anchor.hasAttribute(\"disabled\")) {\n anchor.setAttribute(\"href\", \"javascript:void(0)\");\n anchor.setAttribute(\"tabindex\", \"-1\");\n } else {\n anchor.setAttribute(\"tabindex\", \"0\");\n }\n }\n\n private _processIcon(anchor: HTMLAnchorElement) {\n const linkToIconSizeMapping = {\n xs: \"sm\",\n sm: \"md\",\n md: \"lg\",\n lg: \"xl\"\n };\n const icons = anchor.querySelectorAll<SgdsIcon>(\"sgds-icon\");\n\n icons.forEach(icon => {\n // icon.size = linkToIconSizeMapping[this.size]\n icon.setAttribute(\"size\", linkToIconSizeMapping[this.size]);\n icon.classList.remove(\"icon-left\", \"icon-right\");\n\n if (!icon.previousElementSibling && !icon.previousSibling) {\n icon.classList.add(\"icon-left\");\n }\n\n if (!icon.nextElementSibling && !icon.nextSibling) {\n icon.classList.add(\"icon-right\");\n }\n });\n }\n\n private _handleSlotChange(e: Event) {\n const anchor = (e.target as HTMLSlotElement)\n .assignedElements()\n .find(el => el.tagName.toLowerCase() === \"a\") as HTMLAnchorElement;\n\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n firstUpdated(changedProperties: PropertyValueMap<this>) {\n super.firstUpdated(changedProperties);\n\n const anchor = this.querySelector(\"a\");\n if (anchor) {\n this._processAnchor(anchor);\n this._processIcon(anchor);\n }\n }\n\n render() {\n /* When removing href, link is no longer focusable */\n return html`<slot class=\"nav-link \" @slotchange=${this._handleSlotChange}></slot> `;\n }\n}\n\nexport default SgdsLink;\n"],"names":["linkStyles"],"mappings":"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"}

package/react/components/Modal/sgds-modal.cjs.js CHANGED Viewed

@@ -16,7 +16,7 @@ var modal$1 = require('../../utils/modal.cjs.js');
 var slot = require('../../utils/slot.cjs.js');
 var scroll = require('../../utils/scroll.cjs.js');
 var breakpoints = require('../../utils/breakpoints.cjs.js');
-var sgdsCloseButton = require('../../internals/CloseButton/sgds-close-button.cjs.js');
+var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
 var modal = require('./modal.cjs.js');
 var headerClass = require('../../styles/header-class.cjs.js');
 var svg = require('../../styles/svg.cjs.js');
@@ -239,7 +239,7 @@ class SgdsModal extends sgdsElement["default"] {
                    <sgds-close-button
                 class="modal-header__close"
                 @click="${() => this.requestClose("close-button")}"
-                ariaLabel="close modal"
+                aria-label="close modal"
               ></sgds-close-button>
             <div class="modal-header">
               <div class="modal-header__title-description">