@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

package/dist/components/{menu-item → menu}/menu-item.component.js

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

package/dist/components/{menu-item → menu}/menu-item.d.ts

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

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

@@ -1,16 +1,18 @@
 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.
+ * For a popover menu like skf-menu containing skf-menu-item elements, the correct ARIA role is menu. This role indicates that the element represents a menu, typically triggered by a button or another interactive element, like in a popover context. The menu role is suitable for context menus or secondary menus. Each skf-menu-item will implicitly have the correct menuitem role. It's important to make sure the menu is properly linked to its trigger using ARIA attributes like aria-haspopup and aria-expanded on the trigger and aria-controls on the menu to establish the relationship between the trigger and the menu for assistive technologies. Setting the menu role directly on the skf-menu element is the right way to go here.
+ */
+/**
+ * The `<skf-menu>` is a component that displays a list of actions or options
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) 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
+ * @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 menu
+ * @attribute {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
+ * @event {CustomEvent} skf-opened - Fired when the menu is opened
+ * @event {CustomEvent} skf-closed - Fired when the menu is closed
  *
  * @slot - The menu popover content
  *
@@ -19,6 +21,6 @@ import type { CSSResultGroup } from 'lit';
 export declare class SkfMenu extends SkfPopoverBase {
     static styles: CSSResultGroup;
     constructor();
+    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
-    removeEventListeners($element: HTMLElement | Element): void;
 }

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

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

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

@@ -1,5 +1,5 @@
-import { SkfMenu } from './menu.component';
-export * from './menu.component';
+import { SkfMenu } from './menu.component.js';
+export * from './menu.component.js';
 export default SkfMenu;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,18 @@
+import '../link/link.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import type { Icon } from '../../internal/types.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-nav>` is a component that displays a list of <nav-items>.
+ *
+ * @slot - The component's main content
+ *
+ * @tagname skf-nav-item
+ */
+export declare class SkfNavItem extends SkfElement {
+    static styles: CSSResultGroup;
+    href: string;
+    icon?: Icon;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,38 @@
+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;
+};
+const o = class o extends m {
+  constructor() {
+    super(...arguments), this.href = "#";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "menuitem";
+  }
+  render() {
+    return h`
+			<skf-link color="inverse" href=${this.href} icon=${u(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");
+export {
+  e as SkfNavItem
+};

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+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;
+		}
+
+		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;
+		}
+
+		: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-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;
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -0,0 +1,17 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-nav>` is a component that displays a list of <nav-items>.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - The component's main content
+ *
+ * @tagname skf-nav
+ */
+export declare class SkfNav extends SkfElement {
+    static styles: CSSResultGroup;
+    vertical: boolean;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,34 @@
+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;
+};
+const o = class o extends s {
+  constructor() {
+    super(...arguments), this.vertical = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "nav";
+  }
+  render() {
+    return p`
+			<ul aria-orientation=${f(this.vertical ? "vertical" : void 0)} role="menubar">
+				<slot></slot>
+			</ul>
+		`;
+  }
+};
+o.styles = [m, u];
+let t = o;
+d([
+  c({ type: Boolean, reflect: !0 })
+], t.prototype, "vertical");
+export {
+  t as SkfNav
+};

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

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

package/dist/components/nav/nav.js

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

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

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

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

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

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

@@ -1,16 +1,18 @@
 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.
+ * The most appropriate ARIA role is dialog. Even though it's light-dismissible, the presence of an interactive element (the link) suggests it functions more like a dialog presenting options or actions. Since it is light-dismissible and not truly modal (doesn't prevent interaction with the rest of the page while open), you should also set aria-modal="false" to accurately reflect its behavior. Don't forget to include a label with aria-labelledby (pointing to a visible label) or aria-label if a visible label isn't present.
+ */
+/**
+ * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) 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
+ * @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
  *
- * @event open - Fired when the menu is opened
- * @event close - Fired when the menu is closed
+ * @event {CustomEvent} skf-opened - Fired when the menu is opened
+ * @event {CustomEvent} skf-closed - Fired when the menu is closed
  *
  * @slot - The popover content
  *
@@ -23,7 +25,8 @@ export declare class SkfPopover extends SkfPopoverBase {
     /** If true, hides the arrow */
     hideArrow: boolean;
     constructor();
+    /** @internal */
     hideArrowChanged(): void;
+    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
-    removeEventListeners($element: HTMLElement | Element): void;
 }

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

@@ -1,37 +1,35 @@
 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;
+import { watch as f } from "../../internal/helpers/watch.js";
+import { property as d } 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;
 };
-const a = class a extends h {
+const n = class n extends h {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", h.classMap = { popover: !0 };
+    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 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
-  addEventListeners(e) {
-    e.addEventListener("mouseenter", this.open);
-  }
-  removeEventListeners(e) {
-    e.removeEventListener("mouseenter", this.open);
+  /** @internal */
+  addEventListeners(r) {
+    r.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
   }
 };
-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);
+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);
 export {
-  t as SkfPopover
+  e as SkfPopover
 };

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

@@ -1,5 +1,5 @@
-import { SkfPopover } from './popover.component';
-export * from './popover.component';
+import { SkfPopover } from './popover.component.js';
+export * from './popover.component.js';
 export default SkfPopover;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -3,7 +3,7 @@ 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
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/36d674-progress-bar) for design principles
  *
  * @tagname skf-progress
  */
@@ -17,6 +17,6 @@ export declare class SkfProgress extends SkfElement {
     max: number;
     /** Specifies how much of the task that has been completed */
     value: number;
-    constructor();
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,49 +1,43 @@
-var h = (t) => {
+var u = (t) => {
   throw TypeError(t);
 };
-var f = (t, e, r) => e.has(t) || h("Cannot " + r);
-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);
+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 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;
+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 {
   constructor() {
-    super();
-    d(this, o);
-    this.animated = !1, this.max = 1, this.value = 0, v(this, o, this.attachInternals()), c(this, o).role = "progressbar";
+    super(...arguments);
+    f(this, a);
+    v(this, a, this.attachInternals()), this.animated = !1, this.max = 1, this.value = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), h(this, a).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>
-		`;
+    return x`<div id="root" 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");
+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");
 export {
-  a as SkfProgress
+  o as SkfProgress
 };

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

@@ -1,5 +1,5 @@
-import { SkfProgress } from './progress.component';
-export * from './progress.component';
+import { SkfProgress } from './progress.component.js';
+export * from './progress.component.js';
 export default SkfProgress;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,48 +1,55 @@
 import { css as r } from "lit";
-const s = r`
-	/* stylelint-disable selector-class-pattern */
+const o = r`
 	@layer components {
-		.progress {
-			background: var(--skf-bg-color-neutral-3);
-			block-size: var(--skf-size-8);
-			border-radius: 0.25rem; /* Missing token */
-			overflow: hidden;
+		@layer base {
+			#root {
+				--_skf-progress-value: 0%;
 
-			&::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);
+				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);
+					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;
+		@layer mods {
+			:host([animated]) {
+				#root::after {
+					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
+						infinite reverse;
+					background-image: linear-gradient(
+						-45deg,
+						rgb(255 255 255 / 20%) 25%,
+						transparent 25%,
+						transparent 50%,
+						rgb(255 255 255 / 20%) 50%,
+						rgb(255 255 255 / 20%) 75%,
+						transparent 75%,
+						transparent
+					);
+					background-size: 50px 50px;
+				}
+			}
 		}
+	}
 
-		@keyframes skf-progress-animation {
-			to {
-				background-position: 50px 50px;
-			}
+	@keyframes skf-progress-animation {
+		to {
+			background-position: 50px 50px;
 		}
 	}
 `;
 export {
-  s as styles
+  o as styles
 };