@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,8 @@
+import { SkfDrawer } from './drawer.component.js';
+export * from './drawer.component.js';
+export default SkfDrawer;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-drawer': SkfDrawer;
+    }
+}

package/dist/components/drawer/drawer.js

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

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,71 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		dialog {
+			all: unset;
+			background-color: var(--skf-bg-color-neutral-1);
+			display: none;
+			flex-direction: column;
+			inline-size: min(100%, var(--_skf-drawer-size, 540px));
+			inset-block: 0;
+			inset-inline: var(--_skf-drawer-inset, auto 0);
+			position: fixed;
+			translate: 100% 0;
+
+			&[open] {
+				display: flex;
+
+				&::backdrop {
+					background-color: var(--skf-bg-color-neutral-7);
+					opacity: 0.4;
+				}
+			}
+
+			:host([placement='left']) & {
+				--_skf-drawer-inset: 0 auto;
+
+				translate: -100% 0;
+			}
+
+			:host([size='sm']) & {
+				--_skf-drawer-size: 400px;
+			}
+
+			:host([size='lg']) & {
+				--_skf-drawer-size: 680px;
+			}
+		}
+
+		header {
+			align-items: center;
+			background-color: var(--skf-bg-color-emphasised);
+			block-size: var(--skf-size-48);
+			color: var(--skf-text-color-inverse);
+			display: flex;
+			justify-content: space-between;
+			padding-inline: var(--skf-box-spacing);
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+		}
+
+		#close-button {
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+
+		#body {
+			display: block;
+			flex: auto;
+			padding: var(--skf-box-spacing);
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,46 @@
+import '../button/button.js';
+import '../drawer/drawer.js';
+import '../logo/logo.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Navigation items
+ *
+ * @tagname skf-header
+ */
+export declare class SkfHeader extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _dynamicBreakpoint?;
+    /** @internal */
+    private _widthObserver?;
+    /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
+    set compact(value: boolean);
+    get compact(): boolean;
+    /** If defined, sets the aria-label for the hamburger button */
+    hamburgerAriaLabel: string;
+    /** If defined, sets the app or site's name */
+    siteName?: string;
+    /** If defined, sets the site's base-url for the "logo-link" */
+    siteUrl?: string;
+    /** @internal */
+    isCompact: boolean;
+    /** @internal */
+    private openDrawer;
+    /** @internal */
+    private nav;
+    /** @internal */
+    private $navWrapper;
+    firstUpdated(): void;
+    /** @internal */
+    private _observeHostWidth;
+    /** @internal */
+    private _observeNavContainer;
+    /** @internal */
+    private _renderMeta;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/header/header.component.js

@@ -0,0 +1,116 @@
+import "../button/button.js";
+import "../drawer/drawer.js";
+import "../logo/logo.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { nothing as u, html as o } from "lit";
+import { property as s, state as f, queryAssignedElements as w, query as _ } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { literal as v, html as y } from "lit/static-html.js";
+import { styles as $ } from "./header.styles.js";
+var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (c, e, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? C(e, n) : e, p = c.length - 1, h; p >= 0; p--)
+    (h = c[p]) && (i = (a ? h(e, n, i) : h(i)) || i);
+  return a && i && g(e, n, i), i;
+};
+const l = class l extends d {
+  constructor() {
+    super(...arguments), this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+  }
+  set compact(e) {
+    this.isCompact = e;
+  }
+  get compact() {
+    return this.isCompact;
+  }
+  firstUpdated() {
+    this.updateComplete.then(() => {
+      if (this.compact) {
+        this.isCompact = !0, this.nav[0].vertical = !0;
+        return;
+      }
+      this._observeHostWidth();
+    }).catch(console.error);
+  }
+  /** @internal */
+  _observeHostWidth() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.clientWidth > (this._dynamicBreakpoint ?? 0) && (this._dynamicBreakpoint = null, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !1, this.nav[0].vertical = !1, this._observeNavContainer());
+    }), this._widthObserver.observe(this);
+  }
+  /** @internal */
+  _observeNavContainer() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.$navWrapper.clientWidth < this.$navWrapper.scrollWidth && (this._dynamicBreakpoint = this.clientWidth, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !0, this.nav[0].vertical = !0, this._observeHostWidth());
+    }), this._widthObserver.observe(this.$navWrapper);
+  }
+  /** @internal */
+  _renderMeta() {
+    const e = this.siteUrl ? v`a` : v`div`;
+    return y`
+			<${e} href=${m(this.siteUrl)} id="meta">
+				<skf-logo color="inverse"></skf-logo>
+				${this.siteName ? o`<h2>${this.siteName}</h2>` : u}
+			</${e}>
+		`;
+  }
+  render() {
+    return o`
+			<header role="banner">
+				${this._renderMeta()}
+				<div id="nav-wrapper">
+					${this.isCompact ? o`
+								<button
+									@click=${() => this.openDrawer = !this.openDrawer}
+									aria-controls="drawer"
+									aria-expanded=${this.openDrawer}
+									aria-label=${this.hamburgerAriaLabel}
+								>
+									<skf-icon color="inverse" name="hamburgerMenu" size="lg"></skf-icon>
+								</button>
+								<skf-drawer
+									?open=${this.openDrawer}
+									@close=${() => this.openDrawer = !1}
+									heading=${m(this.siteName)}
+									id="drawer"
+									placement="right"
+								>
+									<slot></slot>
+								</skf-drawer>
+							` : o`<slot></slot>`}
+				</div>
+			</header>
+		`;
+  }
+};
+l.styles = [b, $];
+let t = l;
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "compact", 1);
+r([
+  s({ attribute: "hamburger-aria-label" })
+], t.prototype, "hamburgerAriaLabel", 2);
+r([
+  s({ attribute: "site-name" })
+], t.prototype, "siteName", 2);
+r([
+  s({ attribute: "site-url" })
+], t.prototype, "siteUrl", 2);
+r([
+  s({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
+], t.prototype, "isCompact", 2);
+r([
+  f()
+], t.prototype, "openDrawer", 2);
+r([
+  w({ selector: "skf-nav" })
+], t.prototype, "nav", 2);
+r([
+  _("#nav-wrapper")
+], t.prototype, "$navWrapper", 2);
+export {
+  t as SkfHeader
+};

package/dist/components/header/header.d.ts

@@ -0,0 +1,8 @@
+import { SkfHeader } from './header.component.js';
+export * from './header.component.js';
+export default SkfHeader;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-header': SkfHeader;
+    }
+}

package/dist/components/header/header.js

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

package/dist/components/header/header.styles.js

@@ -0,0 +1,68 @@
+import { css as e } from "lit";
+const a = e`
+	@layer components {
+		:host {
+			--skf-header-height: 60px;
+		}
+
+		header {
+			align-items: center;
+			background-color: var(--skf-bg-color-emphasised);
+			block-size: var(--skf-header-height);
+			display: flex;
+			gap: var(--skf-spacing-125);
+			justify-content: space-between;
+			padding-inline: var(--skf-spacing-100);
+		}
+
+		#meta {
+			align-items: inherit;
+			color: var(--skf-text-color-inverse);
+			display: inherit;
+			gap: var(--skf-spacing-100);
+
+			&:is(a) {
+				text-decoration: none;
+			}
+
+			:host(:not([is-compact])) &:has(h2)::after {
+				align-self: normal;
+				border-right: 1px solid var(--skf-border-color-inverse);
+				content: '';
+				display: block;
+			}
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+			font-weight: var(--skf-font-weight-regular);
+			white-space: nowrap;
+		}
+
+		#nav-wrapper:has(skf-drawer) {
+			display: inline-flex; /** Shrink-wrap icon-button */
+		}
+
+		#nav-wrapper:not(:has(skf-drawer)) {
+			overflow: hidden;
+		}
+
+		skf-drawer::part(body) {
+			background-color: var(--skf-bg-color-emphasised);
+			padding: 0;
+		}
+
+		button {
+			color: var(--_skf-header-button-color, var(--skf-interactive-text-color-inverse));
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

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

@@ -1,5 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
+import type { HeadingType } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
@@ -10,18 +10,14 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-heading
  */
 export declare class SkfHeading extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /**
-     * Controls which heading element will be rendered. Should not be used to affect appearance
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
+    /** Controls which heading element will be rendered. Should not be used to affect appearance */
     as: HeadingType;
-    /**
-     * If provided, changes the appearance of the heading
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
+    /** If defined, changes the appearance of the heading */
     styledAs?: HeadingType;
-    render(): import("lit").TemplateResult;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
+    render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,34 +1,62 @@
-import { SkfElement as n } 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 y, unsafeStatic as l } from "lit/static-html.js";
-import c from "./heading.styles.js";
-var h = Object.defineProperty, f = (o, p, i, d) => {
-  for (var t = void 0, s = o.length - 1, m; s >= 0; s--)
-    (m = o[s]) && (t = m(p, i, t) || t);
-  return t && h(p, i, t), t;
+var y = (t) => {
+  throw TypeError(t);
 };
-const e = class e extends n {
+var d = (t, e, s) => e.has(t) || y("Cannot " + s);
+var n = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), c = (t, e, s) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), m = (t, e, s, r) => (d(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as w } from "lit";
+import { property as v } from "lit/decorators.js";
+import { styles as L } from "./heading.styles.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, f = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? P(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, s, a) : p(a)) || a);
+  return r && a && O(e, s, a), a;
+}, h, i;
+const u = class u extends b {
   constructor() {
-    super(...arguments), this.as = "h1";
+    super(...arguments);
+    c(this, h);
+    c(this, i);
+    m(this, h, this.attachInternals()), m(this, i, n(this, h).states), this.as = "h2";
+  }
+  connectedCallback() {
+    switch (super.connectedCallback(), this.role = "heading", !0) {
+      case this.as === "h1":
+        this.ariaLevel = "1";
+        break;
+      case this.as === "h3":
+        this.ariaLevel = "3";
+        break;
+      case this.as === "h4":
+        this.ariaLevel = "4";
+        break;
+      default:
+        this.ariaLevel = "2";
+        break;
+    }
+  }
+  _handleStateChange() {
+    const s = ["h1", "h2", "h3", "h4"];
+    _(n(this, i), s).set(this.styledAs);
   }
   render() {
-    return y`
-			<${l(this.as)} id="root">
-				<slot></slot>
-			</${l(this.as)}>
-		`;
+    return w`<slot data-as=${this.as} id="root"></slot>`;
   }
 };
-e.styles = [u, c];
-let r = e;
+h = new WeakMap(), i = new WeakMap(), u.styles = [g, L];
+let o = u;
+f([
+  v({ type: String, reflect: !0, useDefault: !0 })
+], o.prototype, "as", 2);
 f([
-  a({ reflect: !0 })
-], r.prototype, "as");
+  v({ type: String, attribute: "styled-as" })
+], o.prototype, "styledAs", 2);
 f([
-  a({ attribute: "styled-as" })
-], r.prototype, "styledAs");
+  C("styledAs")
+], o.prototype, "_handleStateChange", 1);
 export {
-  r as SkfHeading
+  o as SkfHeading
 };

package/dist/components/heading/heading.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+export declare const styles: import("lit").CSSResult;

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

@@ -1,62 +1,60 @@
 import { css as s } from "lit";
 const t = s`
 	@layer components {
-		:host {
-			display: contents;
-		}
-
-		#root {
-			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);
+		@layer base {
+			#root {
+				color: var(--skf-text-color-primary);
+				font-size: var(--_skf-heading-size);
+				font-weight: var(--_skf-heading-weight);
+				line-height: 1.2;
+
+				&[data-as='h1'] {
+					--_skf-heading-size: var(--skf-font-size-700);
+					--_skf-heading-weight: var(--skf-font-weight-regular);
+				}
+
+				&:is([data-as='h2'], [data-as='h3'], [data-as='h4']) {
+					--_skf-heading-weight: var(--skf-font-weight-bold);
+				}
+
+				&[data-as='h2'] {
+					--_skf-heading-size: var(--skf-font-size-300);
+				}
+
+				&[data-as='h3'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
+
+				&[data-as='h4'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
 			}
+		}
 
-			/** Styled As */
-			:host([styled-as='h1']) & {
+		@layer mods {
+			:host(:state(h1)) #root {
 				--_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'])) & {
+			:host(:is(:state(h2), :state(h3), :state(h4))) #root {
 				--_skf-heading-weight: var(--skf-font-weight-bold);
 			}
 
-			:host([styled-as='h2']) & {
+			:host(:state(h2)) #root {
 				--_skf-heading-size: var(--skf-font-size-300);
 			}
 
-			:host([styled-as='h3']) & {
+			:host(:state(h3)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 
-			:host([styled-as='h4']) & {
+			:host(:state(h4)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 		}
 	}
 `;
 export {
-  t as default
+  t as styles
 };

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

@@ -1,31 +1,29 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
+import { type IconSize } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfIconSize = IconSize;
 /**
- * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+ * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/*) for design principles
  *
  * @tagname skf-icon
  */
 export declare class SkfIcon extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    /**
-     * Sets the color of the icon
-     * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
-     */
-    color: IconColor | SeverityFgColor;
+    /** Sets the color of the icon */
+    color: IconColor;
     /** If defined, adds an alternate description to use for assistive devices */
     label?: string;
-    /**
-     * Name of the icon to display
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
-     */
+    /** Name of the icon to display */
     name: Icon;
-    /**
-     * Size of the icon
-     * @type { "xs" | "sm" | "md" | "lg" }
-     */
-    size: IconSize;
+    /** Size of the icon */
+    size: SkfIconSize;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};