@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

package/package.json

@@ -6,8 +6,8 @@
     "url": "https://github.com/SKF-Internal/ui-components/issues"
   },
   "engines": {
-    "node": ">=20",
-    "pnpm": ">=9"
+    "node": ">=22",
+    "pnpm": ">=10"
   },
   "engineStrict": true,
   "customElements": "./dist/custom-elements.json",
@@ -34,92 +34,76 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.36",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12"
+    "@floating-ui/dom": "^1.7.0",
+    "@js-temporal/polyfill": "^0.5.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@commitlint/cli": "^19.6.1",
-    "@commitlint/config-conventional": "^19.6.0",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/js": "^9.17.0",
-    "@lit/react": "^1.0.6",
-    "@playwright/test": "^1.49.1",
+    "@eslint/js": "^9.26.0",
     "@skf-design-system/ui-assets": "0.1.3-beta.4",
-    "@skf-design-system/wc-storybook-helpers": "^0.1.0",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/test-runner": "^0.20.1",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/web-components": "^8.4.7",
-    "@storybook/web-components-vite": "^8.4.7",
-    "@types/node": "^22.10.2",
-    "@types/react": "^18.3.12",
-    "cem-plugin-expanded-types": "^1.3.3",
-    "command-line-args": "^6.0.1",
-    "concurrently": "^9.1.0",
-    "custom-element-jet-brains-integration": "^1.6.2",
-    "custom-element-jsx-integration": "^1.5.4",
-    "custom-element-vs-code-integration": "^1.4.1",
-    "custom-element-vuejs-integration": "^1.3.3",
-    "del": "^8.0.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-lit": "^1.15.0",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
+    "@types/node": "^22.15.12",
+    "@wc-toolkit/module-path-resolver": "^1.0.0",
+    "@wc-toolkit/storybook-helpers": "^1.1.2",
+    "@wc-toolkit/type-parser": "^1.0.3",
+    "concurrently": "^9.1.2",
+    "custom-element-jet-brains-integration": "^1.7.0",
+    "custom-element-jsx-integration": "^1.6.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "custom-element-vuejs-integration": "^1.4.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-lit": "^2.1.1",
     "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-wc": "^2.2.0",
-    "express": "^4.21.2",
+    "eslint-plugin-wc": "^3.0.1",
     "husky": "^9.1.7",
-    "lint-staged": "^15.2.11",
-    "lit": "^3.2.1",
-    "postcss-styled-syntax": "^0.7.0",
-    "prettier": "3.4.2",
-    "react": "^18.3.1",
-    "storybook": "^8.4.7",
-    "stylelint": "^16.12.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-no-unsupported-browser-features": "^8.0.2",
-    "stylelint-order": "^6.0.4",
+    "lint-staged": "^15.5.1",
+    "lit": "^3.3.0",
+    "postcss-styled-syntax": "^0.7.1",
+    "prettier": "3.5.3",
+    "storybook": "^8.6.12",
+    "stylelint": "^16.19.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-no-unsupported-browser-features": "^8.0.4",
+    "stylelint-order": "^7.0.0",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
-    "tsc-alias": "^1.8.10",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1",
-    "vite": "^6.0.3",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@lit/react": "^1.0.5",
     "@skf-design-system/ui-assets": "0.1.3-beta.1",
     "lit": "^3.1.3"
   },
   "scripts": {
-    "analyze": "cem analyze --config \"./custom-elements-manifest.config.js\"",
+    "analyze": "cem analyze",
     "dev": "vite",
-    "build": "pnpm build:web-components && pnpm build:react && bash ./scripts/extra-build-checks.sh",
-    "build:web-components": "vite build && tsc && pnpm cem analyze && tsc-alias",
-    "build:react": "pnpm generate:react && pnpm tsc -p tsconfig.react.json && mv dist-react/react/ dist/react/ && rm -rf dist-react && rm -rf src/react",
+    "build": "vite build && tsc && pnpm cem analyze && tsc-alias && bash ./scripts/extra-build-checks.sh",
     "build-storybook": "storybook build",
     "create-component": "node scripts/create-component/create-component.js",
     "format": "pnpm format:eslint && pnpm format:stylelint && pnpm format:prettier",
     "format:eslint": "eslint \"**/*.{js,ts}\" --fix --ignore-pattern .gitignore",
     "format:prettier": "prettier \"**/*.{css,js,ts}\" --write --ignore-path .gitignore --log-level warn",
     "format:stylelint": "stylelint \"**/*.{css,ts}\" --fix --ignore-path .gitignore",
-    "generate": "pnpm generate:tokens && pnpm generate:index",
-    "generate:index": "node \"./scripts/generate-index.cjs\"",
-    "generate:react": "node ./scripts/make-react.js --outdir dist",
     "lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:prettier",
     "lint:eslint": "eslint \"**/*.{js,ts}\" --ignore-pattern .gitignore",
     "lint:prettier": "prettier \"**/*.{js,ts}\" --check --ignore-path .gitignore --log-level warn",
     "lint:stylelint": "stylelint \"**/*.{css,ts}\" --quiet --ignore-path .gitignore",
-    "serve:storybook-static": "pnpm build && pnpm build-storybook && node ./build/serve.js",
-    "storybook": "concurrently \"storybook dev -p 9009\" \"pnpm analyze --watch\"",
-    "test": "npx playwright test",
-    "test:ui": " npx playwright test --ui"
+    "storybook": "concurrently \"storybook dev -p 6006\" \"pnpm analyze --watch\""
   }
 }

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

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

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

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

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

@@ -1,40 +0,0 @@
-import '../icon/icon.js';
-import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
-import type { CSSResultGroup } from 'lit';
-/**
- * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
- *
- * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
- *
- * @event {CustomEvent} skf-collapse-toggle - Event emitted when toggled
- *
- * @slot - Main content
- *
- * @tagname skf-collapse
- */
-export declare class SkfCollapse extends SkfElement {
-    static styles: CSSResultGroup;
-    /** If true, will animate the expand/collapse state */
-    animated: boolean;
-    /** If true, will set the collapse to be expanded by default */
-    expanded: boolean;
-    /** Heading for the collapse */
-    heading?: string;
-    /**
-     * Defines which heading element will be rendered
-     * @type { "h2" | "h3" | "h4" }
-     */
-    headingAs: Exclude<HeadingType, 'h1'>;
-    /** If true, renders the small version */
-    small: boolean;
-    /** If true, will truncate the heading in collapsed state */
-    truncate: boolean;
-    /** Class method as alternative to manipulate attribute */
-    setClose(): void;
-    /** Class method as alternative to manipulate attribute */
-    setOpen(): void;
-    /** @internal */
-    private _toggle;
-    render(): import("lit").TemplateResult;
-}

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

@@ -1,86 +0,0 @@
-import "../icon/icon.js";
-import { SkfElement as c } from "../../internal/components/skf-element.js";
-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 _ 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--)
-    (p = i[l]) && (t = p(n, r, t) || t);
-  return t && y(n, r, t), t;
-};
-const o = class o extends c {
-  constructor() {
-    super(...arguments), this.animated = !1, this.expanded = !1, this.headingAs = "h2", this.small = !1, this.truncate = !1, this._toggle = () => {
-      this.dispatchEvent(
-        new CustomEvent("skf-collapse-toggle", {
-          bubbles: !0,
-          composed: !0,
-          cancelable: !0
-        })
-      ), this.expanded = !this.expanded;
-    };
-  }
-  /** Class method as alternative to manipulate attribute */
-  setClose() {
-    this.expanded = !1;
-  }
-  /** Class method as alternative to manipulate attribute */
-  setOpen() {
-    this.expanded = !0;
-  }
-  render() {
-    return u`
-			<div class=${m({
-      collapse: !0,
-      "collapse--animated": this.animated,
-      "collapse--expanded": this.expanded,
-      "collapse--small": this.small,
-      "collapse--truncate": this.truncate
-    })}>
-				<${d(this.headingAs)} class="collapse__heading">
-					<button
-						@click=${this._toggle}
-						aria-controls="main"
-						aria-expanded=${f(this.expanded ? "true" : "false")}
-						class="collapse__btn"
-						type="button"
-					>
-						<span class="collapse__label">${this.heading}</span>
-						<skf-icon class="collapse__icon" name=${this.expanded ? "caretUp" : "caretDown"}></skf-icon>
-					</button>
-				</${d(this.headingAs)}>
-				<div class="collapse__body">
-					<div class="collapse__main" data-testid="main" id="main">
-						<slot></slot>
-					</div>
-				</div>
-			</div>
-		`;
-  }
-};
-o.styles = [h, _];
-let e = o;
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "animated");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "expanded");
-a([
-  s()
-], e.prototype, "heading");
-a([
-  s({ attribute: "heading-as" })
-], e.prototype, "headingAs");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "small");
-a([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "truncate");
-export {
-  e as SkfCollapse
-};

package/dist/components/collapse/collapse.d.ts

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

package/dist/components/collapse/collapse.js

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

package/dist/components/collapse/collapse.styles.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/components/collapse/collapse.styles.js

@@ -1,77 +0,0 @@
-import { css as a } from "lit";
-const s = a`
-	/* stylelint-disable selector-class-pattern */
-	@layer components {
-		.collapse {
-			background: var(--skf-bg-color-neutral-1);
-			border-bottom: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
-		}
-
-		.collapse__heading {
-			font-size: var(--_skf-collapse-heading-size, var(--skf-font-size-100));
-			font-weight: var(--_skf-collapse-heading-weight, normal);
-
-			.collapse--small & {
-				--_skf-collapse-heading-size: var(--skf-font-size-75);
-				--_skf-collapse-heading-weight: var(--skf-font-weight-medium);
-			}
-		}
-
-		.collapse__btn {
-			align-items: center;
-			display: flex;
-			padding-block: var(--_skf-collapse-button-padding-block, var(--skf-spacing-50));
-			padding-inline: var(--skf-spacing-75);
-			width: 100%;
-
-			&:focus-visible {
-				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
-				outline-offset: -2px;
-			}
-
-			.collapse--small & {
-				--_skf-collapse-button-padding-block: var(--skf-spacing-25);
-			}
-		}
-
-		.collapse__label {
-			.collapse--truncate:not(.collapse--expanded) & {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
-
-		.collapse__icon {
-			margin-inline-start: auto;
-		}
-
-		.collapse__body {
-			display: grid;
-			grid-template-rows: var(--_skf-collapse-body-height, 0fr);
-			padding-inline: var(--skf-spacing-75);
-
-			.collapse--animated & {
-				transition: grid-template-rows calc(var(--skf-motion-duration-normal) * 1ms)
-					var(--skf-motion-easing-ease-in);
-			}
-
-			.collapse--expanded & {
-				--_skf-collapse-body-height: 1fr;
-			}
-		}
-
-		.collapse__main {
-			overflow: hidden;
-
-			&::after {
-				content: '';
-				display: block;
-				padding-block-end: var(--skf-spacing-100);
-			}
-		}
-	}
-`;
-export {
-  s as default
-};

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

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

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

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

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

@@ -1,25 +0,0 @@
-import { SkfLink } from '../link/link.component.js';
-import { type CSSResultGroup } from 'lit';
-/**
- * The `<skf-menu-item>` is a component that displays a list of actions or options.
- *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
- *
- * @event {CustomEvent} my-tag-my-event - Fired when something happens
- *
- * @event click - Fired when the component is clicked
- * @event mouseover - Fired when the mouse is over the component
- * @event mouseout - Fired when the mouse is out of the component
- * @event focus - Fired when the component is focused
- * @event blur - Fired when the component is blurred
- * @event change - Fired when the component's value changes
- *
- * @slot - The component's main content
- * @slot my-named-slot - A named slot of the component
- *
- * @tagname skf-menu-item
- */
-export declare class SkfMenuItem extends SkfLink {
-    static styles: CSSResultGroup;
-    constructor();
-}

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

@@ -1,13 +0,0 @@
-import { SkfLink as s } from "../link/link.component.js";
-import "lit";
-import { styles as o } from "./menu-item.styles.js";
-const t = class t extends s {
-  constructor() {
-    super(), s.classMap = { "menu-item": !0 };
-  }
-};
-t.styles = [s.styles, o];
-let r = t;
-export {
-  r as SkfMenuItem
-};

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.controllers.d.ts

@@ -1,9 +0,0 @@
-import type { SkfSelectOption } from '../select-option/select-option.component.js';
-import type { ReactiveController } from 'lit';
-type ControllerHost = SkfSelectOption;
-export declare class DeveloperFeedbackController implements ReactiveController {
-    host: ControllerHost;
-    constructor(host: ControllerHost);
-    hostUpdated(): void;
-}
-export {};

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
-};