@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

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

@@ -1,94 +1,131 @@
 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 { SkfElement as b } from "../../internal/components/skf-element.js";
+import f from "../../styles/component.styles.js";
+import { html as h, LitElement as m, nothing as u } from "lit";
+import { property as e, state as _, query as p } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
-import u from "./button.styles.js";
-var _ = Object.defineProperty, i = (h, o, r, a) => {
-  for (var s = void 0, n = h.length - 1, p; n >= 0; n--)
-    (p = h[n]) && (s = p(o, r, s) || s);
-  return s && _(o, r, s), s;
+import $ from "./button.styles.js";
+var g = Object.defineProperty, s = (c, t, a, n) => {
+  for (var o = void 0, r = c.length - 1, l; r >= 0; r--)
+    (l = c[r]) && (o = l(t, a, o) || o);
+  return o && g(t, a, o), o;
 };
-const l = class l extends c {
+const d = class d extends b {
   constructor() {
     super(), 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>`, this._internals = this.attachInternals();
+    }, this.destructive = !1, this.disabled = !1, this.iconOnly = !1, this.iconPosition = "left", this.loading = !1, this.noValidate = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._handleClick = (t) => {
+      t.preventDefault(), t.stopPropagation(), !(this.disabled || this.loading) && (this.dispatchEvent(new CustomEvent("click", { bubbles: !0, composed: !0, detail: t })), this.type === "submit" && this._submitForm(), this.type === "reset" && this._resetForm());
+    }, this._submitForm = () => {
+      var o, r, l;
+      const t = !((o = this._internals.form) != null && o.reportValidity()), a = !this.noValidate, n = !((r = this._internals.form) != null && r.hasAttribute("no-validate"));
+      (a || n) && t || (l = this._internals.form) == null || l.submit();
+    }, this._resetForm = () => {
+      var t;
+      (t = this._internals.form) == null || t.reset();
+    }, this._renderIcon = () => h`<skf-icon class="skf-icon-host" name=${y(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
   }
-  firstUpdated(o) {
-    if (o.has("loading") && this.loading) {
+  firstUpdated(t) {
+    if (t.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());
+  attributeChangedCallback(t, a, n) {
+    super.attributeChangedCallback(t, a, n), t === "loading" && (n !== null ? this._showLoader() : this._hideLoader());
   }
+  /** Simulates a click on the button. */
+  click() {
+    var t;
+    (t = this.$button) == null || t.click();
+  }
+  /** @internal */
   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);
+    var t;
+    this._loaderVisible = !0, await ((t = this.$body) == null ? void 0 : t.animate({ opacity: 0 }, this._transitionOptions).finished), !(!this.$body || !this.$loader) && this.$loader.animate({ opacity: 1 }, this._transitionOptions);
   }
+  /** @internal */
   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`
+    return h`
 			<button
 				?disabled=${this.disabled || this.loading}
 				aria-busy=${this.loading}
-				id="root"
+				class=${v({
+      btn: !0,
+      "btn--destructive": this.destructive,
+      "btn--icon-only": this.iconOnly,
+      "btn--size-lg": this.size === "lg",
+      "btn--size-md": this.size === "md",
+      "btn--size-sm": this.size === "sm",
+      "btn--variant-primary": this.variant === "primary",
+      "btn--variant-secondary": this.variant === "secondary",
+      "btn--variant-tertiary": this.variant === "tertiary"
+    })}
 				type=${y(this.type)}
+				@click=${this._handleClick}
+				title=${/* An empty title prevents browser validation tooltips from appearing on hover */
+    this.title}
 			>
-				${this.variant === "primary" && this._loaderVisible ? d`<skf-loader invert size="sm"></skf-loader>` : ""}
-				<div id="body">
+				${this.variant === "primary" && this._loaderVisible ? h`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
+				<div class="btn__body" id="body">
 					${this.icon && this.iconPosition === "left" ? this._renderIcon() : ""}
-					<div id="label">
-						<slot></slot>
-					</div>
+					${this.iconOnly ? u : h`<slot class="btn__label"></slot>`}
 					${this.icon && this.iconPosition === "right" ? this._renderIcon() : ""}
 				</div>
 			</button>
 		`;
   }
 };
-l.styles = [b, u];
-let t = l;
-i([
+d.formAssociated = !0, d.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 }, d.styles = [f, $];
+let i = d;
+s([
   e({ type: Boolean })
-], t.prototype, "destructive");
-i([
+], i.prototype, "destructive");
+s([
   e({ type: Boolean })
-], t.prototype, "disabled");
-i([
+], i.prototype, "disabled");
+s([
   e()
-], t.prototype, "icon");
-i([
+], i.prototype, "icon");
+s([
+  e({ type: Boolean })
+], i.prototype, "iconOnly");
+s([
   e({ attribute: "icon-position" })
-], t.prototype, "iconPosition");
-i([
+], i.prototype, "iconPosition");
+s([
   e({ type: Boolean })
-], t.prototype, "loading");
-i([
+], i.prototype, "loading");
+s([
+  e({ type: Boolean, attribute: "no-validate" })
+], i.prototype, "noValidate");
+s([
   e({ reflect: !0 })
-], t.prototype, "size");
-i([
+], i.prototype, "size");
+s([
   e()
-], t.prototype, "type");
-i([
+], i.prototype, "type");
+s([
   e({ reflect: !0 })
-], t.prototype, "variant");
-i([
-  m()
-], t.prototype, "_loaderVisible");
-i([
-  f("skf-loader")
-], t.prototype, "$loader");
-i([
-  f("#body")
-], t.prototype, "$body");
+], i.prototype, "variant");
+s([
+  _()
+], i.prototype, "_loaderVisible");
+s([
+  p("skf-loader")
+], i.prototype, "$loader");
+s([
+  p("#body")
+], i.prototype, "$body");
+s([
+  p("button")
+], i.prototype, "$button");
 export {
-  t as SkfButton
+  i as SkfButton
 };

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

@@ -1,11 +1,13 @@
 import { css as o } from "lit";
 const r = o`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
 			contain: initial;
+			display: inline-flex;
 		}
 
-		#root {
+		.btn {
 			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
@@ -15,10 +17,13 @@ const r = o`
 			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;
 
+			&:not(.btn--icon-only) {
+				min-inline-size: 64px;
+				padding-inline: var(--skf-spacing-100);
+			}
+
 			/**
 			 * State
 			 */
@@ -40,67 +45,82 @@ const r = o`
 			&: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);
-			}
+		.btn--icon-only {
+			aspect-ratio: 1;
+			place-items: center;
+		}
 
-			:host([size='md']) & {
-				--_skf-button-block-size: var(--skf-size-44);
-			}
+		/**
+		 * Size
+		 */
+		.btn--size-sm {
+			--_skf-button-block-size: var(--skf-size-32);
+			--_skf-button-font-size: var(--skf-font-size-75);
+		}
 
-			:host([size='lg']) & {
-				--_skf-button-block-size: var(--skf-size-56);
-			}
+		.btn--size-md {
+			--_skf-button-block-size: var(--skf-size-44);
+		}
 
-			/**
-			 * 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);
-			}
+		.btn--size-lg {
+			--_skf-button-block-size: var(--skf-size-56);
+		}
 
-			: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);
-			}
+		/**
+		 * Variants
+		 */
+		.btn--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([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);
-			}
+		.btn--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);
+		}
+
+		.btn--variant-tertiary {
+			--_skf-button-bg-color: transparent;
+			--_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: transparent;
+			--_skf-button-color: var(--skf-text-color-emphasised);
+			--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
+		}
+
+		.btn--destructive:not(.btn--variant-secondary, .btn--variant-tertiary) {
+			--_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 {
+		.btn__loader {
 			inset: 50% auto auto 50%;
 			opacity: 0;
 			position: absolute;
 			transform: translate(-50%, -50%);
 		}
 
-		#body {
+		.btn__body {
 			align-items: center;
 			display: flex;
 			gap: var(--skf-spacing-50);
 		}
 
-		#label {
+		.btn__label {
+			display: block;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			white-space: nowrap;

package/dist/components/card/card.component.d.ts

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-card>` can be used to group related subjects in a container
@@ -12,10 +12,10 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfCard extends SkfElement {
     static styles: CSSResultGroup;
     /** If true, removes border */
-    noBorder?: boolean;
+    noBorder: boolean;
     /** If true, removes padding */
-    noPadding?: boolean;
+    noPadding: boolean;
     /** If true, the Card fills the parent element height */
-    stretch?: boolean;
+    stretch: boolean;
     render(): import("lit").TemplateResult<1>;
 }

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

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

package/dist/components/card/card.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+export declare const styles: import("lit").CSSResult;

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

@@ -1,5 +1,7 @@
 import { css as r } from "lit";
-const s = r`
+const a = r`
+	/* stylelint-disable selector-class-pattern */
+
 	:host {
 		contain: layout;
 	}
@@ -8,27 +10,27 @@ const s = r`
 		block-size: 100%;
 	}
 
-	#root {
+	.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;
-		}
+	.card--no-border {
+		--_skf-card-border-color: transparent;
+	}
 
-		:host([no-padding]) & {
-			--_skf-card-padding: 0;
-		}
+	.card--no-padding {
+		--_skf-card-padding: 0;
+	}
 
-		:host([stretch]) & {
-			block-size: inherit;
-		}
+	.card--stretch {
+		block-size: inherit;
 	}
 `;
 export {
-  s as default
+  a as styles
 };

package/dist/components/checkbox/checkbox.component.d.ts

@@ -1,6 +1,6 @@
-import '@components/icon/icon.js';
-import { FormBase } from '@internal/components/formBase.js';
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import '../icon/icon.js';
+import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-checkbox>` component is used to create a checkbox input
@@ -18,16 +18,17 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
-    /** @internal */
-    private _initialChecked;
+    /**
+     * @internal
+     * Initial state saved here as default for form resets.
+     */
+    private _initiallyChecked;
     /** If defined, outputs helping hints in console */
     debug?: boolean;
     /** If true, outputs helping hints in console */
     checked?: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid?: boolean;
-    /** If true, hides the label visually */
-    hideLabel?: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
     indeterminate?: boolean;
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
@@ -52,12 +53,10 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
-    connectedCallback(): void;
-    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    handleInvalidChange(): void;
+    handleDebugInvalid(): void;
+    handleCustomInvalidChange(): void;
     protected firstUpdated(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    debugOutput(): void;
     /** @internal */
     private _validateInput;
     /** @internal */