@skf-design-system/ui-components 0.0.1-beta.1 → 0.0.1-beta.4

package/README.md

@@ -70,7 +70,7 @@ 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
-import '@skf-internal/ui-components/styles/global.css';
+import '@skf-design-system/ui-components/styles/global.css';
 ```
 
 ### Angular
@@ -86,7 +86,7 @@ In order for our components to get the correct styling you need add our global s
       "options": {
          "styles": [
             "src/styles.css",
-            "node_modules/@skf-internal/ui-components/dist/styles/global.css"
+            "node_modules/@skf-design-system/ui-components/dist/styles/global.css"
          ],
          ...
       }
@@ -94,15 +94,15 @@ In order for our components to get the correct styling you need add our global s
 }}
 ```
 
-After that, you import the specific component you want to use in your file and make an instance. You can choose to import all ui components by adding `import '@skf-internal/ui-components'` or a specific component by importing `import '@skf-internal/ui-components/components/loader/loader.js';`.
+After that, you import the specific component you want to use in your file and make an instance. You can choose to import all ui components by adding `import '@skf-design-system/ui-components'` or a specific component by importing `import '@skf-design-system/ui-components/components/loader/loader.js';`.
 It might look like this in angular:
 
 ```ts
 // app.components.ts
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import '@skf-internal/ui-components/styles/global.css';
-import '@skf-internal/ui-components';
+import '@skf-design-system/ui-components/styles/global.css';
+import '@skf-design-system/ui-components';
 
 @Component({
   selector: 'app-root',
@@ -143,7 +143,7 @@ You will also have to declare a global type for the web components to get it to
 1. Create a definition file called `custom-elements-types.d.ts` as:
 
 ```ts
-import type { CustomElements } from './node_modules/@skf-internal/ui-components/dist/types/jsx/custom-element-jsx';
+import type { CustomElements } from './node_modules/@skf-design-system/ui-components/dist/types/jsx/custom-element-jsx';
 
 declare global {
 	namespace React.JSX {
@@ -194,7 +194,7 @@ Events and EventTarget should be casted as below
 or if you want all on the SkfElement
 
 ```tsx
-import { SkfInput } from "@skf-internal/ui-components";
+import { SkfInput } from "@skf-design-system/ui-components";
 
 ...
 
@@ -208,7 +208,7 @@ import { SkfInput } from "@skf-internal/ui-components";
 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-internal/ui-components/react/index.js";
+import { SkfInput } from "@skf-design-system/ui-components/react/index.js";
 
 ...
 
@@ -235,7 +235,7 @@ ui-components ships with a file called vscode.html-custom-data.json that can be
 
 ```
 {
-  "html.customData": ["./node_modules/@skf-internal/ui-components/dist/vscode.html-custom-data.json"]
+  "html.customData": ["./node_modules/@skf-design-system/ui-components/dist/vscode.html-custom-data.json"]
 }
 ```
 

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

@@ -1,9 +1,8 @@
 import type { SkfIcon } from '@components/icon/icon.component.js';
 import '@components/icon/icon.js';
 import { SkfElement } from '@internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-aurora/ui-assets';
+import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
-import '../link/link';
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
  *

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

@@ -0,0 +1,61 @@
+import "../icon/icon.js";
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import b from "../../styles/component.styles.js";
+import { html as d, nothing as f } from "lit";
+import { property as o } from "lit/decorators.js";
+import { ifDefined as r } from "lit/directives/if-defined.js";
+import h from "./alert.styles.js";
+var u = Object.defineProperty, i = (n, a, m, y) => {
+  for (var t = void 0, s = n.length - 1, p; s >= 0; s--)
+    (p = n[s]) && (t = p(a, m, t) || t);
+  return t && u(a, m, t), t;
+};
+const l = class l extends c {
+  constructor() {
+    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => this.emit("skf-alert-close");
+  }
+  render() {
+    return d`
+			<div
+				id="alert"
+				aria-describedby="main"
+				aria-modal=${r(this.closeable && "true")}
+				role=${this.closeable ? "alertdialog" : "alert"}
+			>
+				<skf-icon
+					color=${r(this.severity ?? "secondary")}
+					name=${r(this.icon)}
+					size="sm"
+				></skf-icon>
+				<div id="body">
+					<div id="main">
+						<slot></slot>
+					</div>
+					<slot name="link"></slot>
+				</div>
+				${this.closeable ? d`
+							<button @click="${this._handleClose}" aria-label=${this.buttonLabel} type="button">
+								<skf-icon name="close" size="sm"></skf-icon>
+							</button>
+						` : f}
+			</div>
+		`;
+  }
+};
+l.styles = [b, h];
+let e = l;
+i([
+  o({ type: Boolean })
+], e.prototype, "closeable");
+i([
+  o({ attribute: "button-label" })
+], e.prototype, "buttonLabel");
+i([
+  o()
+], e.prototype, "icon");
+i([
+  o()
+], e.prototype, "severity");
+export {
+  e as SkfAlert
+};

package/dist/components/alert/alert.js

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

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

@@ -0,0 +1,63 @@
+import { css as r } from "lit";
+const s = r`
+	: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);
+
+		:host([severity='alert']) & {
+			--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
+			--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
+		}
+
+		:host([severity='error']) & {
+			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
+			--_skf-alert-border-color: var(--skf-severity-fg-color-error);
+		}
+
+		:host([severity='info']) & {
+			--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
+			--_skf-alert-border-color: var(--skf-severity-fg-color-info);
+		}
+
+		:host([severity='success']) & {
+			--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
+			--_skf-alert-border-color: var(--skf-severity-fg-color-success);
+		}
+
+		:host([severity='warning']) & {
+			--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
+			--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+		}
+	}
+
+	#body {
+		display: flex;
+		flex: auto;
+		flex-wrap: wrap;
+		gap: var(--skf-spacing-25) var(--skf-spacing-100);
+		justify-content: space-between;
+	}
+
+	::slotted(skf-link) {
+		text-transform: uppercase;
+	}
+
+	button {
+		display: inline-flex;
+	}
+`;
+export {
+  s as default
+};

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

@@ -1,5 +1,5 @@
 import { SkfElement } from '@internal/components/skf-element.js';
-import type { BorderColor } from '@skf-aurora/ui-assets';
+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.

package/dist/components/heading/heading.component.js

@@ -0,0 +1,34 @@
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import u from "../../styles/component.styles.js";
+import "lit";
+import { property as a } from "lit/decorators.js";
+import { html as h, unsafeStatic as l } from "lit/static-html.js";
+import y from "./heading.styles.js";
+var c = Object.defineProperty, n = (o, p, i, d) => {
+  for (var t = void 0, e = o.length - 1, m; e >= 0; e--)
+    (m = o[e]) && (t = m(p, i, t) || t);
+  return t && c(p, i, t), t;
+};
+const s = class s extends f {
+  constructor() {
+    super(...arguments), this.as = "h1";
+  }
+  render() {
+    return h`
+			<${l(this.as)} id="heading">
+				<slot></slot>
+			</${l(this.as)}>
+		`;
+  }
+};
+s.styles = [u, y];
+let r = s;
+n([
+  a({ reflect: !0 })
+], r.prototype, "as");
+n([
+  a({ attribute: "styled-as" })
+], r.prototype, "styledAs");
+export {
+  r as SkfHeading
+};

package/dist/components/heading/heading.js

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

package/dist/components/heading/heading.styles.js

@@ -0,0 +1,62 @@
+import { css as s } from "lit";
+const t = s`
+	@layer components {
+		:host {
+			display: contents;
+		}
+
+		#heading {
+			color: var(--skf-text-color-primary);
+			font-size: var(--_skf-heading-size);
+			font-weight: var(--_skf-heading-weight);
+			line-height: 1.2;
+
+			/* Defaults */
+			:host([as='h1']) & {
+				--_skf-heading-size: var(--skf-font-size-700);
+				--_skf-heading-weight: var(--skf-font-weight-regular);
+			}
+
+			:host(:is([as='h2'], [as='h3'], [as='h4'])) & {
+				--_skf-heading-weight: var(--skf-font-weight-bold);
+			}
+
+			:host([as='h2']) & {
+				--_skf-heading-size: var(--skf-font-size-300);
+			}
+
+			:host([as='h3']) & {
+				--_skf-heading-size: var(--skf-font-size-200);
+			}
+
+			:host([as='h4']) & {
+				--_skf-heading-size: var(--skf-font-size-200);
+			}
+
+			/** Styled As */
+			:host([styled-as='h1']) & {
+				--_skf-heading-size: var(--skf-font-size-700);
+				--_skf-heading-weight: var(--skf-font-weight-regular);
+			}
+
+			:host(:is([styled-as='h2'], [styled-as='h3'], [styled-as='h4'])) & {
+				--_skf-heading-weight: var(--skf-font-weight-bold);
+			}
+
+			:host([styled-as='h2']) & {
+				--_skf-heading-size: var(--skf-font-size-300);
+			}
+
+			:host([styled-as='h3']) & {
+				--_skf-heading-size: var(--skf-font-size-200);
+			}
+
+			:host([styled-as='h4']) & {
+				--_skf-heading-size: var(--skf-font-size-200);
+			}
+		}
+	}
+`;
+export {
+  t as default
+};

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

@@ -1,5 +1,5 @@
 import { SkfElement } from '@internal/components/skf-element.js';
-import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-aurora/ui-assets';
+import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text

package/dist/components/icon/icon.component.js

@@ -0,0 +1,42 @@
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import { ICONS as d } from "@skf-design-system/ui-assets";
+import h from "../../styles/component.styles.js";
+import { html as l } from "lit";
+import { property as t } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { when as v } from "lit/directives/when.js";
+import y from "./icon.styles.js";
+var u = Object.defineProperty, o = (m, n, p, I) => {
+  for (var r = void 0, i = m.length - 1, a; i >= 0; i--)
+    (a = m[i]) && (r = a(n, p, r) || r);
+  return r && u(n, p, r), r;
+};
+const s = class s extends f {
+  constructor() {
+    super(...arguments), this._rootId = "icon", this.color = "primary", this.size = "md", this.renderDecorativeIcon = () => l`
+		<div aria-hidden="true" id=${this._rootId}>${d[this.name]}</div>
+	`, this.renderInformativeIcon = () => l`
+		<div aria-label=${c(this.label)} id=${this._rootId} role="img">${d[this.name]}</div>
+	`;
+  }
+  render() {
+    return v(!!this.label, this.renderInformativeIcon, this.renderDecorativeIcon);
+  }
+};
+s.styles = [h, y];
+let e = s;
+o([
+  t({ reflect: !0 })
+], e.prototype, "color");
+o([
+  t()
+], e.prototype, "label");
+o([
+  t({ type: String })
+], e.prototype, "name");
+o([
+  t({ reflect: !0 })
+], e.prototype, "size");
+export {
+  e as SkfIcon
+};

package/dist/components/input/input.controllers.d.ts

@@ -1,4 +1,4 @@
-import type { Icon } from '@skf-aurora/ui-assets';
+import type { Icon } from '@skf-design-system/ui-assets';
 import type { ReactiveController } from 'lit';
 import type { SkfInput } from './input.component.js';
 type InputControllerHost = SkfInput;

package/dist/components/loader/loader.component.js

@@ -0,0 +1,71 @@
+import { SkfElement as u } from "../../internal/components/skf-element.js";
+import { COLORS as c } from "@skf-design-system/ui-assets";
+import m from "../../styles/component.styles.js";
+import { svg as d, html as h } from "lit";
+import { property as a } from "lit/decorators.js";
+import v from "./loader.styles.js";
+var f = Object.defineProperty, o = (l, t, i, g) => {
+  for (var e = void 0, s = l.length - 1, p; s >= 0; s--)
+    (p = l[s]) && (e = p(t, i, e) || e);
+  return e && f(t, i, e), e;
+};
+const n = class n extends u {
+  constructor() {
+    super(...arguments), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-live", "polite");
+  }
+  /** @internal */
+  getCircle(t, i) {
+    return d`
+			<circle
+				cx=${t}
+				cy="26"
+				fill=${this.invert ? c.neutralWhite : c.brandBase}
+				key=${t}
+				r="6"
+				stroke="none"
+			>
+				<animate
+					attributeName="opacity"
+					begin=${i}
+					dur="1s"
+					repeatCount="indefinite"
+					values="0;1;0"
+				/>
+			</circle>
+		`;
+  }
+  render() {
+    return h`
+			<div aria-hidden="true" id="loader">
+				<svg
+					enableBackground="new 0 0 0 0"
+					height="100%"
+					version="1.1"
+					viewBox="0 0 52 52"
+					width="100%"
+					x="0px"
+					y="0px"
+				>
+					${[this.getCircle(6, 0.1), this.getCircle(26, 0.2), this.getCircle(46, 0.3)]}
+				</svg>
+			</div>
+		`;
+  }
+};
+n.styles = [m, v];
+let r = n;
+o([
+  a({ type: String, reflect: !0, attribute: "aria-label" })
+], r.prototype, "ariaLabel");
+o([
+  a({ type: Boolean })
+], r.prototype, "invert");
+o([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size");
+export {
+  r as SkfLoader
+};

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

@@ -1,5 +1,5 @@
 import { SkfElement } from '@internal/components/skf-element.js';
-import type { Logo } from '@skf-aurora/ui-assets';
+import type { Logo } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-logo>` component is used to display the SKF logo.

package/dist/components/switch/switch.component.js

@@ -0,0 +1,106 @@
+import { FormBase as o } from "../../internal/components/formBase.js";
+import { Asterisk as u } from "../../internal/templates/asterisk.js";
+import p from "../../styles/component.styles.js";
+import { html as c } from "lit";
+import { property as s, state as v, query as f } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { styles as b } from "./switch.styles.js";
+var y = Object.defineProperty, i = (d, e, a, _) => {
+  for (var l = void 0, r = d.length - 1, n; r >= 0; r--)
+    (n = d[r]) && (l = n(e, a, l) || l);
+  return l && y(e, a, l), l;
+};
+const h = class h extends o {
+  constructor() {
+    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
+      var a;
+      e.stopPropagation(), this.pristine = !1, this.checked = (a = this.$input) == null ? void 0 : a.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
+    }, this._handleInvalid = (e) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
+    }, this._resetValue = (e) => {
+      e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : null);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._validateInput();
+  }
+  willUpdate(e) {
+    e.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.checkValidity()) : this.removeAttribute("invalid"));
+  }
+  firstUpdated() {
+    this._initialChecked = this.checked;
+  }
+  updated(e) {
+    super.updated(e), e.has("_invalid") && this._invalid && this.debug && this.debugOutput();
+  }
+  debugOutput() {
+    this.debug && !this.validity.valid && console.log(`Switch invalidity reason: ${this.validationMessage}`);
+  }
+  /** @internal */
+  _validateInput() {
+    var e;
+    if (this._invalid = !1, this.required && !this.checked) {
+      this.pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((e = this.$input) == null ? void 0 : e.validationMessage) ?? "Please check this box if you want to proceed";
+      this.setValidity({ valueMissing: !0 }, String(a));
+    } else
+      this.setValidity({});
+  }
+  render() {
+    return c`
+			<label id="switch">
+				<input
+					?checked=${this.checked}
+					?disabled=${this.disabled}
+					?required=${this.required}
+					@change=${this._handleChange}
+					@invalid=${this._handleInvalid}
+					@reset=${this._resetValue}
+					aria-invalid=${!!this._invalid}
+					name=${m(this.name)}
+					type="checkbox"
+					value=${this.value}
+				/>
+				<div id="label">
+					<slot>${this.label}</slot>
+					${this.required ? u(this.requiredLabel) : null}
+				</div>
+			</label>
+		`;
+  }
+};
+h.styles = [p, b];
+let t = h;
+i([
+  s({ type: Boolean })
+], t.prototype, "debug");
+i([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "checked");
+i([
+  s({ type: Boolean, attribute: "hide-label", reflect: !0 })
+], t.prototype, "hideLabel");
+i([
+  s()
+], t.prototype, "label");
+i([
+  s()
+], t.prototype, "name");
+i([
+  s({ attribute: "required-label" })
+], t.prototype, "requiredLabel");
+i([
+  s({ reflect: !0 })
+], t.prototype, "size");
+i([
+  s()
+], t.prototype, "value");
+i([
+  v()
+], t.prototype, "_invalid");
+i([
+  f("input")
+], t.prototype, "$input");
+export {
+  t as SkfSwitch
+};

package/dist/components/switch/switch.js

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

package/dist/components/switch/switch.styles.js

@@ -0,0 +1,80 @@
+import { visuallyHidden as s } from "../../styles/util.styles.js";
+import { css as r } from "lit";
+const t = [
+  s,
+  r`
+		@layer components {
+			:host {
+				contain: layout;
+			}
+
+			label {
+				align-items: center;
+				display: flex;
+				grid-gap: var(--skf-spacing-50);
+
+				:host([size='sm']) & {
+					--_skf-switch-height: var(--skf-size-20);
+					--_skf-switch-width: var(--skf-size-32);
+
+					font-size: var(--skf-font-size-75);
+					font-weight: var(--skf-font-weight-medium);
+				}
+			}
+
+			input {
+				--_skf-switch-width: var(--skf-size-44);
+				--_skf-switch-height: var(--skf-size-24);
+
+				background-color: var(--_skf-switch-bg-color, var(--skf-bg-color-neutral-4));
+				block-size: var(--_skf-switch-height);
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-switch-border-color, var(--skf-border-color-primary));
+				border-radius: calc(var(--_skf-switch-height) / 2);
+				display: flex;
+				inline-size: var(--_skf-switch-width);
+				transition: background-color calc(var(--skf-motion-duration-fast) * 1ms)
+					var(--skf-motion-easing-ease-out);
+
+				&::after {
+					aspect-ratio: 1;
+					background: var(--skf-bg-color-neutral-1);
+					block-size: calc(100% - 2px);
+					border-radius: 50%;
+					content: '';
+					margin: 1px;
+					transition: transform calc(var(--skf-motion-duration-fast) * 1ms)
+						var(--skf-motion-easing-ease-out);
+				}
+
+				&:focus-visible {
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: var(--skf-size-2);
+				}
+
+				&:is(:checked, :disabled) {
+					--_skf-switch-border-color: transparent;
+				}
+
+				&:checked {
+					--_skf-switch-bg-color: var(--skf-bg-color-emphasised);
+
+					&::after {
+						transform: translateX(calc(var(--_skf-switch-width) - var(--_skf-switch-height)));
+					}
+				}
+
+				&:disabled {
+					--_skf-switch-bg-color: var(--skf-interactive-bg-color-disabled);
+				}
+			}
+
+			#asterisk {
+				color: var(--skf-severity-fg-color-error);
+			}
+		}
+	`
+];
+export {
+  t as styles
+};

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

@@ -1,6 +1,6 @@
 import '@components/icon/icon.js';
 import { SkfElement } from '@internal/components/skf-element';
-import type { Icon, SeverityBgColor } from '@skf-aurora/ui-assets';
+import type { Icon, SeverityBgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-tag>` is a component that displays a list of actions or options