@skf-design-system/ui-components 1.0.2-beta.2 → 1.0.2-beta.4

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:

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
  *

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 {
@@ -27,15 +27,15 @@ const n = class n extends p {
   _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 })

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

@@ -7,7 +7,7 @@ import { type CSSResultGroup } from 'lit';
  *
  * 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,6 +15,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-alert
  */
 export declare class SkfAlert extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** Close button aria-label */
     buttonLabel: string;
@@ -24,6 +25,9 @@ export declare class SkfAlert extends SkfElement {
     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,76 @@
-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 d = (t, e, s) => e.has(t) || u("Cannot " + s);
+var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), f = (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), y = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+import "../icon/icon.js";
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { nothing as w, html as v } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { styles as O } from "./alert.styles.js";
+var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? k(e, s) : e, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (i = (o ? h(e, s, i) : h(i)) || i);
+  return o && i && P(e, s, i), i;
+}, n, a;
+const b = class b extends g {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
+    super(...arguments);
+    f(this, n);
+    f(this, a);
+    y(this, n, this.attachInternals()), y(this, a, m(this, n).states), this.buttonLabel = "Close", 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"];
+    C(m(this, a), 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 v`
+			<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`
-							<button
-								@click="${this._handleClose}"
-								aria-label=${this.buttonLabel}
-								class="alert__btn"
-								type="button"
-							>
+				${this.persistent ? v`
+							<button @click="${this._handleClose}" aria-label=${this.buttonLabel} type="button">
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : h}
+						` : w}
 			</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(), b.styles = [$, O];
+let r = b;
+l([
+  p({ type: String, attribute: "button-label" })
+], r.prototype, "buttonLabel", 2);
+l([
+  p({ type: String })
+], r.prototype, "icon", 2);
+l([
+  p({ type: Boolean })
+], r.prototype, "persistent", 2);
+l([
+  p({ type: String })
+], r.prototype, "severity", 2);
+l([
+  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,17 +1,16 @@
 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, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(t, s) : t, o = a.length - 1, l; o >= 0; o--)
+    (l = a[o]) && (e = (r ? l(t, s, e) : l(e)) || e);
+  return r && e && v(t, s, e), e;
 };
-const n = class n extends f {
+const c = class c extends h {
   constructor() {
     super(...arguments), this._isCurrent = !1, this._clickHandler = (t, s) => {
       var r;
@@ -28,32 +27,32 @@ 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()
+c.styles = [m, C];
+let i = c;
+p([
+  f({ type: String })
 ], i.prototype, "href", 2);
-c([
-  m({ attribute: !1 })
+p([
+  f({ attribute: !1 })
 ], i.prototype, "onClick", 1);
-c([
+p([
   _()
 ], i.prototype, "_isCurrent", 2);
 export {

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 {

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

@@ -1,18 +1,28 @@
 import { css as r } from "lit";
-const o = r`
-	/* stylelint-disable selector-class-pattern */
+const e = r`
 	@layer components {
 		:host {
 			contain: layout;
 		}
 
-		.breadcrumb-item {
+		#root {
+			--_skf-breadcrumb-item-color: inherit;
+
 			align-items: center;
 			display: flex;
 		}
 
-		.breadcrumb-item__label {
-			color: var(--_skf-breadcrumb-item-color, inherit);
+		span {
+			display: block;
+			margin-inline: var(--skf-spacing-25);
+
+			:host(:last-of-type) & {
+				display: none;
+			}
+		}
+
+		.label {
+			color: var(--_skf-breadcrumb-item-color);
 
 			&:is(slot) {
 				display: inline;
@@ -46,17 +56,8 @@ const o = r`
 				}
 			}
 		}
-
-		.breadcrumb-item__separator {
-			display: block;
-			margin-inline: var(--skf-spacing-25);
-
-			:host(:last-of-type) & {
-				display: none;
-			}
-		}
 	}
 `;
 export {
-  o as styles
+  e as styles
 };

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

@@ -13,17 +13,20 @@ import type { SkfBreadcrumbItem } from './breadcrumb-item.component.js';
  * @tagname skf-breadcrumb
  */
 export declare class SkfBreadcrumb extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** aria-label for the breadcrumb control  */
     label: string;
-    /** Displays an alternative size */
-    size: 'md' | 'sm';
+    /** If true, renders a smaller version */
+    small: boolean;
     /** @internal */
     _isDynamic: boolean;
     /** @internal */
     _items: NodeListOf<SkfBreadcrumbItem>;
     firstUpdated(): void;
     /** @internal */
+    _handleStateChange(): void;
+    /** @internal */
     private _handleSlotChange;
     render(): import("lit").TemplateResult;
 }