@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.2

package/README.md

@@ -42,13 +42,11 @@ The SKF UI Library is a collection of components that is meant to visually align
 
 The SKF UI Library is created using Lit/native web components in order to support as many frameworks as possible. It works out of the box for all frameworks, including React >= 19.
 
-For those who use React 18, we provide React wrappers that can be used in your application.
+## Philosophy
 
-## Reporting issues
+We like to stay as close to how native compoments works as possible albeit adding extra features on top. The rationale behind is that it either makes easier to absorb the api or learn something that is usable in the world outside as well. Adding looped, repeated content is done declaratively by component specific child components.
 
-Reporting issues requires an skf email and github access. [See this section](#skf-email)
-
-We are working on a solution to report issues without an explicit skf email, which will be publicly available.
+<!-- For those who use React 18, we provide React wrappers that can be used in your application.-->
 
 ## 🏃 Getting started
 
@@ -152,11 +150,11 @@ export class AppComponent {
 
 ```
 
-### React 19 beta / Next 15 beta
+### React 19 / Nextjs 15
 
-Web Components will become first class citizens in React 19. Should you want to use them in a version prior to 19 you have to wrap them in React, which essentially converts the native event to React Syntactic events. Long story short, use React 19 (when released) and your off the hook.
+Web Components is first class citizens in React 19. Should you want to use them in a version prior to 19 you have to wrap them in React wrappers, which essentially converts the native event to React Syntactic events. Long story short, use React 19 and your off the hook.
 
-If you want to proceed to use the React 19 beta together with typescript, see [React 19 RC upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
+If you want to proceed to use the React 19 together with typescript, see [React 19 upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
 
 You will also have to declare a global type for the web components to get it to play nice with JSX.
 
@@ -304,6 +302,12 @@ steps:
 
 In this example a token has been added with the name `ACCESS_TOKEN_SECRET`, but you can give it any name you like ✨. If you want to know more about secret generation and usage you can read more about it in [GitHub's docs](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
 
+## Reporting issues
+
+Reporting issues requires an skf email and github access. [See this section](#skf-email)
+
+We are working on a solution to report issues without an explicit skf email, which will be publicly available.
+
 ## 📖 Further reading
 
 ### 🎁 Contributing

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,87 @@
+import "../icon/icon.js";
+import { SkfElement as l } from "../../internal/components/skf-element.js";
+import { componentStyles as p } from "../../styles/component.styles.js";
+import { property as a } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { literal as f, html as u } from "lit/static-html.js";
+import { styles as _ } from "./accordion-item.styles.js";
+var y = Object.defineProperty, i = (r, o, d, g) => {
+  for (var t = void 0, s = r.length - 1, c; s >= 0; s--)
+    (c = r[s]) && (t = c(o, d, t) || t);
+  return t && y(o, d, t), t;
+};
+const n = class n extends l {
+  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() {
+    const o = f`${this.headingAs}`;
+    return u`
+			<div class=${m({
+      "accordion-item": !0,
+      "accordion-item--animated": this.animated,
+      "accordion-item--expanded": this.expanded,
+      "accordion-item--small": this.small,
+      "accordion-item--truncate": this.truncate
+    })}>
+				<${o} class="accordion-item__heading">
+					<button
+						@click=${this._toggle}
+						aria-controls="main"
+						aria-expanded=${h(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>
+				</${o}>
+				<div class="accordion-item__body">
+					<div class="accordion-item__main" data-testid="main" id="main">
+						<slot></slot>
+					</div>
+				</div>
+			</div>
+		`;
+  }
+};
+n.styles = [p, _];
+let e = n;
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "animated");
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "expanded");
+i([
+  a()
+], e.prototype, "heading");
+i([
+  a({ attribute: "heading-as" })
+], e.prototype, "headingAs");
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "small");
+i([
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "truncate");
+export {
+  e 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.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)
  *
@@ -15,11 +14,8 @@ 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'>;
+    /** 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 */

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

@@ -1,7 +1,6 @@
-import "../collapse/collapse.js";
 import { SkfElement as p } from "../../internal/components/skf-element.js";
-import m from "../../styles/component.styles.js";
-import { html as f } from "lit";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { html as m } 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";
@@ -33,7 +32,7 @@ const n = class n extends p {
     });
   }
   render() {
-    return f`
+    return m`
 			<div class=${c({ "accordion--gap": this.gap })}>
 				<slot
 					@skf-collapse-toggle=${(t) => {
@@ -45,7 +44,7 @@ const n = class n extends p {
 		`;
   }
 };
-n.styles = [g, m];
+n.styles = [g, f];
 let e = n;
 s([
   a({ type: Boolean, reflect: !0 })

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,13 +1,11 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, Severity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-type SkfAlertIcon = Icon;
-type SkfAlertSeverity = SeverityFgColor;
 /**
  * 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
  *
@@ -21,13 +19,12 @@ export declare class SkfAlert extends SkfElement {
     /** Close button aria-label */
     buttonLabel: string;
     /** If defined, displays leading icon */
-    icon?: SkfAlertIcon;
+    icon?: Icon;
     /** If true, renders with an close button and sets aria-role to `status` */
     persistent: boolean;
     /** If defined, gives the supplied appearance */
-    severity?: SkfAlertSeverity;
+    severity?: Severity;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

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

@@ -1,17 +1,17 @@
 import "../icon/icon.js";
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { componentStyles as y } from "../../styles/component.styles.js";
 import { nothing as h, html as p } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import { styles as v } from "./alert.styles.js";
-var b = Object.defineProperty, r = (l, a, n, d) => {
-  for (var t = void 0, i = l.length - 1, c; i >= 0; i--)
-    (c = l[i]) && (t = c(a, n, t) || t);
-  return t && b(a, n, t), t;
+var b = Object.defineProperty, r = (n, l, a, d) => {
+  for (var t = void 0, i = n.length - 1, c; i >= 0; i--)
+    (c = n[i]) && (t = c(l, a, t) || t);
+  return t && b(l, a, t), t;
 };
-const o = class o extends y {
+const o = class o extends f {
   constructor() {
     super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
@@ -23,7 +23,6 @@ const o = class o extends y {
 				aria-describedby="main"
 				class=${u({
       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",
@@ -55,7 +54,7 @@ const o = class o extends y {
 		`;
   }
 };
-o.styles = [f, v];
+o.styles = [y, v];
 let e = o;
 r([
   s({ attribute: "button-label" })

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

@@ -19,11 +19,6 @@ const s = r`
 			padding-inline: var(--skf-spacing-50);
 		}
 
-		.alert--severity-alert {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
-		}
-
 		.alert--severity-error {
 			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
 			--_skf-alert-border-color: var(--skf-severity-fg-color-error);

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

@@ -0,0 +1,61 @@
+import "../icon/icon.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { componentStyles as h } from "../../styles/component.styles.js";
+import { html as a } from "lit";
+import { property as m, state as _ } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { styles as C } from "./breadcrumb-item.styles.js";
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (p, t, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? v(t, s) : t, o = p.length - 1, l; o >= 0; o--)
+    (l = p[o]) && (e = (r ? l(t, s, e) : l(e)) || e);
+  return r && e && d(t, s, e), e;
+};
+const n = class n extends f {
+  constructor() {
+    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, s) => {
+      var r;
+      this._onClick && t.preventDefault(), (r = this._onClick) == null || r.call(this, t, s);
+    };
+  }
+  set onClick(t) {
+    !this.href || !t || (this._onClick = t);
+  }
+  get onClick() {
+    return this._onClick;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "listitem";
+  }
+  render() {
+    return a`
+			<div class=${u({ "breadcrumb-item": !0 })}>
+				${this.href ? a`
+							<a
+								@click=${this._clickHandler}
+								aria-current=${b(this._isCurrent ? "page" : void 0)}
+								class="breadcrumb-item__label"
+								href=${this.href}
+							>
+								<slot></slot>
+							</a>
+						` : a`<slot class="breadcrumb-item__label"></slot>`}
+				<span class="breadcrumb-item__separator">/</span>
+			</div>
+		`;
+  }
+};
+n.styles = [h, C];
+let i = n;
+c([
+  m()
+], i.prototype, "href", 2);
+c([
+  m({ attribute: !1 })
+], i.prototype, "onClick", 1);
+c([
+  _()
+], i.prototype, "_isCurrent", 2);
+export {
+  i as SkfBreadcrumbItem
+};

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

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

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

@@ -0,0 +1,62 @@
+import { css as r } from "lit";
+const o = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+		}
+
+		.breadcrumb-item {
+			align-items: center;
+			display: flex;
+		}
+
+		.breadcrumb-item__label {
+			color: var(--_skf-breadcrumb-item-color, inherit);
+
+			&:is(slot) {
+				display: inline;
+			}
+
+			&:is(a) {
+				text-decoration: none;
+
+				&:focus-visible {
+					border-radius: var(--skf-border-radius-sm);
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: var(--skf-size-2);
+				}
+			}
+
+			:host(:not(:last-of-type)) & {
+				&:is(slot) {
+					--_skf-breadcrumb-item-color: var(--skf-text-color-secondary);
+				}
+
+				&:is(a) {
+					--_skf-breadcrumb-item-color: var(--skf-interactive-text-color-primary);
+
+					&:hover,
+					&:focus,
+					&:active {
+						--_skf-breadcrumb-item-color: var(--skf-interactive-text-color-primary-hover);
+
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+
+		.breadcrumb-item__separator {
+			display: block;
+			margin-inline: var(--skf-spacing-25);
+
+			:host(:last-of-type) & {
+				display: none;
+			}
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -1,6 +1,6 @@
-import type { SkfBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.component.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
+import type { SkfBreadcrumbItem } from './breadcrumb-item.component.js';
 /**
  * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
  *

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,60 @@
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import "lit";
+import { property as p, state as _, queryAssignedElements as d } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { literal as h, html as b } from "lit/static-html.js";
+import { styles as g } from "./breadcrumb.styles.js";
+var v = Object.defineProperty, r = (a, t, i, n) => {
+  for (var s = void 0, l = a.length - 1, m; l >= 0; l--)
+    (m = a[l]) && (s = m(t, i, s) || s);
+  return s && v(t, i, s), s;
+};
+const o = class o extends c {
+  constructor() {
+    super(...arguments), this.label = "Breadcrumb", this.size = "md", this._isDynamic = !1, this._handleSlotChange = () => {
+      this._items.forEach((t, i) => {
+        this._isDynamic = !!t.href;
+        const n = i === this._items.length - 1;
+        this._isDynamic && n && (t._isCurrent = !0);
+      });
+    };
+  }
+  firstUpdated() {
+    this._handleSlotChange();
+  }
+  render() {
+    const t = this._isDynamic ? h`nav` : h`div`;
+    return b`
+			<${t}
+				aria-label=${u(this.label && this._isDynamic ? this.label : void 0)}
+				class=${y({
+      breadcrumb: !0,
+      "breadcrumb--small": this.size === "sm"
+    })}
+			>
+				<ol class="breadcrumb__list">
+					<slot @slotchange=${this._handleSlotChange}></slot>
+				</ol>
+			</{tag}>
+		`;
+  }
+};
+o.styles = [f, g];
+let e = o;
+r([
+  p()
+], e.prototype, "label");
+r([
+  p({ reflect: !0 })
+], e.prototype, "size");
+r([
+  _()
+], e.prototype, "_isDynamic");
+r([
+  d()
+], e.prototype, "_items");
+export {
+  e as SkfBreadcrumb
+};

package/dist/components/breadcrumb/breadcrumb.js

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

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,22 @@
+import { css as t } from "lit";
+const s = t`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+		}
+
+		.breadcrumb--small {
+			font-size: var(--skf-font-size-75);
+			font-weight: var(--skf-font-weight-medium);
+		}
+
+		.breadcrumb__list {
+			align-items: center;
+			display: flex;
+		}
+	}
+`;
+export {
+  s as styles
+};