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

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

@@ -0,0 +1,94 @@
+import "../icon/icon.js";
+import "../loader/loader.js";
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import b from "../../styles/component.styles.js";
+import { html as d } from "lit";
+import { property as e, state as m, query as f } from "lit/decorators.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
+import u from "./button.styles.js";
+var _ = Object.defineProperty, i = (p, o, r, a) => {
+  for (var s = void 0, n = p.length - 1, h; n >= 0; n--)
+    (h = p[n]) && (s = h(o, r, s) || s);
+  return s && _(o, r, s), s;
+};
+const l = class l extends c {
+  constructor() {
+    super(...arguments), this._transitionOptions = {
+      duration: 200,
+      fill: "forwards"
+    }, this.destructive = !1, this.disabled = !1, this.iconPosition = "left", this.loading = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${y(this.icon)}></skf-icon>`;
+  }
+  firstUpdated(o) {
+    if (o.has("loading") && this.loading) {
+      if (!this.$body || !this.$loader) return;
+      this._loaderVisible = !0, this.$body.style.opacity = "0", this.$loader.style.opacity = "1";
+    }
+  }
+  attributeChangedCallback(o, r, a) {
+    super.attributeChangedCallback(o, r, a), o === "loading" && (a !== null ? this._showLoader() : this._hideLoader());
+  }
+  async _showLoader() {
+    var o;
+    this._loaderVisible = !0, await ((o = this.$body) == null ? void 0 : o.animate({ opacity: 0 }, this._transitionOptions).finished), !(!this.$body || !this.$loader) && this.$loader.animate({ opacity: 1 }, this._transitionOptions);
+  }
+  async _hideLoader() {
+    !this.$body || !this.$loader || (await this.$loader.animate({ opacity: 0 }, this._transitionOptions).finished, this._loaderVisible = !1, this.$body.animate({ opacity: 1 }, this._transitionOptions));
+  }
+  render() {
+    return d`
+			<button
+				?disabled=${this.disabled || this.loading}
+				aria-busy=${this.loading}
+				id="button"
+				type=${y(this.type)}
+			>
+				${this.variant === "primary" && this._loaderVisible ? d`<skf-loader invert size="sm"></skf-loader>` : ""}
+				<div id="body">
+					${this.icon && this.iconPosition === "left" ? this._renderIcon() : ""}
+					<div id="label">
+						<slot></slot>
+					</div>
+					${this.icon && this.iconPosition === "right" ? this._renderIcon() : ""}
+				</div>
+			</button>
+		`;
+  }
+};
+l.styles = [b, u];
+let t = l;
+i([
+  e({ type: Boolean })
+], t.prototype, "destructive");
+i([
+  e({ type: Boolean })
+], t.prototype, "disabled");
+i([
+  e()
+], t.prototype, "icon");
+i([
+  e({ attribute: "icon-position" })
+], t.prototype, "iconPosition");
+i([
+  e({ type: Boolean })
+], t.prototype, "loading");
+i([
+  e({ reflect: !0 })
+], t.prototype, "size");
+i([
+  e()
+], t.prototype, "type");
+i([
+  e({ reflect: !0 })
+], t.prototype, "variant");
+i([
+  m()
+], t.prototype, "_loaderVisible");
+i([
+  f("skf-loader")
+], t.prototype, "$loader");
+i([
+  f("#body")
+], t.prototype, "$body");
+export {
+  t as SkfButton
+};

package/dist/src/components/button/button.js

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

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

@@ -0,0 +1,112 @@
+import { css as o } from "lit";
+const r = o`
+	@layer components {
+		:host {
+			contain: initial;
+		}
+
+		#button {
+			background-color: var(--_skf-button-state-bg-color, var(--_skf-button-bg-color));
+			block-size: var(--_skf-button-block-size);
+			border: var(--skf-border-width-sm) solid
+				var(--_skf-button-state-border-color, var(--_skf-button-border-color));
+			border-radius: var(--skf-border-radius-sm);
+			color: var(--_skf-button-state-color, var(--_skf-button-color));
+			font-size: var(--_skf-button-font-size, var(--skf-font-size-100));
+			font-weight: var(--skf-font-weight-bold);
+			max-inline-size: min(100%, 23ch);
+			min-inline-size: 64px;
+			padding-inline: var(--skf-spacing-100);
+			position: relative;
+
+			/**
+			 * State
+			 */
+			&:focus-visible {
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				outline-offset: var(--skf-size-2);
+			}
+
+			&:disabled:not([aria-busy='true']) {
+				--_skf-button-state-bg-color: var(--_skf-button-bg-color-disabled);
+				--_skf-button-state-border-color: var(--_skf-button-border-color-disabled);
+				--_skf-button-state-color: var(--_skf-button-color-disabled);
+			}
+
+			&:hover:not(:disabled) {
+				--_skf-button-state-bg-color: var(--_skf-button-bg-color-hover);
+			}
+
+			&:active:not(:disabled) {
+				--_skf-button-state-bg-color: var(--_skf-button-bg-color-active);
+			}
+
+			/**
+			 * Size
+			 */
+			:host([size='sm']) & {
+				--_skf-button-block-size: var(--skf-size-32);
+				--_skf-button-font-size: var(--skf-font-size-75);
+			}
+
+			:host([size='md']) & {
+				--_skf-button-block-size: var(--skf-size-44);
+			}
+
+			:host([size='lg']) & {
+				--_skf-button-block-size: var(--skf-size-56);
+			}
+
+			/**
+			 * Variants
+			 */
+			:host([variant='primary']) & {
+				--_skf-button-bg-color: var(--skf-interactive-bg-color-primary);
+				--_skf-button-bg-color-disabled: var(--skf-interactive-bg-color-disabled);
+				--_skf-button-bg-color-active: var(--skf-interactive-bg-color-primary-active);
+				--_skf-button-bg-color-hover: var(--skf-interactive-bg-color-primary-hover);
+				--_skf-button-border-color: transparent;
+				--_skf-button-color: var(--skf-text-color-inverse);
+				--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
+			}
+
+			:host([variant='secondary']) & {
+				--_skf-button-bg-color: var(--skf-interactive-bg-color-secondary);
+				--_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
+				--_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
+				--_skf-button-border-color: var(--skf-border-color-emphasised);
+				--_skf-button-border-color-disabled: var(--skf-interactive-border-color-disabled);
+				--_skf-button-color: var(--skf-text-color-emphasised);
+				--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
+			}
+
+			:host([destructive]:not([variant='secondary'])) & {
+				--_skf-button-bg-color: var(--skf-interactive-bg-color-destructive);
+				--_skf-button-bg-color-active: var(--skf-interactive-bg-color-destructive-active);
+				--_skf-button-bg-color-hover: var(--skf-interactive-bg-color-destructive-hover);
+			}
+		}
+
+		skf-loader {
+			inset: 50% auto auto 50%;
+			opacity: 0;
+			position: absolute;
+			transform: translate(-50%, -50%);
+		}
+
+		#body {
+			align-items: center;
+			display: flex;
+			gap: var(--skf-spacing-50);
+		}
+
+		#label {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  r as default
+};

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

@@ -0,0 +1,36 @@
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import m from "../../styles/component.styles.js";
+import { html as f } from "lit";
+import { property as r } from "lit/decorators.js";
+import y from "./card.styles.js";
+var c = Object.defineProperty, s = (p, i, l, h) => {
+  for (var t = void 0, o = p.length - 1, a; o >= 0; o--)
+    (a = p[o]) && (t = a(i, l, t) || t);
+  return t && c(i, l, t), t;
+};
+const n = class n extends d {
+  constructor() {
+    super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+  }
+  render() {
+    return f`
+			<div id="card">
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+n.styles = [m, y];
+let e = n;
+s([
+  r({ type: Boolean, attribute: "no-border" })
+], e.prototype, "noBorder");
+s([
+  r({ type: Boolean, attribute: "no-padding" })
+], e.prototype, "noPadding");
+s([
+  r({ type: Boolean })
+], e.prototype, "stretch");
+export {
+  e as SkfCard
+};

package/dist/src/components/card/card.js

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

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

@@ -0,0 +1,26 @@
+import { css as r } from "lit";
+const d = r`
+	#card {
+		background-color: var(--skf-bg-color-neutral-1);
+		border: var(--skf-border-width-sm) solid
+			var(--_skf-card-border-color, var(--skf-border-color-tertiary));
+		border-radius: var(--skf-border-radius-sm);
+		box-shadow: var(--skf-shadow-md);
+		padding: var(--_skf-card-padding, var(--skf-spacing-100));
+
+		:host([no-border]) & {
+			--_skf-card-border-color: transparent;
+		}
+
+		:host([no-padding]) & {
+			--_skf-card-padding: 0;
+		}
+
+		:host([stretch]) & {
+			block-size: inherit;
+		}
+	}
+`;
+export {
+  d as default
+};

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

@@ -0,0 +1,131 @@
+import "../icon/icon.js";
+import { FormBase as p } from "../../internal/components/formBase.js";
+import { Asterisk as c } from "../../internal/templates/asterisk.js";
+import v from "../../styles/component.styles.js";
+import { html as u, nothing as m } from "lit";
+import { property as s, state as f, query as y } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import _ from "./checkbox.styles.js";
+var k = Object.defineProperty, i = (n, t, r, a) => {
+  for (var l = void 0, o = n.length - 1, d; o >= 0; o--)
+    (d = n[o]) && (l = d(t, r, l) || l);
+  return l && k(t, r, l), l;
+};
+const h = class h extends p {
+  constructor() {
+    super(...arguments), this._initialChecked = !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 : null);
+    }, this._renderIcon = (t) => u`
+		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
+	`;
+  }
+  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 a;
+      r.stopPropagation(), this.pristine = !1, this.checked = (a = this.$input) == null ? void 0 : a.checked, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), 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();
+  }
+  attributeChangedCallback(t, r, a) {
+    if (super.attributeChangedCallback(t, r, a), t === "custom-invalid")
+      if (typeof a == "string") {
+        const o = String(a).trim() || "Custom error";
+        this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, o), this.checkValidity();
+      } else
+        this.setValidity({}), this._validateInput();
+  }
+  debugOutput() {
+    this.debug && !this.validity.valid && console.log(`Checkbox invalidity reason: ${this.validationMessage}`);
+  }
+  /** @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 u`
+			<label id="checkbox">
+				<input
+					?checked=${this.checked}
+					?disabled=${this.disabled}
+					?required=${this.required}
+					.indeterminate=${this.indeterminate ?? !1}
+					aria-invalid=${!!this._invalid}
+					name=${b(this.name)}
+					type="checkbox"
+					value=${this.value}
+				/>
+				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
+				<div id="label">
+					<slot>${this.label}</slot>
+					${this.required ? c(this.requiredLabel) : m}
+				</div>
+			</label>
+		`;
+  }
+};
+h.styles = [v, _];
+let e = h;
+i([
+  s({ type: Boolean })
+], e.prototype, "debug");
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "checked");
+i([
+  s({ type: Boolean, attribute: "custom-invalid" })
+], e.prototype, "customInvalid");
+i([
+  s({ type: Boolean, attribute: "hide-label", reflect: !0 })
+], e.prototype, "hideLabel");
+i([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "indeterminate");
+i([
+  s()
+], e.prototype, "label");
+i([
+  s()
+], e.prototype, "name");
+i([
+  s({ attribute: "required-label" })
+], e.prototype, "requiredLabel");
+i([
+  s({ reflect: !0 })
+], e.prototype, "size");
+i([
+  s({ reflect: !0 })
+], e.prototype, "severity");
+i([
+  s({ type: Boolean, attribute: "show-valid" })
+], e.prototype, "showValid");
+i([
+  s()
+], e.prototype, "value");
+i([
+  f()
+], e.prototype, "_invalid");
+i([
+  y("input")
+], e.prototype, "$input");
+export {
+  e as SkfCheckbox
+};

package/dist/src/components/checkbox/checkbox.js

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

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

@@ -0,0 +1,109 @@
+import { visuallyHidden as r } from "../../styles/util.styles.js";
+import { css as o } from "lit";
+const i = [
+  r,
+  o`
+		@layer components {
+			:host {
+				contain: initial;
+			}
+
+			#checkbox {
+				align-items: center;
+				display: grid;
+				grid-gap: var(--skf-spacing-50);
+				grid-template: 'input label' / auto minmax(0, 1fr);
+
+				:host([size='sm']) & {
+					--_skf-checkbox-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-checkbox-bg-color, var(--skf-bg-color-neutral-1));
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-checkbox-border-color, var(--skf-border-color-primary));
+				border-radius: var(--skf-border-radius-sm);
+				grid-area: input;
+				inline-size: var(--_skf-checkbox-size, var(--skf-size-24));
+				transition: background-color var(--skf-motion-duration-fast);
+
+				&:focus-visible {
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: var(--skf-size-2);
+				}
+
+				&:is(:checked:not(:disabled), :indeterminate:not(:disabled)) {
+					--_skf-checkbox-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-checkbox-border-color: transparent;
+				}
+
+				&:is(:checked:disabled, :indeterminate:disabled) {
+					--_skf-checkbox-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-checkbox-border-color: transparent;
+				}
+
+				&:disabled:not(:checked, :indeterminate) {
+					--_skf-checkbox-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-checkbox-border-color: var(--skf-interactive-border-color-disabled);
+				}
+
+				:host([invalid]) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-error);
+				}
+
+				:host([valid]) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-error);
+				}
+
+				:host([severity='alert']:not([invalid], [valid])) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-alert);
+				}
+
+				:host([severity='info']:not([invalid], [valid])) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-info);
+				}
+
+				:host([severity='success']:not([invalid], [valid])) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host([severity='warning']:not([invalid], [valid])) & {
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-warning);
+				}
+			}
+
+			skf-icon {
+				grid-area: input;
+				opacity: 0;
+
+				:host :has(:checked) & {
+					&[name='check'] {
+						opacity: 1;
+					}
+				}
+
+				:host :has(:indeterminate) & {
+					&[name='removeMinus'] {
+						opacity: 1;
+					}
+				}
+			}
+
+			#label {
+				grid-area: label;
+			}
+
+			#asterisk {
+				color: var(--skf-severity-fg-color-error);
+			}
+		}
+	`
+];
+export {
+  i as default
+};

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

@@ -0,0 +1,75 @@
+import "../icon/icon.js";
+import { SkfElement as h } from "../../internal/components/skf-element.js";
+import m from "../../styles/component.styles.js";
+import { property as a } from "lit/decorators.js";
+import { html as c, unsafeStatic as l } from "lit/static-html.js";
+import u from "./collapse.styles.js";
+var f = Object.defineProperty, s = (o, r, d, y) => {
+  for (var t = void 0, i = o.length - 1, p; i >= 0; i--)
+    (p = o[i]) && (t = p(r, d, t) || t);
+  return t && f(r, d, t), t;
+};
+const n = class n extends h {
+  constructor() {
+    super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
+      this.dispatchEvent(
+        new CustomEvent("skf-collapse-toggle", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0
+        })
+      ), this.expanded = !this.expanded;
+    };
+  }
+  /** Class method as alternative to manipulate attribute */
+  setClose() {
+    this.expanded = !1;
+  }
+  /** Class method as alternative to manipulate attribute */
+  setOpen() {
+    this.expanded = !0;
+  }
+  render() {
+    return c`
+			<${l(this.headingAs)} id="heading">
+				<button
+					@click=${this._toggle}
+					aria-controls="main"
+					aria-expanded=${this.expanded}
+					type="button"
+				>
+					<span id="label">${this.heading}</span>
+					<skf-icon name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
+				</button>
+			</${l(this.headingAs)}>
+			<div id="body">
+				<div id="main" data-testid="main">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+n.styles = [m, u];
+let e = n;
+s([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "animated");
+s([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "expanded");
+s([
+  a()
+], e.prototype, "heading");
+s([
+  a({ attribute: "heading-as" })
+], e.prototype, "headingAs");
+s([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "small");
+s([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "truncate");
+export {
+  e as SkfCollapse
+};

package/dist/src/components/collapse/collapse.js

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

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

@@ -0,0 +1,76 @@
+import { css as a } from "lit";
+const s = a`
+	@layer components {
+		:host {
+			background: var(--skf-bg-color-neutral-1);
+			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+		}
+
+		#heading {
+			font-size: var(--_skf-collapse-heading-size, var(--skf-font-size-100));
+			font-weight: var(--_skf-collapse-heading-weight, normal);
+
+			:host([small]) & {
+				--_skf-collapse-heading-size: var(--skf-font-size-75);
+				--_skf-collapse-heading-weight: var(--skf-font-weight-medium);
+			}
+		}
+
+		button {
+			align-items: center;
+			display: flex;
+			padding-block: var(--_skf-collapse-button-padding-block, var(--skf-spacing-50));
+			padding-inline: var(--skf-spacing-75);
+			width: 100%;
+
+			&:focus-visible {
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				outline-offset: -2px;
+			}
+
+			:host([small]) & {
+				--_skf-collapse-button-padding-block: var(--skf-spacing-25);
+			}
+		}
+
+		#label {
+			:host([truncate]:not([expanded])) & {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		skf-icon {
+			margin-inline-start: auto;
+		}
+
+		#body {
+			display: grid;
+			grid-template-rows: var(--_skf-collapse-body-height, 0fr);
+			padding-inline: var(--skf-spacing-75);
+
+			:host([animated]) & {
+				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
+					var(--skf-motion-easing-ease-in);
+			}
+
+			:host([expanded]) & {
+				--_skf-collapse-body-height: 1fr;
+			}
+		}
+
+		#main {
+			overflow: hidden;
+
+			&::after {
+				content: '';
+				display: block;
+				padding-block-end: var(--skf-spacing-100);
+			}
+		}
+	}
+`;
+export {
+  s as default
+};