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

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
 
@@ -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.
 
@@ -304,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
@@ -341,6 +351,24 @@ Checklist:
 
 </details>
 
+## Known inconsistencies coming from the React library and v1 Web Components
+
+Our focus going forward is on the v2 package of Web Components (new brand design) and as our bandwidth is limited work done to the v1 Web Compnent library will be very limited.
+
+| React Component | WC v1 - Solution                                                              |
+| --------------- | ----------------------------------------------------------------------------- |
+| IconButton      | Use `skf-link` without text or `skf-button` variant tertiary, without a label |
+| Search          | Search is now a variant of `skf-input`                                        |
+| Image           | Was deemed not adding value over the native `picture`/`img` tag               |
+| Paragraph       | Was deemed not adding value over the native p tag                             |
+| useTooltip      | Not needed, `skf-tooltip` handles it common state internally                  |
+| usePopup        | Renamed `skf-popover`, no need for a hook                                     |
+| EmptyState      | Missing but easy to copy svg from React and recreate                          |
+| SkfUiProvider   | Not needed, you add our global css as mentioned above                         |
+| ToastProvider   | `skf-toast` handles its own internal state, no provider needed                |
+| ts tokens       | The global css contains all tokens as css custom vars which should suffice    |
+| Missing tokens  | A few tokens are missing. Report as issue but expect to create your own       |
+
 ## 🧑‍⚖️ License
 
 Copyright SKF 2024

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)
  *
@@ -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 */
@@ -29,7 +25,7 @@ export declare class SkfAccordion extends SkfElement {
     /** If true, will truncate all headings in collapsed state */
     truncate: boolean;
     /** @internal */
-    private $accordionItems;
+    private _accordionItems;
     protected updated(_changedProperties: PropertyValues): void;
     /** @internal */
     private get items();

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

@@ -1,13 +1,12 @@
-import "../collapse/collapse.js";
 import { SkfElement as p } from "../../internal/components/skf-element.js";
-import m from "../../styles/component.styles.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, l) => {
-  for (var r = void 0, o = u.length - 1, h; o >= 0; o--)
-    (h = u[o]) && (r = h(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 p {
@@ -23,20 +22,20 @@ const n = class n extends p {
   }
   /** @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;
     const i = t.target;
-    this.items.length && this.items.forEach((l) => {
-      l !== i && l.hasAttribute("expanded") && l.setClose();
+    this.items.length && this.items.forEach((o) => {
+      o !== i && o.hasAttribute("expanded") && o.setClose();
     });
   }
   render() {
     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,15 +1,14 @@
 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 Language } from '../../utilities/localize.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
+ * @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
@@ -17,17 +16,20 @@ type SkfAlertSeverity = SeverityFgColor;
  * @tagname skf-alert
  */
 export declare class SkfAlert extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /** Close button aria-label */
-    buttonLabel: string;
     /** If defined, displays leading icon */
-    icon?: SkfAlertIcon;
+    icon?: Icon;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** 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;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

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

@@ -1,74 +1,82 @@
-import "../icon/icon.js";
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import f 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 u = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends y {
+var g = (t, e, s) => e.has(t) || u("Cannot " + s);
+var c = (t, e, s) => (g(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (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), m = (t, e, s, o) => (g(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+import "../icon/icon.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { stateMap as w } from "../../internal/helpers/stateMap.js";
+import { watch as S } from "../../internal/helpers/watch.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { LocalizeController as z } from "../../utilities/localize.js";
+import { nothing as O, html as b } from "lit";
+import { property as f } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { styles as P } from "./alert.styles.js";
+var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? D(e, s) : e, y = t.length - 1, d; y >= 0; y--)
+    (d = t[y]) && (i = (o ? d(e, s, i) : d(i)) || i);
+  return o && i && k(e, s, i), i;
+}, n, a, l;
+const v = class v extends C {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
+    super(...arguments);
+    h(this, n);
+    h(this, a);
+    h(this, l);
+    m(this, n, new z(this)), m(this, a, this.attachInternals()), m(this, l, c(this, a).states), this.lang = "en", 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"];
+    w(c(this, l), s).set(this.severity);
+  }
   render() {
-    return p`
-			<div
-				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",
-      "alert--severity-warning": this.severity === "warning",
-      [this.className]: !0
-    })}
-				role=${this.persistent ? "status" : "alert"}
-			>
+    return b`
+			<div id="root">
 				<skf-icon
-					color=${m(this.severity ?? "secondary")}
-					name=${m(this.icon ?? "info")}
+					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.persistent ? p`
+				${this.persistent ? b`
 							<button
 								@click="${this._handleClose}"
-								aria-label=${this.buttonLabel}
-								class="alert__btn"
+								aria-label=${c(this, n).term("close")}
 								type="button"
 							>
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : h}
+						` : O}
 			</div>
 		`;
   }
 };
-o.styles = [f, v];
-let e = o;
-r([
-  s({ attribute: "button-label" })
-], e.prototype, "buttonLabel");
-r([
-  s()
-], e.prototype, "icon");
-r([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "persistent");
-r([
-  s({ reflect: !0 })
-], e.prototype, "severity");
+n = new WeakMap(), a = new WeakMap(), l = new WeakMap(), v.styles = [$, P];
+let r = v;
+p([
+  f({ type: String })
+], r.prototype, "icon", 2);
+p([
+  f({ type: String })
+], r.prototype, "lang", 2);
+p([
+  f({ type: Boolean })
+], r.prototype, "persistent", 2);
+p([
+  f({ type: String })
+], r.prototype, "severity", 2);
+p([
+  S("severity")
+], r.prototype, "_handleStateChange", 1);
 export {
-  e as SkfAlert
+  r as SkfAlert
 };