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

package/README.md

@@ -221,24 +221,7 @@ import { SkfInput } from "@skf-design-system/ui-components";
 <skf-input name="input" onchange={(e) => console.log((e.target as unknown as SkfInput).value)}></skf-input>
 ```
 
-### React 18
-
-> Note, for React 18 it is not necessary to install an extra plugin to get code completion since you are writing in react
-
-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-design-system/ui-components/react/index.js";
-
-...
-
-<SkfInput
-  name="input"
-  onChange={(e) => {
-    console.log( e.target.value );
-  }}
-/>
-```
+⚠️ **React 18** does not support native web components. If you want to use this library you must upgrade React to version 19.
 
 ### Setting up code completion
 

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

@@ -14,7 +14,7 @@ import { type CSSResultGroup, type PropertyValues } from 'lit';
 export declare class SkfAccordion extends SkfElement {
     static styles: CSSResultGroup;
     /** If true, will animate the expand/collapse state */
-    animated?: boolean;
+    animated: boolean;
     /**
      * Defines which heading element will be rendered
      * @type { "h1" | "h2" | "h3" | "h4" }
@@ -23,11 +23,11 @@ export declare class SkfAccordion extends SkfElement {
     /** If true, adds a gap between each item */
     gap: boolean;
     /** If true, allowes multiple accordion items to open */
-    multiple?: boolean;
+    multiple: boolean;
     /** If true, renders the small version */
-    small?: boolean;
+    small: boolean;
     /** If true, will truncate all headings in collapsed state */
-    truncate?: boolean;
+    truncate: boolean;
     /** @internal */
     private $accordionItems;
     protected updated(_changedProperties: PropertyValues): void;

package/dist/components/accordion/accordion.component.js

@@ -1,18 +1,18 @@
 import "../collapse/collapse.js";
-import { SkfElement as h } from "../../internal/components/skf-element.js";
+import { SkfElement as p } from "../../internal/components/skf-element.js";
 import m from "../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as a, queryAssignedNodes as d } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { styles as g } from "./accordion.styles.js";
-var y = Object.defineProperty, s = (p, t, i, o) => {
-  for (var r = void 0, l = p.length - 1, u; l >= 0; l--)
-    (u = p[l]) && (r = u(t, i, r) || r);
+var y = Object.defineProperty, s = (u, t, i, l) => {
+  for (var r = void 0, o = u.length - 1, h; o >= 0; o--)
+    (h = u[o]) && (r = h(t, i, r) || r);
   return r && y(t, i, r), r;
 };
-const n = class n extends h {
+const n = class n extends p {
   constructor() {
-    super(...arguments), this.headingAs = "h2", this.gap = !1, this._setItemAttributes = () => {
+    super(...arguments), this.animated = !1, this.headingAs = "h2", this.gap = !1, this.multiple = !1, this.small = !1, this.truncate = !1, this._setItemAttributes = () => {
       this.items.forEach((t) => {
         t.setAttribute("heading-as", this.headingAs), this.animated ? t.setAttribute("animated", "") : t.hasAttribute("animated") && t.removeAttribute("animated"), this.small ? t.setAttribute("small", "") : t.hasAttribute("small") && t.removeAttribute("small"), this.truncate ? t.setAttribute("truncate", "") : t.hasAttribute("truncate") && t.removeAttribute("truncate");
       });
@@ -28,8 +28,8 @@ const n = class n extends h {
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
     const i = t.target;
-    this.items.length && this.items.forEach((o) => {
-      o !== i && o.hasAttribute("expanded") && o.setClose();
+    this.items.length && this.items.forEach((l) => {
+      l !== i && l.hasAttribute("expanded") && l.setClose();
     });
   }
   render() {

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

@@ -1,8 +1,9 @@
-import type { SkfIcon } from '../icon/icon.component.js';
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfAlertIcon = Icon;
+type SkfAlertSeverity = SeverityFgColor;
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
  *
@@ -20,15 +21,13 @@ export declare class SkfAlert extends SkfElement {
     /** Close button aria-label */
     buttonLabel: string;
     /** If defined, displays leading icon */
-    icon?: SkfIcon['name'];
+    icon?: SkfAlertIcon;
     /** If true, renders with an close button and sets aria-role to `status` */
-    persistent?: boolean;
-    /**
-     * If defined, gives the supplied appearance
-     * @type { "error" | "info" | "warning" | "success" | "alert" }
-     */
-    severity?: SeverityFgColor;
+    persistent: boolean;
+    /** If defined, gives the supplied appearance */
+    severity?: SkfAlertSeverity;
     /** @internal */
     private _handleClose;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

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

@@ -1,10 +1,10 @@
 import "../icon/icon.js";
 import { SkfElement as y } from "../../internal/components/skf-element.js";
 import f from "../../styles/component.styles.js";
-import { html as m, nothing as h } from "lit";
+import { nothing as h, html as p } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import { styles as v } from "./alert.styles.js";
 var b = Object.defineProperty, r = (l, a, n, d) => {
   for (var t = void 0, i = l.length - 1, c; i >= 0; i--)
@@ -13,12 +13,12 @@ var b = Object.defineProperty, r = (l, a, n, d) => {
 };
 const o = class o extends y {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => {
+    super(...arguments), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
     };
   }
   render() {
-    return m`
+    return p`
 			<div
 				aria-describedby="main"
 				class=${u({
@@ -33,15 +33,15 @@ const o = class o extends y {
 				role=${this.persistent ? "status" : "alert"}
 			>
 				<skf-icon
-					color=${p(this.severity ?? "secondary")}
-					name=${p(this.icon ?? "info")}
+					color=${m(this.severity ?? "secondary")}
+					name=${m(this.icon ?? "info")}
 					size="sm"
 				></skf-icon>
 				<div class="alert__body">
 					<slot class="alert__main" id="main"></slot>
 					<slot name="link"></slot>
 				</div>
-				${this.persistent ? m`
+				${this.persistent ? p`
 							<button
 								@click="${this._handleClose}"
 								aria-label=${this.buttonLabel}

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

@@ -4,7 +4,7 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
  *
  * @event click - Fired when the item is clicked
  *

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

@@ -1,44 +1,32 @@
-import { SkfElement as l } from "../../internal/components/skf-element.js";
-import c from "../../styles/component.styles.js";
-import { html as m } from "lit";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
+import m from "../../styles/component.styles.js";
+import { html as d } from "lit";
 import { property as o } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { styles as h } from "./card.styles.js";
-var u = Object.defineProperty, s = (i, p, a, y) => {
-  for (var t = void 0, e = i.length - 1, d; e >= 0; e--)
-    (d = i[e]) && (t = d(p, a, t) || t);
-  return t && u(p, a, t), t;
+import { styles as u } from "./card.styles.js";
+var c = Object.defineProperty, s = (p, l, i, y) => {
+  for (var t = void 0, r = p.length - 1, a; r >= 0; r--)
+    (a = p[r]) && (t = a(l, i, t) || t);
+  return t && c(l, i, t), t;
 };
-const n = class n extends l {
+const n = class n extends f {
   constructor() {
     super(...arguments), this.noBorder = !1, this.noPadding = !1, this.stretch = !1;
   }
   render() {
-    return m`
-			<div
-				class=${f({
-      card: !0,
-      "card--no-border": this.noBorder,
-      "card--no-padding": this.noPadding,
-      "card--stretch": this.stretch
-    })}
-			>
-				<slot></slot>
-			</div>
-		`;
+    return d`<slot></slot>`;
   }
 };
-n.styles = [c, h];
-let r = n;
+n.styles = [m, u];
+let e = n;
 s([
-  o({ type: Boolean, attribute: "no-border" })
-], r.prototype, "noBorder");
+  o({ type: Boolean, attribute: "no-border", reflect: !0 })
+], e.prototype, "noBorder");
 s([
-  o({ type: Boolean, attribute: "no-padding" })
-], r.prototype, "noPadding");
+  o({ type: Boolean, attribute: "no-padding", reflect: !0 })
+], e.prototype, "noPadding");
 s([
   o({ type: Boolean, reflect: !0 })
-], r.prototype, "stretch");
+], e.prototype, "stretch");
 export {
-  r as SkfCard
+  e as SkfCard
 };

package/dist/components/card/card.styles.js

@@ -1,36 +1,33 @@
 import { css as r } from "lit";
-const a = r`
-	/* stylelint-disable selector-class-pattern */
+const s = r`
+	@layer components {
+		@layer base {
+			:host {
+				background-color: var(--skf-bg-color-neutral-1);
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-card-border-color, var(--skf-border-color-tertiary));
+				border-radius: var(--skf-border-radius-sm);
+				box-shadow: var(--skf-shadow-md);
+				contain: layout;
+				padding: var(--_skf-card-padding, var(--skf-spacing-100));
+			}
+		}
 
-	:host {
-		contain: layout;
-	}
-
-	:host([stretch]) {
-		block-size: 100%;
-	}
-
-	.card {
-		background-color: var(--skf-bg-color-neutral-1);
-		border: var(--skf-border-width-sm) solid
-			var(--_skf-card-border-color, var(--skf-border-color-tertiary));
-		border-radius: var(--skf-border-radius-sm);
-		box-shadow: var(--skf-shadow-md);
-		padding: var(--_skf-card-padding, var(--skf-spacing-100));
-	}
-
-	.card--no-border {
-		--_skf-card-border-color: transparent;
-	}
+		@layer mods {
+			:host([stretch]) {
+				block-size: 100%;
+			}
 
-	.card--no-padding {
-		--_skf-card-padding: 0;
-	}
+			:host([no-border]) {
+				--_skf-card-border-color: transparent;
+			}
 
-	.card--stretch {
-		block-size: inherit;
+			:host([no-padding]) {
+				--_skf-card-padding: 0;
+			}
+		}
 	}
 `;
 export {
-  a as styles
+  s as styles
 };

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

@@ -7,8 +7,8 @@ import { type CSSResultGroup } from 'lit';
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/94464f-checkbox) for design principles
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @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
  *
@@ -24,14 +24,14 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
      */
     private _initiallyChecked;
     /** If defined, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    get checked(): boolean | undefined;
-    set checked(value: boolean | undefined);
+    get checked(): boolean;
+    set checked(value: boolean);
     /** If true, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-    indeterminate?: boolean;
+    indeterminate: boolean;
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
@@ -44,7 +44,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
      */
     severity?: FormFieldBaseProps['severity'];
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the checkbox */
     size: 'sm' | 'md';
     /** The current value of the input field  */

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

@@ -14,7 +14,7 @@ var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s
 };
 const d = class d extends p {
   constructor() {
-    super(...arguments), this._initiallyChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    super(...arguments), this._initiallyChecked = !1, this.debug = !1, this.customInvalid = !1, this.indeterminate = !1, this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
       t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
     }, this._renderIcon = (t) => c`
 		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
@@ -50,7 +50,7 @@ const d = class d extends p {
     var t;
     (t = this.$input) == null || t.addEventListener("change", (s) => {
       var a;
-      s.stopPropagation(), this.pristine = !1, this.checked = (a = this.$input) == null ? void 0 : a.checked, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+      s.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
@@ -77,7 +77,7 @@ const d = class d extends p {
 					?checked=${this.checked}
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.indeterminate=${this.indeterminate ?? !1}
+					.indeterminate=${this.indeterminate}
 					aria-invalid=${!!this._invalid}
 					name=${_(this.name)}
 					type="checkbox"

package/dist/components/collapse/collapse.component.js

@@ -4,7 +4,7 @@ import h from "../../styles/component.styles.js";
 import { property as s } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as f } from "lit/directives/if-defined.js";
-import { html as u, unsafeStatic as d } from "lit/static-html.js";
+import { unsafeStatic as d, html as u } from "lit/static-html.js";
 import _ from "./collapse.styles.js";
 var y = Object.defineProperty, a = (i, n, r, g) => {
   for (var t = void 0, l = i.length - 1, p; l >= 0; l--)

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

@@ -38,6 +38,11 @@ export declare class SkfDatePickerCalendar extends SkfElement {
     /** @internal */
     _numberOfDaysLastMonth: number;
     firstUpdated(): void;
+    _listenToKeyboard: () => {
+        start: () => void;
+        stop: () => void;
+    };
+    _handleKeyDown: (e: KeyboardEvent) => void;
     /** For single select, the selected date */
     attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
     /** @internal */