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

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

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

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

@@ -1,9 +1,12 @@
-import { css as e } from "lit";
-const s = e`
+import { css as o } from "lit";
+const e = o`
 	@layer components {
-		.menu-item {
+		:host {
+			display: block;
+		}
+
+		#root {
 			block-size: var(--skf-size-44);
-			display: flex;
 			padding-inline: var(--skf-spacing-75);
 
 			@media screen and (any-hover: hover) {
@@ -15,5 +18,5 @@ const s = e`
 	}
 `;
 export {
-  s as styles
+  e as styles
 };

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

@@ -10,9 +10,13 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-nav-item
  */
 export declare class SkfNavItem extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     href: string;
     icon?: Icon;
+    vertical: boolean;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,38 +1,57 @@
-import "../link/link.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
-import { componentStyles as c } from "../../styles/component.styles.js";
-import { html as h } from "lit";
-import { property as f } from "lit/decorators.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { styles as a } from "./nav-item.styles.js";
-var d = Object.defineProperty, p = (i, s, n, y) => {
-  for (var r = void 0, t = i.length - 1, l; t >= 0; t--)
-    (l = i[t]) && (r = l(s, n, r) || r);
-  return r && d(s, n, r), r;
+var y = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends m {
+var u = (t, e, r) => e.has(t) || y("Cannot " + r);
+var h = (t, e, r) => (u(t, e, "read from private field"), r ? r.call(t) : e.get(t)), f = (t, e, r) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), m = (t, e, r, s) => (u(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
+import "../link/link.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { stateMap as g } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as _, state as P } from "lit/decorators.js";
+import { ifDefined as S } from "lit/directives/if-defined.js";
+import { styles as w } from "./nav-item.styles.js";
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, l = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? j(e, r) : e, a = t.length - 1, c; a >= 0; a--)
+    (c = t[a]) && (o = (s ? c(e, r, o) : c(o)) || o);
+  return s && o && D(e, r, o), o;
+}, n, p;
+const v = class v extends d {
   constructor() {
-    super(...arguments), this.href = "#";
+    super(...arguments);
+    f(this, n);
+    f(this, p);
+    m(this, n, this.attachInternals()), m(this, p, h(this, n).states), this.href = "", this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.role = "menuitem";
+    super.connectedCallback(), this.role = "listitem";
+  }
+  _handleStateChange() {
+    g(h(this, p), "vertical").set(this.vertical);
   }
   render() {
-    return h`
-			<skf-link color="inverse" href=${this.href} icon=${u(this.icon)}>
+    return O`
+			<skf-link color="inverse" href=${this.href} icon=${S(this.icon)}>
 				<slot></slot>
 			</skf-link>
 		`;
   }
 };
-o.styles = [c, a];
-let e = o;
-p([
-  f({ reflect: !0 })
-], e.prototype, "href");
-p([
-  f()
-], e.prototype, "icon");
+n = new WeakMap(), p = new WeakMap(), v.styles = [b, w];
+let i = v;
+l([
+  _({ type: String })
+], i.prototype, "href", 2);
+l([
+  _({ type: String })
+], i.prototype, "icon", 2);
+l([
+  P()
+], i.prototype, "vertical", 2);
+l([
+  C("vertical")
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfNavItem
+  i as SkfNavItem
 };

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

@@ -1,36 +1,40 @@
 import { css as t } from "lit";
 const s = t`
 	@layer components {
-		skf-link::part(root) {
-			block-size: var(--skf-header-height);
-			display: flex;
-			padding-inline: var(--skf-spacing-100);
-			position: relative;
-		}
+		@layer base {
+			skf-link::part(root) {
+				block-size: var(--skf-header-height);
+				display: flex;
+				padding-inline: var(--skf-spacing-100);
+				position: relative;
+			}
 
-		skf-link::part(root)::after {
-			content: '';
-			position: absolute;
-			transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
-				var(--skf-motion-easing-ease-in);
-		}
+			skf-link::part(root)::after {
+				content: '';
+				position: absolute;
+				transition: translate calc(var(--skf-motion-duration-fast) * 1ms)
+					var(--skf-motion-easing-ease-in);
+			}
 
-		skf-link::part(root):hover::after {
-			--_skf-nav-link-translate: 0;
-		}
+			skf-link::part(root):hover::after {
+				--_skf-nav-link-translate: 0;
+			}
 
-		:host-context(skf-nav:not([vertical])) skf-link::part(root)::after {
-			border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block-end: 0;
-			inset-inline: 0;
-			translate: 0 var(--_skf-nav-link-translate, 100%);
+			:host(:not(:state(vertical))) skf-link::part(root)::after {
+				border-bottom: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block-end: 0;
+				inset-inline: 0;
+				translate: 0 var(--_skf-nav-link-translate, 100%);
+			}
 		}
 
-		:host-context(skf-nav[vertical]) skf-link::part(root)::after {
-			border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
-			inset-block: 0;
-			inset-inline-start: 0;
-			translate: var(--_skf-nav-link-translate, -100%) 0;
+		@layer mods {
+			:host(:state(vertical)) skf-link::part(root)::after {
+				border-left: var(--skf-size-4) solid var(--skf-border-color-inverse);
+				inset-block: 0;
+				inset-inline-start: 0;
+				translate: var(--_skf-nav-link-translate, -100%) 0;
+			}
 		}
 	}
 `;

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

@@ -10,8 +10,14 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-nav
  */
 export declare class SkfNav extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    /** If true, the navigation will be displayed vertically */
     vertical: boolean;
+    /** @internal */
+    private _items;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/nav/nav.component.js

@@ -1,34 +1,55 @@
-import { SkfElement as s } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as p } from "lit";
-import { property as c } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
-import { styles as u } from "./nav.styles.js";
-var v = Object.defineProperty, d = (i, a, l, h) => {
-  for (var e = void 0, r = i.length - 1, n; r >= 0; r--)
-    (n = i[r]) && (e = n(a, l, e) || e);
-  return e && v(a, l, e), e;
+var u = (t) => {
+  throw TypeError(t);
 };
-const o = class o extends s {
+var y = (t, e, r) => e.has(t) || u("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (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), h = (t, e, r, i) => (y(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as _ } from "../../internal/components/skf-element.js";
+import { stateMap as d } from "../../internal/helpers/stateMap.js";
+import { watch as b } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as C } from "lit";
+import { property as O, queryAssignedElements as P } from "lit/decorators.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { styles as D } from "./nav.styles.js";
+var E = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(e, r) : e, n = t.length - 1, p; n >= 0; n--)
+    (p = t[n]) && (s = (i ? p(e, r, s) : p(s)) || s);
+  return i && s && E(e, r, s), s;
+}, o, l;
+const v = class v extends _ {
   constructor() {
-    super(...arguments), this.vertical = !1;
+    super(...arguments);
+    m(this, o);
+    m(this, l);
+    h(this, o, this.attachInternals()), h(this, l, c(this, o).states), this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "nav";
+    super.connectedCallback(), this.ariaLabel = this.ariaLabel ?? "Main navigation", this.role = "navigation";
+  }
+  _handleStateChange() {
+    d(c(this, l), "vertical").set(this.vertical), this._items.forEach((r) => {
+      r.vertical = this.vertical;
+    });
   }
   render() {
-    return p`
-			<ul aria-orientation=${f(this.vertical ? "vertical" : void 0)} role="menubar">
+    return C`
+			<ul aria-orientation=${w(this.vertical ? "vertical" : void 0)}>
 				<slot></slot>
 			</ul>
 		`;
   }
 };
-o.styles = [m, u];
-let t = o;
-d([
-  c({ type: Boolean, reflect: !0 })
-], t.prototype, "vertical");
+o = new WeakMap(), l = new WeakMap(), v.styles = [g, D];
+let a = v;
+f([
+  O({ type: Boolean })
+], a.prototype, "vertical", 2);
+f([
+  P({ selector: "skf-nav-item" })
+], a.prototype, "_items", 2);
+f([
+  b("vertical")
+], a.prototype, "_handleStateChange", 1);
 export {
-  t as SkfNav
+  a as SkfNav
 };

package/dist/components/nav/nav.styles.js

@@ -1,17 +1,23 @@
 import { css as t } from "lit";
-const e = t`
-	:host(:not([vertical])) {
-		width: fit-content;
-	}
+const o = t`
+	@layer components {
+		@layer base {
+			:host(:not(:state(vertical))) {
+				width: fit-content;
+			}
 
-	ul {
-		display: flex;
+			ul {
+				display: flex;
+			}
+		}
 
-		:host([vertical]) & {
-			flex-direction: column;
+		@layer mods {
+			:host(:state(vertical)) ul {
+				flex-direction: column;
+			}
 		}
 	}
 `;
 export {
-  e as styles
+  o as styles
 };

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

@@ -28,5 +28,9 @@ export declare class SkfPopover extends SkfPopoverBase {
     /** @internal */
     hideArrowChanged(): void;
     /** @internal */
+    openExtended(): void;
+    /** @internal */
     addEventListeners($element: HTMLElement | Element): void;
+    /** @internal */
+    _checkClickOutside: (e: Event) => void;
 }

package/dist/components/popover/popover.component.js

@@ -1,35 +1,43 @@
-import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as f } from "../../internal/helpers/watch.js";
-import { property as d } from "lit/decorators.js";
+import { SkfPopoverBase as p } from "../../internal/base-classes/popover/popover.base.js";
+import { watch as l } from "../../internal/helpers/watch.js";
+import { property as c } from "lit/decorators.js";
 import { styles as w } from "./popover.styles.js";
-var c = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (l, r, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? m(r, o) : r, i = l.length - 1, p; i >= 0; i--)
-    (p = l[i]) && (t = (s ? p(r, o, t) : p(t)) || t);
-  return s && t && c(r, o, t), t;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (d, t, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(t, r) : t, o = d.length - 1, h; o >= 0; o--)
+    (h = d[o]) && (e = (s ? h(t, r, e) : h(e)) || e);
+  return s && e && f(t, r, e), e;
 };
-const n = class n extends h {
+const a = class a extends p {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", h.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this._checkClickOutside = (t) => {
+      this.isOpen && !this.contains(t.target) && this.close();
+    }, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", p.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
   /** @internal */
-  addEventListeners(r) {
-    r.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+  openExtended() {
+    window.top && window.self !== window.top && window.top.addEventListener("click", this._checkClickOutside, {
+      signal: this.signal
+    });
+  }
+  /** @internal */
+  addEventListeners(t) {
+    t.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
   }
 };
-n.styles = [h.styles, w];
-let e = n;
-a([
-  d({ type: Number })
-], e.prototype, "offset", 2);
-a([
-  d({ type: Boolean })
-], e.prototype, "hideArrow", 2);
-a([
-  f("hideArrow")
-], e.prototype, "hideArrowChanged", 1);
+a.styles = [p.styles, w];
+let i = a;
+n([
+  c({ type: Number })
+], i.prototype, "offset", 2);
+n([
+  c({ type: Boolean })
+], i.prototype, "hideArrow", 2);
+n([
+  l("hideArrow")
+], i.prototype, "hideArrowChanged", 1);
 export {
-  e as SkfPopover
+  i as SkfPopover
 };

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

@@ -18,5 +18,7 @@ export declare class SkfProgress extends SkfElement {
     /** Specifies how much of the task that has been completed */
     value: number;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

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

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

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const o = r`
+const s = r`
 	@layer components {
 		@layer base {
 			#root {
@@ -24,7 +24,7 @@ const o = r`
 		}
 
 		@layer mods {
-			:host([animated]) {
+			:host(:state(animated)) {
 				#root::after {
 					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
 						infinite reverse;
@@ -51,5 +51,5 @@ const o = r`
 	}
 `;
 export {
-  o as styles
+  s as styles
 };

package/dist/components/select/select-option-group.component.d.ts

@@ -10,7 +10,11 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-select-option-group
  */
 export declare class SkfSelectOptionGroup extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     label: string;
+    small: boolean;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,19 +1,32 @@
-import { SkfElement as a } from "../../internal/components/skf-element.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";
-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;
+var b = (t) => {
+  throw TypeError(t);
 };
-const l = class l extends a {
+var d = (t, e, s) => e.has(t) || b("Cannot " + s);
+var h = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), n = (t, e, s) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), f = (t, e, s, r) => (d(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
+import { SkfElement as u } from "../../internal/components/skf-element.js";
+import { stateMap as y } from "../../internal/helpers/stateMap.js";
+import { watch as _ } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as P } from "lit";
+import { property as w, state as C } from "lit/decorators.js";
+import { styles as D } from "./select-option-group.style.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, v = (t, e, s, r) => {
+  for (var l = r > 1 ? void 0 : r ? x(e, s) : e, i = t.length - 1, p; i >= 0; i--)
+    (p = t[i]) && (l = (r ? p(e, s, l) : p(l)) || l);
+  return r && l && j(e, s, l), l;
+}, o, m;
+const c = class c extends u {
   constructor() {
-    super(...arguments), this.label = "Default label";
+    super(...arguments);
+    n(this, o);
+    n(this, m);
+    f(this, o, this.attachInternals()), f(this, m, h(this, o).states), this.label = "Default label", this.small = !1;
+  }
+  _handleStateChange() {
+    y(h(this, m), "small").set(this.small);
   }
   render() {
-    return p`
+    return P`
 			<div role="group">
 				<div id="label">${this.label}</div>
 				<slot></slot>
@@ -21,11 +34,17 @@ const l = class l extends a {
 		`;
   }
 };
-l.styles = [f, n];
-let t = l;
-u([
-  d({ reflect: !0 })
-], t.prototype, "label");
+o = new WeakMap(), m = new WeakMap(), c.styles = [g, D];
+let a = c;
+v([
+  w({ reflect: !0 })
+], a.prototype, "label", 2);
+v([
+  C()
+], a.prototype, "small", 2);
+v([
+  _("small")
+], a.prototype, "_handleStateChange", 1);
 export {
-  t as SkfSelectOptionGroup
+  a as SkfSelectOptionGroup
 };

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

@@ -1,13 +1,19 @@
 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);
+		@layer base {
+			#label {
+				--_skf-select-option-group-height: var(--skf-size-44);
 
-			:host-context(skf-select[size='sm']) & {
+				align-items: center;
+				block-size: var(--_skf-select-option-group-height);
+				display: flex;
+				font-weight: var(--skf-font-weight-bold);
+			}
+		}
+
+		@layer mods {
+			:host(:state(small)) #label {
 				--_skf-select-option-group-height: var(--skf-size-32);
 			}
 		}