@skf-design-system/ui-components 1.0.0-alpha.29 → 1.0.0-alpha.30

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

@@ -0,0 +1,24 @@
+import { SkfPopoverBase } from '../../internal/base-classes/popover/popover.base.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * The `<skf-menu>` is a component that displays a list of actions or options.
+ *
+ * @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 menu popover content
+ *
+ * @tagname skf-menu
+ */
+export declare class SkfMenu extends SkfPopoverBase {
+    static styles: CSSResultGroup;
+    constructor();
+    addEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners($element: HTMLElement | Element): void;
+}

package/dist/components/menu/menu.component.js

@@ -0,0 +1,18 @@
+import { SkfPopoverBase as t } from "../../internal/base-classes/popover/popover.base.js";
+import { styles as o } from "./menu.styles.js";
+const s = class s extends t {
+  constructor() {
+    super(), this.placement = "bottom-start", t.classMap = { menu: !0 };
+  }
+  addEventListeners(e) {
+    e.addEventListener("mouseenter", this.open);
+  }
+  removeEventListeners(e) {
+    e.removeEventListener("mouseenter", this.open);
+  }
+};
+s.styles = [t.styles, o];
+let r = s;
+export {
+  r as SkfMenu
+};

package/dist/components/menu/menu.d.ts

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

package/dist/components/menu/menu.js

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

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

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

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

@@ -0,0 +1,11 @@
+import { css as s } from "lit";
+const n = s`
+	@layer components {
+		.menu {
+			padding-block: var(--skf-spacing-25);
+		}
+	}
+`;
+export {
+  n as styles
+};

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

@@ -0,0 +1,25 @@
+import { SkfLink } from '../link/link.component.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-menu-item>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @event {CustomEvent} my-tag-my-event - Fired when something happens
+ *
+ * @event click - Fired when the component is clicked
+ * @event mouseover - Fired when the mouse is over the component
+ * @event mouseout - Fired when the mouse is out of the component
+ * @event focus - Fired when the component is focused
+ * @event blur - Fired when the component is blurred
+ * @event change - Fired when the component's value changes
+ *
+ * @slot - The component's main content
+ * @slot my-named-slot - A named slot of the component
+ *
+ * @tagname skf-menu-item
+ */
+export declare class SkfMenuItem extends SkfLink {
+    static styles: CSSResultGroup;
+    constructor();
+}

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

@@ -0,0 +1,13 @@
+import { SkfLink as s } from "../link/link.component.js";
+import "lit";
+import { styles as o } from "./menu-item.styles.js";
+const t = class t extends s {
+  constructor() {
+    super(), s.classMap = { "menu-item": !0 };
+  }
+};
+t.styles = [s.styles, o];
+let r = t;
+export {
+  r as SkfMenuItem
+};

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

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

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 h } 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 v } from "./popover.styles.js";
+var w = Object.defineProperty, l = Object.getOwnPropertyDescriptor, n = (m, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? l(e, s) : e, i = m.length - 1, p; i >= 0; i--)
+    (p = m[i]) && (r = (o ? p(e, s, r) : p(r)) || r);
+  return o && r && w(e, s, r), r;
+};
+const a = class a extends h {
+  constructor() {
+    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", h.classMap = { popover: !0 };
+  }
+  hideArrowChanged() {
+    this.arrow = !this.hideArrow;
+  }
+  addEventListeners(e) {
+    e.addEventListener("mouseenter", this.open);
+  }
+  removeEventListeners(e) {
+    e.removeEventListener("mouseenter", this.open);
+  }
+};
+a.styles = [h.styles, v];
+let t = a;
+n([
+  f({ type: Number })
+], t.prototype, "offset", 2);
+n([
+  f({ type: Boolean })
+], t.prototype, "hideArrow", 2);
+n([
+  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

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element';
+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
@@ -12,7 +12,7 @@ export declare class SkfProgress extends SkfElement {
     static styles: CSSResultGroup;
     static formAssociated: boolean;
     /** If true, the progress-bar's fill value is animated */
-    animated?: boolean;
+    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 */

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

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

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

@@ -1,7 +1,8 @@
 import { css as r } from "lit";
-const e = r`
+const s = r`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		#root {
+		.progress {
 			background: var(--skf-bg-color-neutral-3);
 			block-size: var(--skf-size-8);
 			border-radius: 0.25rem; /* Missing token */
@@ -17,22 +18,22 @@ const e = r`
 				transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
 					cubic-bezier(0.4, 0.93, 0.71, 0.89);
 			}
+		}
 
-			:host([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;
-			}
+		.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 {
@@ -43,5 +44,5 @@ const e = r`
 	}
 `;
 export {
-  e as styles
+  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

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