@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

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

@@ -1,30 +1,40 @@
-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 $ 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;
+var u = (i) => {
+  throw TypeError(i);
 };
-const d = class d extends b {
+var _ = (i, e, t) => e.has(i) || u("Cannot " + t);
+var p = (i, e, t) => (_(i, e, "read from private field"), t ? t.call(i) : e.get(i)), v = (i, e, t) => e.has(i) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), $ = (i, e, t, a) => (_(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
+import "../icon/icon.js";
+import "../loader/loader.js";
+import { SkfElement as O } from "../../internal/components/skf-element.js";
+import { watch as V } from "../../internal/helpers/watch.js";
+import { componentStyles as w } from "../../styles/component.styles.js";
+import { html as y, LitElement as z, nothing as b } from "lit";
+import { property as r, state as P, query as m } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { styles as C } from "./button.styles.js";
+var F = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (i, e, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? q(e, t) : e, h = i.length - 1, d; h >= 0; h--)
+    (d = i[h]) && (n = (a ? d(e, t, n) : d(n)) || n);
+  return a && n && F(e, t, n), n;
+}, l;
+const c = class c extends O {
   constructor() {
-    super(), this._transitionOptions = {
+    super();
+    v(this, l);
+    this._transitionOptions = {
       duration: 200,
       fill: "forwards"
     }, 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();
+      var h, d, f;
+      const t = !((h = p(this, l).form) != null && h.reportValidity()), a = !this.noValidate, n = !((d = p(this, l).form) != null && d.hasAttribute("no-validate"));
+      (a || n) && t || (f = p(this, l).form) == null || f.requestSubmit();
     }, 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();
+      (t = p(this, l).form) == null || t.reset();
+    }, this._renderIcon = () => y`<skf-icon data-color="custom" name=${g(this.icon)}></skf-icon>`, $(this, l, this.attachInternals());
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -32,8 +42,8 @@ const d = class d extends b {
       this._loaderVisible = !0, this.$body.style.opacity = "0", this.$loader.style.opacity = "1";
     }
   }
-  attributeChangedCallback(t, a, n) {
-    super.attributeChangedCallback(t, a, n), t === "loading" && (n !== null ? this._showLoader() : this._hideLoader());
+  _handleLoadingChange() {
+    this.loading ? this._showLoader() : this._hideLoader();
   }
   /** Simulates a click on the button. */
   click() {
@@ -50,11 +60,12 @@ const d = class d extends b {
     !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 h`
+    return y`
 			<button
 				?disabled=${this.disabled || this.loading}
+				@click=${this._handleClick}
 				aria-busy=${this.loading}
-				class=${v({
+				class=${L({
       btn: !0,
       "btn--destructive": this.destructive,
       "btn--icon-only": this.iconOnly,
@@ -62,67 +73,70 @@ const d = class d extends b {
       "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-secondary": this.variant === "secondary",
+      "btn--variant-tertiary": this.variant === "tertiary"
     })}
-				type=${y(this.type)}
-				@click=${this._handleClick}
+				type=${g(this.type)}
 				title=${/* An empty title prevents browser validation tooltips from appearing on hover */
     this.title}
 			>
-				${this.variant === "primary" && this._loaderVisible ? h`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
+				${this.variant === "primary" && this._loaderVisible ? y`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
 				<div class="btn__body" id="body">
-					${this.icon && this.iconPosition === "left" ? this._renderIcon() : ""}
-					${this.iconOnly ? u : h`<slot class="btn__label"></slot>`}
-					${this.icon && this.iconPosition === "right" ? this._renderIcon() : ""}
+					${this.icon && this.iconPosition === "left" ? this._renderIcon() : b}
+					${this.iconOnly ? b : y`<slot class="btn__label"></slot>`}
+					${this.icon && this.iconPosition === "right" ? this._renderIcon() : b}
 				</div>
 			</button>
 		`;
   }
 };
-d.formAssociated = !0, d.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 }, d.styles = [f, $];
-let i = d;
+l = new WeakMap(), c.styles = [w, C], c.formAssociated = !0, c.shadowRootOptions = { ...z.shadowRootOptions, delegatesFocus: !0 };
+let o = c;
+s([
+  r({ type: Boolean })
+], o.prototype, "destructive", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "destructive");
+  r({ type: Boolean })
+], o.prototype, "disabled", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "disabled");
+  r()
+], o.prototype, "icon", 2);
 s([
-  e()
-], i.prototype, "icon");
+  r({ type: Boolean, attribute: "icon-only" })
+], o.prototype, "iconOnly", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "iconOnly");
+  r({ attribute: "icon-position" })
+], o.prototype, "iconPosition", 2);
 s([
-  e({ attribute: "icon-position" })
-], i.prototype, "iconPosition");
+  r({ type: Boolean, reflect: !0 })
+], o.prototype, "loading", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "loading");
+  r({ type: Boolean, attribute: "no-validate" })
+], o.prototype, "noValidate", 2);
 s([
-  e({ type: Boolean, attribute: "no-validate" })
-], i.prototype, "noValidate");
+  r({ reflect: !0 })
+], o.prototype, "size", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "size");
+  r()
+], o.prototype, "type", 2);
 s([
-  e()
-], i.prototype, "type");
+  r({ reflect: !0 })
+], o.prototype, "variant", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "variant");
+  P()
+], o.prototype, "_loaderVisible", 2);
 s([
-  _()
-], i.prototype, "_loaderVisible");
+  m("skf-loader")
+], o.prototype, "$loader", 2);
 s([
-  p("skf-loader")
-], i.prototype, "$loader");
+  m("#body")
+], o.prototype, "$body", 2);
 s([
-  p("#body")
-], i.prototype, "$body");
+  m("button")
+], o.prototype, "$button", 2);
 s([
-  p("button")
-], i.prototype, "$button");
+  V("loading", { afterUpdate: !0 })
+], o.prototype, "_handleLoadingChange", 1);
 export {
-  i as SkfButton
+  o as SkfButton
 };

package/dist/components/button/button.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/button/button.styles.js

@@ -49,7 +49,8 @@ const r = o`
 
 		.btn--icon-only {
 			aspect-ratio: 1;
-			place-items: center;
+			display: inherit;
+			place-content: center;
 		}
 
 		/**
@@ -91,7 +92,16 @@ const r = o`
 			--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
 		}
 
-		.btn--destructive:not(.btn--variant-secondary) {
+		.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);
@@ -119,5 +129,5 @@ const r = o`
 	}
 `;
 export {
-  r as default
+  r as styles
 };

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

@@ -3,13 +3,14 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-card>` can be used to group related subjects in a container
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles
  *
  * @slot - The card's main content
  *
  * @tagname skf-card
  */
 export declare class SkfCard extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** If true, removes border */
     noBorder: boolean;
@@ -17,5 +18,7 @@ export declare class SkfCard extends SkfElement {
     noPadding: boolean;
     /** If true, the Card fills the parent element height */
     stretch: boolean;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,44 +1,54 @@
-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, p, a, y) => {
-  for (var t = void 0, e = i.length - 1, d; e >= 0; e--)
-    (d = i[e]) && (t = d(p, a, t) || t);
-  return t && u(p, a, t), t;
+var g = (t) => {
+  throw TypeError(t);
 };
-const n = class n extends l {
+var u = (t, e, o) => e.has(t) || g("Cannot " + o);
+var m = (t, e, o) => (u(t, e, "read from private field"), o ? o.call(t) : e.get(t)), d = (t, e, o) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), c = (t, e, o, s) => (u(t, e, "write to private field"), s ? s.call(t, o) : e.set(t, o), o);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as v } from "../../internal/helpers/stateMap.js";
+import { watch as P } from "../../internal/helpers/watch.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
+import { styles as j } from "./card.styles.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? x(e, o) : e, h = t.length - 1, l; h >= 0; h--)
+    (l = t[h]) && (r = (s ? l(e, o, r) : l(r)) || r);
+  return s && r && w(e, o, r), r;
+};
+const _ = {
+  noBorder: "no-border",
+  noPadding: "no-padding",
+  stretch: "stretch"
+};
+var p, a;
+const y = class y extends b {
   constructor() {
-    super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+    super(...arguments);
+    d(this, p);
+    d(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
+  }
+  _handleStateChange(o, s, r) {
+    v(m(this, a), _[o]).set(r);
   }
   render() {
-    return m`
-			<div
-				class=${f({
-      card: !0,
-      "card--no-border": this.noBorder,
-      "card--no-padding": this.noPadding,
-      "card--stretch": this.stretch
-    })}
-			>
-				<slot></slot>
-			</div>
-		`;
+    return O`<slot id="root"></slot>`;
   }
 };
-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");
+p = new WeakMap(), a = new WeakMap(), y.styles = [B, j];
+let n = y;
+i([
+  f({ type: Boolean, attribute: "no-border" })
+], n.prototype, "noBorder", 2);
+i([
+  f({ type: Boolean, attribute: "no-padding" })
+], n.prototype, "noPadding", 2);
+i([
+  f({ type: Boolean })
+], n.prototype, "stretch", 2);
+i([
+  P(Object.keys(_))
+], n.prototype, "_handleStateChange", 1);
 export {
-  r as SkfCard
+  n as SkfCard
 };

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

@@ -1,34 +1,47 @@
 import { css as r } from "lit";
 const a = r`
-	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-	:host {
-		contain: layout;
-	}
+			#root {
+				--_skf-card-border-color: var(--skf-border-color-tertiary);
+				--_skf-card-padding: var(--skf-spacing-100);
+				--_skf-card-shadow: var(--skf-shadow-md);
 
-	:host([stretch]) {
-		block-size: 100%;
-	}
+				background-color: var(--skf-bg-color-neutral-1);
+				border: var(--skf-border-width-sm) solid var(--_skf-card-border-color);
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--_skf-card-shadow);
+				display: block;
+				padding: var(--_skf-card-padding);
+			}
+		}
 
-	.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));
-	}
+		@layer mods {
+			:host(:state(no-border)) {
+				#root {
+					--_skf-card-border-color: transparent;
+					--_skf-card-shadow: none;
+				}
+			}
 
-	.card--no-border {
-		--_skf-card-border-color: transparent;
-	}
+			:host(:state(no-padding)) {
+				#root {
+					--_skf-card-padding: 0;
+				}
+			}
 
-	.card--no-padding {
-		--_skf-card-padding: 0;
-	}
+			:host(:state(stretch)) {
+				block-size: 100%;
 
-	.card--stretch {
-		block-size: inherit;
+				#root {
+					block-size: inherit;
+				}
+			}
+		}
 	}
 `;
 export {

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

@@ -1,5 +1,6 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -7,10 +8,10 @@ import { type CSSResultGroup } from 'lit';
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/94464f-checkbox) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change {object} - When the value of the input changes
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The Radios label. Alternatively, you can use the `label` attribute.
  *
@@ -24,26 +25,24 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
      */
     private _initiallyChecked;
     /** If defined, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    get checked(): boolean;
+    set checked(value: boolean);
     /** If true, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-    indeterminate?: boolean;
+    indeterminate: boolean;
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, styles checkbox using provided severity
-     * @type { "alert" | "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, styles checkbox using provided severity */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the checkbox */
     size: 'sm' | 'md';
     /** The current value of the input field  */
@@ -53,8 +52,13 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
+    /** @internal */
+    handleCheckedChange(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     protected firstUpdated(): void;
     /** @internal */