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

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,18 +25,15 @@ 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;
     /** Determines the positioning of the icon in relation to the text  */
     iconPosition: 'left' | 'right';
@@ -39,10 +41,9 @@ export declare class SkfButton extends SkfElement {
     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' | 'tertiary';
     /** @internal */
@@ -55,6 +56,7 @@ export declare class SkfButton extends SkfElement {
     private $button?;
     constructor();
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** @internal */
     _handleLoadingChange(): void;
     /** @internal */
     _handleClick: (e: MouseEvent) => void;
@@ -72,3 +74,4 @@ export declare class SkfButton extends SkfElement {
     private _renderIcon;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/button/button.component.js

@@ -1,33 +1,40 @@
+var u = (i) => {
+  throw TypeError(i);
+};
+var _ = (i, s, t) => s.has(i) || u("Cannot " + t);
+var p = (i, s, t) => (_(i, s, "read from private field"), t ? t.call(i) : s.get(i)), v = (i, s, t) => s.has(i) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), $ = (i, s, t, a) => (_(i, s, "write to private field"), a ? a.call(i, t) : s.set(i, t), t);
 import "../icon/icon.js";
 import "../loader/loader.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
-import { watch as f } from "../../internal/helpers/watch.js";
-import u from "../../styles/component.styles.js";
-import { html as d, LitElement as _, nothing as p } from "lit";
-import { property as o, state as v, query as c } from "lit/decorators.js";
-import { classMap as $ } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import g from "./button.styles.js";
-var O = Object.defineProperty, V = Object.getOwnPropertyDescriptor, s = (y, t, l, r) => {
-  for (var e = r > 1 ? void 0 : r ? V(t, l) : t, a = y.length - 1, n; a >= 0; a--)
-    (n = y[a]) && (e = (r ? n(t, l, e) : n(e)) || e);
-  return r && e && O(t, l, e), e;
-};
-const h = class h extends m {
+import { SkfElement as O } from "../../internal/components/skf-element.js";
+import { watch as V } from "../../internal/helpers/watch.js";
+import { componentStyles as w } from "../../styles/component.styles.js";
+import { html as y, LitElement as z, nothing as b } from "lit";
+import { property as r, state as P, query as m } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { styles as C } from "./button.styles.js";
+var F = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (i, s, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? k(s, t) : s, h = i.length - 1, d; h >= 0; h--)
+    (d = i[h]) && (n = (a ? d(s, t, n) : d(n)) || n);
+  return a && n && F(s, t, n), n;
+}, l;
+const c = class c extends O {
   constructor() {
-    super(), this._transitionOptions = {
+    super();
+    v(this, l);
+    this._transitionOptions = {
       duration: 200,
       fill: "forwards"
     }, this.destructive = !1, this.disabled = !1, this.iconOnly = !1, this.iconPosition = "left", this.loading = !1, this.noValidate = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._handleClick = (t) => {
       t.preventDefault(), t.stopPropagation(), !(this.disabled || this.loading) && (this.dispatchEvent(new CustomEvent("click", { bubbles: !0, composed: !0, detail: t })), this.type === "submit" && this._submitForm(), this.type === "reset" && this._resetForm());
     }, this._submitForm = () => {
-      var e, a, n;
-      const t = !((e = this._internals.form) != null && e.reportValidity()), l = !this.noValidate, r = !((a = this._internals.form) != null && a.hasAttribute("no-validate"));
-      (l || r) && t || (n = this._internals.form) == null || n.requestSubmit();
+      var h, d, f;
+      const t = !((h = p(this, l).form) != null && h.reportValidity()), a = !this.noValidate, n = !((d = p(this, l).form) != null && d.hasAttribute("no-validate"));
+      (a || n) && t || (f = p(this, l).form) == null || f.requestSubmit();
     }, this._resetForm = () => {
       var t;
-      (t = this._internals.form) == null || t.reset();
-    }, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${b(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
+      (t = p(this, l).form) == null || t.reset();
+    }, this._renderIcon = () => y`<skf-icon class="skf-icon-host" name=${g(this.icon)}></skf-icon>`, $(this, l, this.attachInternals());
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -53,11 +60,12 @@ const h = class h extends m {
     !this.$body || !this.$loader || (await this.$loader.animate({ opacity: 0 }, this._transitionOptions).finished, this._loaderVisible = !1, this.$body.animate({ opacity: 1 }, this._transitionOptions));
   }
   render() {
-    return d`
+    return y`
 			<button
 				?disabled=${this.disabled || this.loading}
+				@click=${this._handleClick}
 				aria-busy=${this.loading}
-				class=${$({
+				class=${L({
       btn: !0,
       "btn--destructive": this.destructive,
       "btn--icon-only": this.iconOnly,
@@ -68,68 +76,67 @@ const h = class h extends m {
       "btn--variant-secondary": this.variant === "secondary",
       "btn--variant-tertiary": this.variant === "tertiary"
     })}
-				type=${b(this.type)}
-				@click=${this._handleClick}
+				type=${g(this.type)}
 				title=${/* An empty title prevents browser validation tooltips from appearing on hover */
     this.title}
 			>
-				${this.variant === "primary" && this._loaderVisible ? d`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
+				${this.variant === "primary" && this._loaderVisible ? y`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
 				<div class="btn__body" id="body">
-					${this.icon && this.iconPosition === "left" ? this._renderIcon() : p}
-					${this.iconOnly ? p : d`<slot class="btn__label"></slot>`}
-					${this.icon && this.iconPosition === "right" ? this._renderIcon() : p}
+					${this.icon && this.iconPosition === "left" ? this._renderIcon() : b}
+					${this.iconOnly ? b : y`<slot class="btn__label"></slot>`}
+					${this.icon && this.iconPosition === "right" ? this._renderIcon() : b}
 				</div>
 			</button>
 		`;
   }
 };
-h.formAssociated = !0, h.shadowRootOptions = { ..._.shadowRootOptions, delegatesFocus: !0 }, h.styles = [u, g];
-let i = h;
-s([
-  o({ type: Boolean })
-], i.prototype, "destructive", 2);
-s([
-  o({ type: Boolean })
-], i.prototype, "disabled", 2);
-s([
-  o()
-], i.prototype, "icon", 2);
-s([
-  o({ type: Boolean })
-], i.prototype, "iconOnly", 2);
-s([
-  o({ attribute: "icon-position" })
-], i.prototype, "iconPosition", 2);
-s([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "loading", 2);
-s([
-  o({ type: Boolean, attribute: "no-validate" })
-], i.prototype, "noValidate", 2);
-s([
-  o({ reflect: !0 })
-], i.prototype, "size", 2);
-s([
-  o()
-], i.prototype, "type", 2);
-s([
-  o({ reflect: !0 })
-], i.prototype, "variant", 2);
-s([
-  v()
-], i.prototype, "_loaderVisible", 2);
-s([
-  c("skf-loader")
-], i.prototype, "$loader", 2);
-s([
-  c("#body")
-], i.prototype, "$body", 2);
-s([
-  c("button")
-], i.prototype, "$button", 2);
-s([
-  f("loading", { afterUpdate: !0 })
-], i.prototype, "_handleLoadingChange", 1);
+l = new WeakMap(), c.styles = [w, C], c.formAssociated = !0, c.shadowRootOptions = { ...z.shadowRootOptions, delegatesFocus: !0 };
+let e = c;
+o([
+  r({ type: Boolean })
+], e.prototype, "destructive", 2);
+o([
+  r({ type: Boolean })
+], e.prototype, "disabled", 2);
+o([
+  r()
+], e.prototype, "icon", 2);
+o([
+  r({ type: Boolean, attribute: "icon-only" })
+], e.prototype, "iconOnly", 2);
+o([
+  r({ attribute: "icon-position" })
+], e.prototype, "iconPosition", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
+o([
+  r({ type: Boolean, attribute: "no-validate" })
+], e.prototype, "noValidate", 2);
+o([
+  r({ reflect: !0 })
+], e.prototype, "size", 2);
+o([
+  r()
+], e.prototype, "type", 2);
+o([
+  r({ reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  P()
+], e.prototype, "_loaderVisible", 2);
+o([
+  m("skf-loader")
+], e.prototype, "$loader", 2);
+o([
+  m("#body")
+], e.prototype, "$body", 2);
+o([
+  m("button")
+], e.prototype, "$button", 2);
+o([
+  V("loading", { afterUpdate: !0 })
+], e.prototype, "_handleLoadingChange", 1);
 export {
-  i as SkfButton
+  e as SkfButton
 };

package/dist/components/button/button.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/button/button.styles.js

@@ -128,5 +128,5 @@ const r = o`
 	}
 `;
 export {
-  r as default
+  r as styles
 };

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

@@ -3,7 +3,7 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-card>` can be used to group related subjects in a container
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles
  *
  * @slot - The card's main content
  *

package/dist/components/card/card.component.js

@@ -1,5 +1,5 @@
 import { SkfElement as f } 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 d } from "lit";
 import { property as o } from "lit/decorators.js";
 import { styles as u } from "./card.styles.js";

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

@@ -1,5 +1,6 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -10,7 +11,7 @@ import { type CSSResultGroup } from 'lit';
  * @attribute {boolean} [disabled=false] - If true, sets disabled state
  * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
- * @event change {object} - When the value of the input changes
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The Radios label. Alternatively, you can use the `label` attribute.
  *
@@ -38,11 +39,8 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /**
-     * If defined, styles checkbox using provided severity
-     * @type { "alert" | "success" | "info" | "warning" }
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, styles checkbox using provided severity */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
     showValid: boolean;
     /** Size of the checkbox */
@@ -54,9 +52,13 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     private _invalid;
     /** @internal */
     private $input?;
+    /** @internal */
     handleCheckedChange(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     protected firstUpdated(): void;
     /** @internal */

package/dist/components/checkbox/checkbox.component.js

@@ -2,11 +2,11 @@ import "../icon/icon.js";
 import { FormBase as p } from "../../internal/components/formBase.js";
 import { watch as h } from "../../internal/helpers/watch.js";
 import { Asterisk as v } from "../../internal/templates/asterisk.js";
-import m from "../../styles/component.styles.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
 import { html as c, nothing as f } from "lit";
 import { property as r, state as y, query as g } from "lit/decorators.js";
 import { ifDefined as _ } from "lit/directives/if-defined.js";
-import b from "./checkbox.styles.js";
+import { styles as b } from "./checkbox.styles.js";
 var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s, a) => {
   for (var l = a > 1 ? void 0 : a ? $(t, s) : t, n = u.length - 1, o; n >= 0; n--)
     (o = u[n]) && (l = (a ? o(t, s, l) : o(l)) || l);

package/dist/components/checkbox/checkbox.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/checkbox/checkbox.styles.js

@@ -65,10 +65,6 @@ const i = [
 					--_skf-checkbox-border-color: var(--skf-severity-fg-color-success);
 				}
 
-				:host([severity='alert']:not([invalid], [valid])) & {
-					--_skf-checkbox-border-color: var(--skf-severity-fg-color-alert);
-				}
-
 				:host([severity='info']:not([invalid], [valid])) & {
 					--_skf-checkbox-border-color: var(--skf-severity-fg-color-info);
 				}
@@ -110,5 +106,5 @@ const i = [
 	`
 ];
 export {
-  i as default
+  i as styles
 };

package/dist/components/date-picker/datepicker.calendar.component.js

@@ -3,7 +3,7 @@ import { compareDates as $ } from "./datepicker.helpers.js";
 import { SkfElement as O } from "../../internal/components/skf-element.js";
 import { watch as R } from "../../internal/helpers/watch.js";
 import { Temporal as m } from "@js-temporal/polyfill";
-import C from "../../styles/component.styles.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
 import { html as p } from "lit";
 import { property as g, state as M } from "lit/decorators.js";
 import { repeat as w } from "lit/directives/repeat.js";

package/dist/components/date-picker/datepicker.component.js

@@ -2,7 +2,7 @@ import "../button/button.js";
 import { dateFormatter as l, is as v } from "../date-picker-input/datepicker-input.helpers.js";
 import { SkfElement as R } from "../../internal/components/skf-element.js";
 import { watch as p } from "../../internal/helpers/watch.js";
-import S from "../../styles/component.styles.js";
+import { componentStyles as S } from "../../styles/component.styles.js";
 import { html as D } from "lit";
 import { property as o, state as m } from "lit/decorators.js";
 import "./datepicker.js";

package/dist/components/date-picker-input/datepicker-input.component.d.ts

@@ -1,5 +1,6 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import '../../internal/components/hint/hint.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
 import { type CSSResultGroup } from 'lit';

package/dist/components/date-picker-input/datepicker-input.component.js

@@ -2,12 +2,13 @@ import { dateFormatter as v, is as f, isPopoverOpen as S, debounce as E } from "
 import "../icon/icon.js";
 import { computePosition as C, flip as I, offset as O } from "@floating-ui/dom";
 import { FormBase as M } from "../../internal/components/formBase.js";
+import "../../internal/components/hint/hint.js";
 import { PopoverController as P } from "../../internal/controllers/popover.controller.js";
 import { hintSeverity as T } from "../../internal/helpers/hintSeverity.js";
 import { watch as B } from "../../internal/helpers/watch.js";
 import { Asterisk as x } from "../../internal/templates/asterisk.js";
 import { Temporal as w } from "@js-temporal/polyfill";
-import L from "../../styles/component.styles.js";
+import { componentStyles as L } from "../../styles/component.styles.js";
 import { nothing as g, html as y } from "lit";
 import { property as h, state as $, query as b, queryAssignedNodes as R } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
@@ -332,7 +333,7 @@ const _ = class _ extends M {
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${p(T(this.severity, this.invalid))}
+						severity=${p(T(this.invalid, this.severity))}
 						>${this.customInvalid ?? this.hint}
 					</skf-hint>
 				`}

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

@@ -11,13 +11,13 @@ import { type CSSResultGroup } from 'lit';
  * @slot - The dialog component's content
  * @slot footer - The dialog component's buttons goes here
  *
- * @event skf-dialog-opened - Fires when the dialog is opened (after transitioned in)
- * @event skf-dialog-closing - Fires when the dialog is closed (before transitioned out)
- * @event skf-dialog-closed - Fires when the dialog is closed (after transitioned out)
- *
  * @cssproperty --skf-dialog-height - A custom height for the Dialog. Pass valid CSS **block-size** values
  * @cssproperty --skf-dialog-width - A custom width for the Dialog Pass valid CSS **inline-size** values
  *
+ * @event {CustomEvent} skf-dialog-opened - Fires when the dialog is opened (after transitioned in)
+ * @event {CustomEvent} skf-dialog-closing - Fires when the dialog is closing (before transitioned out)
+ * @event {CustomEvent} skf-dialog-closed - Fires when the dialog is closed (after transitioned out)
+ *
  * @tagname skf-dialog
  */
 export declare class SkfDialog extends SkfElement {
@@ -43,6 +43,7 @@ export declare class SkfDialog extends SkfElement {
     $dialog?: HTMLDialogElement;
     /** @internal */
     footerEls?: HTMLElement[];
+    /** @internal */
     handleOpenChange(): void;
     protected firstUpdated(): void;
     /** @internal */