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

package/dist/components/menu-item/menu-item.js

@@ -0,0 +1,6 @@
+import { SkfMenuItem as e } from "./menu-item.component.js";
+e.define("skf-menu-item");
+export {
+  e as SkfMenuItem,
+  e as default
+};

package/dist/components/menu-item/menu-item.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,19 @@
+import { css as e } from "lit";
+const s = e`
+	@layer components {
+		.menu-item {
+			block-size: var(--skf-size-44);
+			display: flex;
+			padding-inline: var(--skf-spacing-75);
+
+			@media screen and (any-hover: hover) {
+				&:hover {
+					background-color: var(--skf-color-blue-lighest);
+				}
+			}
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -0,0 +1,29 @@
+import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * The `<skf-popover>` is a general purpose component that displays the slot content.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @property {"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 menu
+ * @property {boolean} [isOpen=false] - Whether the menu is open
+ * @property {string} [anchor] - The id of the element the menu will be anchored to
+ *
+ * @event open - Fired when the menu is opened
+ * @event close - Fired when the menu is closed
+ *
+ * @slot - The popover content
+ *
+ * @tagname skf-popover
+ */
+export declare class SkfPopover extends SkfPopoverBase {
+    static styles: CSSResultGroup;
+    /** If defined, sets a custom offset for the popover */
+    offset: number;
+    /** If true, hides the arrow */
+    hideArrow: boolean;
+    constructor();
+    hideArrowChanged(): void;
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+}

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

@@ -0,0 +1,37 @@
+import { SkfPopoverBase as n } from "../../internal/base-classes/popover/popover.base.js";
+import { watch as d } from "../../internal/helpers/watch.js";
+import { property as f } from "lit/decorators.js";
+import { styles as w } from "./popover.styles.js";
+var l = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (m, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(e, o) : e, i = m.length - 1, p; i >= 0; i--)
+    (p = m[i]) && (r = (s ? p(e, o, r) : p(r)) || r);
+  return s && r && l(e, o, r), r;
+};
+const a = class a extends n {
+  constructor() {
+    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", n.classMap = { popover: !0 };
+  }
+  hideArrowChanged() {
+    this.arrow = !this.hideArrow;
+  }
+  addEventListeners(e) {
+    e.addEventListener("mouseenter", this.open);
+  }
+  removeEventListeners(e) {
+    e.removeEventListener("mouseenter", this.open);
+  }
+};
+a.styles = [n.styles, w];
+let t = a;
+h([
+  f({ type: Number })
+], t.prototype, "offset", 2);
+h([
+  f({ type: Boolean })
+], t.prototype, "hideArrow", 2);
+h([
+  d("hideArrow")
+], t.prototype, "hideArrowChanged", 1);
+export {
+  t as SkfPopover
+};

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

@@ -0,0 +1,8 @@
+import { SkfPopover } from './popover.component';
+export * from './popover.component';
+export default SkfPopover;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-popover': SkfPopover;
+    }
+}

package/dist/components/popover/popover.js

@@ -0,0 +1,6 @@
+import { SkfPopover as o } from "./popover.component.js";
+o.define("skf-popover");
+export {
+  o as SkfPopover,
+  o as default
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/popover/popover.styles.js

@@ -0,0 +1,12 @@
+import { css as s } from "lit";
+const e = s`
+	@layer components {
+		.popover {
+			font-size: var(--skf-font-size-75);
+			padding: var(--skf-spacing-50);
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -0,0 +1,22 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @tagname skf-progress
+ */
+export declare class SkfProgress extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    static formAssociated: boolean;
+    /** If true, the progress-bar's fill value is animated */
+    animated: boolean;
+    /** Describes how much work the task indicated by the progress element requires */
+    max: number;
+    /** Specifies how much of the task that has been completed */
+    value: number;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1,8 @@
+import { SkfProgress } from './progress.component';
+export * from './progress.component';
+export default SkfProgress;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-progress': SkfProgress;
+    }
+}

package/dist/components/progress/progress.js

@@ -0,0 +1,6 @@
+import { SkfProgress as r } from "./progress.component.js";
+r.define("skf-progress");
+export {
+  r as SkfProgress,
+  r as default
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,48 @@
+import { css as r } from "lit";
+const s = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.progress {
+			background: var(--skf-bg-color-neutral-3);
+			block-size: var(--skf-size-8);
+			border-radius: 0.25rem; /* Missing token */
+			overflow: hidden;
+
+			&::after {
+				background-color: var(--skf-bg-color-emphasised);
+				block-size: inherit;
+				border-radius: inherit;
+				content: '';
+				display: block;
+				inline-size: var(--_skf-progress-value, auto);
+				transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
+					cubic-bezier(0.4, 0.93, 0.71, 0.89);
+			}
+		}
+
+		.progress--animated::after {
+			animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear infinite
+				reverse;
+			background-image: linear-gradient(
+				-45deg,
+				rgba(255 255 255 / 20%) 25%,
+				transparent 25%,
+				transparent 50%,
+				rgba(255 255 255 / 20%) 50%,
+				rgba(255 255 255 / 20%) 75%,
+				transparent 75%,
+				transparent
+			);
+			background-size: 50px 50px;
+		}
+
+		@keyframes skf-progress-animation {
+			to {
+				background-position: 50px 50px;
+			}
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -1,6 +1,6 @@
-import '@components/icon/icon.js';
-import { FormBase } from '@internal/components/formBase.js';
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import '../icon/icon.js';
+import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
@@ -25,8 +25,6 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     checked?: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid?: boolean;
-    /** If true, hides the label visually */
-    hideLabel?: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
@@ -50,11 +48,11 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     /** @internal */
     private $input?;
     connectedCallback(): void;
-    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     protected firstUpdated(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    debugOutput(): void;
+    handleInvalidChange(): void;
+    handleDebugInvalid(): void;
+    handleCheckedChanged(): void;
+    handleCustomInvalidChange(): void;
     /** @internal */
     private _resetValue;
     /** @internal */

package/dist/components/radio/radio.component.js

@@ -1,134 +1,150 @@
 import "../icon/icon.js";
-import { FormBase as u } from "../../internal/components/formBase.js";
-import { Asterisk as c } from "../../internal/templates/asterisk.js";
-import p from "../../styles/component.styles.js";
-import { html as m } from "lit";
-import { property as a, state as v, query as f } from "lit/decorators.js";
-import { ifDefined as y } from "lit/directives/if-defined.js";
-import { live as b } from "lit/directives/live.js";
-import _ from "./radio.styles.js";
-var k = Object.defineProperty, i = (n, t, r, l) => {
-  for (var s = void 0, o = n.length - 1, h; o >= 0; o--)
-    (h = n[o]) && (s = h(t, r, s) || s);
-  return s && k(t, r, s), s;
+import { FormBase as c } from "../../internal/components/formBase.js";
+import { watch as n } from "../../internal/helpers/watch.js";
+import { Asterisk as p } from "../../internal/templates/asterisk.js";
+import m from "../../styles/component.styles.js";
+import { html as v } from "lit";
+import { property as r, state as f, query as y } from "lit/decorators.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { live as _ } from "lit/directives/live.js";
+import g from "./radio.styles.js";
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? C(e, s) : e, l = u.length - 1, h; l >= 0; l--)
+    (h = u[l]) && (a = (o ? h(e, s, a) : h(a)) || a);
+  return o && a && k(e, s, a), a;
 };
-const d = class d extends u {
+const d = class d extends c {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
-      t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
+    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (e) => {
+      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this._validateInput();
   }
-  willUpdate(t) {
-    t.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true")));
-  }
   firstUpdated() {
-    var t;
-    (t = this.$input) == null || t.addEventListener("change", (r) => {
-      var l;
-      r.stopPropagation(), this.pristine = !1, this.checked = (l = this.$input) == null ? void 0 : l.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
-    }), this.addEventListener("invalid", (r) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && r.preventDefault();
+    var e;
+    (e = this.$input) == null || e.addEventListener("change", (s) => {
+      var o;
+      s.stopPropagation(), this.pristine = !1, this.checked = (o = this.$input) == null ? void 0 : o.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+    }), this.addEventListener("invalid", (s) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
   }
-  updated(t) {
-    super.updated(t), t.has("_invalid") && this._invalid && this.debug && this.debugOutput(), t.has("checked") && this.form && this.setFormValue(this.checked ? this.value : null);
+  handleInvalidChange() {
+    this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
+  }
+  handleDebugInvalid() {
+    this._invalid && this.debug && !this.validity.valid && console.log(`Radio invalidity reason: ${this._internals.validationMessage}`);
   }
-  attributeChangedCallback(t, r, l) {
-    if (super.attributeChangedCallback(t, r, l), t === "checked" && l !== null && this._uncheckSiblingRadios(), t === "custom-invalid")
-      if (typeof l == "string") {
-        const o = String(l).trim() || "Custom error";
-        this.pristine = !1, this._invalid = !0, this._internals.setValidity({ customError: !0 }, o), this.checkValidity();
-      } else
-        this.setValidity({}), this._validateInput();
+  handleCheckedChanged() {
+    this.setFormValue(this.checked ? this.value : null), this.checked && this._uncheckSiblingRadios();
   }
-  debugOutput() {
-    this.debug && !this._internals.validity.valid && console.log(`Radio invalidity reason: ${this._internals.validationMessage}`);
+  handleCustomInvalidChange() {
+    if (this.customInvalid) {
+      const s = (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        this.getAttribute("data-customerror") || "Set a custom error message using the data-customerror attribute"
+      );
+      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, s), this.checkValidity();
+    } else
+      this.setValidity({}), this._validateInput();
   }
   /** @internal */
   _uncheckSiblingRadios() {
-    const t = this.name;
-    if (!t) return;
-    (this.form ?? document).querySelectorAll(`skf-radio[name="${t}"]`).forEach((s) => {
-      const o = this.form === s.form, h = !this.form && !s.form;
-      s !== this && (o || h) && (s.checked = !1);
+    const e = this.name;
+    if (!e) return;
+    (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
+      const l = this.form === a.form, h = !this.form && !a.form;
+      a !== this && (l || h) && (a.checked = !1);
     });
   }
   /** @internal */
   _validateInput() {
-    var t;
-    if (this._invalid = !1, this.customInvalid)
-      this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
-    else if (this.required && !this.checked) {
+    var e;
+    if (this._invalid = !1, this.customInvalid) {
+      const s = this.getAttribute("data-customerror");
+      this.setValidity({ customError: !0 }, this.withFallback(s)), this._invalid = !0;
+    } else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const r = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((t = this.$input) == null ? void 0 : t.validationMessage) ?? "Please check this box if you want to proceed";
-      this.setValidity({ valueMissing: !0 }, String(r));
+      const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this radio if you want to proceed"
+      );
+      this.setValidity({ valueMissing: !0 }, this.withFallback(s));
     } else
       this.setValidity({});
   }
   render() {
-    return m`
+    return v`
 			<label id="root">
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${b(!!this.checked)}
+					.checked=${_(!!this.checked)}
 					aria-invalid=${!!this._invalid}
-					name=${y(this.name)}
+					name=${b(this.name)}
 					type="radio"
 					value=${this.value}
 				/>
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? c(this.requiredLabel) : null}
+					${this.required ? p(this.requiredLabel) : null}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [p, _];
-let e = d;
+d.styles = [m, g];
+let t = d;
+i([
+  r({ type: Boolean })
+], t.prototype, "debug", 2);
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "checked", 2);
+i([
+  r({ type: Boolean, attribute: "custom-invalid" })
+], t.prototype, "customInvalid", 2);
 i([
-  a({ type: Boolean })
-], e.prototype, "debug");
+  r()
+], t.prototype, "label", 2);
 i([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "checked");
+  r()
+], t.prototype, "name", 2);
 i([
-  a({ type: Boolean, attribute: "custom-invalid" })
-], e.prototype, "customInvalid");
+  r({ attribute: "required-label" })
+], t.prototype, "requiredLabel", 2);
 i([
-  a({ type: Boolean, attribute: "hide-label", reflect: !0 })
-], e.prototype, "hideLabel");
+  r({ reflect: !0 })
+], t.prototype, "size", 2);
 i([
-  a()
-], e.prototype, "label");
+  r()
+], t.prototype, "severity", 2);
 i([
-  a()
-], e.prototype, "name");
+  r({ type: Boolean, attribute: "show-valid" })
+], t.prototype, "showValid", 2);
 i([
-  a({ attribute: "required-label" })
-], e.prototype, "requiredLabel");
+  r()
+], t.prototype, "value", 2);
 i([
-  a({ reflect: !0 })
-], e.prototype, "size");
+  f()
+], t.prototype, "_invalid", 2);
 i([
-  a()
-], e.prototype, "severity");
+  y("input")
+], t.prototype, "$input", 2);
 i([
-  a({ type: Boolean, attribute: "show-valid" })
-], e.prototype, "showValid");
+  n("_invalid")
+], t.prototype, "handleInvalidChange", 1);
 i([
-  a()
-], e.prototype, "value");
+  n("_invalid", { afterUpdate: !0 })
+], t.prototype, "handleDebugInvalid", 1);
 i([
-  v()
-], e.prototype, "_invalid");
+  n("checked")
+], t.prototype, "handleCheckedChanged", 1);
 i([
-  f("input")
-], e.prototype, "$input");
+  n("customInvalid")
+], t.prototype, "handleCustomInvalidChange", 1);
 export {
-  e as SkfRadio
+  t as SkfRadio
 };

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

@@ -1,10 +1,11 @@
-import { FormBase } from '@internal/components/formBase.js';
-import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { FormBase } from '../../internal/components/formBase.js';
+import { PopoverController } from '../../internal/controllers/popover.controller.js';
+import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 import '../../internal/components/hint/hint';
 import type { SelectOptionEvent, SkfSelectOption } from '../select-option/select-option.component.js';
 import '../tag/tag';
-import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController, ResizeController, ScrollController } from './select.controllers.js';
+import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
 /**
  * TODO: abstract the popover logic to a separate component/helper/partial, and use it in both select and in input[datalist], combobox etc
  *
@@ -84,25 +85,23 @@ export declare class SkfSelect extends FormBase {
     /** True if the internal state is invalid  */
     private _invalid;
     /** @internal */
-    private $selectBtn?;
+    $anchor: HTMLButtonElement;
     /** @internal */
     private $selectedValue?;
     /** @internal */
-    private $dropdown?;
-    /** @internal */
-    protected scrollController: ScrollController;
-    /** @internal */
-    protected resizeController: ResizeController;
+    $popover: HTMLDivElement;
     /** @internal */
     protected globalClickController: GlobalClickController;
     /** @internal */
     protected keyboardNavController: KeyboardNavigationController;
     /** @internal */
     protected developerFeedbackController: DeveloperFeedbackController;
+    /** @internal */
+    protected popoverController: PopoverController;
     constructor();
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
-    updated(changedProperties: Map<string, unknown>): void;
+    handleExpandedChange(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     /** @internal */
@@ -119,8 +118,7 @@ export declare class SkfSelect extends FormBase {
     /** @internal */
     _updateWidth: () => void;
     /** @internal */
-    /** this runs only from the 'updated' lifecycle, by setting source-of-truth _expanded=false */
-    private _managePopover;
+    reposition: () => Promise<void>;
     /** @internal */
     _handleDropdownToggle: (e: Event) => void;
     /** @internal