@skf-design-system/ui-components 1.0.2-beta.1 → 1.0.2-beta.11

package/README.md

@@ -87,10 +87,16 @@ How you get started using our components is of course a bit different depending
 
 In order for our components to work as intended you need to import our global styles where appropiate e.g. App.tsx.
 
-```tsx
+```ts
 import '@skf-design-system/ui-components/styles/global.css';
 ```
 
+If you want to handle the loading of the SKF fonts yourself, you can use the alternative global css file:
+
+```ts
+import '@skf-design-system/ui-components/styles/global-alt.css';
+```
+
 ### Angular
 
 In order for our components to get the correct styling you need add our global styling to your project. In angular you can do that in the angular.json like this:
@@ -345,6 +351,24 @@ Checklist:
 
 </details>
 
+## Known inconsistencies coming from the React library and v1 Web Components
+
+Our focus going forward is on the v2 package of Web Components (new brand design) and as our bandwidth is limited work done to the v1 Web Compnent library will be very limited.
+
+| React Component | WC v1 - Solution                                                              |
+| --------------- | ----------------------------------------------------------------------------- |
+| IconButton      | Use `skf-link` without text or `skf-button` variant tertiary, without a label |
+| Search          | Search is now a variant of `skf-input`                                        |
+| Image           | Was deemed not adding value over the native `picture`/`img` tag               |
+| Paragraph       | Was deemed not adding value over the native p tag                             |
+| useTooltip      | Not needed, `skf-tooltip` handles it common state internally                  |
+| usePopup        | Renamed `skf-popover`, no need for a hook                                     |
+| EmptyState      | Missing but easy to copy svg from React and recreate                          |
+| SkfUiProvider   | Not needed, you add our global css as mentioned above                         |
+| ToastProvider   | `skf-toast` handles its own internal state, no provider needed                |
+| ts tokens       | The global css contains all tokens as css custom vars which should suffice    |
+| Missing tokens  | A few tokens are missing. Report as issue but expect to create your own       |
+
 ## 🧑‍⚖️ License
 
 Copyright SKF 2024

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

@@ -1,17 +1,17 @@
 import "../icon/icon.js";
-import { SkfElement as l } from "../../internal/components/skf-element.js";
-import { componentStyles as p } from "../../styles/component.styles.js";
-import { property as a } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as h } from "lit/directives/if-defined.js";
-import { literal as f, html as u } from "lit/static-html.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { property as i } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { literal as r, html as f } from "lit/static-html.js";
 import { styles as _ } from "./accordion-item.styles.js";
-var y = Object.defineProperty, i = (r, o, d, g) => {
-  for (var t = void 0, s = r.length - 1, c; s >= 0; s--)
-    (c = r[s]) && (t = c(o, d, t) || t);
-  return t && y(o, d, t), t;
+var g = Object.defineProperty, s = (d, e, c, y) => {
+  for (var a = void 0, o = d.length - 1, l; o >= 0; o--)
+    (l = d[o]) && (a = l(e, c, a) || a);
+  return a && g(e, c, a), a;
 };
-const n = class n extends l {
+const n = class n extends p {
   constructor() {
     super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
       this.dispatchEvent(
@@ -32,27 +32,38 @@ const n = class n extends l {
     this.expanded = !0;
   }
   render() {
-    const o = f`${this.headingAs}`;
-    return u`
-			<div class=${m({
+    let e;
+    switch (!0) {
+      case this.headingAs === "h3":
+        e = r`h3`;
+        break;
+      case this.headingAs === "h4":
+        e = r`h4`;
+        break;
+      default:
+        e = r`h2`;
+        break;
+    }
+    return f`
+			<div class=${h({
       "accordion-item": !0,
       "accordion-item--animated": this.animated,
       "accordion-item--expanded": this.expanded,
       "accordion-item--small": this.small,
       "accordion-item--truncate": this.truncate
     })}>
-				<${o} class="accordion-item__heading">
+				<${e} class="accordion-item__heading">
 					<button
 						@click=${this._toggle}
 						aria-controls="main"
-						aria-expanded=${h(this.expanded ? "true" : "false")}
+						aria-expanded=${u(this.expanded ? "true" : "false")}
 						class="accordion-item__btn"
 						type="button"
 					>
 						<span class="accordion-item__label">${this.heading}</span>
 						<skf-icon class="accordion-item__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
 					</button>
-				</${o}>
+				</${e}>
 				<div class="accordion-item__body">
 					<div class="accordion-item__main" data-testid="main" id="main">
 						<slot></slot>
@@ -62,26 +73,26 @@ const n = class n extends l {
 		`;
   }
 };
-n.styles = [p, _];
-let e = n;
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "animated");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "expanded");
-i([
-  a()
-], e.prototype, "heading");
-i([
-  a({ attribute: "heading-as" })
-], e.prototype, "headingAs");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "small");
-i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "truncate");
+n.styles = [m, _];
+let t = n;
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "animated");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "expanded");
+s([
+  i()
+], t.prototype, "heading");
+s([
+  i({ attribute: "heading-as" })
+], t.prototype, "headingAs");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "small");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "truncate");
 export {
-  e as SkfAccordionItem
+  t as SkfAccordionItem
 };

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

@@ -1,6 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup, type PropertyValues } from 'lit';
-import type { SkfAccordionItemHeadingType } from './accordion-item.js';
+import type { SkfAccordionItemHeadingType } from './accordion-item.component.js';
 /**
  * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
  *
@@ -25,7 +25,7 @@ export declare class SkfAccordion extends SkfElement {
     /** If true, will truncate all headings in collapsed state */
     truncate: boolean;
     /** @internal */
-    private $accordionItems;
+    private _accordionItems;
     protected updated(_changedProperties: PropertyValues): void;
     /** @internal */
     private get items();

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

@@ -1,12 +1,12 @@
 import { SkfElement as p } from "../../internal/components/skf-element.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import { html as m } from "lit";
+import { componentStyles as 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, l) => {
-  for (var r = void 0, o = u.length - 1, h; o >= 0; o--)
-    (h = u[o]) && (r = h(t, i, r) || r);
+var y = Object.defineProperty, s = (u, t, i, o) => {
+  for (var r = void 0, l = u.length - 1, h; l >= 0; l--)
+    (h = u[l]) && (r = h(t, i, r) || r);
   return r && y(t, i, r), r;
 };
 const n = class n extends p {
@@ -22,20 +22,20 @@ const n = class n extends p {
   }
   /** @internal */
   get items() {
-    return [...this.$accordionItems].filter((t) => t.localName === "skf-accordion-item");
+    return [...this._accordionItems].filter((t) => t.localName === "skf-accordion-item");
   }
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
     const i = t.target;
-    this.items.length && this.items.forEach((l) => {
-      l !== i && l.hasAttribute("expanded") && l.setClose();
+    this.items.length && this.items.forEach((o) => {
+      o !== i && o.hasAttribute("expanded") && o.setClose();
     });
   }
   render() {
-    return m`
+    return f`
 			<div class=${c({ "accordion--gap": this.gap })}>
 				<slot
-					@skf-collapse-toggle=${(t) => {
+					@skf-accordion-item-toggle=${(t) => {
       this._onChildToggle(t);
     }}
 					@slotchange=${this._setItemAttributes}
@@ -44,7 +44,7 @@ const n = class n extends p {
 		`;
   }
 };
-n.styles = [g, f];
+n.styles = [g, m];
 let e = n;
 s([
   a({ type: Boolean, reflect: !0 })
@@ -66,7 +66,7 @@ s([
 ], e.prototype, "truncate");
 s([
   d()
-], e.prototype, "$accordionItems");
+], e.prototype, "_accordionItems");
 export {
   e as SkfAccordion
 };

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

@@ -1,13 +1,14 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon, Severity } from '../../internal/types.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
  *
  * See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
  *
- * @event skf-alert-close - Fires when the close button is clicked
+ * @event {CustomEvent} skf-alert-close - Fires when the close button is clicked
  *
  * @slot - Alert message. **Notice!** See design principles for approved content
  * @slot link - Slot for the link
@@ -15,15 +16,19 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-alert
  */
 export declare class SkfAlert extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /** Close button aria-label */
-    buttonLabel: string;
     /** If defined, displays leading icon */
     icon?: Icon;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, renders with an close button and sets aria-role to `status` */
     persistent: boolean;
     /** If defined, gives the supplied appearance */
     severity?: Severity;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;

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

@@ -1,73 +1,82 @@
-import "../icon/icon.js";
-import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { componentStyles as y } from "../../styles/component.styles.js";
-import { nothing as h, html as p } from "lit";
-import { property as s } from "lit/decorators.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 u = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends f {
+var g = (t, e, s) => e.has(t) || u("Cannot " + s);
+var c = (t, e, s) => (g(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), m = (t, e, s, o) => (g(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+import "../icon/icon.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { stateMap as w } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { LocalizeController as z } from "../../utilities/localize.js";
+import { nothing as O, html as b } from "lit";
+import { property as f } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { styles as P } from "./alert.styles.js";
+var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? D(e, s) : e, y = t.length - 1, d; y >= 0; y--)
+    (d = t[y]) && (i = (o ? d(e, s, i) : d(i)) || i);
+  return o && i && k(e, s, i), i;
+}, n, a, l;
+const v = class v extends C {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
+    super(...arguments);
+    h(this, n);
+    h(this, a);
+    h(this, l);
+    m(this, n, new z(this)), m(this, a, this.attachInternals()), m(this, l, c(this, a).states), this.lang = "en", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
     };
   }
+  connectedCallback() {
+    super.connectedCallback(), this.role = this.persistent ? "status" : "alert";
+  }
+  _handleStateChange() {
+    const s = ["error", "info", "success", "warning"];
+    w(c(this, l), s).set(this.severity);
+  }
   render() {
-    return p`
-			<div
-				aria-describedby="main"
-				class=${u({
-      alert: !0,
-      "alert--severity-error": this.severity === "error",
-      "alert--severity-info": this.severity === "info",
-      "alert--severity-success": this.severity === "success",
-      "alert--severity-warning": this.severity === "warning",
-      [this.className]: !0
-    })}
-				role=${this.persistent ? "status" : "alert"}
-			>
+    return b`
+			<div id="root">
 				<skf-icon
-					color=${m(this.severity ?? "secondary")}
-					name=${m(this.icon ?? "info")}
+					color=${_(this.severity ?? "secondary")}
+					name=${_(this.icon ?? "info")}
 					size="sm"
 				></skf-icon>
-				<div class="alert__body">
-					<slot class="alert__main" id="main"></slot>
+				<div id="body">
+					<slot id="main"></slot>
 					<slot name="link"></slot>
 				</div>
-				${this.persistent ? p`
+				${this.persistent ? b`
 							<button
 								@click="${this._handleClose}"
-								aria-label=${this.buttonLabel}
-								class="alert__btn"
+								aria-label=${c(this, n).term("close")}
 								type="button"
 							>
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : h}
+						` : O}
 			</div>
 		`;
   }
 };
-o.styles = [y, v];
-let e = o;
-r([
-  s({ attribute: "button-label" })
-], e.prototype, "buttonLabel");
-r([
-  s()
-], e.prototype, "icon");
-r([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "persistent");
-r([
-  s({ reflect: !0 })
-], e.prototype, "severity");
+n = new WeakMap(), a = new WeakMap(), l = new WeakMap(), v.styles = [$, P];
+let r = v;
+p([
+  f({ type: String })
+], r.prototype, "icon", 2);
+p([
+  f({ type: String })
+], r.prototype, "lang", 2);
+p([
+  f({ type: Boolean })
+], r.prototype, "persistent", 2);
+p([
+  f({ type: String })
+], r.prototype, "severity", 2);
+p([
+  S("severity")
+], r.prototype, "_handleStateChange", 1);
 export {
-  e as SkfAlert
+  r as SkfAlert
 };

package/dist/components/alert/alert.styles.js

@@ -1,63 +1,67 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
-			contain: layout;
-		}
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-		.alert {
-			background-color: var(--_skf-alert-bg-color, var(--skf-bg-color-neutral-2));
-			border: var(--skf-border-width-sm) solid
-				var(--_skf-alert-border-color, var(--skf-border-color-primary));
-			border-radius: var(--skf-border-radius-sm);
-			box-shadow: var(--skf-shadow-md);
-			display: flex;
-			font-size: var(--skf-font-size-75);
-			gap: var(--skf-spacing-50);
-			padding-block: var(--skf-spacing-75);
-			padding-inline: var(--skf-spacing-50);
-		}
+			#root {
+				--_skf-alert-bg-color: var(--skf-bg-color-neutral-2);
+				--_skf-alert-border-color: var(--skf-border-color-primary);
 
-		.alert--severity-error {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-error);
-		}
+				background-color: var(--_skf-alert-bg-color);
+				border: var(--skf-border-width-sm) solid var(--_skf-alert-border-color);
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--skf-shadow-md);
+				display: flex;
+				font-size: var(--skf-font-size-75);
+				gap: var(--skf-spacing-50);
+				padding-block: var(--skf-spacing-75);
+				padding-inline: var(--skf-spacing-50);
+			}
 
-		.alert--severity-info {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-info);
-		}
+			#body {
+				display: flex;
+				flex: auto;
+				flex-wrap: wrap;
+				gap: var(--skf-spacing-25) var(--skf-spacing-100);
+				justify-content: space-between;
+			}
 
-		.alert--severity-success {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-success);
-		}
+			#main {
+				display: block;
+			}
 
-		.alert--severity-warning {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
-		}
+			button {
+				display: inline-flex;
+			}
 
-		.alert__body {
-			display: flex;
-			flex: auto;
-			flex-wrap: wrap;
-			gap: var(--skf-spacing-25) var(--skf-spacing-100);
-			justify-content: space-between;
+			::slotted(skf-link) {
+				text-transform: uppercase;
+			}
 		}
 
-		.alert__main {
-			display: block;
-		}
+		@layer mods {
+			:host(:state(error)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-error);
+			}
 
-		::slotted(skf-link) {
-			text-transform: uppercase;
-		}
+			:host(:state(info)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host(:state(success)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-success);
+			}
 
-		.alert__btn {
-			cursor: pointer;
-			display: inline-flex;
+			:host(:state(warning)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;

package/dist/components/breadcrumb/breadcrumb-item.component.js

@@ -1,21 +1,19 @@
 import "../icon/icon.js";
-import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { componentStyles as h } from "../../styles/component.styles.js";
-import { html as a } from "lit";
-import { property as m, state as _ } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { SkfElement as h } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as n } from "lit";
+import { property as f, state as _ } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import { styles as C } from "./breadcrumb-item.styles.js";
-var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (p, t, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? v(t, s) : t, o = p.length - 1, l; o >= 0; o--)
-    (l = p[o]) && (e = (r ? l(t, s, e) : l(e)) || e);
-  return r && e && d(t, s, e), e;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (a, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(t, e) : t, o = a.length - 1, l; o >= 0; o--)
+    (l = a[o]) && (r = (i ? l(t, e, r) : l(r)) || r);
+  return i && r && v(t, e, r), r;
 };
-const n = class n extends f {
+const c = class c extends h {
   constructor() {
-    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, s) => {
-      var r;
-      this._onClick && t.preventDefault(), (r = this._onClick) == null || r.call(this, t, s);
+    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, e) => {
+      this._onClick && t.preventDefault(), this._onClick?.(t, e);
     };
   }
   set onClick(t) {
@@ -28,34 +26,34 @@ const n = class n extends f {
     super.connectedCallback(), this.role = "listitem";
   }
   render() {
-    return a`
-			<div class=${u({ "breadcrumb-item": !0 })}>
-				${this.href ? a`
+    return n`
+			<div id="root">
+				${this.href ? n`
 							<a
 								@click=${this._clickHandler}
-								aria-current=${b(this._isCurrent ? "page" : void 0)}
-								class="breadcrumb-item__label"
+								aria-current=${u(this._isCurrent ? "page" : void 0)}
+								class="label"
 								href=${this.href}
 							>
 								<slot></slot>
 							</a>
-						` : a`<slot class="breadcrumb-item__label"></slot>`}
-				<span class="breadcrumb-item__separator">/</span>
+						` : n`<slot class="label"></slot>`}
+				<span>/</span>
 			</div>
 		`;
   }
 };
-n.styles = [h, C];
-let i = n;
-c([
-  m()
-], i.prototype, "href", 2);
-c([
-  m({ attribute: !1 })
-], i.prototype, "onClick", 1);
-c([
+c.styles = [m, C];
+let s = c;
+p([
+  f({ type: String })
+], s.prototype, "href", 2);
+p([
+  f({ attribute: !1 })
+], s.prototype, "onClick", 1);
+p([
   _()
-], i.prototype, "_isCurrent", 2);
+], s.prototype, "_isCurrent", 2);
 export {
-  i as SkfBreadcrumbItem
+  s as SkfBreadcrumbItem
 };

package/dist/components/breadcrumb/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
-import { SkfBreadcrumbItem } from './breadcrumb-item.component';
-export * from './breadcrumb-item.component';
+import { SkfBreadcrumbItem } from './breadcrumb-item.component.js';
+export * from './breadcrumb-item.component.js';
 export default SkfBreadcrumbItem;
 declare global {
     interface HTMLElementTagNameMap {