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

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

@@ -0,0 +1,134 @@
+import "../icon/icon.js";
+import { FormBase as u } from "../../internal/components/formBase.js";
+import { Asterisk as c } from "../../internal/templates/asterisk.js";
+import p from "../../styles/component.styles.js";
+import { html as m } from "lit";
+import { property as a, state as v, query as f } from "lit/decorators.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
+import { live as b } from "lit/directives/live.js";
+import _ from "./radio.styles.js";
+var k = Object.defineProperty, i = (n, t, r, l) => {
+  for (var s = void 0, o = n.length - 1, h; o >= 0; o--)
+    (h = n[o]) && (s = h(t, r, s) || s);
+  return s && k(t, r, s), s;
+};
+const d = class d extends u {
+  constructor() {
+    super(...arguments), this._initialChecked = !1, this.debug = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._validateInput();
+  }
+  willUpdate(t) {
+    t.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true")));
+  }
+  firstUpdated() {
+    var t;
+    (t = this.$input) == null || t.addEventListener("change", (r) => {
+      var l;
+      r.stopPropagation(), this.pristine = !1, this.checked = (l = this.$input) == null ? void 0 : l.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+    }), this.addEventListener("invalid", (r) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && r.preventDefault();
+    }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
+  }
+  updated(t) {
+    super.updated(t), t.has("_invalid") && this._invalid && this.debug && this.debugOutput(), t.has("checked") && this.form && this.setFormValue(this.checked ? this.value : null);
+  }
+  attributeChangedCallback(t, r, l) {
+    if (super.attributeChangedCallback(t, r, l), t === "checked" && l !== null && this._uncheckSiblingRadios(), t === "custom-invalid")
+      if (typeof l == "string") {
+        const o = String(l).trim() || "Custom error";
+        this.pristine = !1, this._invalid = !0, this._internals.setValidity({ customError: !0 }, o), this.checkValidity();
+      } else
+        this.setValidity({}), this._validateInput();
+  }
+  debugOutput() {
+    this.debug && !this._internals.validity.valid && console.log(`Radio invalidity reason: ${this._internals.validationMessage}`);
+  }
+  /** @internal */
+  _uncheckSiblingRadios() {
+    const t = this.name;
+    if (!t) return;
+    (this.form ?? document).querySelectorAll(`skf-radio[name="${t}"]`).forEach((s) => {
+      const o = this.form === s.form, h = !this.form && !s.form;
+      s !== this && (o || h) && (s.checked = !1);
+    });
+  }
+  /** @internal */
+  _validateInput() {
+    var t;
+    if (this._invalid = !1, this.customInvalid)
+      this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
+    else if (this.required && !this.checked) {
+      this.pristine || (this._invalid = !0);
+      const r = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((t = this.$input) == null ? void 0 : t.validationMessage) ?? "Please check this box if you want to proceed";
+      this.setValidity({ valueMissing: !0 }, String(r));
+    } else
+      this.setValidity({});
+  }
+  render() {
+    return m`
+			<label id="radio">
+				<input
+					?disabled=${this.disabled}
+					?required=${this.required}
+					.checked=${b(!!this.checked)}
+					aria-invalid=${!!this._invalid}
+					name=${y(this.name)}
+					type="radio"
+					value=${this.value}
+				/>
+				<div id="label">
+					<slot>${this.label}</slot>
+					${this.required ? c(this.requiredLabel) : null}
+				</div>
+			</label>
+		`;
+  }
+};
+d.styles = [p, _];
+let e = d;
+i([
+  a({ type: Boolean })
+], e.prototype, "debug");
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "checked");
+i([
+  a({ type: Boolean, attribute: "custom-invalid" })
+], e.prototype, "customInvalid");
+i([
+  a({ type: Boolean, attribute: "hide-label", reflect: !0 })
+], e.prototype, "hideLabel");
+i([
+  a()
+], e.prototype, "label");
+i([
+  a()
+], e.prototype, "name");
+i([
+  a({ attribute: "required-label" })
+], e.prototype, "requiredLabel");
+i([
+  a({ reflect: !0 })
+], e.prototype, "size");
+i([
+  a({ reflect: !0 })
+], e.prototype, "severity");
+i([
+  a({ type: Boolean, attribute: "show-valid" })
+], e.prototype, "showValid");
+i([
+  a()
+], e.prototype, "value");
+i([
+  v()
+], e.prototype, "_invalid");
+i([
+  f("input")
+], e.prototype, "$input");
+export {
+  e as SkfRadio
+};

package/dist/src/components/radio/radio.js

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

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

@@ -0,0 +1,98 @@
+import { visuallyHidden as r } from "../../styles/util.styles.js";
+import { css as o } from "lit";
+const e = [
+  r,
+  o`
+		@layer components {
+			:host {
+				contain: initial;
+			}
+
+			#radio {
+				align-items: center;
+				display: flex;
+				grid-gap: var(--skf-spacing-50);
+
+				:host([size='sm']) & {
+					--_skf-radio-size: var(--skf-size-20);
+
+					font-size: var(--skf-font-size-75);
+					font-weight: var(--skf-font-weight-medium);
+				}
+			}
+
+			input {
+				aspect-ratio: 1;
+				background-color: var(--_skf-radio-bg-color, var(--skf-bg-color-neutral-1));
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-radio-border-color, var(--skf-border-color-primary));
+				border-radius: 50%;
+				display: grid;
+				inline-size: var(--_skf-radio-size, var(--skf-size-24));
+				place-items: center;
+				transition: background-color var(--skf-motion-duration-fast);
+
+				&::after {
+					aspect-ratio: inherit;
+					background-color: var(--skf-bg-color-neutral-1);
+					border-radius: inherit;
+					content: var(--_skf-radio-marker-content, unset);
+					inline-size: calc(100% - 10px);
+				}
+
+				&:focus-visible {
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: var(--skf-size-2);
+				}
+
+				&:checked:not(:disabled) {
+					--_skf-radio-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-radio-border-color: transparent;
+					--_skf-radio-marker-content: '';
+				}
+
+				&:checked:disabled {
+					--_skf-radio-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-radio-border-color: transparent;
+					--_skf-radio-marker-content: '';
+				}
+
+				&:disabled:not(:checked) {
+					--_skf-radio-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-radio-border-color: var(--skf-interactive-border-color-disabled);
+				}
+
+				:host([invalid]) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-error);
+				}
+
+				:host([valid]) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host([severity='alert']:not([invalid], [valid])) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-alert);
+				}
+
+				:host([severity='info']:not([invalid], [valid])) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-info);
+				}
+
+				:host([severity='success']:not([invalid], [valid])) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host([severity='warning']:not([invalid], [valid])) & {
+					--_skf-radio-border-color: var(--skf-severity-fg-color-warning);
+				}
+			}
+
+			#asterisk {
+				color: var(--skf-severity-fg-color-error);
+			}
+		}
+	`
+];
+export {
+  e as default
+};

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

@@ -0,0 +1,51 @@
+import "../icon/icon.js";
+import { SkfElement as a } from "../../internal/components/skf-element.js";
+import h from "../../styles/component.styles.js";
+import { html as s, nothing as f } from "lit";
+import { property as e } from "lit/decorators.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+import { styles as u } from "./tag.styles.js";
+var d = Object.defineProperty, r = (m, p, l, y) => {
+  for (var t = void 0, i = m.length - 1, c; i >= 0; i--)
+    (c = m[i]) && (t = c(p, l, t) || t);
+  return t && d(p, l, t), t;
+};
+const n = class n extends a {
+  constructor() {
+    super(...arguments), this.size = "md", this._remove = () => {
+      this.remove();
+    };
+  }
+  render() {
+    return s`
+			<div id="tag">
+				${this.icon ? s`<skf-icon color=${v(this.color)} name=${this.icon} size="sm"></skf-icon>` : f}
+				<span>
+					<slot></slot>
+				</span>
+				${this.removable ? s`
+							<button @click=${this._remove} type="button">
+								<skf-icon name="close" size="sm"></skf-icon>
+							</button>
+						` : f}
+			</div>
+		`;
+  }
+};
+n.styles = [h, u];
+let o = n;
+r([
+  e({ reflect: !0 })
+], o.prototype, "size");
+r([
+  e()
+], o.prototype, "icon");
+r([
+  e({ reflect: !0 })
+], o.prototype, "color");
+r([
+  e({ type: Boolean })
+], o.prototype, "removable");
+export {
+  o as SkfTag
+};

package/dist/src/components/tag/tag.js

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

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

@@ -0,0 +1,67 @@
+import { css as r } from "lit";
+const s = r`
+	@layer components {
+		:host {
+			display: contents;
+		}
+
+		#tag {
+			align-items: center;
+			background-color: var(--_skf-tag-bg-color, var(--skf-bg-color-neutral-1));
+			block-size: var(--_skf-tag-height, var(--skf-size-32));
+			border: var(--skf-border-width-sm) solid
+				var(--_skf-tag-border-color, var(--skf-border-color-primary));
+			border-radius: var(--_skf-tag-border-radius, var(--skf-border-radius-md));
+			color: var(--_skf-tag-text-color, var(--skf-text-color-primary));
+			display: inline-flex;
+			font-size: var(--_skf-tag-font-size, var(--skf-font-size-50));
+			gap: var(--skf-spacing-25);
+			max-inline-size: 48ch;
+			padding-inline: var(--skf-spacing-50);
+
+			:host([color='alert']) & {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-alert);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-alert);
+			}
+
+			:host([color='error']) & {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-error);
+			}
+
+			:host([color='info']) & {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host([color='success']) & {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-success);
+			}
+
+			:host([color='warning']) & {
+				--_skf-tag-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-tag-border-color: var(--skf-severity-fg-color-warning);
+			}
+
+			:host([size='sm']) & {
+				--_skf-tag-border-radius: 0.25rem; /* token needed */
+				--_skf-tag-font-size: var(--skf-font-size-25);
+				--_skf-tag-height: var(--skf-size-24);
+			}
+		}
+
+		span {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		button {
+			display: flex;
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -0,0 +1,183 @@
+import "../icon/icon.js";
+import { FormBase as m } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
+import { Asterisk as c } from "../../internal/templates/asterisk.js";
+import y from "../../styles/component.styles.js";
+import { html as p, nothing as v } from "lit";
+import { property as r, state as f, query as b } from "lit/decorators.js";
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import g from "./textarea.styles.js";
+var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, e = (h, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? E(t, s) : t, o = h.length - 1, d; o >= 0; o--)
+    (d = h[o]) && (l = (a ? d(t, s, l) : d(l)) || l);
+  return a && l && $(t, s, l), l;
+};
+const u = class u extends m {
+  constructor() {
+    super(...arguments), this.cols = 20, this.debug = !1, this.hideLabel = !1, this.label = "Default label", this.rows = 2, this.size = "md", this.validateOn = "change", this.value = "", this.invalid = !1, this._resetValue = (t) => {
+      var s;
+      t.stopPropagation(), this.value = ((s = this.getAttribute("value")) == null ? void 0 : s.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
+    }, this._handleInput = () => {
+      this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
+    };
+  }
+  set customInvalid(t) {
+    this.customError = String(t);
+  }
+  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", (t) => {
+      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && t.preventDefault();
+    }), this.addEventListener("reset", this._resetValue), this.validateInput();
+  }
+  willUpdate(t) {
+    if (t.has("invalid"))
+      if (this.invalid) {
+        this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid");
+        const s = this._internals.validationMessage;
+        this.hint = s !== "" ? this._internals.validationMessage : "unspecified error", this.checkValidity();
+      } else
+        this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
+  }
+  attributeChangedCallback(t, s, a) {
+    if (super.attributeChangedCallback(t, s, a), t === "value" && this._internals.setFormValue(a), t === "custom-invalid")
+      if (typeof a == "string") {
+        const o = String(a).trim();
+        this.pristine = !1, this._internals.setValidity({ customError: !0 }, o), this.invalid = !0, this.hint = o, this.checkValidity();
+      } else
+        this._internals.setValidity({}), this.validateInput();
+  }
+  /** @internal */
+  validateInput() {
+    if (this._internals.validity.customError) return;
+    const s = this.$input.validity;
+    if (this.invalid = !1, s.valid)
+      this._internals.setValidity({ customError: this._internals.validity.customError });
+    else {
+      this.invalid = !this.pristine && !s.valid;
+      let a;
+      for (a in s) {
+        const l = `data-${a.toString()}`;
+        if (s[a] && !this.hasAttribute(l) && this.debug && console.log(
+          `Add custom message on ${this.localName} using attribute: ${l.toUpperCase()}="Your custom message"`
+        ), s[a]) {
+          this.validationError = a.toString();
+          const o = this.hasAttribute(l) ? this.getAttribute(l) : this.$input.validationMessage;
+          this._internals.setValidity(
+            { [this.validationError]: !0, customError: this._internals.validity.customError },
+            o ?? ""
+          ), this.invalid && this.customErrorDisplay && this.checkValidity();
+        }
+      }
+    }
+  }
+  render() {
+    var t, s;
+    return p`
+			<div id="field">
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
+						${this.label} ${this.required ? c(this.requiredLabel) : null}
+					</div>
+					<div id="input">
+						<textarea
+							?disabled=${this.disabled}
+							?required=${this.required}
+							.value=${this.value}
+							@input=${this._handleInput}
+							aria-describedby=${n((t = this.hint) != null && t.trim() ? "hint" : v)}
+							aria-errormessage=${n((s = this.hint) != null && s.trim() ? "hint" : v)}
+							aria-invalid=${!!this.invalid}
+							cols=${n(this.cols)}
+							name=${n(this.name)}
+							maxlength=${n(this.maxLength)}
+							minlength=${n(this.minLength)}
+							placeholder=${n(this.placeholder)}
+							?readonly=${this.readonly}
+							rows=${n(this.rows)}
+						>
+						</textarea>
+					</div>
+				</label>
+				${this.hint && p`<skf-hint
+					aria-live=${this.invalid ? "assertive" : "polite"}
+					id="hint"
+					severity=${n(_(this.severity, this.invalid))}
+					>${this.hint}</skf-hint
+				>`}
+			</div>
+		`;
+  }
+};
+u.styles = [y, g];
+let i = u;
+e([
+  r({ type: Number })
+], i.prototype, "cols", 2);
+e([
+  r({ attribute: "custom-invalid", reflect: !0 })
+], i.prototype, "customInvalid", 1);
+e([
+  r({ type: Boolean })
+], i.prototype, "debug", 2);
+e([
+  r({ type: Boolean, attribute: "hide-label" })
+], i.prototype, "hideLabel", 2);
+e([
+  r()
+], i.prototype, "hint", 2);
+e([
+  r()
+], i.prototype, "label", 2);
+e([
+  r()
+], i.prototype, "name", 2);
+e([
+  r({ type: Number, attribute: "maxlength" })
+], i.prototype, "maxLength", 2);
+e([
+  r({ type: Number, attribute: "minlength" })
+], i.prototype, "minLength", 2);
+e([
+  r()
+], i.prototype, "placeholder", 2);
+e([
+  r({ type: Boolean })
+], i.prototype, "readonly", 2);
+e([
+  r({ attribute: "required-label" })
+], i.prototype, "requiredLabel", 2);
+e([
+  r({ type: Number })
+], i.prototype, "rows", 2);
+e([
+  r()
+], i.prototype, "severity", 2);
+e([
+  r({ type: Boolean, attribute: "show-valid" })
+], i.prototype, "showValid", 2);
+e([
+  r({ reflect: !0 })
+], i.prototype, "size", 2);
+e([
+  r({ type: String, attribute: "validate-on" })
+], i.prototype, "validateOn", 2);
+e([
+  r()
+], i.prototype, "value", 2);
+e([
+  f()
+], i.prototype, "invalid", 2);
+e([
+  b("textarea")
+], i.prototype, "$input", 2);
+function _(h, t) {
+  return t ? "error" : h;
+}
+export {
+  i as SkfTextArea
+};

package/dist/src/components/textarea/textarea.js

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

package/dist/src/components/textarea/textarea.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/index.js

@@ -0,0 +1,46 @@
+import "./components/accordion/accordion.js";
+import "./components/button/button.js";
+import "./components/card/card.js";
+import "./components/checkbox/checkbox.js";
+import "./components/collapse/collapse.js";
+import "./components/divider/divider.js";
+import "./components/icon/icon.js";
+import "./components/input/input.js";
+import "./components/link/link.js";
+import "./components/loader/loader.js";
+import "./components/logo/logo.js";
+import "./components/radio/radio.js";
+import "./components/tag/tag.js";
+import "./components/textarea/textarea.js";
+import { SkfAccordion as C } from "./components/accordion/accordion.component.js";
+import { SkfButton as L } from "./components/button/button.component.js";
+import { SkfCard as l } from "./components/card/card.component.js";
+import { SkfCheckbox as T } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as h } from "./components/collapse/collapse.component.js";
+import { SkfDivider as v } from "./components/divider/divider.component.js";
+import { SkfIcon as D } from "./components/icon/icon.component.js";
+import { SkfInput as j } from "./components/input/input.component.js";
+import { SkfLink as w } from "./components/link/link.component.js";
+import { SkfLoader as z } from "./components/loader/loader.component.js";
+import { SkfLogo as F } from "./components/logo/logo.component.js";
+import { SkfRadio as H } from "./components/radio/radio.component.js";
+import { SkfTag as K } from "./components/tag/tag.component.js";
+import { SkfTextArea as N } from "./components/textarea/textarea.component.js";
+import { SkfAccordionItem as P } from "./components/accordion/accordion-item.js";
+export {
+  C as SkfAccordion,
+  P as SkfAccordionItem,
+  L as SkfButton,
+  l as SkfCard,
+  T as SkfCheckbox,
+  h as SkfCollapse,
+  v as SkfDivider,
+  D as SkfIcon,
+  j as SkfInput,
+  w as SkfLink,
+  z as SkfLoader,
+  F as SkfLogo,
+  H as SkfRadio,
+  K as SkfTag,
+  N as SkfTextArea
+};