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

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

@@ -1 +0,0 @@
-export {};

package/dist/components/select-option/select-option.component.js

@@ -1,123 +0,0 @@
-import { SkfElement as u } from "../../internal/components/skf-element.js";
-import 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 { ifDefined as p } from "lit/directives/if-defined.js";
-import "../icon/icon.js";
-import { styles as y } from "./select-option.styles.js";
-var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = d.length - 1, c; a >= 0; a--)
-    (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 {
-  constructor() {
-    super(), this._handleClick = (s) => {
-      s.stopPropagation(), this.selected = !this.selected;
-    };
-    const t = this.attachInternals();
-    t.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
-  }
-  set text(t) {
-    this.textContent = t.trim();
-  }
-  get text() {
-    var t;
-    return ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
-  }
-  set value(t) {
-    this._value = t.trim();
-  }
-  get value() {
-    var t;
-    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", {
-      detail: {
-        value: this.selected ? this.value : null,
-        option: this
-      }
-    });
-  }
-  /**
-   * @internal
-   * This internal setter is to change selected state without emitting events triggering other side effects,
-   * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
-   */
-  set setSelectedDiscrete(t) {
-    (async () => {
-      this._shortcutUpdate = !0, this.selected = t, await this.updateComplete, this._shortcutUpdate = !1;
-    })();
-  }
-  /**
-   * @internal
-   * Returns the slotted content as a string. If no slotted content, returns an empty string.
-   */
-  _getSlottedContent() {
-    return this._assignedNodes ? [...this._assignedNodes].map((t) => t.nodeType === Node.ELEMENT_NODE ? t.outerHTML : t.textContent).join() : "";
-  }
-  /** @internal */
-  get _slotContainsOnlyText() {
-    return this._assignedNodes ? [...this._assignedNodes].every(
-      (s) => {
-        var i;
-        return s.nodeType === Node.TEXT_NODE && ((i = s.textContent) == null ? void 0 : i.trim()) !== "";
-      }
-    ) : "";
-  }
-  render() {
-    return h`
-			<button
-				?disabled=${this.disabled}
-				@click=${this._handleClick}
-				aria-selected=${this.selected ? "true" : "false"}
-				role="option"
-			>
-				<skf-icon id="icon-check" name="check" size="sm"></skf-icon>
-				<slot>${this.text}</slot>
-				<div id="adornments">
-					<slot name="icon">
-						${this.icon && h`
-							<skf-icon
-								class=${p((this.disabled ?? !this.iconColor) && "skf-icon-host")}
-								color=${p(this.iconColor)}
-								name=${this.icon}
-							></skf-icon>
-						`}
-					</slot>
-					${this.shortLabel && h`<div id="short-label">${this.shortLabel}</div>`}
-				</div>
-			</button>
-		`;
-  }
-};
-l.styles = [f, y], l.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
-let e = l;
-o([
-  n({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-o([
-  n({ reflect: !0 })
-], e.prototype, "icon", 2);
-o([
-  n({ reflect: !0, attribute: "icon-color" })
-], e.prototype, "iconColor", 2);
-o([
-  n({ type: Boolean, reflect: !0 })
-], e.prototype, "selected", 2);
-o([
-  n({ reflect: !0, attribute: "short-label" })
-], e.prototype, "shortLabel", 2);
-o([
-  n({ attribute: !1 })
-], e.prototype, "text", 1);
-o([
-  n({ reflect: !0 })
-], e.prototype, "value", 1);
-o([
-  _({ flatten: !0 })
-], e.prototype, "_assignedNodes", 2);
-export {
-  e as SkfSelectOption
-};

package/dist/components/select-option/select-option.styles.js

@@ -1,53 +0,0 @@
-import { css as e } from "lit";
-const o = e`
-	@layer components {
-		button {
-			align-items: center;
-			background-color: var(--_skf-select-option-bg, var(--skf-interactive-bg-color-secondary));
-			block-size: var(--_skf-select-option-height, var(--skf-size-44));
-			color: var(--_skf-select-option-color, inherit);
-			display: flex;
-			gap: var(--skf-spacing-50);
-			padding-inline: var(--skf-spacing-50);
-			width: 100%;
-
-			&:disabled {
-				--_skf-select-option-color: var(--skf-interactive-text-color-disabled);
-			}
-
-			&:is(:hover, :focus):not(:disabled) {
-				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-hover);
-			}
-
-			&:active:not(:disabled) {
-				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-active);
-			}
-
-			:host-context(skf-select[size='sm']) & {
-				--_skf-select-option-height: var(--skf-size-32);
-			}
-		}
-
-		#icon-check {
-			opacity: 0;
-
-			:host([selected]) & {
-				opacity: 1;
-			}
-		}
-
-		#adornments {
-			align-items: inherit;
-			display: inherit;
-			gap: inherit;
-			margin-inline-start: auto;
-		}
-
-		#short-label {
-			color: var(--skf-text-color-tertiary);
-		}
-	}
-`;
-export {
-  o as styles
-};

package/dist/components/select-option-group/select-option-group.component.js

@@ -1,31 +0,0 @@
-import { SkfElement as a } from "../../internal/components/skf-element.js";
-import 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";
-var v = Object.defineProperty, u = (o, s, i, b) => {
-  for (var r = void 0, e = o.length - 1, m; e >= 0; e--)
-    (m = o[e]) && (r = m(s, i, r) || r);
-  return r && v(s, i, r), r;
-};
-const l = class l extends a {
-  constructor() {
-    super(...arguments), this.label = "Default label";
-  }
-  render() {
-    return p`
-			<div role="group">
-				<div id="label">${this.label}</div>
-				<slot></slot>
-			</div>
-		`;
-  }
-};
-l.styles = [f, n];
-let t = l;
-u([
-  d({ reflect: !0 })
-], t.prototype, "label");
-export {
-  t as SkfSelectOptionGroup
-};

package/dist/components/select-option-group/select-option-group.style.js

@@ -1,18 +0,0 @@
-import { css as e } from "lit";
-const t = e`
-	@layer components {
-		#label {
-			align-items: center;
-			block-size: var(--_skf-select-option-group-height, var(--skf-size-44));
-			display: flex;
-			font-weight: var(--skf-font-weight-bold);
-
-			:host-context(skf-select[size='sm']) & {
-				--_skf-select-option-group-height: var(--skf-size-32);
-			}
-		}
-	}
-`;
-export {
-  t as styles
-};

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

@@ -1,113 +0,0 @@
-var v = (e) => {
-  throw TypeError(e);
-};
-var u = (e, i, t) => i.has(e) || v("Cannot " + t);
-var d = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(e)), _ = (e, i, t) => i.has(e) ? v("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), r = (e, i, t, s) => (u(e, i, "write to private field"), s ? s.call(e, t) : i.set(e, t), t);
-import "../icon/icon.js";
-import { SkfElement as b } from "../../internal/components/skf-element.js";
-import { watch as g } from "../../internal/helpers/watch.js";
-import C from "../../styles/component.styles.js";
-import "lit";
-import { property as y, state as c } from "lit/decorators.js";
-import { classMap as $ } from "lit/directives/class-map.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { unsafeStatic as w, literal as U, html as S } from "lit/static-html.js";
-import { styles as I } from "./stepper-item.styles.js";
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, i, t, s) => {
-  for (var p = s > 1 ? void 0 : s ? P(i, t) : i, h = e.length - 1, m; h >= 0; h--)
-    (m = e[h]) && (p = (s ? m(i, t, p) : m(p)) || p);
-  return s && p && O(i, t, p), p;
-}, o, n;
-const f = class f extends b {
-  constructor() {
-    super();
-    _(this, o);
-    _(this, n);
-    r(this, o, !1), r(this, n, !1), this.completed = !1, this._index = 0, this._linear = !1, this._handleClick = () => {
-      this._linear || (this.state = "active");
-    }, this.role = "listitem";
-  }
-  set _setInternalState(t) {
-    r(this, o, !0), this._uiState = t, t === "active" || t === "activeCompleted" ? this.state = t === "active" ? "active" : "completed" : this.state = void 0, setTimeout(() => {
-      r(this, o, !1);
-    });
-  }
-  get _setInternalState() {
-    return this.state;
-  }
-  firstUpdated() {
-    this._handleState();
-  }
-  _handleState() {
-    const t = this._uiState;
-    if (this.state === "completed" && t !== "active") {
-      this._setInternalState = "activeCompleted";
-      return;
-    }
-    if (d(this, o)) {
-      r(this, o, !1);
-      return;
-    }
-    r(this, n, ["active", "completed"].includes(String(this.state)) && !["active", "activeCompleted"].includes(String(this._uiState))), this._emitUpdate();
-  }
-  /** @internal */
-  _emitUpdate() {
-    this.emit("skf-stepper-item-select", {
-      detail: {
-        item: this,
-        triggerActiveIndexUpdate: d(this, n)
-      }
-    }), r(this, n, !1);
-  }
-  render() {
-    const t = this._linear ? "div" : "button", s = U`${w(t)}`;
-    return S`
-			<${s}
-				@click=${this._handleClick}
-				?disabled=${this._disabled}
-				class=${$({
-      "stepper-item": !0,
-      "stepper-item--active": this._uiState === "active",
-      "stepper-item--active-completed": this._uiState === "activeCompleted",
-      "stepper-item--completed": this._uiState === "completed",
-      "stepper-item--enabled": this._uiState === "enabled"
-    })}
-				type=${x(t == "button" ? "button" : void 0)}
-			>
-				<div class="stepper-item__circle">
-					${this._uiState === "activeCompleted" ? S`<skf-icon color="inverse" name="check"></skf-icon>` : this._index}
-				</div>
-				<slot class="stepper-item__label"></slot>
-			</${s}>
-		`;
-  }
-};
-o = new WeakMap(), n = new WeakMap(), f.styles = [C, I];
-let a = f;
-l([
-  y({ reflect: !0 })
-], a.prototype, "state", 2);
-l([
-  y({ type: Boolean })
-], a.prototype, "completed", 2);
-l([
-  c()
-], a.prototype, "_disabled", 2);
-l([
-  c()
-], a.prototype, "_index", 2);
-l([
-  c()
-], a.prototype, "_linear", 2);
-l([
-  c()
-], a.prototype, "_uiState", 2);
-l([
-  c()
-], a.prototype, "_setInternalState", 1);
-l([
-  g("state")
-], a.prototype, "_handleState", 1);
-export {
-  a as SkfStepperItem
-};

package/dist/components/switch/switch.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/tab-group/tab-group.d.ts

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

package/dist/components/tab-group/tab-group.js

@@ -1,6 +0,0 @@
-import { SkfTabGroup as f } from "./tab-group.component.js";
-f.define("skf-tab-group");
-export {
-  f as SkfTabGroup,
-  f as default
-};

package/dist/components/tab-panel/tab-panel.component.js

@@ -1,36 +0,0 @@
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-import { watch as h } from "../../internal/helpers/watch.js";
-import l from "../../styles/component.styles.js";
-import { html as v } from "lit";
-import { property as f, state as d } from "lit/decorators.js";
-import { styles as y } from "./tab-panel.styles.js";
-var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (n, r, s, o) => {
-  for (var t = o > 1 ? void 0 : o ? _(r, s) : r, i = n.length - 1, p; i >= 0; i--)
-    (p = n[i]) && (t = (o ? p(r, s, t) : p(t)) || t);
-  return o && t && u(r, s, t), t;
-};
-const m = class m extends c {
-  constructor() {
-    super(), this.name = "", this.active = !1, this.role = "tabpanel";
-  }
-  handleActiveChanged() {
-    this.ariaHidden = this.active ? "false" : "true", this.tabIndex = this.active ? 0 : -1;
-  }
-  render() {
-    return v`<slot></slot>`;
-  }
-};
-m.styles = [l, y];
-let e = m;
-a([
-  f()
-], e.prototype, "name", 2);
-a([
-  d()
-], e.prototype, "active", 2);
-a([
-  h("active")
-], e.prototype, "handleActiveChanged", 1);
-export {
-  e as SkfTabPanel
-};

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

@@ -1,18 +0,0 @@
-import { css as o } from "lit";
-const a = o`
-	@layer components {
-		:host {
-			overflow: hidden; /* Enable mask transition */
-			padding-block-end: 3px; /* Make room for box-shadow */
-		}
-
-		.toast-item {
-			background-color: var(--skf-bg-color-neutral-1);
-			border-inline-start: var(--skf-size-8) solid
-				var(--_skf-alert-border-color, var(--skf-border-color-primary));
-		}
-	}
-`;
-export {
-  a as default
-};

package/dist/internal/constants/heading.d.ts

@@ -1,2 +0,0 @@
-export declare const HEADING_TYPE_KEYS: readonly ["h1", "h2", "h3", "h4"];
-export type HeadingType = (typeof HEADING_TYPE_KEYS)[number];

package/dist/internal/playwright/index.d.ts

@@ -1 +0,0 @@
-export declare function fixture(id: string, name: string): string;