@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

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

@@ -0,0 +1,36 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import type { HeadingType } from '../../internal/types.js';
+import type { CSSResultGroup } from 'lit';
+export type SkfAccordionItemHeadingType = Exclude<HeadingType, 'h1'>;
+/**
+ * The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component
+ *
+ * @event {CustomEvent} skf-accordion-item-toggle - Event emitted when toggled
+ *
+ * @slot - Main content
+ *
+ * @tagname skf-accordion-item
+ */
+export declare class SkfAccordionItem extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, will animate the expand/accordion-item state */
+    animated: boolean;
+    /** If true, will set the accordion-item to be expanded by default */
+    expanded: boolean;
+    /** Heading for the accordion-item */
+    heading?: string;
+    /** Defines which heading element will be rendered */
+    headingAs: SkfAccordionItemHeadingType;
+    /** If true, renders the small version */
+    small: boolean;
+    /** If true, will truncate the heading in accordion-item state */
+    truncate: boolean;
+    /** Class method as alternative to manipulate attribute */
+    setClose(): void;
+    /** Class method as alternative to manipulate attribute */
+    setOpen(): void;
+    /** @internal */
+    private _toggle;
+    render(): import("lit").TemplateResult;
+}

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

@@ -0,0 +1,98 @@
+import "../icon/icon.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { property as i } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { literal as r, html as f } from "lit/static-html.js";
+import { styles as _ } from "./accordion-item.styles.js";
+var g = Object.defineProperty, s = (d, e, c, y) => {
+  for (var a = void 0, o = d.length - 1, l; o >= 0; o--)
+    (l = d[o]) && (a = l(e, c, a) || a);
+  return a && g(e, c, a), a;
+};
+const n = class n extends p {
+  constructor() {
+    super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
+      this.dispatchEvent(
+        new CustomEvent("skf-accordion-item-toggle", {
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0
+        })
+      ), this.expanded = !this.expanded;
+    };
+  }
+  /** Class method as alternative to manipulate attribute */
+  setClose() {
+    this.expanded = !1;
+  }
+  /** Class method as alternative to manipulate attribute */
+  setOpen() {
+    this.expanded = !0;
+  }
+  render() {
+    let e;
+    switch (!0) {
+      case this.headingAs === "h3":
+        e = r`h3`;
+        break;
+      case this.headingAs === "h4":
+        e = r`h4`;
+        break;
+      default:
+        e = r`h2`;
+        break;
+    }
+    return f`
+			<div class=${h({
+      "accordion-item": !0,
+      "accordion-item--animated": this.animated,
+      "accordion-item--expanded": this.expanded,
+      "accordion-item--small": this.small,
+      "accordion-item--truncate": this.truncate
+    })}>
+				<${e} class="accordion-item__heading">
+					<button
+						@click=${this._toggle}
+						aria-controls="main"
+						aria-expanded=${u(this.expanded ? "true" : "false")}
+						class="accordion-item__btn"
+						type="button"
+					>
+						<span class="accordion-item__label">${this.heading}</span>
+						<skf-icon class="accordion-item__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
+					</button>
+				</${e}>
+				<div class="accordion-item__body">
+					<div class="accordion-item__main" data-testid="main" id="main">
+						<slot></slot>
+					</div>
+				</div>
+			</div>
+		`;
+  }
+};
+n.styles = [m, _];
+let t = n;
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "animated");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "expanded");
+s([
+  i()
+], t.prototype, "heading");
+s([
+  i({ attribute: "heading-as" })
+], t.prototype, "headingAs");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "small");
+s([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "truncate");
+export {
+  t as SkfAccordionItem
+};

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

@@ -1,6 +1,6 @@
-import { SkfCollapse } from '../collapse/collapse.component.js';
-export declare class SkfAccordionItem extends SkfCollapse {
-}
+import { SkfAccordionItem } from './accordion-item.component.js';
+export * from './accordion-item.component.js';
+export default SkfAccordionItem;
 declare global {
     interface HTMLElementTagNameMap {
         'skf-accordion-item': SkfAccordionItem;

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

@@ -1,7 +1,6 @@
-import { SkfCollapse as e } from "../collapse/collapse.component.js";
-class f extends e {
-}
-e.define("skf-accordion-item");
+import { SkfAccordionItem as o } from "./accordion-item.component.js";
+o.define("skf-accordion-item");
 export {
-  f as SkfAccordionItem
+  o as SkfAccordionItem,
+  o as default
 };

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

@@ -0,0 +1,77 @@
+import { css as i } from "lit";
+const e = i`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.accordion-item {
+			background: var(--skf-bg-color-neutral-1);
+			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+		}
+
+		.accordion-item__heading {
+			font-size: var(--_skf-accordion-item-heading-size, var(--skf-font-size-100));
+			font-weight: var(--_skf-accordion-item-heading-weight, normal);
+
+			.accordion-item--small & {
+				--_skf-accordion-item-heading-size: var(--skf-font-size-75);
+				--_skf-accordion-item-heading-weight: var(--skf-font-weight-medium);
+			}
+		}
+
+		.accordion-item__btn {
+			align-items: center;
+			display: flex;
+			padding-block: var(--_skf-accordion-item-button-padding-block, var(--skf-spacing-50));
+			padding-inline: var(--skf-spacing-75);
+			width: 100%;
+
+			&:focus-visible {
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+				outline-offset: -2px;
+			}
+
+			.accordion-item--small & {
+				--_skf-accordion-item-button-padding-block: var(--skf-spacing-25);
+			}
+		}
+
+		.accordion-item__label {
+			.accordion-item--truncate:not(.accordion-item--expanded) & {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		.accordion-item__icon {
+			margin-inline-start: auto;
+		}
+
+		.accordion-item__body {
+			display: grid;
+			grid-template-rows: var(--_skf-accordion-item-body-height, 0fr);
+			padding-inline: var(--skf-spacing-75);
+
+			.accordion-item--animated & {
+				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
+					var(--skf-motion-easing-ease-in);
+			}
+
+			.accordion-item--expanded & {
+				--_skf-accordion-item-body-height: 1fr;
+			}
+		}
+
+		.accordion-item__main {
+			overflow: hidden;
+
+			&::after {
+				content: '';
+				display: block;
+				padding-block-end: var(--skf-spacing-100);
+			}
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -1,11 +1,10 @@
-import '../collapse/collapse.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
 import { type CSSResultGroup, type PropertyValues } from 'lit';
+import type { SkfAccordionItemHeadingType } from './accordion-item.component.js';
 /**
- * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
+ * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
  *
- * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles
  *
  * @slot - Expects one or more <skf-accordion-item> element(s)
  *
@@ -14,22 +13,19 @@ import { type CSSResultGroup, type PropertyValues } from 'lit';
 export declare class SkfAccordion extends SkfElement {
     static styles: CSSResultGroup;
     /** If true, will animate the expand/collapse state */
-    animated?: boolean;
-    /**
-     * Defines which heading element will be rendered
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
-    headingAs: Exclude<HeadingType, 'h1'>;
+    animated: boolean;
+    /** Defines which heading element will be rendered */
+    headingAs: SkfAccordionItemHeadingType;
     /** If true, adds a gap between each item */
     gap: boolean;
     /** If true, allowes multiple accordion items to open */
-    multiple?: boolean;
+    multiple: boolean;
     /** If true, renders the small version */
-    small?: boolean;
+    small: boolean;
     /** If true, will truncate all headings in collapsed state */
-    truncate?: boolean;
+    truncate: boolean;
     /** @internal */
-    private $accordionItems;
+    private _accordionItems;
     protected updated(_changedProperties: PropertyValues): void;
     /** @internal */
     private get items();

package/dist/components/accordion/accordion.component.js

@@ -1,18 +1,17 @@
-import "../collapse/collapse.js";
-import { SkfElement as h } from "../../internal/components/skf-element.js";
-import m from "../../styles/component.styles.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as a, queryAssignedNodes as d } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { styles as g } from "./accordion.styles.js";
-var y = Object.defineProperty, s = (p, t, i, o) => {
-  for (var r = void 0, l = p.length - 1, u; l >= 0; l--)
-    (u = p[l]) && (r = u(t, i, r) || r);
+var y = Object.defineProperty, s = (u, t, i, o) => {
+  for (var r = void 0, l = u.length - 1, h; l >= 0; l--)
+    (h = u[l]) && (r = h(t, i, r) || r);
   return r && y(t, i, r), r;
 };
-const n = class n extends h {
+const n = class n extends p {
   constructor() {
-    super(...arguments), this.headingAs = "h2", this.gap = !1, this._setItemAttributes = () => {
+    super(...arguments), this.animated = !1, this.headingAs = "h2", this.gap = !1, this.multiple = !1, this.small = !1, this.truncate = !1, this._setItemAttributes = () => {
       this.items.forEach((t) => {
         t.setAttribute("heading-as", this.headingAs), this.animated ? t.setAttribute("animated", "") : t.hasAttribute("animated") && t.removeAttribute("animated"), this.small ? t.setAttribute("small", "") : t.hasAttribute("small") && t.removeAttribute("small"), this.truncate ? t.setAttribute("truncate", "") : t.hasAttribute("truncate") && t.removeAttribute("truncate");
       });
@@ -23,7 +22,7 @@ const n = class n extends h {
   }
   /** @internal */
   get items() {
-    return [...this.$accordionItems].filter((t) => t.localName === "skf-accordion-item");
+    return [...this._accordionItems].filter((t) => t.localName === "skf-accordion-item");
   }
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
@@ -36,7 +35,7 @@ const n = class n extends h {
     return f`
 			<div class=${c({ "accordion--gap": this.gap })}>
 				<slot
-					@skf-collapse-toggle=${(t) => {
+					@skf-accordion-item-toggle=${(t) => {
       this._onChildToggle(t);
     }}
 					@slotchange=${this._setItemAttributes}
@@ -67,7 +66,7 @@ s([
 ], e.prototype, "truncate");
 s([
   d()
-], e.prototype, "$accordionItems");
+], e.prototype, "_accordionItems");
 export {
   e as SkfAccordion
 };

package/dist/components/accordion/accordion.d.ts

@@ -1,5 +1,4 @@
 import { SkfAccordion } from './accordion.component.js';
-export * from './accordion-item.js';
 export * from './accordion.component.js';
 export default SkfAccordion;
 declare global {

package/dist/components/accordion/accordion.js

@@ -1,8 +1,6 @@
 import { SkfAccordion as o } from "./accordion.component.js";
-import { SkfAccordionItem as e } from "./accordion-item.js";
 o.define("skf-accordion");
 export {
   o as SkfAccordion,
-  e as SkfAccordionItem,
   o as default
 };

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

@@ -1,14 +1,13 @@
-import type { SkfIcon } from '../icon/icon.component.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, Severity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
  *
- * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
  *
- * @event skf-alert-close - Fires when the close button is clicked
+ * @event {CustomEvent} skf-alert-close - Fires when the close button is clicked
  *
  * @slot - Alert message. **Notice!** See design principles for approved content
  * @slot link - Slot for the link
@@ -16,18 +15,19 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-alert
  */
 export declare class SkfAlert extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /** If true, alert is being used as a toast (alertdialog) with an close button */
-    closeable?: boolean;
     /** Close button aria-label */
     buttonLabel: string;
     /** If defined, displays leading icon */
-    icon?: SkfIcon['name'];
-    /**
-     * If defined, gives the supplied appearance
-     * @type { "error" | "info" | "warning" | "success" | "alert" }
-     */
-    severity?: SeverityFgColor;
+    icon?: Icon;
+    /** If true, renders with an close button and sets aria-role to `status` */
+    persistent: boolean;
+    /** If defined, gives the supplied appearance */
+    severity?: Severity;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;

package/dist/components/alert/alert.component.js

@@ -1,74 +1,76 @@
-import "../icon/icon.js";
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import b from "../../styles/component.styles.js";
-import { html as p, nothing as f } from "lit";
-import { property as r } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
-import { ifDefined as o } from "lit/directives/if-defined.js";
-import { styles as v } from "./alert.styles.js";
-var u = Object.defineProperty, s = (a, n, c, d) => {
-  for (var e = void 0, i = a.length - 1, m; i >= 0; i--)
-    (m = a[i]) && (e = m(n, c, e) || e);
-  return e && u(n, c, e), e;
+var u = (t) => {
+  throw TypeError(t);
 };
-const l = class l extends y {
+var d = (t, e, s) => e.has(t) || u("Cannot " + s);
+var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), f = (t, e, s) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), y = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+import "../icon/icon.js";
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { nothing as w, html as v } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { styles as O } from "./alert.styles.js";
+var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? k(e, s) : e, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (i = (o ? h(e, s, i) : h(i)) || i);
+  return o && i && P(e, s, i), i;
+}, n, a;
+const b = class b extends g {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => {
+    super(...arguments);
+    f(this, n);
+    f(this, a);
+    y(this, n, this.attachInternals()), y(this, a, m(this, n).states), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
     };
   }
+  connectedCallback() {
+    super.connectedCallback(), this.role = this.persistent ? "status" : "alert";
+  }
+  _handleStateChange() {
+    const s = ["error", "info", "success", "warning"];
+    C(m(this, a), s).set(this.severity);
+  }
   render() {
-    return p`
-			<div
-				aria-describedby="main"
-				aria-modal=${o(this.closeable && "true")}
-				class=${h({
-      alert: !0,
-      "alert--severity-alert": this.severity === "alert",
-      "alert--severity-error": this.severity === "error",
-      "alert--severity-info": this.severity === "info",
-      "alert--severity-success": this.severity === "success",
-      "alert--severity-warning": this.severity === "warning"
-    })}
-				role=${this.closeable ? "alertdialog" : "alert"}
-			>
+    return v`
+			<div id="root">
 				<skf-icon
-					color=${o(this.severity ?? "secondary")}
-					name=${o(this.icon)}
+					color=${_(this.severity ?? "secondary")}
+					name=${_(this.icon ?? "info")}
 					size="sm"
 				></skf-icon>
-				<div class="alert__body">
-					<slot class="alert__main" id="main"></slot>
+				<div id="body">
+					<slot id="main"></slot>
 					<slot name="link"></slot>
 				</div>
-				${this.closeable ? p`
-							<button
-								@click="${this._handleClose}"
-								aria-label=${this.buttonLabel}
-								class="alert__btn"
-								type="button"
-							>
+				${this.persistent ? v`
+							<button @click="${this._handleClose}" aria-label=${this.buttonLabel} type="button">
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : f}
+						` : w}
 			</div>
 		`;
   }
 };
-l.styles = [b, v];
-let t = l;
-s([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "closeable");
-s([
-  r({ attribute: "button-label" })
-], t.prototype, "buttonLabel");
-s([
-  r()
-], t.prototype, "icon");
-s([
-  r({ reflect: !0 })
-], t.prototype, "severity");
+n = new WeakMap(), a = new WeakMap(), b.styles = [$, O];
+let r = b;
+l([
+  p({ type: String, attribute: "button-label" })
+], r.prototype, "buttonLabel", 2);
+l([
+  p({ type: String })
+], r.prototype, "icon", 2);
+l([
+  p({ type: Boolean })
+], r.prototype, "persistent", 2);
+l([
+  p({ type: String })
+], r.prototype, "severity", 2);
+l([
+  S("severity")
+], r.prototype, "_handleStateChange", 1);
 export {
-  t as SkfAlert
+  r as SkfAlert
 };

package/dist/components/alert/alert.styles.js

@@ -1,68 +1,67 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
-			contain: layout;
-		}
+		@layer base {
+			:host {
+				contain: layout;
+			}
 
-		.alert {
-			background-color: var(--_skf-alert-bg-color, var(--skf-bg-color-neutral-2));
-			border: var(--skf-border-width-sm) solid
-				var(--_skf-alert-border-color, var(--skf-border-color-primary));
-			border-radius: var(--skf-border-radius-sm);
-			box-shadow: var(--skf-shadow-md);
-			display: flex;
-			font-size: var(--skf-font-size-75);
-			gap: var(--skf-spacing-50);
-			padding-block: var(--skf-spacing-75);
-			padding-inline: var(--skf-spacing-50);
-		}
+			#root {
+				--_skf-alert-bg-color: var(--skf-bg-color-neutral-2);
+				--_skf-alert-border-color: var(--skf-border-color-primary);
 
-		.alert--severity-alert {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
-		}
+				background-color: var(--_skf-alert-bg-color);
+				border: var(--skf-border-width-sm) solid var(--_skf-alert-border-color);
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--skf-shadow-md);
+				display: flex;
+				font-size: var(--skf-font-size-75);
+				gap: var(--skf-spacing-50);
+				padding-block: var(--skf-spacing-75);
+				padding-inline: var(--skf-spacing-50);
+			}
 
-		.alert--severity-error {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-error);
-		}
+			#body {
+				display: flex;
+				flex: auto;
+				flex-wrap: wrap;
+				gap: var(--skf-spacing-25) var(--skf-spacing-100);
+				justify-content: space-between;
+			}
 
-		.alert--severity-info {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-info);
-		}
+			#main {
+				display: block;
+			}
 
-		.alert--severity-success {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-success);
-		}
+			button {
+				display: inline-flex;
+			}
 
-		.alert--severity-warning {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			::slotted(skf-link) {
+				text-transform: uppercase;
+			}
 		}
 
-		.alert__body {
-			display: flex;
-			flex: auto;
-			flex-wrap: wrap;
-			gap: var(--skf-spacing-25) var(--skf-spacing-100);
-			justify-content: space-between;
-		}
+		@layer mods {
+			:host(:state(error)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-error);
+			}
 
-		.alert__main {
-			display: block;
-		}
+			:host(:state(info)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-info);
+			}
 
-		::slotted(skf-link) {
-			text-transform: uppercase;
-		}
+			:host(:state(success)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-success);
+			}
 
-		.alert__btn {
-			cursor: pointer;
-			display: inline-flex;
+			:host(:state(warning)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;