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

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

@@ -1,68 +1,67 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		:host {
-			contain: layout;
-		}
+		@layer base {
+			: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);
-		}
+			#root {
+				--_skf-alert-bg-color: var(--skf-bg-color-neutral-2);
+				--_skf-alert-border-color: var(--skf-border-color-primary);
 
-		.alert--severity-alert {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
-		}
+				background-color: var(--_skf-alert-bg-color);
+				border: var(--skf-border-width-sm) solid var(--_skf-alert-border-color);
+				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);
+			}
 
-		.alert--severity-error {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-error);
-		}
+			#body {
+				display: flex;
+				flex: auto;
+				flex-wrap: wrap;
+				gap: var(--skf-spacing-25) var(--skf-spacing-100);
+				justify-content: space-between;
+			}
 
-		.alert--severity-info {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-info);
-		}
+			#main {
+				display: block;
+			}
 
-		.alert--severity-success {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-success);
-		}
+			button {
+				display: inline-flex;
+			}
 
-		.alert--severity-warning {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			::slotted(skf-link) {
+				text-transform: uppercase;
+			}
 		}
 
-		.alert__body {
-			display: flex;
-			flex: auto;
-			flex-wrap: wrap;
-			gap: var(--skf-spacing-25) var(--skf-spacing-100);
-			justify-content: space-between;
-		}
+		@layer mods {
+			:host(:state(error)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-error);
+			}
 
-		.alert__main {
-			display: block;
-		}
+			:host(:state(info)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-info);
+			}
 
-		::slotted(skf-link) {
-			text-transform: uppercase;
-		}
+			:host(:state(success)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-success);
+			}
 
-		.alert__btn {
-			cursor: pointer;
-			display: inline-flex;
+			:host(:state(warning)) #root {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;

package/dist/components/breadcrumb/breadcrumb-item.component.d.ts

@@ -0,0 +1,25 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+ *
+ * @slot - Label of the breadcrumb item
+ *
+ * @tagname skf-breadcrumb-item
+ */
+export declare class SkfBreadcrumbItem extends SkfElement {
+    static styles: CSSResultGroup;
+    private _onClick?;
+    /** If defined, loads url on click */
+    href?: string;
+    /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+    set onClick(onClickFn: ((event: Event, route: string) => void) | undefined);
+    get onClick(): ((event: Event, route: string) => void) | undefined;
+    /** @internal */
+    _isCurrent: boolean;
+    connectedCallback(): void;
+    /** @internal */
+    private _clickHandler;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/breadcrumb/breadcrumb-item.component.js

@@ -0,0 +1,60 @@
+import "../icon/icon.js";
+import { SkfElement as h } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as n } from "lit";
+import { property as f, state as _ } from "lit/decorators.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { styles as C } from "./breadcrumb-item.styles.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (a, t, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(t, s) : t, o = a.length - 1, l; o >= 0; o--)
+    (l = a[o]) && (e = (r ? l(t, s, e) : l(e)) || e);
+  return r && e && v(t, s, e), e;
+};
+const c = class c extends h {
+  constructor() {
+    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, s) => {
+      var r;
+      this._onClick && t.preventDefault(), (r = this._onClick) == null || r.call(this, t, s);
+    };
+  }
+  set onClick(t) {
+    !this.href || !t || (this._onClick = t);
+  }
+  get onClick() {
+    return this._onClick;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "listitem";
+  }
+  render() {
+    return n`
+			<div id="root">
+				${this.href ? n`
+							<a
+								@click=${this._clickHandler}
+								aria-current=${u(this._isCurrent ? "page" : void 0)}
+								class="label"
+								href=${this.href}
+							>
+								<slot></slot>
+							</a>
+						` : n`<slot class="label"></slot>`}
+				<span>/</span>
+			</div>
+		`;
+  }
+};
+c.styles = [m, C];
+let i = c;
+p([
+  f({ type: String })
+], i.prototype, "href", 2);
+p([
+  f({ attribute: !1 })
+], i.prototype, "onClick", 1);
+p([
+  _()
+], i.prototype, "_isCurrent", 2);
+export {
+  i as SkfBreadcrumbItem
+};

package/dist/components/breadcrumb/breadcrumb-item.d.ts

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

package/dist/components/breadcrumb/breadcrumb-item.js

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

package/dist/components/breadcrumb/breadcrumb-item.styles.js

@@ -0,0 +1,63 @@
+import { css as r } from "lit";
+const e = r`
+	@layer components {
+		:host {
+			contain: layout;
+		}
+
+		#root {
+			--_skf-breadcrumb-item-color: inherit;
+
+			align-items: center;
+			display: flex;
+		}
+
+		span {
+			display: block;
+			margin-inline: var(--skf-spacing-25);
+
+			:host(:last-of-type) & {
+				display: none;
+			}
+		}
+
+		.label {
+			color: var(--_skf-breadcrumb-item-color);
+
+			&:is(slot) {
+				display: inline;
+			}
+
+			&:is(a) {
+				text-decoration: none;
+
+				&:focus-visible {
+					border-radius: var(--skf-border-radius-sm);
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: var(--skf-size-2);
+				}
+			}
+
+			:host(:not(:last-of-type)) & {
+				&:is(slot) {
+					--_skf-breadcrumb-item-color: var(--skf-text-color-secondary);
+				}
+
+				&:is(a) {
+					--_skf-breadcrumb-item-color: var(--skf-interactive-text-color-primary);
+
+					&:hover,
+					&:focus,
+					&:active {
+						--_skf-breadcrumb-item-color: var(--skf-interactive-text-color-primary-hover);
+
+						text-decoration: underline;
+					}
+				}
+			}
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -0,0 +1,32 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+import type { SkfBreadcrumbItem } from './breadcrumb-item.component.js';
+/**
+ * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+ *
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
+ *
+ * @event click - Fired when the item is clicked
+ *
+ * @slot - One or more `<skf-breadcrumb-item>`
+ *
+ * @tagname skf-breadcrumb
+ */
+export declare class SkfBreadcrumb extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
+    /** aria-label for the breadcrumb control  */
+    label: string;
+    /** If true, renders a smaller version */
+    small: boolean;
+    /** @internal */
+    _isDynamic: boolean;
+    /** @internal */
+    _items: NodeListOf<SkfBreadcrumbItem>;
+    firstUpdated(): void;
+    /** @internal */
+    _handleStateChange(): void;
+    /** @internal */
+    private _handleSlotChange;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,65 @@
+var f = (t) => {
+  throw TypeError(t);
+};
+var g = (t, s, e) => s.has(t) || f("Cannot " + e);
+var p = (t, s, e) => (g(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), y = (t, s, e, i) => (g(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { watch as D } from "../../internal/helpers/watch.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
+import "lit";
+import { property as u, state as S, queryAssignedElements as O } from "lit/decorators.js";
+import { html as P } from "lit/static-html.js";
+import { styles as b } from "./breadcrumb.styles.js";
+var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (t, s, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? E(s, e) : s, h = t.length - 1, m; h >= 0; h--)
+    (m = t[h]) && (r = (i ? m(s, e, r) : m(r)) || r);
+  return i && r && w(s, e, r), r;
+}, a, l;
+const c = class c extends d {
+  constructor() {
+    super(...arguments);
+    _(this, a);
+    _(this, l);
+    y(this, a, this.attachInternals()), y(this, l, p(this, a).states), this.label = "Breadcrumb", this.small = !1, this._isDynamic = !1, this._handleSlotChange = () => {
+      this._items.forEach((e, i) => {
+        this._isDynamic = this._isDynamic || !!e.href, this.role = this._isDynamic ? "navigation" : null;
+        const r = i === this._items.length - 1;
+        this._isDynamic && r && (e._isCurrent = !0);
+      });
+    };
+  }
+  firstUpdated() {
+    this._handleSlotChange();
+  }
+  _handleStateChange() {
+    C(p(this, l), "small").set(this.small);
+  }
+  render() {
+    return P`
+			<ol id="root">
+				<slot @slotchange=${this._handleSlotChange}></slot>
+			</ol>
+		`;
+  }
+};
+a = new WeakMap(), l = new WeakMap(), c.styles = [v, b];
+let o = c;
+n([
+  u({ type: String })
+], o.prototype, "label", 2);
+n([
+  u({ type: Boolean })
+], o.prototype, "small", 2);
+n([
+  S()
+], o.prototype, "_isDynamic", 2);
+n([
+  O()
+], o.prototype, "_items", 2);
+n([
+  D("small")
+], o.prototype, "_handleStateChange", 1);
+export {
+  o as SkfBreadcrumb
+};

package/dist/components/breadcrumb/breadcrumb.d.ts

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

package/dist/components/breadcrumb/breadcrumb.js

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

package/dist/components/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,25 @@
+import { css as t } from "lit";
+const s = t`
+	@layer components {
+		@layer base {
+			:host {
+				contain: layout;
+			}
+
+			#root {
+				align-items: center;
+				display: flex;
+			}
+		}
+
+		@layer mods {
+			:host(:state(small)) #root {
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+			}
+		}
+	}
+`;
+export {
+  s as styles
+};

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

@@ -1,18 +1,23 @@
-import type { SkfIcon } from '../icon/icon.component.js';
 import '../icon/icon.js';
 import '../loader/loader.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
+import type { Icon } from '../../internal/types.js';
 import { type CSSResultGroup, type PropertyValues } from 'lit';
+type SkfButtonType = HTMLButtonElement['type'];
 /**
  * Component to be used in forms or for interactivity
  *
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles
+ *
  * @slot - The Primary content
  *
- * @event click - Fires when the button is clicked
+ * @event {CustomEvent} click - Fires when the button is clicked
  *
  * @tagname skf-button
  */
 export declare class SkfButton extends SkfElement {
+    #private;
+    static styles: CSSResultGroup;
     static formAssociated: boolean;
     static shadowRootOptions: {
         delegatesFocus: boolean;
@@ -20,31 +25,27 @@ export declare class SkfButton extends SkfElement {
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    static styles: CSSResultGroup;
     /** @internal */
     private _transitionOptions;
-    _internals: ElementInternals;
     /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
     destructive: boolean;
     /** If true, removes border */
     disabled: boolean;
     /** If provided, renders an icon before or after the text */
-    /** @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" } */
-    icon?: SkfIcon['name'];
-    /** If true, removes border */
+    icon?: Icon;
+    /** If true, button will take a square shape */
     iconOnly: boolean;
-    /** If provided, determines the positioning of the icon in relation to the text  */
-    iconPosition?: 'left' | 'right';
+    /** Determines the positioning of the icon in relation to the text  */
+    iconPosition: 'left' | 'right';
     /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
     loading: boolean;
     noValidate: boolean;
     /** If provided, displays an alternative size */
-    size: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     /** If provided, changes the button type */
-    /** @type { 'button' | 'submit' | 'reset' } */
-    type: HTMLButtonElement['type'];
+    type: SkfButtonType;
     /** If provided, alters the appearance */
-    variant: 'primary' | 'secondary';
+    variant: 'primary' | 'secondary' | 'tertiary';
     /** @internal */
     private _loaderVisible;
     /** @internal */
@@ -55,7 +56,8 @@ export declare class SkfButton extends SkfElement {
     private $button?;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** @internal */
+    _handleLoadingChange(): void;
     /** @internal */
     _handleClick: (e: MouseEvent) => void;
     /** @internal */
@@ -72,3 +74,4 @@ export declare class SkfButton extends SkfElement {
     private _renderIcon;
     render(): import("lit").TemplateResult<1>;
 }
+export {};