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

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

@@ -3,7 +3,6 @@ import '@components/icon/icon.js';
 import { SkfElement } from '@internal/components/skf-element.js';
 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/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/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/index.d.ts

@@ -1,14 +1,17 @@
 export { default as SkfAccordion, SkfAccordionItem } from './components/accordion/accordion.js';
+export { default as SkfAlert } from './components/alert/alert.js';
 export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
 export { default as SkfCollapse } from './components/collapse/collapse.js';
 export { default as SkfDivider } from './components/divider/divider.js';
+export { default as SkfHeading } from './components/heading/heading.js';
 export { default as SkfIcon } from './components/icon/icon.js';
 export { default as SkfInput } from './components/input/input.js';
 export { default as SkfLink } from './components/link/link.js';
 export { default as SkfLoader } from './components/loader/loader.js';
 export { default as SkfLogo } from './components/logo/logo.js';
 export { default as SkfRadio } from './components/radio/radio.js';
+export { default as SkfSwitch } from './components/switch/switch.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';

package/dist/index.js

@@ -1,46 +1,55 @@
 import "./components/accordion/accordion.js";
+import "./components/alert/alert.js";
 import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
 import "./components/collapse/collapse.js";
 import "./components/divider/divider.js";
+import "./components/heading/heading.js";
 import "./components/icon/icon.js";
 import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
 import "./components/radio/radio.js";
+import "./components/switch/switch.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
-import { SkfAccordion as C } from "./components/accordion/accordion.component.js";
-import { SkfButton as L } from "./components/button/button.component.js";
-import { SkfCard as l } from "./components/card/card.component.js";
-import { SkfCheckbox as T } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as h } from "./components/collapse/collapse.component.js";
-import { SkfDivider as v } from "./components/divider/divider.component.js";
-import { SkfIcon as D } from "./components/icon/icon.component.js";
-import { SkfInput as j } from "./components/input/input.component.js";
-import { SkfLink as w } from "./components/link/link.component.js";
-import { SkfLoader as z } from "./components/loader/loader.component.js";
-import { SkfLogo as F } from "./components/logo/logo.component.js";
-import { SkfRadio as H } from "./components/radio/radio.component.js";
-import { SkfTag as K } from "./components/tag/tag.component.js";
-import { SkfTextArea as N } from "./components/textarea/textarea.component.js";
-import { SkfAccordionItem as P } from "./components/accordion/accordion-item.js";
+import { SkfAccordion as I } from "./components/accordion/accordion.component.js";
+import { SkfAlert as h } from "./components/alert/alert.component.js";
+import { SkfButton as T } from "./components/button/button.component.js";
+import { SkfCard as s } from "./components/card/card.component.js";
+import { SkfCheckbox as w } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as D } from "./components/collapse/collapse.component.js";
+import { SkfDivider as R } from "./components/divider/divider.component.js";
+import { SkfHeading as q } from "./components/heading/heading.component.js";
+import { SkfIcon as z } from "./components/icon/icon.component.js";
+import { SkfInput as F } from "./components/input/input.component.js";
+import { SkfLink as J } from "./components/link/link.component.js";
+import { SkfLoader as M } from "./components/loader/loader.component.js";
+import { SkfLogo as O } from "./components/logo/logo.component.js";
+import { SkfRadio as Q } from "./components/radio/radio.component.js";
+import { SkfSwitch as V } from "./components/switch/switch.component.js";
+import { SkfTag as X } from "./components/tag/tag.component.js";
+import { SkfTextArea as Z } from "./components/textarea/textarea.component.js";
+import { SkfAccordionItem as $ } from "./components/accordion/accordion-item.js";
 export {
-  C as SkfAccordion,
-  P as SkfAccordionItem,
-  L as SkfButton,
-  l as SkfCard,
-  T as SkfCheckbox,
-  h as SkfCollapse,
-  v as SkfDivider,
-  D as SkfIcon,
-  j as SkfInput,
-  w as SkfLink,
-  z as SkfLoader,
-  F as SkfLogo,
-  H as SkfRadio,
-  K as SkfTag,
-  N as SkfTextArea
+  I as SkfAccordion,
+  $ as SkfAccordionItem,
+  h as SkfAlert,
+  T as SkfButton,
+  s as SkfCard,
+  w as SkfCheckbox,
+  D as SkfCollapse,
+  R as SkfDivider,
+  q as SkfHeading,
+  z as SkfIcon,
+  F as SkfInput,
+  J as SkfLink,
+  M as SkfLoader,
+  O as SkfLogo,
+  Q as SkfRadio,
+  V as SkfSwitch,
+  X as SkfTag,
+  Z as SkfTextArea
 };

package/package.json

@@ -34,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",
     "@commitlint/cli": "^19.5.0",