@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

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

@@ -1,38 +1,57 @@
-import "../link/link.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
-import { componentStyles as c } from "../../styles/component.styles.js";
-import { html as h } from "lit";
-import { property as f } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { styles as a } from "./nav-item.styles.js";
-var d = Object.defineProperty, p = (i, s, n, y) => {
-  for (var r = void 0, t = i.length - 1, l; t >= 0; t--)
-    (l = i[t]) && (r = l(s, n, r) || r);
-  return r && d(s, n, r), r;
+var y = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends m {
+var u = (t, e, r) => e.has(t) || y("Cannot " + r);
+var h = (t, e, r) => (u(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (t, e, r) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r, s) => (u(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
+import "../link/link.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as g } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as _, state as P } from "lit/decorators.js";
+import { ifDefined as S } from "lit/directives/if-defined.js";
+import { styles as w } from "./nav-item.styles.js";
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? j(e, r) : e, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (o = (s ? c(e, r, o) : c(o)) || o);
+  return s && o && D(e, r, o), o;
+}, n, p;
+const v = class v extends d {
   constructor() {
-    super(...arguments), this.href = "#";
+    super(...arguments);
+    f(this, n);
+    f(this, p);
+    m(this, n, this.attachInternals()), m(this, p, h(this, n).states), this.href = "", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.role = "menuitem";
+    super.connectedCallback(), this.role = "listitem";
+  }
+  _handleStateChange() {
+    g(h(this, p), "vertical").set(this.vertical);
   }
   render() {
-    return h`
-			<skf-link color="inverse" href=${this.href} icon=${u(this.icon)}>
+    return O`
+			<skf-link color="inverse" href=${this.href} icon=${S(this.icon)}>
 				<slot></slot>
 			</skf-link>
 		`;
   }
 };
-o.styles = [c, a];
-let e = o;
-p([
-  f({ reflect: !0 })
-], e.prototype, "href");
-p([
-  f()
-], e.prototype, "icon");
+n = new WeakMap(), p = new WeakMap(), v.styles = [b, w];
+let i = v;
+l([
+  _({ type: String })
+], i.prototype, "href", 2);
+l([
+  _({ type: String })
+], i.prototype, "icon", 2);
+l([
+  P()
+], i.prototype, "vertical", 2);
+l([
+  C("vertical")
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfNavItem
+  i as SkfNavItem
 };

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

@@ -1,36 +1,40 @@
 import { css as t } from "lit";
 const s = t`
 	@layer components {
-		skf-link::part(root) {
-			block-size: var(--skf-header-height);
-			display: flex;
-			padding-inline: var(--skf-spacing-100);
-			position: relative;
-		}
+		@layer base {
+			skf-link::part(root) {
+				block-size: var(--skf-header-height);
+				display: flex;
+				padding-inline: var(--skf-spacing-100);
+				position: relative;
+			}
 
-		skf-link::part(root)::after {
-			content: '';
-			position: absolute;
-			transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
-				var(--skf-motion-easing-ease-in);
-		}
+			skf-link::part(root)::after {
+				content: '';
+				position: absolute;
+				transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
+					var(--skf-motion-easing-ease-in);
+			}
 
-		skf-link::part(root):hover::after {
-			--_skf-nav-link-translate: 0;
-		}
+			skf-link::part(root):hover::after {
+				--_skf-nav-link-translate: 0;
+			}
 
-		:host-context(skf-nav:not([vertical])) skf-link::part(root)::after {
-			border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block-end: 0;
-			inset-inline: 0;
-			translate: 0 var(--_skf-nav-link-translate, 100%);
+			:host(:not(:state(vertical))) skf-link::part(root)::after {
+				border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block-end: 0;
+				inset-inline: 0;
+				translate: 0 var(--_skf-nav-link-translate, 100%);
+			}
 		}
 
-		:host-context(skf-nav[vertical]) skf-link::part(root)::after {
-			border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block: 0;
-			inset-inline-start: 0;
-			translate: var(--_skf-nav-link-translate, -100%) 0;
+		@layer mods {
+			:host(:state(vertical)) skf-link::part(root)::after {
+				border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block: 0;
+				inset-inline-start: 0;
+				translate: var(--_skf-nav-link-translate, -100%) 0;
+			}
 		}
 	}
 `;

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

@@ -1,4 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-nav>` is a component that displays a list of <nav-items>.
@@ -10,8 +11,16 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-nav
  */
 export declare class SkfNav extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    /** Sets the internal language of the component */
+    lang: Language;
+    /** If true, the navigation will be displayed vertically */
     vertical: boolean;
+    /** @internal */
+    private _items;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/nav/nav.component.js

@@ -1,34 +1,60 @@
-import { SkfElement as s } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as p } from "lit";
-import { property as c } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { styles as u } from "./nav.styles.js";
-var v = Object.defineProperty, d = (i, a, l, h) => {
-  for (var e = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (e = n(a, l, e) || e);
-  return e && v(a, l, e), e;
+var u = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends s {
+var g = (t, e, r) => e.has(t) || u("Cannot " + r);
+var p = (t, e, r) => (g(t, e, "read from private field"), r ? r.call(t) : e.get(t)), c = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r, i) => (g(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as b } from "../../internal/helpers/watch.js";
+import { componentStyles as w } from "../../styles/component.styles.js";
+import { LocalizeController as O } from "../../utilities/localize.js";
+import { html as P } from "lit";
+import { property as _, queryAssignedElements as D } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as S } from "./nav.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? x(e, r) : e, f = t.length - 1, v; f >= 0; f--)
+    (v = t[f]) && (o = (i ? v(e, r, o) : v(o)) || o);
+  return i && o && j(e, r, o), o;
+}, a, l, n;
+const y = class y extends d {
   constructor() {
-    super(...arguments), this.vertical = !1;
+    super(...arguments);
+    c(this, a);
+    c(this, l);
+    c(this, n);
+    m(this, a, new O(this)), m(this, l, this.attachInternals()), m(this, n, p(this, l).states), this.lang = "en", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "nav";
+    super.connectedCallback(), this.ariaLabel = p(this, a).term("mainNavigation"), this.role = "navigation";
+  }
+  _handleStateChange() {
+    C(p(this, n), "vertical").set(this.vertical), this._items.forEach((r) => {
+      r.vertical = this.vertical;
+    });
   }
   render() {
-    return p`
-			<ul aria-orientation=${f(this.vertical ? "vertical" : void 0)} role="menubar">
+    return P`
+			<ul aria-orientation=${E(this.vertical ? "vertical" : void 0)}>
 				<slot></slot>
 			</ul>
 		`;
   }
 };
-o.styles = [m, u];
-let t = o;
-d([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "vertical");
+a = new WeakMap(), l = new WeakMap(), n = new WeakMap(), y.styles = [w, S];
+let s = y;
+h([
+  _({ type: String })
+], s.prototype, "lang", 2);
+h([
+  _({ type: Boolean })
+], s.prototype, "vertical", 2);
+h([
+  D({ selector: "skf-nav-item" })
+], s.prototype, "_items", 2);
+h([
+  b("vertical")
+], s.prototype, "_handleStateChange", 1);
 export {
-  t as SkfNav
+  s as SkfNav
 };

package/dist/components/nav/nav.styles.js

@@ -1,17 +1,23 @@
 import { css as t } from "lit";
-const e = t`
-	:host(:not([vertical])) {
-		width: fit-content;
-	}
+const o = t`
+	@layer components {
+		@layer base {
+			:host(:not(:state(vertical))) {
+				width: fit-content;
+			}
 
-	ul {
-		display: flex;
+			ul {
+				display: flex;
+			}
+		}
 
-		:host([vertical]) & {
-			flex-direction: column;
+		@layer mods {
+			:host(:state(vertical)) ul {
+				flex-direction: column;
+			}
 		}
 	}
 `;
 export {
-  e as styles
+  o as styles
 };

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

@@ -9,10 +9,13 @@ import type { CSSResultGroup } from 'lit';
  * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
  *
  * @attribute {"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"} [placement='bottom-start'] - The placement of the popover
- * @attribute {string} anchor - The id of the element the menu will be anchored to
+ * @attribute {string} anchor - The id of the element the popover will be anchored to
  *
- * @event {CustomEvent} skf-opened - Fired when the menu is opened
- * @event {CustomEvent} skf-closed - Fired when the menu is closed
+ * @property {(void) => void} open() - Method that opens the popover
+ * @property {(void) => void} close() - Method that closes the popover
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
  *
  * @slot - The popover content
  *
@@ -28,5 +31,9 @@ export declare class SkfPopover extends SkfPopoverBase {
     /** @internal */
     hideArrowChanged(): void;
     /** @internal */
+    openExtended(): void;
+    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
+    /** @internal */
+    _checkClickOutside: (e: Event) => void;
 }

package/dist/components/popover/popover.component.js

@@ -1,35 +1,43 @@
 import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as f } from "../../internal/helpers/watch.js";
-import { property as d } from "lit/decorators.js";
+import { watch as l } from "../../internal/helpers/watch.js";
+import { property as c } from "lit/decorators.js";
 import { styles as w } from "./popover.styles.js";
-var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (l, r, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? m(r, o) : r, i = l.length - 1, p; i >= 0; i--)
-    (p = l[i]) && (t = (s ? p(r, o, t) : p(t)) || t);
-  return s && t && c(r, o, t), t;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (d, t, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(t, i) : t, o = d.length - 1, p; o >= 0; o--)
+    (p = d[o]) && (e = (s ? p(t, i, e) : p(e)) || e);
+  return s && e && f(t, i, e), e;
 };
-const n = class n extends h {
+const a = class a extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this._checkClickOutside = (t) => {
+      this.isOpen && !this.contains(t.target) && this.close();
+    }, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
   /** @internal */
-  addEventListeners(r) {
-    r.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+  openExtended() {
+    window.top && window.self !== window.top && window.top.addEventListener("click", this._checkClickOutside, {
+      signal: this.signal
+    });
+  }
+  /** @internal */
+  addEventListeners(t) {
+    t.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
   }
 };
-n.styles = [h.styles, w];
-let e = n;
-a([
-  d({ type: Number })
-], e.prototype, "offset", 2);
-a([
-  d({ type: Boolean })
-], e.prototype, "hideArrow", 2);
-a([
-  f("hideArrow")
-], e.prototype, "hideArrowChanged", 1);
+a.styles = [h.styles, w];
+let r = a;
+n([
+  c({ type: Number })
+], r.prototype, "offset", 2);
+n([
+  c({ type: Boolean })
+], r.prototype, "hideArrow", 2);
+n([
+  l("hideArrow")
+], r.prototype, "hideArrowChanged", 1);
 export {
-  e as SkfPopover
+  r as SkfPopover
 };

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

@@ -18,5 +18,7 @@ export declare class SkfProgress extends SkfElement {
     /** Specifies how much of the task that has been completed */
     value: number;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/progress/progress.component.js

@@ -1,43 +1,52 @@
-var u = (t) => {
+var v = (t) => {
   throw TypeError(t);
 };
-var d = (t, e, r) => e.has(t) || u("Cannot " + r);
-var h = (t, e, r) => (d(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, l) => (d(t, e, "write to private field"), l ? l.call(t, r) : e.set(t, r), r);
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import { componentStyles as b } from "../../styles/component.styles.js";
-import { html as x } from "lit";
-import { property as n } from "lit/decorators.js";
-import { styles as C } from "./progress.styles.js";
-var _ = Object.defineProperty, m = (t, e, r, l) => {
-  for (var s = void 0, p = t.length - 1, c; p >= 0; p--)
-    (c = t[p]) && (s = c(e, r, s) || s);
-  return s && _(e, r, s), s;
-}, a;
-const i = class i extends y {
+var y = (t, e, r) => e.has(t) || v("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), u = (t, e, r) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, a) => (y(t, e, "write to private field"), a ? a.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as x } from "../../internal/helpers/watch.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
+import { styles as g } from "./progress.styles.js";
+var w = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? j(e, r) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(e, r, s) : h(s)) || s);
+  return a && s && w(e, r, s), s;
+}, i, p;
+const m = class m extends b {
   constructor() {
     super(...arguments);
-    f(this, a);
-    v(this, a, this.attachInternals()), this.animated = !1, this.max = 1, this.value = 0;
+    u(this, i);
+    u(this, p);
+    d(this, i, this.attachInternals()), d(this, p, c(this, i).states), this.animated = !1, this.max = 1, this.value = 0;
   }
   connectedCallback() {
-    super.connectedCallback(), h(this, a).role = "progressbar";
+    super.connectedCallback(), this.role = "progressbar";
+  }
+  _handleStateChange() {
+    _(c(this, p), "animated").set(this.animated);
   }
   render() {
     const r = this.value / this.max * 100;
-    return x`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
+    return O`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
   }
 };
-a = new WeakMap(), i.styles = [b, C], i.formAssociated = !0;
-let o = i;
-m([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "animated");
-m([
-  n({ type: Number })
-], o.prototype, "max");
-m([
-  n({ type: Number })
-], o.prototype, "value");
+i = new WeakMap(), p = new WeakMap(), m.styles = [C, g], m.formAssociated = !0;
+let o = m;
+n([
+  f({ type: Boolean })
+], o.prototype, "animated", 2);
+n([
+  f({ type: Number })
+], o.prototype, "max", 2);
+n([
+  f({ type: Number })
+], o.prototype, "value", 2);
+n([
+  x("animated")
+], o.prototype, "_handleStateChange", 1);
 export {
   o as SkfProgress
 };

package/dist/components/progress/progress.styles.js

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const o = r`
+const a = r`
 	@layer components {
 		@layer base {
 			#root {
@@ -11,7 +11,7 @@ const o = r`
 				overflow: hidden;
 
 				&::after {
-					background-color: var(--skf-bg-color-emphasised);
+					background-color: var(--skf-bg-color-emphasized);
 					block-size: inherit;
 					border-radius: inherit;
 					content: '';
@@ -24,7 +24,7 @@ const o = r`
 		}
 
 		@layer mods {
-			:host([animated]) {
+			:host(:state(animated)) {
 				#root::after {
 					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
 						infinite reverse;
@@ -51,5 +51,5 @@ const o = r`
 	}
 `;
 export {
-  o as styles
+  a as styles
 };

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

@@ -2,6 +2,7 @@ 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 Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
@@ -18,6 +19,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-radio
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /**
      * @internal
@@ -32,10 +34,10 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     customInvalid: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, adds name to the input-element */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** Size of the Radio */
     size: 'sm' | 'md';
     /** If defined, displays provided severity state */