@skf-design-system/ui-components 1.0.0-beta.4 → 1.0.0-beta.7

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

@@ -1,11 +1,11 @@
-import '@components/icon/icon.js';
-import { SkfElement } from '@internal/components/skf-element.js';
-import type { HeadingType } from '@internal/constants/heading.js';
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import type { HeadingType } from '../../internal/constants/heading.js';
 import type { CSSResultGroup } from 'lit';
 /**
  * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
  *
- * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
  *
  * @event {CustomEvent} skf-collapse-toggle - Event emitted when toggled
  *
@@ -21,7 +21,10 @@ export declare class SkfCollapse extends SkfElement {
     expanded: boolean;
     /** Heading for the collapse */
     heading?: string;
-    /** Controls which heading element will be rendered */
+    /**
+     * Defines which heading element will be rendered
+     * @type { "h2" | "h3" | "h4" }
+     */
     headingAs: Exclude<HeadingType, 'h1'>;
     /** If true, renders the small version */
     small: boolean;

package/dist/components/collapse/collapse.component.js

@@ -1,15 +1,17 @@
 import "../icon/icon.js";
-import { SkfElement as h } from "../../internal/components/skf-element.js";
-import m from "../../styles/component.styles.js";
-import { property as a } from "lit/decorators.js";
-import { html as c, unsafeStatic as l } from "lit/static-html.js";
-import u from "./collapse.styles.js";
-var f = Object.defineProperty, s = (o, r, d, y) => {
-  for (var t = void 0, i = o.length - 1, p; i >= 0; i--)
-    (p = o[i]) && (t = p(r, d, t) || t);
-  return t && f(r, d, t), t;
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import h from "../../styles/component.styles.js";
+import { property as s } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { html as u, unsafeStatic as d } from "lit/static-html.js";
+import _ from "./collapse.styles.js";
+var y = Object.defineProperty, a = (i, n, r, g) => {
+  for (var t = void 0, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (t = p(n, r, t) || t);
+  return t && y(n, r, t), t;
 };
-const n = class n extends h {
+const o = class o extends c {
   constructor() {
     super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
       this.dispatchEvent(
@@ -30,45 +32,54 @@ const n = class n extends h {
     this.expanded = !0;
   }
   render() {
-    return c`
-			<${l(this.headingAs)} id="heading">
-				<button
-					@click=${this._toggle}
-					aria-controls="main"
-					aria-expanded=${this.expanded}
-					type="button"
-				>
-					<span id="label">${this.heading}</span>
-					<skf-icon name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
-				</button>
-			</${l(this.headingAs)}>
-			<div id="body">
-				<div id="main" data-testid="main">
-					<slot></slot>
+    return u`
+			<div class=${m({
+      collapse: !0,
+      "collapse--animated": this.animated,
+      "collapse--expanded": this.expanded,
+      "collapse--small": this.small,
+      "collapse--truncate": this.truncate
+    })}>
+				<${d(this.headingAs)} class="collapse__heading">
+					<button
+						@click=${this._toggle}
+						aria-controls="main"
+						aria-expanded=${f(this.expanded ? "true" : "false")}
+						class="collapse__btn"
+						type="button"
+					>
+						<span class="collapse__label">${this.heading}</span>
+						<skf-icon class="collapse__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
+					</button>
+				</${d(this.headingAs)}>
+				<div class="collapse__body">
+					<div class="collapse__main" data-testid="main" id="main">
+						<slot></slot>
+					</div>
 				</div>
 			</div>
 		`;
   }
 };
-n.styles = [m, u];
-let e = n;
-s([
-  a({ type: Boolean, reflect: !0 })
+o.styles = [h, _];
+let e = o;
+a([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "animated");
-s([
-  a({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "expanded");
-s([
-  a()
+a([
+  s()
 ], e.prototype, "heading");
-s([
-  a({ attribute: "heading-as" })
+a([
+  s({ attribute: "heading-as" })
 ], e.prototype, "headingAs");
-s([
-  a({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "small");
-s([
-  a({ type: Boolean, reflect: !0 })
+a([
+  s({ type: Boolean, reflect: !0 })
 ], e.prototype, "truncate");
 export {
   e as SkfCollapse

package/dist/components/collapse/collapse.styles.js

@@ -1,22 +1,23 @@
 import { css as a } from "lit";
 const s = a`
+	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
+		.collapse {
 			background: var(--skf-bg-color-neutral-1);
 			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
 		}
 
-		#heading {
+		.collapse__heading {
 			font-size: var(--_skf-collapse-heading-size, var(--skf-font-size-100));
 			font-weight: var(--_skf-collapse-heading-weight, normal);
 
-			:host([small]) & {
+			.collapse--small & {
 				--_skf-collapse-heading-size: var(--skf-font-size-75);
 				--_skf-collapse-heading-weight: var(--skf-font-weight-medium);
 			}
 		}
 
-		button {
+		.collapse__btn {
 			align-items: center;
 			display: flex;
 			padding-block: var(--_skf-collapse-button-padding-block, var(--skf-spacing-50));
@@ -28,39 +29,39 @@ const s = a`
 				outline-offset: -2px;
 			}
 
-			:host([small]) & {
+			.collapse--small & {
 				--_skf-collapse-button-padding-block: var(--skf-spacing-25);
 			}
 		}
 
-		#label {
-			:host([truncate]:not([expanded])) & {
+		.collapse__label {
+			.collapse--truncate:not(.collapse--expanded) & {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
 			}
 		}
 
-		skf-icon {
+		.collapse__icon {
 			margin-inline-start: auto;
 		}
 
-		#body {
+		.collapse__body {
 			display: grid;
 			grid-template-rows: var(--_skf-collapse-body-height, 0fr);
 			padding-inline: var(--skf-spacing-75);
 
-			:host([animated]) & {
+			.collapse--animated & {
 				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
 					var(--skf-motion-easing-ease-in);
 			}
 
-			:host([expanded]) & {
+			.collapse--expanded & {
 				--_skf-collapse-body-height: 1fr;
 			}
 		}
 
-		#main {
+		.collapse__main {
 			overflow: hidden;
 
 			&::after {

package/dist/components/collapse/collapse.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,75 @@
+import '../button/button.js';
+import '../heading/heading.js';
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * TODO: Is modal the right name? Should it be "blocking" or "blocking-dialog"?
+ *
+ * TBD: Should we inert the page behind the dialog? Maybe only if it is modal-dialog?
+ *
+ * TBD: Should we disable scrolling on the page behind the dialog? Maybe only if it is modal?
+ */
+/**
+ * The `<skf-dialog>` is a component that open up a dialog with the content provided
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The dialog component's content
+ * @slot heading - The dialog component's heading
+ * @slot footer - The dialog component's buttons goes here
+ *
+ * @event skf-dialog-open - Fires when the dialog is opened (after transitioned in)
+ * @event skf-dialog-close - Fires when the dialog is closed (before transitioned out)
+ * @event close - Fires when the dialog is closed (after transitioned out)
+ *
+ * @cssproperty --skf-dialog-height - A custom height for the Dialog. Pass valid CSS **block-size** values
+ * @cssproperty --skf-dialog-width - A custom width for the Dialog Pass valid CSS **inline-size** values
+ *
+ * @tagname skf-dialog
+ */
+export declare class SkfDialog extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** If defined, sets the aria-label for the close button */
+    closeButtonAriaLabel?: string;
+    /** Title for the modal/dialog */
+    heading?: string;
+    /** If true, makes the dialog stretch edge to edge on screen */
+    fullscreen: boolean;
+    /** If true, removes the close button */
+    noCloseButton?: boolean | undefined;
+    /** If defined, removes the inner padding */
+    noPadding: boolean;
+    open?: boolean | null;
+    /** If provided, will run function on dialog close */
+    onClose?: ((event: Event) => void) | null;
+    /** @internal */
+    $dialog: HTMLDialogElement;
+    /** @internal */
+    footerEls?: HTMLElement[];
+    /** @internal */
+    modal: boolean;
+    /** @internal */
+    renderFoot: boolean;
+    protected firstUpdated(): void;
+    handleOpenChange(): void;
+    /** @internal */
+    show: () => Promise<boolean>;
+    /** @internal */
+    _transition(): {
+        entry: () => Promise<unknown>;
+        exit: () => Promise<unknown>;
+    };
+    /** @internal */
+    _handleBackdropClick: (event: MouseEvent) => void;
+    /** @internal */
+    _handleClose: (event: Event) => void;
+    /** @internal */
+    get _isModal(): boolean;
+    /** Method that opens the dialog in modal state */
+    showModal: () => Promise<boolean>;
+    /** Method that closes the dialog */
+    close: () => Promise<boolean | undefined>;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/dialog/dialog.component.js

@@ -0,0 +1,189 @@
+var _ = (t) => {
+  throw TypeError(t);
+};
+var w = (t, e, o) => e.has(t) || _("Cannot " + o);
+var f = (t, e, o) => (w(t, e, "read from private field"), o ? o.call(t) : e.get(t)), g = (t, e, o) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, o), h = (t, e, o, a) => (w(t, e, "write to private field"), a ? a.call(t, o) : e.set(t, o), o);
+import "../button/button.js";
+import "../heading/heading.js";
+import "../icon/icon.js";
+import { SkfElement as v } from "../../internal/components/skf-element.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import B from "../../styles/component.styles.js";
+import { html as b, nothing as k } from "lit";
+import { property as c, state as m, query as P, queryAssignedElements as M } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { styles as O } from "./dialog.styles.js";
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (t, e, o, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(e, o) : e, l = t.length - 1, r; l >= 0; l--)
+    (r = t[l]) && (n = (a ? r(e, o, n) : r(n)) || n);
+  return a && n && A(e, o, n), n;
+}, p, u, d;
+const y = class y extends v {
+  constructor() {
+    super(...arguments);
+    g(this, p);
+    g(this, u);
+    g(this, d);
+    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (o) => {
+      this._isModal || o.target !== this.$dialog || this.close();
+    }, this._handleClose = (o) => {
+      console.log("Handle close reached"), this.onClose && this.onClose(o), this.close();
+    }, this.showModal = async () => await (async () => (console.log("%cmodal ->", "color: red", this.modal), this.$dialog.showModal(), await this._transition().entry(), this.emit("skf-dialog-open"), !0))(), this.close = async () => (console.log("close reached"), f(this, d) ? void 0 : (h(this, d, !0), await (async () => (this.emit("skf-dialog-close"), await this._transition().exit(), this.$dialog.close(), this.open = !1, h(this, d, !1), !0))()));
+  }
+  firstUpdated() {
+    this.$dialog.addEventListener("close", (o) => {
+      o.stopPropagation(), console.log("close event detected 1", o), this.emit("close");
+    });
+  }
+  handleOpenChange() {
+    var o;
+    switch (!0) {
+      case (this.open === !0 && !!this.modal):
+        this.showModal();
+        break;
+      case (this.open === !0 && !this.modal):
+        this.show();
+        break;
+      case this.open === !1:
+        this.close();
+        break;
+    }
+    this.open && (this.renderFoot = !!((o = this.footerEls) != null && o.length));
+  }
+  /** @internal */
+  _transition() {
+    const o = this.fullscreen ? {} : {
+      translate: `${String(f(this, p))} ${String(f(this, u))}px`
+    };
+    return { entry: () => new Promise((l) => {
+      const r = this.$dialog.animate(
+        [
+          {
+            opacity: 0,
+            ...o
+          },
+          { opacity: 1, translate: "0 0" }
+        ],
+        {
+          duration: 200,
+          fill: "forwards",
+          easing: "ease-out"
+        }
+      );
+      this.$dialog.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 200,
+        fill: "forwards",
+        pseudoElement: "::backdrop"
+      }), r.onfinish = () => {
+        l("opened");
+      };
+    }), exit: () => new Promise((l) => {
+      const r = this.$dialog.animate(
+        [
+          { opacity: 1, translate: "0 0" },
+          {
+            opacity: 0,
+            ...o
+          }
+        ],
+        {
+          duration: 200,
+          fill: "forwards",
+          easing: "ease-in"
+        }
+      );
+      this.$dialog.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: 200,
+        fill: "forwards",
+        pseudoElement: "::backdrop"
+      }), r.onfinish = () => {
+        l("closed");
+      };
+    }) };
+  }
+  /** @internal */
+  get _isModal() {
+    return typeof this.modal == "string";
+  }
+  render() {
+    return b`
+			<dialog
+				@close=${this._handleClose}
+				@mousedown=${this._handleBackdropClick}
+				@touchstart=${this._handleBackdropClick}
+				autofocus
+				class=${$({
+      dialog: !0,
+      "dialog--fullscreen": this.fullscreen,
+      "dialog--no-padding": this.noPadding
+    })}
+			>
+				<div class="dialog__head">
+					<h2 class="dialog__heading">
+						<slot name="heading"></slot>
+					</h2>
+					${this.noCloseButton ? k : b`
+								<button
+									@click=${this._handleClose}
+									aria-label=${this.closeButtonAriaLabel ?? "Close dialog"}
+									class="dialog__close-btn"
+								>
+									<skf-icon name="close" color="inverse"></skf-icon>
+								</button>
+							`}
+				</div>
+				<div class="dialog__body">
+					<slot class="dialog__main"></slot>
+					<slot
+						class=${$({
+      dialog__foot: !0,
+      "dialog__foot-hidden": !this.renderFoot
+    })}
+						name="footer"
+					></slot>
+				</div>
+			</dialog>
+		`;
+  }
+};
+p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), y.styles = [B, O];
+let s = y;
+i([
+  c({ attribute: "close-button-aria-label" })
+], s.prototype, "closeButtonAriaLabel", 2);
+i([
+  c()
+], s.prototype, "heading", 2);
+i([
+  c({ type: Boolean })
+], s.prototype, "fullscreen", 2);
+i([
+  c({ type: Boolean, attribute: "no-close-button" })
+], s.prototype, "noCloseButton", 2);
+i([
+  c({ type: Boolean, attribute: "no-padding" })
+], s.prototype, "noPadding", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+i([
+  m()
+], s.prototype, "onClose", 2);
+i([
+  P("dialog")
+], s.prototype, "$dialog", 2);
+i([
+  M({ slot: "footer" })
+], s.prototype, "footerEls", 2);
+i([
+  m()
+], s.prototype, "modal", 2);
+i([
+  m()
+], s.prototype, "renderFoot", 2);
+i([
+  C("open")
+], s.prototype, "handleOpenChange", 1);
+export {
+  s as SkfDialog
+};

package/dist/components/dialog/dialog.d.ts

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

package/dist/components/dialog/dialog.js

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

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

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

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,91 @@
+import { css as a } from "lit";
+const o = a`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.dialog {
+			--_skf-dialog-head-height: var(--skf-size-48);
+			--_skf-dialog-inset: var(--skf-spacing-100);
+
+			all: unset;
+			background-color: var(--skf-bg-color-neutral-1);
+			display: none;
+			grid-template:
+				'head' auto
+				'body' calc(100% - var(--_skf-dialog-head-height)) / 1fr;
+			inset: var(--_skf-dialog-inset);
+			max-block-size: calc(100% - var(--_skf-dialog-inset) * 2);
+			overflow: hidden;
+			position: fixed;
+
+			&[open] {
+				display: grid;
+			}
+
+			&:not(.dialog--fullscreen) {
+				block-size: var(--skf-dialog-height, fit-content);
+				margin: auto;
+				max-inline-size: min(100%, var(--skf-dialog-width, 400px));
+			}
+
+			&::backdrop {
+				background-color: color-mix(in srgb, var(--skf-bg-color-neutral-7), transparent);
+			}
+		}
+
+		.dialog__head {
+			align-items: center;
+			background-color: var(--skf-color-brand-base);
+			block-size: var(--_skf-dialog-head-height);
+			display: flex;
+			grid-area: head;
+			justify-content: space-between;
+			padding-inline: var(--skf-box-spacing);
+		}
+
+		.dialog__heading {
+			color: var(--skf-text-color-inverse);
+			font-size: var(--skf-font-size-200);
+		}
+
+		.dialog__close-btn {
+			align-items: center;
+			display: flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+
+		.dialog__body {
+			/* block-size: calc(100% - (var(--_skf-dialog-head-height) + (var(--skf-box-spacing) * 2))); */
+			display: flex;
+			flex-direction: column;
+			row-gap: var(--skf-spacing-100);
+
+			.dialog:not(.dialog--no-padding) & {
+				padding: var(--skf-box-spacing);
+			}
+		}
+
+		.dialog__main {
+			display: block;
+			flex: 1;
+			overflow-y: auto;
+		}
+
+		.dialog__foot {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--skf-spacing-100);
+			justify-content: flex-end;
+		}
+
+		.dialog__foot--hidden {
+			display: none;
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -1,8 +1,10 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import type { BorderColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
- * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.
+ * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/3831f1-divider) for design principles
  *
  * @cssproperty --skf-divider-spacing - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical
  * @cssproperty --skf-divider-inset - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical
@@ -10,17 +12,18 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-divider
  */
 export declare class SkfDivider extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /** If provided, alters the Divider color */
-    /** @type { "emphasised" | "primary" | "secondary" | "tertiary" | "inverse" } */
-    color?: BorderColor;
+    /**
+     * Defines the Divider color
+     * @type { "emphasised" | "primary" | "secondary" | "tertiary" | "inverse" }
+     */
+    color: BorderColor;
     /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-    decorative?: boolean | undefined;
+    decorative: boolean;
     /** If true, renders the divider vertically */
-    vertical?: boolean | undefined;
-    /** @internal */
-    private renderDecorative;
-    /** @internal */
-    private renderDefault;
+    vertical: boolean;
+    constructor();
+    connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }