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

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
-
-Reporting issues requires an skf email and github access. [See this section](#skf-email)
+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.
 
-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
 
@@ -89,10 +87,16 @@ How you get started using our components is of course a bit different depending
 
 In order for our components to work as intended you need to import our global styles where appropiate e.g. App.tsx.
 
-```tsx
+```ts
 import '@skf-design-system/ui-components/styles/global.css';
 ```
 
+If you want to handle the loading of the SKF fonts yourself, you can use the alternative global css file:
+
+```ts
+import '@skf-design-system/ui-components/styles/global-alt.css';
+```
+
 ### Angular
 
 In order for our components to get the correct styling you need add our global styling to your project. In angular you can do that in the angular.json like this:
@@ -152,11 +156,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.
 
@@ -221,24 +225,7 @@ import { SkfInput } from "@skf-design-system/ui-components";
 <skf-input name="input" onchange={(e) => console.log((e.target as unknown as SkfInput).value)}></skf-input>
 ```
 
-### React 18
-
-> Note, for React 18 it is not necessary to install an extra plugin to get code completion since you are writing in react
-
-React 18 does not support native web components out of the box. If you want to use SKF UI components with React 18 you will have to use our generated wrappers in order to do so.
-
-```tsx
-import { SkfInput } from "@skf-design-system/ui-components/react/index.js";
-
-...
-
-<SkfInput
-  name="input"
-  onChange={(e) => {
-    console.log( e.target.value );
-  }}
-/>
-```
+⚠️ **React 18** does not support native web components. If you want to use this library you must upgrade React to version 19.
 
 ### Setting up code completion
 
@@ -321,6 +308,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,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,20 +13,17 @@ 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;
     protected updated(_changedProperties: PropertyValues): void;

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

@@ -1,17 +1,17 @@
-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 = (u, t, i, o) => {
-  for (var r = void 0, l = u.length - 1, p; l >= 0; l--)
-    (p = u[l]) && (r = p(t, i, r) || r);
+  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");
       });
@@ -35,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}

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/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,73 +1,76 @@
-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
 };