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

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.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;
 }

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

@@ -1,60 +1,65 @@
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import "lit";
-import { property as p, state as _, queryAssignedElements as d } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { literal as h, html as b } from "lit/static-html.js";
-import { styles as g } from "./breadcrumb.styles.js";
-var v = Object.defineProperty, r = (a, t, i, n) => {
-  for (var s = void 0, l = a.length - 1, m; l >= 0; l--)
-    (m = a[l]) && (s = m(t, i, s) || s);
-  return s && v(t, i, s), s;
+var f = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends c {
+var g = (t, s, e) => s.has(t) || f("Cannot " + e);
+var p = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), y = (t, s, e, i) => (g(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as D } from "../../internal/helpers/watch.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
+import "lit";
+import { property as u, state as S, queryAssignedElements as O } from "lit/decorators.js";
+import { html as P } from "lit/static-html.js";
+import { styles as b } from "./breadcrumb.styles.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (t, s, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? E(s, e) : s, h = t.length - 1, m; h >= 0; h--)
+    (m = t[h]) && (r = (i ? m(s, e, r) : m(r)) || r);
+  return i && r && w(s, e, r), r;
+}, a, l;
+const c = class c extends d {
   constructor() {
-    super(...arguments), this.label = "Breadcrumb", this.size = "md", this._isDynamic = !1, this._handleSlotChange = () => {
-      this._items.forEach((t, i) => {
-        this._isDynamic = !!t.href;
-        const n = i === this._items.length - 1;
-        this._isDynamic && n && (t._isCurrent = !0);
+    super(...arguments);
+    _(this, a);
+    _(this, l);
+    y(this, a, this.attachInternals()), y(this, l, p(this, a).states), this.label = "Breadcrumb", this.small = !1, this._isDynamic = !1, this._handleSlotChange = () => {
+      this._items.forEach((e, i) => {
+        this._isDynamic = this._isDynamic || !!e.href, this.role = this._isDynamic ? "navigation" : null;
+        const r = i === this._items.length - 1;
+        this._isDynamic && r && (e._isCurrent = !0);
       });
     };
   }
   firstUpdated() {
     this._handleSlotChange();
   }
+  _handleStateChange() {
+    C(p(this, l), "small").set(this.small);
+  }
   render() {
-    const t = this._isDynamic ? h`nav` : h`div`;
-    return b`
-			<${t}
-				aria-label=${u(this.label && this._isDynamic ? this.label : void 0)}
-				class=${y({
-      breadcrumb: !0,
-      "breadcrumb--small": this.size === "sm"
-    })}
-			>
-				<ol class="breadcrumb__list">
-					<slot @slotchange=${this._handleSlotChange}></slot>
-				</ol>
-			</{tag}>
+    return P`
+			<ol id="root">
+				<slot @slotchange=${this._handleSlotChange}></slot>
+			</ol>
 		`;
   }
 };
-o.styles = [f, g];
-let e = o;
-r([
-  p()
-], e.prototype, "label");
-r([
-  p({ reflect: !0 })
-], e.prototype, "size");
-r([
-  _()
-], e.prototype, "_isDynamic");
-r([
-  d()
-], e.prototype, "_items");
+a = new WeakMap(), l = new WeakMap(), c.styles = [v, b];
+let o = c;
+n([
+  u({ type: String })
+], o.prototype, "label", 2);
+n([
+  u({ type: Boolean })
+], o.prototype, "small", 2);
+n([
+  S()
+], o.prototype, "_isDynamic", 2);
+n([
+  O()
+], o.prototype, "_items", 2);
+n([
+  D("small")
+], o.prototype, "_handleStateChange", 1);
 export {
-  e as SkfBreadcrumb
+  o as SkfBreadcrumb
 };

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

@@ -1,19 +1,22 @@
 import { css as t } from "lit";
 const s = t`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
-			contain: layout;
-		}
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-		.breadcrumb--small {
-			font-size: var(--skf-font-size-75);
-			font-weight: var(--skf-font-weight-medium);
+			#root {
+				align-items: center;
+				display: flex;
+			}
 		}
 
-		.breadcrumb__list {
-			align-items: center;
-			display: flex;
+		@layer mods {
+			:host(:state(small)) #root {
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+			}
 		}
 	}
 `;