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

package/README.md

@@ -221,24 +221,7 @@ import { SkfInput } from "@skf-design-system/ui-components";
 <skf-input name="input" onchange={(e) => console.log((e.target as unknown as SkfInput).value)}></skf-input>
 ```
 
-### React 18
-
-> Note, for React 18 it is not necessary to install an extra plugin to get code completion since you are writing in react
-
-React 18 does not support native web components out of the box. If you want to use SKF UI components with React 18 you will have to use our generated wrappers in order to do so.
-
-```tsx
-import { SkfInput } from "@skf-design-system/ui-components/react/index.js";
-
-...
-
-<SkfInput
-  name="input"
-  onChange={(e) => {
-    console.log( e.target.value );
-  }}
-/>
-```
+⚠️ **React 18** does not support native web components. If you want to use this library you must upgrade React to version 19.
 
 ### Setting up code completion
 

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

@@ -14,7 +14,7 @@ import { type CSSResultGroup, type PropertyValues } from 'lit';
 export declare class SkfAccordion extends SkfElement {
     static styles: CSSResultGroup;
     /** If true, will animate the expand/collapse state */
-    animated?: boolean;
+    animated: boolean;
     /**
      * Defines which heading element will be rendered
      * @type { "h1" | "h2" | "h3" | "h4" }
@@ -23,11 +23,11 @@ export declare class SkfAccordion extends SkfElement {
     /** If true, adds a gap between each item */
     gap: boolean;
     /** If true, allowes multiple accordion items to open */
-    multiple?: boolean;
+    multiple: boolean;
     /** If true, renders the small version */
-    small?: boolean;
+    small: boolean;
     /** If true, will truncate all headings in collapsed state */
-    truncate?: boolean;
+    truncate: boolean;
     /** @internal */
     private $accordionItems;
     protected updated(_changedProperties: PropertyValues): void;

package/dist/components/accordion/accordion.component.js

@@ -1,18 +1,18 @@
 import "../collapse/collapse.js";
-import { SkfElement as h } from "../../internal/components/skf-element.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
 import m from "../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as a, queryAssignedNodes as d } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { styles as g } from "./accordion.styles.js";
-var y = Object.defineProperty, s = (u, t, i, o) => {
-  for (var r = void 0, l = u.length - 1, p; l >= 0; l--)
-    (p = u[l]) && (r = p(t, i, r) || r);
+var y = Object.defineProperty, s = (u, t, i, l) => {
+  for (var r = void 0, o = u.length - 1, h; o >= 0; o--)
+    (h = u[o]) && (r = h(t, i, r) || r);
   return r && y(t, i, r), r;
 };
-const n = class n extends h {
+const n = class n extends p {
   constructor() {
-    super(...arguments), this.headingAs = "h2", this.gap = !1, this._setItemAttributes = () => {
+    super(...arguments), this.animated = !1, this.headingAs = "h2", this.gap = !1, this.multiple = !1, this.small = !1, this.truncate = !1, this._setItemAttributes = () => {
       this.items.forEach((t) => {
         t.setAttribute("heading-as", this.headingAs), this.animated ? t.setAttribute("animated", "") : t.hasAttribute("animated") && t.removeAttribute("animated"), this.small ? t.setAttribute("small", "") : t.hasAttribute("small") && t.removeAttribute("small"), this.truncate ? t.setAttribute("truncate", "") : t.hasAttribute("truncate") && t.removeAttribute("truncate");
       });
@@ -28,8 +28,8 @@ const n = class n extends h {
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
     const i = t.target;
-    this.items.length && this.items.forEach((o) => {
-      o !== i && o.hasAttribute("expanded") && o.setClose();
+    this.items.length && this.items.forEach((l) => {
+      l !== i && l.hasAttribute("expanded") && l.setClose();
     });
   }
   render() {

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

@@ -1,8 +1,9 @@
-import type { SkfIcon } from '../icon/icon.component.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfAlertIcon = Icon;
+type SkfAlertSeverity = SeverityFgColor;
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
  *
@@ -20,15 +21,13 @@ export declare class SkfAlert extends SkfElement {
     /** Close button aria-label */
     buttonLabel: string;
     /** If defined, displays leading icon */
-    icon?: SkfIcon['name'];
+    icon?: SkfAlertIcon;
     /** If true, renders with an close button and sets aria-role to `status` */
-    persistent?: boolean;
-    /**
-     * If defined, gives the supplied appearance
-     * @type { "error" | "info" | "warning" | "success" | "alert" }
-     */
-    severity?: SeverityFgColor;
+    persistent: boolean;
+    /** If defined, gives the supplied appearance */
+    severity?: SkfAlertSeverity;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/alert/alert.component.js

@@ -1,27 +1,27 @@
 import "../icon/icon.js";
 import { SkfElement as y } from "../../internal/components/skf-element.js";
 import f from "../../styles/component.styles.js";
-import { html as m, nothing as u } from "lit";
+import { nothing as h, html as p } from "lit";
 import { property as s } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import { styles as v } from "./alert.styles.js";
-var b = Object.defineProperty, r = (n, l, a, d) => {
-  for (var t = void 0, i = n.length - 1, c; i >= 0; i--)
-    (c = n[i]) && (t = c(l, a, t) || t);
-  return t && b(l, a, t), t;
+var b = Object.defineProperty, r = (l, a, n, d) => {
+  for (var t = void 0, i = l.length - 1, c; i >= 0; i--)
+    (c = l[i]) && (t = c(a, n, t) || t);
+  return t && b(a, n, t), t;
 };
 const o = class o extends y {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => {
+    super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
     };
   }
   render() {
-    return m`
+    return p`
 			<div
 				aria-describedby="main"
-				class=${h({
+				class=${u({
       alert: !0,
       "alert--severity-alert": this.severity === "alert",
       "alert--severity-error": this.severity === "error",
@@ -33,15 +33,15 @@ const o = class o extends y {
 				role=${this.persistent ? "status" : "alert"}
 			>
 				<skf-icon
-					color=${p(this.severity ?? "secondary")}
-					name=${p(this.icon ?? "info")}
+					color=${m(this.severity ?? "secondary")}
+					name=${m(this.icon ?? "info")}
 					size="sm"
 				></skf-icon>
 				<div class="alert__body">
 					<slot class="alert__main" id="main"></slot>
 					<slot name="link"></slot>
 				</div>
-				${this.persistent ? m`
+				${this.persistent ? p`
 							<button
 								@click="${this._handleClose}"
 								aria-label=${this.buttonLabel}
@@ -50,7 +50,7 @@ const o = class o extends y {
 							>
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : u}
+						` : h}
 			</div>
 		`;
   }

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

@@ -4,7 +4,7 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
  *
  * @event click - Fired when the item is clicked
  *

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

@@ -33,8 +33,8 @@ export declare class SkfButton extends SkfElement {
     icon?: SkfIcon['name'];
     /** If true, removes border */
     iconOnly: boolean;
-    /** If provided, determines the positioning of the icon in relation to the text  */
-    iconPosition?: 'left' | 'right';
+    /** Determines the positioning of the icon in relation to the text  */
+    iconPosition: 'left' | 'right';
     /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
     loading: boolean;
     noValidate: boolean;
@@ -55,7 +55,7 @@ export declare class SkfButton extends SkfElement {
     private $button?;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    _handleLoadingChange(): void;
     /** @internal */
     _handleClick: (e: MouseEvent) => void;
     /** @internal */

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

@@ -1,18 +1,19 @@
 import "../icon/icon.js";
 import "../loader/loader.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 $ 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;
+import { SkfElement as m } from "../../internal/components/skf-element.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import u from "../../styles/component.styles.js";
+import { html as d, LitElement as _, nothing as p } from "lit";
+import { property as o, state as v, query as c } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import g from "./button.styles.js";
+var O = Object.defineProperty, V = Object.getOwnPropertyDescriptor, s = (y, t, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? V(t, l) : t, a = y.length - 1, n; a >= 0; a--)
+    (n = y[a]) && (e = (r ? n(t, l, e) : n(e)) || e);
+  return r && e && O(t, l, e), e;
 };
-const d = class d extends b {
+const h = class h extends m {
   constructor() {
     super(), this._transitionOptions = {
       duration: 200,
@@ -20,13 +21,13 @@ const d = class d extends b {
     }, 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 e, a, n;
+      const t = !((e = this._internals.form) != null && e.reportValidity()), l = !this.noValidate, r = !((a = this._internals.form) != null && a.hasAttribute("no-validate"));
+      (l || r) && t || (n = this._internals.form) == null || n.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();
+    }, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${b(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -34,8 +35,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() {
@@ -52,11 +53,11 @@ 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 d`
 			<button
 				?disabled=${this.disabled || this.loading}
 				aria-busy=${this.loading}
-				class=${v({
+				class=${$({
       btn: !0,
       "btn--destructive": this.destructive,
       "btn--icon-only": this.iconOnly,
@@ -67,65 +68,68 @@ const d = class d extends b {
       "btn--variant-secondary": this.variant === "secondary",
       "btn--variant-tertiary": this.variant === "tertiary"
     })}
-				type=${y(this.type)}
+				type=${b(this.type)}
 				@click=${this._handleClick}
 				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 ? d`<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() : p}
+					${this.iconOnly ? p : d`<slot class="btn__label"></slot>`}
+					${this.icon && this.iconPosition === "right" ? this._renderIcon() : p}
 				</div>
 			</button>
 		`;
   }
 };
-d.formAssociated = !0, d.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 }, d.styles = [f, $];
-let i = d;
+h.formAssociated = !0, h.shadowRootOptions = { ..._.shadowRootOptions, delegatesFocus: !0 }, h.styles = [u, g];
+let i = h;
 s([
-  e({ type: Boolean })
-], i.prototype, "destructive");
+  o({ type: Boolean })
+], i.prototype, "destructive", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "disabled");
+  o({ type: Boolean })
+], i.prototype, "disabled", 2);
 s([
-  e()
-], i.prototype, "icon");
+  o()
+], i.prototype, "icon", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "iconOnly");
+  o({ type: Boolean })
+], i.prototype, "iconOnly", 2);
 s([
-  e({ attribute: "icon-position" })
-], i.prototype, "iconPosition");
+  o({ attribute: "icon-position" })
+], i.prototype, "iconPosition", 2);
 s([
-  e({ type: Boolean })
-], i.prototype, "loading");
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
 s([
-  e({ type: Boolean, attribute: "no-validate" })
-], i.prototype, "noValidate");
+  o({ type: Boolean, attribute: "no-validate" })
+], i.prototype, "noValidate", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "size");
+  o({ reflect: !0 })
+], i.prototype, "size", 2);
 s([
-  e()
-], i.prototype, "type");
+  o()
+], i.prototype, "type", 2);
 s([
-  e({ reflect: !0 })
-], i.prototype, "variant");
+  o({ reflect: !0 })
+], i.prototype, "variant", 2);
 s([
-  _()
-], i.prototype, "_loaderVisible");
+  v()
+], i.prototype, "_loaderVisible", 2);
 s([
-  p("skf-loader")
-], i.prototype, "$loader");
+  c("skf-loader")
+], i.prototype, "$loader", 2);
 s([
-  p("#body")
-], i.prototype, "$body");
+  c("#body")
+], i.prototype, "$body", 2);
 s([
-  p("button")
-], i.prototype, "$button");
+  c("button")
+], i.prototype, "$button", 2);
+s([
+  f("loading", { afterUpdate: !0 })
+], i.prototype, "_handleLoadingChange", 1);
 export {
   i as SkfButton
 };

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

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

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

@@ -1,36 +1,33 @@
 import { css as r } from "lit";
-const a = r`
-	/* stylelint-disable selector-class-pattern */
+const s = r`
+	@layer components {
+		@layer base {
+			:host {
+				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);
+				contain: layout;
+				padding: var(--_skf-card-padding, var(--skf-spacing-100));
+			}
+		}
 
-	:host {
-		contain: layout;
-	}
-
-	:host([stretch]) {
-		block-size: 100%;
-	}
-
-	.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));
-	}
-
-	.card--no-border {
-		--_skf-card-border-color: transparent;
-	}
+		@layer mods {
+			:host([stretch]) {
+				block-size: 100%;
+			}
 
-	.card--no-padding {
-		--_skf-card-padding: 0;
-	}
+			:host([no-border]) {
+				--_skf-card-border-color: transparent;
+			}
 
-	.card--stretch {
-		block-size: inherit;
+			:host([no-padding]) {
+				--_skf-card-padding: 0;
+			}
+		}
 	}
 `;
 export {
-  a as styles
+  s as styles
 };

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

@@ -7,8 +7,8 @@ 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
  *
@@ -24,13 +24,14 @@ 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 */
@@ -43,7 +44,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
      */
     severity?: FormFieldBaseProps['severity'];
     /** 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,6 +54,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
+    handleCheckedChange(): void;
     handleInvalidChange(): void;
     handleDebugInvalid(): void;
     handleCustomInvalidChange(): void;