@skf-design-system/ui-components 0.0.1-beta.1

package/dist/src/components/divider/divider.component.js

@@ -0,0 +1,37 @@
+import { SkfElement as h } from "../../internal/components/skf-element.js";
+import m from "../../styles/component.styles.js";
+import { html as c } from "lit";
+import { property as o } from "lit/decorators.js";
+import { when as d } from "lit/directives/when.js";
+import f from "./divider.styles.js";
+var v = Object.defineProperty, i = (s, l, n, u) => {
+  for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
+    (p = s[t]) && (r = p(l, n, r) || r);
+  return r && v(l, n, r), r;
+};
+const a = class a extends h {
+  constructor() {
+    super(...arguments), this.color = "primary", this.decorative = !1, this.vertical = !1, this.renderDecorative = () => c`
+		<span aria-orientation=${this.vertical ? "vertical" : "horizontal"} id="divider"></span>
+	`, this.renderDefault = () => c`
+		<hr aria-orientation=${this.vertical ? "vertical" : "horizontal"} id="divider" />
+	`;
+  }
+  render() {
+    return d(this.decorative, this.renderDecorative, this.renderDefault);
+  }
+};
+a.styles = [m, f];
+let e = a;
+i([
+  o({ reflect: !0 })
+], e.prototype, "color");
+i([
+  o({ type: Boolean })
+], e.prototype, "decorative");
+i([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "vertical");
+export {
+  e as SkfDivider
+};

package/dist/src/components/divider/divider.js

@@ -0,0 +1,6 @@
+import { SkfDivider as e } from "./divider.component.js";
+e.define("skf-divider");
+export {
+  e as SkfDivider,
+  e as default
+};

package/dist/src/components/divider/divider.styles.js

@@ -0,0 +1,47 @@
+import { css as r } from "lit";
+const i = r`
+	:host {
+		display: contents;
+	}
+
+	#divider {
+		--_skf-divider-border-color: var(--skf-border-color-primary);
+		--_skf-divider-border: var(--skf-border-width-sm) solid var(--_skf-divider-border-color);
+
+		display: block;
+
+		:host(:not([vertical])) & {
+			border-top: var(--_skf-divider-border);
+			margin-block: var(--skf-divider-spacing, var(--skf-spacing-100));
+			margin-inline: var(--skf-divider-inset, 0);
+		}
+
+		:host([vertical]) & {
+			align-self: stretch;
+			border-left: var(--_skf-divider-border);
+			display: inline-flex;
+			margin-block: var(--skf-divider-inset, 0);
+			margin-inline: var(--skf-divider-spacing, var(--skf-spacing-100));
+		}
+
+		/** Colors */
+		:host([color='secondary']) & {
+			--_skf-divider-border-color: var(--skf-border-color-secondary);
+		}
+
+		:host([color='tertiary']) & {
+			--_skf-divider-border-color: var(--skf-border-color-tertiary);
+		}
+
+		:host([color='emphasised']) & {
+			--_skf-divider-border-color: var(--skf-border-color-emphasised);
+		}
+
+		:host([color='inverse']) & {
+			--_skf-divider-border-color: var(--skf-border-color-inverse);
+		}
+	}
+`;
+export {
+  i as default
+};

package/dist/src/components/icon/icon.component.js

@@ -0,0 +1,56 @@
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/bg-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/text-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/icon-sizes.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/icon-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/border-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/border-widths.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/border-radius.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/interactives.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/severity-bg-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/severity-fg-colors.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/spacings.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/font-sizes.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/line-heights.js";
+import "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/tokens/ts/semantic/logos.js";
+import { ICONS as d } from "../../../node_modules/.pnpm/@skf-aurora_ui-assets@0.1.2/node_modules/@skf-aurora/ui-assets/dist/icons/index.js";
+import h from "../../styles/component.styles.js";
+import { html as l } from "lit";
+import { property as o } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { when as v } from "lit/directives/when.js";
+import y from "./icon.styles.js";
+var u = Object.defineProperty, e = (p, s, n, I) => {
+  for (var r = void 0, i = p.length - 1, a; i >= 0; i--)
+    (a = p[i]) && (r = a(s, n, r) || r);
+  return r && u(s, n, r), r;
+};
+const m = class m extends f {
+  constructor() {
+    super(...arguments), this._rootId = "icon", this.color = "primary", this.size = "md", this.renderDecorativeIcon = () => l`
+		<div aria-hidden="true" id=${this._rootId}>${d[this.name]}</div>
+	`, this.renderInformativeIcon = () => l`
+		<div aria-label=${c(this.label)} id=${this._rootId} role="img">${d[this.name]}</div>
+	`;
+  }
+  render() {
+    return v(!!this.label, this.renderInformativeIcon, this.renderDecorativeIcon);
+  }
+};
+m.styles = [h, y];
+let t = m;
+e([
+  o({ reflect: !0 })
+], t.prototype, "color");
+e([
+  o()
+], t.prototype, "label");
+e([
+  o({ type: String })
+], t.prototype, "name");
+e([
+  o({ reflect: !0 })
+], t.prototype, "size");
+export {
+  t as SkfIcon
+};

package/dist/src/components/icon/icon.js

@@ -0,0 +1,6 @@
+import { SkfIcon as f } from "./icon.component.js";
+f.define("skf-icon");
+export {
+  f as SkfIcon,
+  f as default
+};

package/dist/src/components/icon/icon.styles.js

@@ -0,0 +1,76 @@
+import { css as o } from "lit";
+const r = o`
+	:host {
+		display: inline-flex;
+	}
+
+	#icon {
+		--_skf-icon-size: var(--skf-icon-size-md);
+
+		block-size: var(--_skf-icon-size);
+		color: var(--_skf-icon-color, var(--skf-icon-color-primary));
+		display: inline-flex;
+		flex-shrink: 0; /* Prevents shrink when flex-child */
+		inline-size: var(--_skf-icon-size);
+		pointer-events: none;
+		user-select: none;
+
+		:host-context(.skf-icon-host) & {
+			color: inherit;
+		}
+
+		/**
+		* Colors
+		*/
+		:host([color='secondary']) & {
+			--_skf-icon-color: var(--skf-icon-color-secondary);
+		}
+
+		:host([color='inverse']) & {
+			--_skf-icon-color: var(--skf-icon-color-inverse);
+		}
+
+		:host([color='emphasised']) & {
+			--_skf-icon-color: var(--skf-icon-color-emphasised);
+		}
+
+		/* Severity */
+		:host([color='alert']) & {
+			--_skf-icon-color: var(--skf-severity-fg-color-alert);
+		}
+
+		:host([color='error']) & {
+			--_skf-icon-color: var(--skf-severity-fg-color-error);
+		}
+
+		:host([color='info']) & {
+			--_skf-icon-color: var(--skf-severity-fg-color-info);
+		}
+
+		:host([color='success']) & {
+			--_skf-icon-color: var(--skf-severity-fg-color-success);
+		}
+
+		:host([color='warning']) & {
+			--_skf-icon-color: var(--skf-severity-fg-color-warning);
+		}
+
+		/**
+		* Sizes
+		*/
+		:host([size='xs']) & {
+			--_skf-icon-size: var(--skf-icon-size-xs);
+		}
+
+		:host([size='sm']) & {
+			--_skf-icon-size: var(--skf-icon-size-sm);
+		}
+
+		:host([size='lg']) & {
+			--_skf-icon-size: var(--skf-icon-size-lg);
+		}
+	}
+`;
+export {
+  r as default
+};

package/dist/src/components/input/input.component.js

@@ -0,0 +1,280 @@
+import "../icon/icon.js";
+import { FormBase as c } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
+import { Asterisk as v } from "../../internal/templates/asterisk.js";
+import y from "../../styles/component.styles.js";
+import { html as h, nothing as d } from "lit";
+import { property as s, state as b, query as f } from "lit/decorators.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import { live as $ } from "lit/directives/live.js";
+import { InputNumberController as _, InputPasswordController as g } from "./input.controllers.js";
+import w from "./input.styles.js";
+var E = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (u, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? A(e, r) : e, l = u.length - 1, p; l >= 0; l--)
+    (p = u[l]) && (o = (n ? p(e, r, o) : p(o)) || o);
+  return n && o && E(e, r, o), o;
+};
+const m = class m extends c {
+  constructor() {
+    super(), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._handleInput = () => {
+      this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
+    }, this._resetValue = (e) => {
+      var r;
+      e.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+    }, this._handlePressStart = (e) => {
+      this._buttonDown = !0, this.type === "number" && this._numberController.handleActionBtnLongPressStart(e);
+    }, this._handlePressEnd = () => {
+      this._buttonDown = !1, this.type === "number" && this._numberController.handleActionBtnLongPressEnd();
+    }, this._renderNumberButton = (e) => h`
+		<button
+			?disabled=${this.disabled}
+			@click=${(r) => {
+      this._numberController.handleActionBtnClick(r, e);
+    }}
+			@mousedown=${this._handlePressStart}
+			@mouseup=${this._handlePressEnd}
+			@mouseleave=${this._handlePressEnd}
+			aria-label="${e === "inc" ? "Increment" : "Decrement"}"
+			class="number"
+			type="button"
+		>
+			<skf-icon name="${e === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
+		</button>
+	`, this._renderPasswordButton = () => h`
+		<button
+			@click=${this._passwordController.toggleVisibility}
+			aria-label=${a(this._passwordController._buttonAriaLabel)}
+			class="password"
+			type="button"
+			@mousedown="${this._handlePressStart}"
+			@mouseup="${this._handlePressEnd}"
+			@mouseleave="${this._handlePressEnd}"
+		>
+			<skf-icon name=${this._passwordController._icon} size="sm"></skf-icon>
+		</button>
+	`, this._renderSearchButton = () => h`
+		<button
+			@click=${this._resetValue}
+			@mousedown=${this._handlePressStart}
+			@mouseup=${this._handlePressEnd}
+			@mouseleave=${this._handlePressEnd}
+			aria-label=${a(this.buttonAriaLabelClear)}
+			class="search"
+			type="button"
+		>
+			<skf-icon name="close" size="sm"></skf-icon>
+		</button>
+	`, this._onBlur = () => {
+      this._buttonDown && this.$input.focus();
+    }, this._numberController = new _(this), this._passwordController = new g(this);
+  }
+  set customInvalid(e) {
+    this.customError = String(e);
+  }
+  get customInvalid() {
+    return this.customError;
+  }
+  firstUpdated() {
+    this.$input.addEventListener("change", () => {
+      this.validateOn === "change" && (this.validateOn = "input", this.pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
+    }), this.addEventListener("invalid", (e) => {
+      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && e.preventDefault();
+    }), this.addEventListener("reset", this._resetValue), this.validateInput();
+  }
+  willUpdate(e) {
+    if (e.has("invalid"))
+      if (this.invalid) {
+        this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
+        const r = this._internals.validationMessage;
+        this.hint = r !== "" ? this._internals.validationMessage : "", this.checkValidity();
+      } else
+        this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
+  }
+  attributeChangedCallback(e, r, n) {
+    if (super.attributeChangedCallback(e, r, n), e === "value" && this._internals.setFormValue(n), e === "custom-invalid")
+      if (typeof n == "string") {
+        const l = String(n).trim();
+        this.pristine = !1, this._internals.setValidity({ customError: !0 }, l), this.invalid = !0, this.hint = l, this.checkValidity();
+      } else
+        this._internals.setValidity({}), this.validateInput();
+  }
+  /** @internal */
+  validateInput() {
+    if (this._internals.validity.customError) return;
+    const r = this.$input.validity;
+    if (this.invalid = !1, r.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError });
+    else {
+      this.invalid = !this.pristine && !r.valid;
+      let n;
+      for (n in r) {
+        const o = `data-${n.toString()}`;
+        if (r[n] && !this.hasAttribute(o) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${o.toUpperCase()}="Your custom message"`
+        ), r[n]) {
+          this.validationError = n.toString();
+          const l = this.hasAttribute(o) ? this.getAttribute(o) : this.$input.validationMessage;
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            l ?? ""
+          ), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+  }
+  render() {
+    var e, r;
+    return h`
+			<div id="field">
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
+						<slot>${this.label}</slot>
+						${this.required ? v(this.requiredLabel) : null}
+					</div>
+					<div id="input">
+						${this.type === "search" ? h`<skf-icon name="search" size="sm"></skf-icon>` : d}
+						<div
+							data-leading=${a(this.leading)}
+							data-trailing=${a(this.trailing)}
+							id="affix"
+						>
+							<input
+								autocomplete="off"
+								title=""
+								?disabled=${this.disabled}
+								?readonly=${this.readonly}
+								?required=${this.required}
+								.value=${$(this.value)}
+								@input=${this._handleInput}
+								@blur=${this._onBlur}
+								aria-describedby=${a((e = this.hint) != null && e.trim() ? "hint" : d)}
+								aria-errormessage=${a((r = this.hint) != null && r.trim() ? "hint" : d)}
+								aria-invalid=${!!this.invalid}
+								data-testid="field-input"
+								inputmode=${a(this.inputMode)}
+								max=${a(this.max)}
+								maxlength=${a(this.maxLength)}
+								min=${a(this.min)}
+								minlength=${a(this.minLength)}
+								name=${a(this.name)}
+								pattern=${a(this.pattern)}
+								placeholder=${a(this.placeholder)}
+								type=${a(
+      this.type === "password" ? this._passwordController._type : this.type
+    )}
+							/>
+						</div>
+						${this.type === "number" ? h`<div id="action">
+									${this._renderNumberButton("inc")} ${this._renderNumberButton("dec")}
+								</div>` : d}
+						${this.type === "password" ? this._renderPasswordButton() : d}
+						${this.type === "search" && this.value.length > 0 ? this._renderSearchButton() : d}
+					</div>
+				</label>
+				${this.hint && h`
+					<skf-hint
+						aria-live=${this.invalid ? "assertive" : "polite"}
+						id="hint"
+						severity=${a(C(this.severity, this.invalid))}
+						>${this.hint}
+					</skf-hint>
+				`}
+			</div>
+		`;
+  }
+};
+m.styles = [y, w];
+let t = m;
+i([
+  s({ attribute: "button-aria-label-clear" })
+], t.prototype, "buttonAriaLabelClear", 2);
+i([
+  s({ attribute: "button-aria-label-hide" })
+], t.prototype, "buttonAriaLabelHide", 2);
+i([
+  s({ attribute: "button-aria-label-show" })
+], t.prototype, "buttonAriaLabelShow", 2);
+i([
+  s({ attribute: "custom-invalid", reflect: !0 })
+], t.prototype, "customInvalid", 1);
+i([
+  s({ type: Boolean })
+], t.prototype, "debug", 2);
+i([
+  s({ type: Boolean, attribute: "hide-label" })
+], t.prototype, "hideLabel", 2);
+i([
+  s()
+], t.prototype, "hint", 2);
+i([
+  s({ type: String })
+], t.prototype, "inputmode", 2);
+i([
+  s()
+], t.prototype, "label", 2);
+i([
+  s()
+], t.prototype, "leading", 2);
+i([
+  s()
+], t.prototype, "max", 2);
+i([
+  s({ type: Number, attribute: "maxlength" })
+], t.prototype, "maxLength", 2);
+i([
+  s()
+], t.prototype, "min", 2);
+i([
+  s({ type: Number, attribute: "minlength" })
+], t.prototype, "minLength", 2);
+i([
+  s()
+], t.prototype, "name", 2);
+i([
+  s()
+], t.prototype, "pattern", 2);
+i([
+  s()
+], t.prototype, "placeholder", 2);
+i([
+  s({ type: Boolean })
+], t.prototype, "readonly", 2);
+i([
+  s({ attribute: "required-label" })
+], t.prototype, "requiredLabel", 2);
+i([
+  s()
+], t.prototype, "severity", 2);
+i([
+  s({ type: Boolean, attribute: "show-valid" })
+], t.prototype, "showValid", 2);
+i([
+  s({ reflect: !0 })
+], t.prototype, "size", 2);
+i([
+  s()
+], t.prototype, "trailing", 2);
+i([
+  s()
+], t.prototype, "type", 2);
+i([
+  s({ type: String, attribute: "validate-on" })
+], t.prototype, "validateOn", 2);
+i([
+  s()
+], t.prototype, "value", 2);
+i([
+  b()
+], t.prototype, "invalid", 2);
+i([
+  b()
+], t.prototype, "_buttonDown", 2);
+i([
+  f("input")
+], t.prototype, "$input", 2);
+function C(u, e) {
+  return e ? "error" : u;
+}
+export {
+  t as SkfInput
+};

package/dist/src/components/input/input.controllers.js

@@ -0,0 +1,37 @@
+class l {
+  constructor(t) {
+    this.handleActionBtnClick = (i, s) => {
+      var n;
+      const e = this._inputElement;
+      e && (s === "inc" ? e.stepUp() : e.stepDown(), this.host.value = ((n = this._inputElement) == null ? void 0 : n.value) ?? "", this.host._internals.setFormValue(this.host.value), this.host.validateInput());
+    }, this.handleActionBtnLongPressStart = (i) => {
+      const s = i.target.getAttribute("aria-label") === "Increment" ? "inc" : "dec";
+      this._longPressId = setTimeout(() => {
+        this._repeaterId = setInterval(() => {
+          this.handleActionBtnClick(i, s);
+        }, 50);
+      }, 400);
+    }, this.handleActionBtnLongPressEnd = () => {
+      clearTimeout(this._longPressId), clearInterval(this._repeaterId);
+    }, this.host = t, t.addController(this);
+  }
+  hostUpdated() {
+    this._inputElement = this.host.$input;
+  }
+}
+class o {
+  constructor(t) {
+    this._icon = "visibility", this._type = "password", this.handleFieldLoaded = () => {
+      this._inputElement && (this.host.value = this._inputElement.value, this.host._handleInput());
+    }, this.toggleVisibility = () => {
+      this._inputElement && (this.host._handleInput(), this._type === "text" ? (this._buttonAriaLabel = this.host.buttonAriaLabelShow, this._icon = "visibility", this._type = "password") : (this._buttonAriaLabel = this.host.buttonAriaLabelHide, this._icon = "visibilityOff", this._type = "text"), this.host.requestUpdate(), this._inputElement.value = this.host.value);
+    }, this.host = t, t.addController(this), this._buttonAriaLabel = this.host.buttonAriaLabelShow;
+  }
+  hostUpdated() {
+    this._inputElement = this.host.$input;
+  }
+}
+export {
+  l as InputNumberController,
+  o as InputPasswordController
+};

package/dist/src/components/input/input.js

@@ -0,0 +1,6 @@
+import { SkfInput as f } from "./input.component.js";
+f.define("skf-input");
+export {
+  f as SkfInput,
+  f as default
+};

package/dist/src/components/input/input.styles.js

@@ -0,0 +1,6 @@
+import o from "../../styles/form-field.styles.js";
+import { visuallyHidden as t } from "../../styles/util.styles.js";
+const r = [t, o];
+export {
+  r as default
+};

package/dist/src/components/link/link.component.js

@@ -0,0 +1,116 @@
+import "../icon/icon.js";
+import y from "./link.styles.js";
+import { SkfElement as m } from "../../internal/components/skf-element.js";
+import u from "../../styles/component.styles.js";
+import "lit";
+import { property as r } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { html as f, literal as d } from "lit/static-html.js";
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (h, t, i, l) => {
+  for (var s = l > 1 ? void 0 : l ? v(t, i) : t, p = h.length - 1, c; p >= 0; p--)
+    (c = h[p]) && (s = (l ? c(t, i, s) : c(s)) || s);
+  return l && s && k(t, i, s), s;
+};
+const a = class a extends m {
+  constructor() {
+    super(...arguments), this.as = "a", this.color = "primary", this.iconPlacement = "left", this.rel = "noreferrer noopener", this.type = "button", this._preprocessOnClick = (t) => {
+      this.as === "a" && this.onClick && t.preventDefault(), t.stopPropagation(), this.emit("click");
+    };
+  }
+  set onClick(t) {
+    if (!t) return;
+    this._onClick = t;
+    const i = (l) => {
+      t(l, this.href ?? this.route);
+    };
+    this._assertValidOnClick(t), this.removeEventListener("click", i), this.addEventListener("click", i);
+  }
+  get onClick() {
+    return this._onClick;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", (t) => {
+      (t.key === "Enter" || t.key === " ") && this._preprocessOnClick(t);
+    });
+  }
+  /** @internal */
+  _assertValidOnClick(t) {
+    console.assert(
+      typeof t == "function",
+      `${this.localName}: onClick must be a function. Set the onClick tag property instead of through the attribute API. Read the documentation for more info.`
+    );
+  }
+  /** @internal */
+  _renderIcon() {
+    const t = Object.freeze({
+      primary: "emphasised",
+      inverse: "inverse"
+    });
+    return f`
+			<skf-icon color=${t[this.color]} name=${n(this.icon)} size="sm"></skf-icon>
+		`;
+  }
+  render() {
+    const t = this.as === "a", i = t ? d`a` : d`button`;
+    return f`
+			<${i}
+				?disabled=${n(t ? void 0 : this.disabled)}
+				@click=${this._preprocessOnClick}
+        		download=${n(t ? this.download : void 0)}
+				href=${n(t ? this.href : void 0)}
+				id="link"
+				rel=${n(t ? this.rel : void 0)}
+				target=${n(t ? this.target : void 0)}
+				title=${this.title}
+				type=${n(t ? void 0 : this.type)}
+			>
+				${this.icon && this._renderIcon()}
+				<slot>Default link text</slot>
+			</${i}>
+		`;
+  }
+};
+a.styles = [u, y];
+let e = a;
+o([
+  r({ type: String, reflect: !0 })
+], e.prototype, "as", 2);
+o([
+  r({ type: String, reflect: !0 })
+], e.prototype, "color", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  r({ type: String })
+], e.prototype, "download", 2);
+o([
+  r({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+o([
+  r({ type: String })
+], e.prototype, "icon", 2);
+o([
+  r({ attribute: "icon-placement", reflect: !0 })
+], e.prototype, "iconPlacement", 2);
+o([
+  r()
+], e.prototype, "rel", 2);
+o([
+  r({ reflect: !0 })
+], e.prototype, "route", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "stretch", 2);
+o([
+  r()
+], e.prototype, "target", 2);
+o([
+  r()
+], e.prototype, "type", 2);
+o([
+  r({ attribute: !1 })
+], e.prototype, "onClick", 1);
+export {
+  e as SkfLink
+};