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

package/dist/components/progress/progress.component.js

@@ -1,49 +1,43 @@
-var h = (t) => {
+var u = (t) => {
   throw TypeError(t);
 };
-var f = (t, e, r) => e.has(t) || h("Cannot " + r);
-var c = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), d = (t, e, r) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, p) => (f(t, e, "write to private field"), p ? p.call(t, r) : e.set(t, r), r);
+var d = (t, e, r) => e.has(t) || u("Cannot " + r);
+var h = (t, e, r) => (d(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (t, e, r) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, l) => (d(t, e, "write to private field"), l ? l.call(t, r) : e.set(t, r), r);
 import { SkfElement as y } from "../../internal/components/skf-element.js";
-import x from "../../styles/component.styles.js";
-import { html as b } from "lit";
-import { property as l } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { styles as g } from "./progress.styles.js";
-var N = Object.defineProperty, n = (t, e, r, p) => {
-  for (var s = void 0, m = t.length - 1, u; m >= 0; m--)
-    (u = t[m]) && (s = u(e, r, s) || s);
-  return s && N(e, r, s), s;
-}, o;
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { html as x } from "lit";
+import { property as n } from "lit/decorators.js";
+import { styles as C } from "./progress.styles.js";
+var _ = Object.defineProperty, m = (t, e, r, l) => {
+  for (var s = void 0, p = t.length - 1, c; p >= 0; p--)
+    (c = t[p]) && (s = c(e, r, s) || s);
+  return s && _(e, r, s), s;
+}, a;
 const i = class i extends y {
   constructor() {
-    super();
-    d(this, o);
-    this.animated = !1, this.max = 1, this.value = 0, v(this, o, this.attachInternals()), c(this, o).role = "progressbar";
+    super(...arguments);
+    f(this, a);
+    v(this, a, this.attachInternals()), this.animated = !1, this.max = 1, this.value = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), h(this, a).role = "progressbar";
   }
   render() {
     const r = this.value / this.max * 100;
-    return b`
-			<div
-				class=${_({
-      progress: !0,
-      "progress--animated": this.animated
-    })}
-				style="--_skf-progress-value: ${r}%"
-			></div>
-		`;
+    return x`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
   }
 };
-o = new WeakMap(), i.styles = [x, g], i.formAssociated = !0;
-let a = i;
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "animated");
-n([
-  l({ type: Number })
-], a.prototype, "max");
-n([
-  l({ type: Number })
-], a.prototype, "value");
+a = new WeakMap(), i.styles = [b, C], i.formAssociated = !0;
+let o = i;
+m([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "animated");
+m([
+  n({ type: Number })
+], o.prototype, "max");
+m([
+  n({ type: Number })
+], o.prototype, "value");
 export {
-  a as SkfProgress
+  o as SkfProgress
 };

package/dist/components/progress/progress.styles.js

@@ -1,48 +1,53 @@
 import { css as r } from "lit";
-const s = r`
-	/* stylelint-disable selector-class-pattern */
+const e = r`
 	@layer components {
-		.progress {
-			background: var(--skf-bg-color-neutral-3);
-			block-size: var(--skf-size-8);
-			border-radius: 0.25rem; /* Missing token */
-			overflow: hidden;
+		@layer base {
+			#root {
+				background: var(--skf-bg-color-neutral-3);
+				block-size: var(--skf-size-8);
+				border-radius: 0.25rem; /* Missing token */
+				overflow: hidden;
 
-			&::after {
-				background-color: var(--skf-bg-color-emphasised);
-				block-size: inherit;
-				border-radius: inherit;
-				content: '';
-				display: block;
-				inline-size: var(--_skf-progress-value, auto);
-				transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
-					cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				&::after {
+					background-color: var(--skf-bg-color-emphasised);
+					block-size: inherit;
+					border-radius: inherit;
+					content: '';
+					display: block;
+					inline-size: var(--_skf-progress-value, auto);
+					transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
+						cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				}
 			}
 		}
 
-		.progress--animated::after {
-			animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear infinite
-				reverse;
-			background-image: linear-gradient(
-				-45deg,
-				rgba(255 255 255 / 20%) 25%,
-				transparent 25%,
-				transparent 50%,
-				rgba(255 255 255 / 20%) 50%,
-				rgba(255 255 255 / 20%) 75%,
-				transparent 75%,
-				transparent
-			);
-			background-size: 50px 50px;
+		@layer mods {
+			:host([animated]) {
+				#root::after {
+					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
+						infinite reverse;
+					background-image: linear-gradient(
+						-45deg,
+						rgba(255 255 255 / 20%) 25%,
+						transparent 25%,
+						transparent 50%,
+						rgba(255 255 255 / 20%) 50%,
+						rgba(255 255 255 / 20%) 75%,
+						transparent 75%,
+						transparent
+					);
+					background-size: 50px 50px;
+				}
+			}
 		}
+	}
 
-		@keyframes skf-progress-animation {
-			to {
-				background-position: 50px 50px;
-			}
+	@keyframes skf-progress-animation {
+		to {
+			background-position: 50px 50px;
 		}
 	}
 `;
 export {
-  s as styles
+  e as styles
 };

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

@@ -1,16 +1,17 @@
 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';
 /**
  * The `<skf-radio>` component is used to create a radio input
  *
- * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
  *
  * @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.
  *
@@ -37,11 +38,8 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     requiredLabel?: string;
     /** Size of the Radio */
     size: 'sm' | 'md';
-    /**
-     * If defined, displays provided severity state
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
     showValid: boolean;
     /** The current value of the input field  */
@@ -53,9 +51,13 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     private $input?;
     connectedCallback(): void;
     protected firstUpdated(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCheckedChanged(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     /** @internal */
     private _resetValue;

package/dist/components/radio/radio.component.js

@@ -2,7 +2,7 @@ import "../icon/icon.js";
 import { FormBase as c } from "../../internal/components/formBase.js";
 import { watch as n } from "../../internal/helpers/watch.js";
 import { Asterisk as p } from "../../internal/templates/asterisk.js";
-import v from "../../styles/component.styles.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
 import { html as m } from "lit";
 import { property as r, state as f, query as y } from "lit/decorators.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
@@ -81,7 +81,7 @@ const d = class d extends c {
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${_(!!this.checked)}
+					.checked=${_(this.checked)}
 					aria-invalid=${!!this._invalid}
 					name=${b(this.name)}
 					type="radio"

package/dist/components/{segmented-button-item → segmented-button}/segmented-button-item.component.d.ts

@@ -7,9 +7,9 @@ export interface SkfSegmentedButtonItemEvent {
 /**
  * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
  *
- * @event {CustomEvent} my-tag-my-event - Fired when something happens
+ * @event {CustomEvent} skf-segmented-button-item-select - Fired when selected
  *
- * @slot - The items label
+ * @slot - Label for the button
  *
  * @tagname skf-segmented-button-item
  */
@@ -23,14 +23,14 @@ export declare class SkfSegmentedButtonItem extends SkfElement {
     };
     /** If true, items is marked as disabled */
     disabled: boolean;
+    /** If true, items is marked as selected */
+    selected: boolean;
     /** Sets the item value */
     value: string;
     constructor();
     /** @internal */
     isMultiple: boolean;
     /** @internal */
-    isSelected: boolean;
-    /** @internal */
     private _handleClick;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/segmented-button/segmented-button-item.component.js

@@ -0,0 +1,56 @@
+import "../icon/icon.js";
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { LitElement as u, nothing as m, html as c } from "lit";
+import { property as r, state as v } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button-item.styles.js";
+var b = Object.defineProperty, i = (a, p, d, k) => {
+  for (var e = void 0, o = a.length - 1, h; o >= 0; o--)
+    (h = a[o]) && (e = h(p, d, e) || e);
+  return e && b(p, d, e), e;
+};
+const s = class s extends n {
+  constructor() {
+    super(), this.disabled = !1, this.selected = !1, this.value = "", this.isMultiple = !1, this._handleClick = () => {
+      this.emit("skf-segmented-button-item-select", {
+        detail: {
+          item: this
+        }
+      });
+    }, this.addEventListener("click", this._handleClick);
+  }
+  render() {
+    return c`
+			<button
+				?disabled=${this.disabled}
+				aria-checked=${l(this.isMultiple ? void 0 : this.selected ? "true" : "false")}
+				aria-pressed=${l(this.isMultiple ? this.selected ? "true" : "false" : void 0)}
+				id="root"
+				role=${l(this.isMultiple ? void 0 : "radio")}
+				type="button"
+				value=${this.value}
+			>
+				${this.selected ? c`<skf-icon color="emphasised" name="check" size="sm"></skf-icon>` : m}
+				<slot></slot>
+			</button>
+		`;
+  }
+};
+s.styles = [f, y], s.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
+let t = s;
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "selected");
+i([
+  r({ reflect: !0 })
+], t.prototype, "value");
+i([
+  v()
+], t.prototype, "isMultiple");
+export {
+  t as SkfSegmentedButtonItem
+};

package/dist/components/segmented-button/segmented-button-item.js

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

package/dist/components/segmented-button/segmented-button-item.styles.js

@@ -0,0 +1,62 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		:host {
+			display: contents;
+		}
+
+		#root {
+			align-items: center;
+			background-color: var(--_skf-segmented-button-item-bg, transparent);
+			border: var(--skf-border-width-md) solid var(--_skf-segmented-button-item-border, transparent);
+			border-radius: 4px; /* TODO: Missing token */
+			display: flex;
+			flex: 1;
+			font-size: var(--skf-font-size-75);
+			font-weight: var(--skf-font-weight-bold);
+			gap: var(--skf-spacing-25);
+			justify-content: center;
+			min-inline-size: 0;
+			padding-inline: var(--skf-spacing-50);
+			position: relative;
+
+			:host(:not(:last-of-type)) &::after {
+				background-color: var(--skf-border-color-primary);
+				block-size: calc(100% - 5px);
+				content: '';
+				inline-size: 1px;
+
+				/* inset-inline-end: calc((var(--skf-spacing-75) + 2px + var(--skf-border-width-md) * 2) / -2); */
+				inset-inline-end: -9px;
+				position: absolute;
+			}
+
+			&:disabled {
+				color: var(--skf-interactive-text-color-disabled);
+				font-weight: 500;
+			}
+
+			&:is([aria-checked='true'], [aria-pressed='true']) {
+				--_skf-segmented-button-item-border: var(--skf-border-color-emphasised);
+			}
+
+			&:hover:not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-hover);
+			}
+
+			&:is(:focus, :active):not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-active);
+			}
+		}
+
+		slot {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -11,8 +11,6 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfSegmentedButton extends SkfElement {
     static styles: CSSResultGroup;
-    /** Sets the default selected control */
-    defaultSelected: number;
     /** If true, allowes multiple items to be selected */
     multiple: boolean;
     /** @internal */

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

@@ -0,0 +1,73 @@
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as c } from "lit";
+import { property as u, state as f, queryAssignedElements as p } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button.styles.js";
+var v = Object.defineProperty, n = (a, s, e, i) => {
+  for (var t = void 0, o = a.length - 1, r; o >= 0; o--)
+    (r = a[o]) && (t = r(s, e, t) || t);
+  return t && v(s, e, t), t;
+};
+const h = class h extends d {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.value = "", this._handleSegmentedButtonItemSelected = (s) => {
+      const e = s.detail.item;
+      this.multiple && (e.selected = !e.selected), this.value = "";
+      let i = [];
+      this.items.forEach((t) => {
+        this.multiple ? t.selected && (i = [...i, t.value], this.value = i.join()) : t !== e ? t.selected = !1 : (t.selected = !0, this.value = t.value);
+      });
+    }, this._handleSlotChange = () => {
+      this.items.forEach((s) => {
+        if (s.isMultiple = this.multiple, !this.multiple) {
+          const e = this.items.filter((i) => i.selected);
+          e.length > 1 && e.slice(0, -1).forEach((i) => i.selected = !1);
+        }
+      });
+    }, this._handleKeyDown = (s) => {
+      if (["ArrowLeft", "ArrowRight"].includes(s.key)) {
+        const e = this._getKeyDownNextItem(s.key);
+        e == null || e.focus({ preventScroll: !0 });
+      }
+    };
+  }
+  firstUpdated() {
+    this.addEventListener(
+      "skf-segmented-button-item-select",
+      this._handleSegmentedButtonItemSelected
+    );
+  }
+  /** @internal */
+  _getKeyDownNextItem(s) {
+    const e = this.items.findIndex((r) => r === document.activeElement);
+    if (e === -1) return;
+    const t = (e + (s === "ArrowRight" ? 1 : -1)) % this.items.length;
+    return this.items[t < 0 ? this.items.length - 1 : t];
+  }
+  render() {
+    return c`
+			<slot
+				@keydown=${this._handleKeyDown}
+				@slotchange=${this._handleSlotChange}
+				aria-label=${g(this.ariaLabel ?? "Segmented button label")}
+				id="root"
+				role=${this.multiple ? "group" : "radiogroup"}
+			></slot>
+		`;
+  }
+};
+h.styles = [m, y];
+let l = h;
+n([
+  u({ type: Boolean })
+], l.prototype, "multiple");
+n([
+  f()
+], l.prototype, "value");
+n([
+  p()
+], l.prototype, "items");
+export {
+  l as SkfSegmentedButton
+};

package/dist/components/segmented-button/segmented-button.js

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

package/dist/components/segmented-button/segmented-button.styles.js

@@ -0,0 +1,16 @@
+import { css as r } from "lit";
+const o = r`
+	@layer components {
+		#root {
+			block-size: var(--skf-size-44);
+			border: var(--skf-border-width-sm) solid var(--skf-border-color-primary);
+			border-radius: 6px; /* TODO: Missing token */
+			display: flex;
+			gap: var(--skf-spacing-75);
+			padding: var(--skf-spacing-25);
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/{select-option-group → select}/select-option-group.component.js

@@ -1,5 +1,5 @@
 import { SkfElement as a } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
 import { html as p } from "lit";
 import { property as d } from "lit/decorators.js";
 import { styles as n } from "./select-option-group.style.js";

package/dist/components/{select-option → select}/select-option.component.d.ts

@@ -1,8 +1,7 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 import '../icon/icon';
-import { SkfIcon } from '../icon/icon';
 import type { SkfSelect } from '../select/select.component.js';
 export interface SelectOptionEvent {
     value: string | null;
@@ -16,7 +15,7 @@ export interface SelectOptionEvent {
  * @slot - The option's text content
  * @slot icon - The option's slot for icon or custom meta information (svg).
  *
- * @event skf-select-option:select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
+ * @event skf-select-option-select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
  *
  * @tagname skf-select-option
  */
@@ -37,15 +36,15 @@ export declare class SkfSelectOption extends SkfElement {
      * Do not use directly, instead use `setSelectedDiscrete`.
      * If true, instantly sets/unsets the selected property, without engaging ui feedback. Primarily for unselecting previous option in single select.
      */
-    _shortcutUpdate?: boolean;
+    _shortcutUpdate: boolean;
     /** If true, prevents interaction with the option */
-    disabled?: boolean;
+    disabled: boolean;
     /** If defined, set an icon */
-    icon?: SkfIcon['name'];
+    icon?: Icon;
     /** If defined, sets provided color on the icon */
-    iconColor?: SeverityFgColor;
+    iconColor?: IconColor;
     /** If true, sets the option as selected */
-    selected?: boolean;
+    selected: boolean;
     /** If defined, sets a short label */
     shortLabel?: string;
     /** The option's label text (equivalent to the tags textContent) */

package/dist/components/{select-option → select}/select-option.component.js

@@ -1,7 +1,7 @@
 import { SkfElement as u } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
 import { LitElement as m, html as h } from "lit";
-import { property as n, queryAssignedNodes as _ } from "lit/decorators.js";
+import { property as l, queryAssignedNodes as _ } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import "../icon/icon.js";
 import { styles as y } from "./select-option.styles.js";
@@ -10,9 +10,9 @@ var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s
     (c = d[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
   return i && r && v(t, s, r), r;
 };
-const l = class l extends u {
+const n = class n extends u {
   constructor() {
-    super(), this._handleClick = (s) => {
+    super(), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this._handleClick = (s) => {
       s.stopPropagation(), this.selected = !this.selected;
     };
     const t = this.attachInternals();
@@ -33,7 +33,7 @@ const l = class l extends u {
     return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : ((t = this._value) == null ? void 0 : t.trim()) ?? this.text;
   }
   updated(t) {
-    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option:select", {
+    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option-select", {
       detail: {
         value: this.selected ? this.value : null,
         option: this
@@ -80,7 +80,7 @@ const l = class l extends u {
 					<slot name="icon">
 						${this.icon && h`
 							<skf-icon
-								class=${p((this.disabled ?? !this.iconColor) && "skf-icon-host")}
+								class=${p((this.disabled || !this.iconColor) && "skf-icon-host")}
 								color=${p(this.iconColor)}
 								name=${this.icon}
 							></skf-icon>
@@ -92,28 +92,28 @@ const l = class l extends u {
 		`;
   }
 };
-l.styles = [f, y], l.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
-let e = l;
+n.styles = [f, y], n.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
+let e = n;
 o([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  n({ reflect: !0 })
+  l({ reflect: !0 })
 ], e.prototype, "icon", 2);
 o([
-  n({ reflect: !0, attribute: "icon-color" })
+  l({ reflect: !0, attribute: "icon-color" })
 ], e.prototype, "iconColor", 2);
 o([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "selected", 2);
 o([
-  n({ reflect: !0, attribute: "short-label" })
+  l({ reflect: !0, attribute: "short-label" })
 ], e.prototype, "shortLabel", 2);
 o([
-  n({ attribute: !1 })
+  l({ attribute: !1 })
 ], e.prototype, "text", 1);
 o([
-  n({ reflect: !0 })
+  l({ reflect: !0 })
 ], e.prototype, "value", 1);
 o([
   _({ flatten: !0 })