@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.28

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

@@ -1,29 +1,29 @@
-import { computePosition as f, flip as v, shift as _, offset as g } from "@floating-ui/dom";
+import { computePosition as v, flip as f, shift as _, offset as g } from "@floating-ui/dom";
 import { FormBase as b } from "../../internal/components/formBase.js";
 import { findMatchingTags as y } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as O } from "../../internal/helpers/hintSeverity.js";
-import { raiseError as S } from "../../internal/helpers/raiseError.js";
-import { Asterisk as w } from "../../internal/templates/asterisk.js";
-import x from "../../styles/component.styles.js";
-import { html as h, nothing as $ } from "lit";
-import { property as r, state as d, query as p } from "lit/decorators.js";
-import { classMap as V } from "lit/directives/class-map.js";
+import { raiseError as w } from "../../internal/helpers/raiseError.js";
+import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import $ from "../../styles/component.styles.js";
+import { html as h, nothing as V } from "lit";
+import { property as o, state as d, query as p } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import "../../internal/components/hint/hint.js";
 import "../tag/tag.js";
-import { ScrollController as C, ResizeController as k, GlobalClickController as A, KeyboardNavigationController as E, DeveloperFeedbackController as L } from "./select.controllers.js";
+import { ScrollController as C, ResizeController as k, GlobalClickController as L, KeyboardNavigationController as A, DeveloperFeedbackController as E } from "./select.controllers.js";
 import { styles as P } from "./select.styles.js";
-var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (u, t, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? M(t, e) : t, n = u.length - 1, a; n >= 0; n--)
-    (a = u[n]) && (o = (s ? a(t, e, o) : a(o)) || o);
-  return s && o && D(t, e, o), o;
+var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (u, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? D(t, e) : t, n = u.length - 1, a; n >= 0; n--)
+    (a = u[n]) && (r = (i ? a(t, e, r) : a(r)) || r);
+  return i && r && T(t, e, r), r;
 };
 const c = class c extends b {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new k(this), this.globalClickController = new A(this), this.keyboardNavController = new E(this), this.developerFeedbackController = new L(this), this._handleOptionSelected = (t) => {
+    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new k(this), this.globalClickController = new L(this), this.keyboardNavController = new A(this), this.developerFeedbackController = new E(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
-      this.setFormValue(e ? this.getSelectedValues.join(",") : null), this._updateState(t);
+      this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
     }, this._handleReset = () => {
       this.emitEvent("reset"), this._resetSelectedOptions();
     }, this._updateWidth = () => {
@@ -32,15 +32,15 @@ const c = class c extends b {
         (t = this.$dropdown) == null || t.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
       }, 50);
     }, this._managePopover = () => ({ close: () => {
-      var s;
-      (s = this.$dropdown) == null || s.hidePopover();
+      var i;
+      (i = this.$dropdown) == null || i.hidePopover();
     }, open: () => {
-      const s = this.$selectBtn, o = this.$dropdown;
-      !s || !o || (o.showPopover(), f(s, o, {
+      const i = this.$selectBtn, r = this.$dropdown;
+      !i || !r || (r.showPopover(), v(i, r, {
         placement: "bottom",
-        middleware: [v(), _({ padding: 5 }), g(2)]
+        middleware: [f(), _({ padding: 5 }), g(2)]
       }).then(({ x: n, y: a }) => {
-        Object.assign(o.style, {
+        Object.assign(r.style, {
           left: `${String(n)}px`,
           top: `${String(Math.round(a - window.scrollY))}px`
         });
@@ -55,10 +55,10 @@ const c = class c extends b {
           this.setFormValue(null), this.requestUpdate();
           break;
         case this._selectedOptions.length === 1:
-          this.setFormValue(this.getSelectedValues[0]);
+          this.setFormValue(this.selectedValues[0]);
           break;
         case this._selectedOptions.length > 1:
-          this.setFormValue(this.getSelectedValues.join(","));
+          this.setFormValue(this.selectedValues.join(","));
           break;
         default:
           throw new Error("Something went wrong");
@@ -68,8 +68,8 @@ const c = class c extends b {
       });
     }), this._resetSelectedOptions = (t) => {
       const e = !t;
-      this._optionsList.forEach((s) => {
-        (e || s !== t) && s.removeAttribute("selected");
+      this._optionsList.forEach((i) => {
+        (e || i !== t) && i.removeAttribute("selected");
       });
     }, this._handleSlotChange = () => {
       this._collectSlotOptionTags(), this._validateInput();
@@ -78,11 +78,23 @@ const c = class c extends b {
       return (t = this.$selectedValue) == null || t.classList.add("contains-meta-info"), this._selectedOptions.length > 1 ? `(${String(this._selectedOptions.length)} items selected)` : this.value ? ((e = this.$selectedValue) == null || e.classList.remove("contains-meta-info"), this.value) : this.buttonLabel;
     }, this._selectedOptions = [];
   }
-  get getSelectedValues() {
+  set selectedValues(t) {
+    this._selectedOptions = this._optionsList.filter((e) => t.includes(e.value.trim()));
+  }
+  get selectedValues() {
     return this._selectedOptions.map((t) => t.value.trim());
   }
-  get getSelectedOptionsText() {
-    return this._selectedOptions.map((t) => t.textContent);
+  set selectedOptionsText(t) {
+    this._selectedOptions = this._selectedOptions.filter(
+      (e) => e.textContent && t.includes(e.textContent)
+    );
+  }
+  get selectedOptionsText() {
+    return this._selectedOptions.map((t) => t.textContent ?? "");
+  }
+  set value(t) {
+    const e = t.split(",").map((i) => i.trim());
+    this._selectedOptions = this._optionsList.filter((i) => e.includes(i.value.trim()));
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -113,20 +125,19 @@ const c = class c extends b {
   }
   firstUpdated() {
     var t;
-    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._collectSlotOptionTags(), this._validateInput();
+    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
   }
   updated(t) {
-    var e, s;
     if (t.has("_expanded")) {
-      const o = !!t.get("_expanded") === this._expanded;
-      if (this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } }), o) return;
-      this._expanded ? ((e = this.$selectBtn) == null || e.setAttribute("aria-expanded", "true"), this._managePopover().open()) : ((s = this.$selectBtn) == null || s.setAttribute("aria-expanded", "false"), this._managePopover().close());
+      const e = !!t.get("_expanded") === this._expanded;
+      if (this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } }), e) return;
+      this._expanded ? this._managePopover().open() : this._managePopover().close();
     }
   }
-  attributeChangedCallback(t, e, s) {
-    if (super.attributeChangedCallback(t, e, s), t === "custom-invalid")
-      if (typeof s == "string") {
-        const n = String(s).trim() || "Custom error";
+  attributeChangedCallback(t, e, i) {
+    if (super.attributeChangedCallback(t, e, i), t === "custom-invalid")
+      if (typeof i == "string") {
+        const n = this.withFallback(i);
         this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, n), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
@@ -142,8 +153,8 @@ const c = class c extends b {
         e.selected && (this.selectedOptions = [...this.selectedOptions, e]);
       });
     else {
-      const e = this._selectedOptions.length > 0, s = t.detail.value !== null;
-      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), s && (this.selectedOptions = [t.target]);
+      const e = this._selectedOptions.length > 0, i = t.detail.value !== null;
+      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), i && (this.selectedOptions = [t.target]);
     }
     this._setValue();
   }
@@ -154,7 +165,7 @@ const c = class c extends b {
   /** @internal */
   /** Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = y(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), S({
+    this._optionsList = y(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -163,7 +174,7 @@ const c = class c extends b {
   /** @internal */
   _validateInput() {
     this._invalid = !1;
-    const t = this.required && !this.getSelectedValues.length || this.min === 1, e = !!(this.min && this.getSelectedValues.length < this.min), s = !!(this.max && this.getSelectedValues.length > this.max);
+    const t = this.required && !this.selectedValues.length || this.min === 1, e = !!(this.min && this.selectedValues.length < this.min), i = !!(this.max && this.selectedValues.length > this.max);
     if (this._internals.validity.customError) {
       this._invalid = !0;
       return;
@@ -173,7 +184,7 @@ const c = class c extends b {
     } else if (e) {
       const n = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
       this.setValidity({ rangeUnderflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
-    } else if (s) {
+    } else if (i) {
       const n = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
       this.setValidity({ rangeOverflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
     } else
@@ -185,13 +196,14 @@ const c = class c extends b {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
-						${this.required ? w(this.requiredLabel) : null}
+						${this.required ? x(this.requiredLabel) : null}
 					</div>
 					<button
 						?disabled=${this.disabled}
 						@click=${this._handleDropdownToggle}
 						aria-controls="select-dropdown"
-						aria-expanded="false"
+						aria-expanded=${this._expanded}
+						aria-invalid=${this._invalid}
 						aria-haspopup="listbox"
 						class="skf-icon-host"
 						id="select-button"
@@ -199,7 +211,7 @@ const c = class c extends b {
 					>
 						<span
 							id="selected-value"
-							class=${V({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${S({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<skf-icon class="arrow" name="chevronDown"></skf-icon>
@@ -213,15 +225,18 @@ const c = class c extends b {
 									${this.selectedOptions.map(
       (t) => h`
 											<skf-tag
+												style="${`view-transition-name: tag-${String(t.textContent).replace(/[^a-zA-Z]/g, "").toLowerCase()}`}"
 												removable
-												.onRemove=${(e) => (e.stopPropagation(), e.preventDefault(), t.removeAttribute("selected"), !1)}
+												.onRemove=${(e) => (e.stopPropagation(), e.preventDefault(), document.startViewTransition || t.removeAttribute("selected"), document.startViewTransition(() => {
+        t.removeAttribute("selected");
+      }), !1)}
 											>
 												${t.textContent}
 											</skf-tag>
 										`
     )}
 								</div>
-							` : $}
+							` : V}
 				${this.hint && h`
 						<skf-hint
 							aria-live=${this._invalid ? "assertive" : "polite"}
@@ -236,77 +251,77 @@ const c = class c extends b {
 		`;
   }
 };
-c.styles = [x, P];
-let i = c;
+c.styles = [$, P];
+let s = c;
 l([
-  r({ type: String, reflect: !0, attribute: "button-label" })
-], i.prototype, "buttonLabel", 2);
+  o({ type: String, reflect: !0, attribute: "button-label" })
+], s.prototype, "buttonLabel", 2);
 l([
-  r({ attribute: "custom-invalid" })
-], i.prototype, "customInvalid", 2);
+  o({ attribute: "custom-invalid" })
+], s.prototype, "customInvalid", 2);
 l([
-  r({ type: Boolean, attribute: "hide-label" })
-], i.prototype, "hideLabel", 2);
+  o({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
 l([
-  r({ type: Boolean, reflect: !0, attribute: "hide-tags" })
-], i.prototype, "hideTags", 2);
+  o({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+], s.prototype, "hideTags", 2);
 l([
-  r()
-], i.prototype, "hint", 2);
+  o()
+], s.prototype, "hint", 2);
 l([
-  r({ type: Array, attribute: !1 })
-], i.prototype, "getSelectedValues", 1);
+  o({ type: Array, attribute: !1 })
+], s.prototype, "selectedValues", 1);
 l([
-  r({ type: Array, attribute: !1 })
-], i.prototype, "getSelectedOptionsText", 1);
+  o({ type: Array, attribute: !1 })
+], s.prototype, "selectedOptionsText", 1);
 l([
-  r({ reflect: !0 })
-], i.prototype, "label", 2);
+  o({ reflect: !0 })
+], s.prototype, "label", 2);
 l([
-  r({ type: Number })
-], i.prototype, "max", 2);
+  o({ type: Number })
+], s.prototype, "max", 2);
 l([
-  r({ type: Number })
-], i.prototype, "min", 2);
+  o({ type: Number })
+], s.prototype, "min", 2);
 l([
-  r({ type: Boolean, reflect: !0 })
-], i.prototype, "multiple", 2);
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "multiple", 2);
 l([
-  r()
-], i.prototype, "name", 2);
+  o()
+], s.prototype, "name", 2);
 l([
-  r({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
+  o({ attribute: "required-label" })
+], s.prototype, "requiredLabel", 2);
 l([
-  r()
-], i.prototype, "severity", 2);
+  o()
+], s.prototype, "severity", 2);
 l([
-  r({ type: Boolean, attribute: "show-valid" })
-], i.prototype, "showValid", 2);
+  o({ type: Boolean, attribute: "show-valid" })
+], s.prototype, "showValid", 2);
 l([
-  r({ reflect: !0 })
-], i.prototype, "size", 2);
+  o({ reflect: !0 })
+], s.prototype, "size", 2);
 l([
   d()
-], i.prototype, "value", 1);
+], s.prototype, "value", 1);
 l([
   d()
-], i.prototype, "selectedOptions", 1);
+], s.prototype, "selectedOptions", 1);
 l([
   d()
-], i.prototype, "_expanded", 2);
+], s.prototype, "_expanded", 2);
 l([
   d()
-], i.prototype, "_invalid", 2);
+], s.prototype, "_invalid", 2);
 l([
   p("#select-button")
-], i.prototype, "$selectBtn", 2);
+], s.prototype, "$selectBtn", 2);
 l([
   p("#selected-value")
-], i.prototype, "$selectedValue", 2);
+], s.prototype, "$selectedValue", 2);
 l([
   p("#select-dropdown")
-], i.prototype, "$dropdown", 2);
+], s.prototype, "$dropdown", 2);
 export {
-  i as SkfSelect
+  s as SkfSelect
 };

package/dist/components/select/select.controllers.js

@@ -146,11 +146,14 @@ class _ {
   }
   _badAttributeCombinationWarning() {
     r({
-      assert: (this.host.min ?? 0) < (this.host.max ?? 1 / 0),
+      assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "min", "smaller than max"]
     }), r({
-      assert: ((this.host.min ?? this.host.max) && this.host.multiple) ?? !(this.host.min && this.host.max),
+      assert: (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        (this.host.min || this.host.max) && this.host.multiple || !(this.host.min && this.host.max)
+      ),
       reason: "attribute-mismatch",
       replaceStrings: [this.host.localName, "min or max", "together with multiple"]
     }), r({

package/dist/components/switch/switch.component.js

@@ -41,7 +41,10 @@ const h = class h extends o {
     var e;
     if (this._invalid = !1, this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((e = this.$input) == null ? void 0 : e.validationMessage) ?? "Please check this box if you want to proceed";
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this box if you want to proceed"
+      );
       this.setValidity({ valueMissing: !0 }, String(a));
     } else
       this.setValidity({});

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

@@ -0,0 +1,29 @@
+import type { SkfTabGroup } from '@components/tab-group/tab-group.component.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+export interface SkfTabEvent {
+    tab: SkfTab;
+}
+/**
+ * The `<skf-tab>` is a component that displays a list of actions or options
+ *
+ * @event {CustomEvent} skf-tab-select - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+ * @event click - Fired when the component is clicked
+ *
+ * @slot - The tab's label
+ *
+ * @tagname skf-tab
+ */
+export declare class SkfTab extends SkfElement {
+    static styles: CSSResultGroup;
+    /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+    panel: string;
+    selected: boolean;
+    variant: SkfTabGroup['variant'];
+    constructor();
+    /** @internal */
+    handleSelectedChange(): void;
+    /** @internal */
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,57 @@
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { watch as h } from "../../internal/helpers/watch.js";
+import m from "../../styles/component.styles.js";
+import { html as f } from "lit";
+import { property as v, state as d } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { styles as _ } from "./tab.styles.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (c, s, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = c.length - 1, o; i >= 0; i--)
+    (o = c[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
+  return r && e && u(s, l, e), e;
+};
+const p = class p extends n {
+  constructor() {
+    super(), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
+      this.emit("skf-tab-select", {
+        detail: {
+          tab: this
+        }
+      });
+    }, this.role = "tab", this.addEventListener("click", this._handleClick);
+  }
+  handleSelectedChange() {
+    this.ariaSelected = this.selected ? "true" : "false", this.tabIndex = this.selected ? 0 : -1;
+  }
+  render() {
+    return f`
+			<div
+				class=${b({
+      tab: !0,
+      "tab--expanded": this.variant === "expanded",
+      "tab--compressed": this.variant === "compressed",
+      "tab--selected": this.selected
+    })}
+			>
+				<slot class="tab__label"></slot>
+			</div>
+		`;
+  }
+};
+p.styles = [m, _];
+let t = p;
+a([
+  v({ reflect: !0 })
+], t.prototype, "panel", 2);
+a([
+  d()
+], t.prototype, "selected", 2);
+a([
+  d()
+], t.prototype, "variant", 2);
+a([
+  h("selected")
+], t.prototype, "handleSelectedChange", 1);
+export {
+  t as SkfTab
+};

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

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

package/dist/components/tab/tab.js

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

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

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

package/dist/components/tab/tab.styles.js

@@ -0,0 +1,123 @@
+import { css as o } from "lit";
+const e = o`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+			min-width: 0; /* Needed for truncation */
+			outline: transparent;
+		}
+
+		.tab {
+			color: var(--_skf-tab-color, var(--skf-text-color-primary));
+			cursor: pointer;
+			position: relative;
+
+			/* Indicator */
+			&::after {
+				background-color: var(--skf-color-brand-base);
+				block-size: 3px;
+				content: '';
+				inset-inline: 50%;
+				opacity: 0;
+				position: absolute;
+				transition: all calc(var(--skf-motion-duration-fast) * 1ms) var(--skf-motion-easing-ease-in);
+			}
+
+			:host(:focus-visible) & {
+				outline: var(--skf-border-width-md) solid var(--skf-color-brand-base);
+			}
+		}
+
+		.tab--selected::after {
+			inset-inline: 0;
+			opacity: 1;
+		}
+
+		/**
+		 * Compressed
+		 */
+		.tab--compressed {
+			padding-block-end: var(--skf-spacing-25);
+
+			/* Invisible bold label copy, to avoid layout shifts when selected */
+			&::before {
+				block-size: 0;
+				content: attr(data-label);
+				display: block;
+				font-weight: var(--skf-font-weight-bold);
+				visibility: hidden;
+			}
+
+			&::after {
+				inset-block-end: 0;
+			}
+
+			&:hover,
+			&:active {
+				&::after {
+					inset-inline: 0;
+					opacity: 1;
+				}
+			}
+
+			:host(:focus-visible) & {
+				outline-offset: 2px;
+			}
+		}
+
+		/**
+		 * Expanded
+		 */
+		.tab--expanded {
+			align-items: center;
+			background-color: var(--_skf-tab-bg-color, var(--skf-color-neutral-lightest));
+			block-size: var(--skf-size-44);
+			border-block-end: var(--skf-border-width-sm) solid
+				var(--_skf-tab-border-bottom-color, var(--skf-border-color-tertiary));
+			display: flex;
+			justify-content: center;
+			padding-inline: var(--skf-spacing-50);
+			transition: background-color calc(var(--skf-motion-duration-fast) * 1ms)
+				var(--skf-motion-easing-ease-in);
+
+			&::after {
+				inset-block-start: 0;
+			}
+
+			&:hover {
+				--_skf-tab-bg-color: var(--skf-color-blue-lighest);
+			}
+
+			:host(:focus-visible) & {
+				outline-offset: -2px;
+			}
+		}
+
+		.tab--expanded.tab--selected {
+			--_skf-tab-bg-color: var(--skf-bg-color-neutral-1);
+			--_skf-tab-border-bottom-color: transparent;
+			--_skf-tab-color: var(--skf-text-color-emphasised);
+
+			font-weight: var(--skf-font-weight-bold);
+
+			:host(:not(:first-of-type)) & {
+				border-inline-start: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+			}
+
+			:host(:not(:last-of-type)) & {
+				border-inline-end: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+			}
+		}
+
+		.tab__label {
+			display: block;
+			overflow-x: auto;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  e as styles
+};

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

@@ -0,0 +1,43 @@
+import '@components/card/card.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup, type PropertyValues } from 'lit';
+/**
+ * The `<skf-tab-group>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
+ * @slot tabs - Used for grouping tabs in the tab group. Must be <skf-tab> elements
+ *
+ * @tagname skf-tab-group
+ */
+export declare class SkfTabGroup extends SkfElement {
+    static styles: CSSResultGroup;
+    /** Sets the default selected tab */
+    defaultSelected: number;
+    /** If true, removes border */
+    noBorder: boolean;
+    /** If true, removes padding */
+    noPadding: boolean;
+    /** If true, component fills the parent element height */
+    stretch: boolean;
+    /** Sets the appearance of the tabs */
+    variant: 'compressed' | 'expanded';
+    /** @internal */
+    private tabs;
+    /** @internal */
+    private panels;
+    firstUpdated(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    /** @internal */
+    private _getKeyDownNextTab;
+    /** @internal */
+    private _handleKeyDown;
+    /** @internal */
+    private _handleTabSelected;
+    /** @internal */
+    private _selectTab;
+    /** @internal */
+    private _syncTabsAndPanels;
+    render(): import("lit").TemplateResult<1>;
+}