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

package/dist/index.d.ts

@@ -6,8 +6,9 @@ export { default as SkfBreadcrumb } from './components/breadcrumb/breadcrumb.js'
 export { default as SkfButton } from './components/button/button.js';
 export { default as SkfCard } from './components/card/card.js';
 export { default as SkfCheckbox } from './components/checkbox/checkbox.js';
-export { default as SkfDatePickerInput } from './components/date-picker-input/datepicker-input.js';
-export { default as SkfDatePicker } from './components/date-picker/datepicker.js';
+export { default as SkfDatepickerCalendar } from './components/datepicker/datepicker-calendar.js';
+export { default as SkfDatepickerPopup } from './components/datepicker/datepicker-popup.js';
+export { default as SkfDatepicker } from './components/datepicker/datepicker.js';
 export { default as SkfDialog } from './components/dialog/dialog.js';
 export { default as SkfDivider } from './components/divider/divider.js';
 export { default as SkfDrawer } from './components/drawer/drawer.js';
@@ -27,15 +28,15 @@ export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfSegmentedButtonItem } from './components/segmented-button/segmented-button-item.js';
 export { default as SkfSegmentedButton } from './components/segmented-button/segmented-button.js';
-export { default as SkfOptionGroup } from './components/select/select-option-group.js';
-export { default as SkfOption } from './components/select/select-option.js';
+export { default as SkfSelectOptionGroup } from './components/select/select-option-group.js';
+export { default as SkfSelectOption } from './components/select/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfStepperItem } from './components/stepper/stepper-item.js';
 export { default as SkfStepper } from './components/stepper/stepper.js';
 export { default as SkfSwitch } from './components/switch/switch.js';
-export { default as SkfTabGoup } from './components/tab-group/tab-group.js';
-export { default as SkfTabPanel } from './components/tab-panel/tab-panel.js';
-export { default as SkfTab } from './components/tab/tab.js';
+export { default as SkfTabPanel } from './components/tabs/tab-panel.js';
+export { default as SkfTab } from './components/tabs/tab.js';
+export { default as SkfTabs } from './components/tabs/tabs.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';
 export { default as SkfToastItem } from './components/toast/toast-item.js';

package/dist/index.js

@@ -6,8 +6,9 @@ import "./components/breadcrumb/breadcrumb.js";
 import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
-import "./components/date-picker-input/datepicker-input.js";
-import "./components/date-picker/datepicker.js";
+import "./components/datepicker/datepicker-calendar.js";
+import "./components/datepicker/datepicker-popup.js";
+import "./components/datepicker/datepicker.js";
 import "./components/dialog/dialog.js";
 import "./components/divider/divider.js";
 import "./components/drawer/drawer.js";
@@ -33,102 +34,104 @@ import "./components/select/select.js";
 import "./components/stepper/stepper-item.js";
 import "./components/stepper/stepper.js";
 import "./components/switch/switch.js";
-import "./components/tab-group/tab-group.js";
-import "./components/tab-panel/tab-panel.js";
-import "./components/tab/tab.js";
+import "./components/tabs/tab-panel.js";
+import "./components/tabs/tab.js";
+import "./components/tabs/tabs.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
 import "./components/toast/toast-item.js";
 import "./components/toast/toast-wrapper.js";
 import "./components/toast/toast.js";
 import "./components/tooltip/tooltip.js";
-import { SkfAccordionItem as Q } from "./components/accordion/accordion-item.component.js";
-import { SkfAccordion as V } from "./components/accordion/accordion.component.js";
-import { SkfAlert as Y } from "./components/alert/alert.component.js";
-import { SkfBreadcrumbItem as _ } from "./components/breadcrumb/breadcrumb-item.component.js";
-import { SkfBreadcrumb as oo } from "./components/breadcrumb/breadcrumb.component.js";
-import { SkfButton as to } from "./components/button/button.component.js";
-import { SkfCard as mo } from "./components/card/card.component.js";
-import { SkfCheckbox as eo } from "./components/checkbox/checkbox.component.js";
-import { SkfDatePickerInput as So } from "./components/date-picker-input/datepicker-input.component.js";
-import { SkfDatePicker as xo } from "./components/date-picker/datepicker.component.js";
-import { SkfDialog as no } from "./components/dialog/dialog.component.js";
-import { SkfDivider as uo } from "./components/divider/divider.component.js";
-import { SkfDrawer as To } from "./components/drawer/drawer.component.js";
-import { SkfHeader as bo } from "./components/header/header.component.js";
-import { SkfHeading as lo } from "./components/heading/heading.component.js";
-import { SkfIcon as Do } from "./components/icon/icon.component.js";
-import { SkfInput as vo } from "./components/input/input.component.js";
-import { SkfLink as Go } from "./components/link/link.component.js";
-import { SkfLoader as Lo } from "./components/loader/loader.component.js";
-import { SkfLogo as wo } from "./components/logo/logo.component.js";
-import { SkfMenuItem as Ho } from "./components/menu/menu-item.component.js";
-import { SkfMenu as No } from "./components/menu/menu.component.js";
-import { SkfNavItem as Wo } from "./components/nav/nav-item.component.js";
-import { SkfNav as qo } from "./components/nav/nav.component.js";
-import { SkfPopover as zo } from "./components/popover/popover.component.js";
-import { SkfProgress as Fo } from "./components/progress/progress.component.js";
-import { SkfRadio as Ko } from "./components/radio/radio.component.js";
-import { SkfSegmentedButtonItem as Uo } from "./components/segmented-button/segmented-button-item.component.js";
-import { SkfSegmentedButton as Xo } from "./components/segmented-button/segmented-button.component.js";
-import { SkfSelectOptionGroup as Zo } from "./components/select/select-option-group.component.js";
-import { SkfSelectOption as $o } from "./components/select/select-option.component.js";
-import { SkfSelect as rr } from "./components/select/select.component.js";
-import { SkfStepperItem as pr } from "./components/stepper/stepper-item.component.js";
-import { SkfStepper as fr } from "./components/stepper/stepper.component.js";
-import { SkfSwitch as ir } from "./components/switch/switch.component.js";
-import { SkfTabGroup as kr } from "./components/tab-group/tab-group.component.js";
-import { SkfTabPanel as ar } from "./components/tab-panel/tab-panel.component.js";
-import { SkfTab as cr } from "./components/tab/tab.component.js";
-import { SkfTag as dr } from "./components/tag/tag.component.js";
-import { SkfTextArea as Tr } from "./components/textarea/textarea.component.js";
-import { SkfToastItem as br } from "./components/toast/toast-item.component.js";
-import { SkfToastWrapper as lr } from "./components/toast/toast-wrapper.component.js";
-import { SkfToast as Dr } from "./components/toast/toast.component.js";
-import { SkfTooltip as vr } from "./components/tooltip/tooltip.component.js";
+import { SkfAccordionItem as U } from "./components/accordion/accordion-item.component.js";
+import { SkfAccordion as X } from "./components/accordion/accordion.component.js";
+import { SkfAlert as Z } from "./components/alert/alert.component.js";
+import { SkfBreadcrumbItem as $ } from "./components/breadcrumb/breadcrumb-item.component.js";
+import { SkfBreadcrumb as ro } from "./components/breadcrumb/breadcrumb.component.js";
+import { SkfButton as po } from "./components/button/button.component.js";
+import { SkfCard as eo } from "./components/card/card.component.js";
+import { SkfCheckbox as io } from "./components/checkbox/checkbox.component.js";
+import { SkfDatepickerCalendar as ko } from "./components/datepicker/datepicker-calendar.component.js";
+import { SkfDatepickerPopup as ao } from "./components/datepicker/datepicker-popup.component.js";
+import { SkfDatepicker as co } from "./components/datepicker/datepicker.component.js";
+import { SkfDialog as Io } from "./components/dialog/dialog.component.js";
+import { SkfDivider as lo } from "./components/divider/divider.component.js";
+import { SkfDrawer as bo } from "./components/drawer/drawer.component.js";
+import { SkfHeader as Do } from "./components/header/header.component.js";
+import { SkfHeading as vo } from "./components/heading/heading.component.js";
+import { SkfIcon as Po } from "./components/icon/icon.component.js";
+import { SkfInput as Lo } from "./components/input/input.component.js";
+import { SkfLink as wo } from "./components/link/link.component.js";
+import { SkfLoader as Mo } from "./components/loader/loader.component.js";
+import { SkfLogo as Oo } from "./components/logo/logo.component.js";
+import { SkfMenuItem as Ro } from "./components/menu/menu-item.component.js";
+import { SkfMenu as jo } from "./components/menu/menu.component.js";
+import { SkfNavItem as yo } from "./components/nav/nav-item.component.js";
+import { SkfNav as Eo } from "./components/nav/nav.component.js";
+import { SkfPopover as Jo } from "./components/popover/popover.component.js";
+import { SkfProgress as Qo } from "./components/progress/progress.component.js";
+import { SkfRadio as Vo } from "./components/radio/radio.component.js";
+import { SkfSegmentedButtonItem as Yo } from "./components/segmented-button/segmented-button-item.component.js";
+import { SkfSegmentedButton as _o } from "./components/segmented-button/segmented-button.component.js";
+import { SkfSelectOptionGroup as or } from "./components/select/select-option-group.component.js";
+import { SkfSelectOption as tr } from "./components/select/select-option.component.js";
+import { SkfSelect as mr } from "./components/select/select.component.js";
+import { SkfStepperItem as fr } from "./components/stepper/stepper-item.component.js";
+import { SkfStepper as Sr } from "./components/stepper/stepper.component.js";
+import { SkfSwitch as xr } from "./components/switch/switch.component.js";
+import { SkfTabPanel as nr } from "./components/tabs/tab-panel.component.js";
+import { SkfTab as dr } from "./components/tabs/tab.component.js";
+import { SkfTabs as Ir } from "./components/tabs/tabs.component.js";
+import { SkfTag as lr } from "./components/tag/tag.component.js";
+import { SkfTextArea as br } from "./components/textarea/textarea.component.js";
+import { SkfToastItem as Dr } from "./components/toast/toast-item.component.js";
+import { SkfToastWrapper as vr } from "./components/toast/toast-wrapper.component.js";
+import { SkfToast as Pr } from "./components/toast/toast.component.js";
+import { SkfTooltip as Lr } from "./components/tooltip/tooltip.component.js";
 export {
-  V as SkfAccordion,
-  Q as SkfAccordionItem,
-  Y as SkfAlert,
-  oo as SkfBreadcrumb,
-  _ as SkfBreadcrumbItem,
-  to as SkfButton,
-  mo as SkfCard,
-  eo as SkfCheckbox,
-  xo as SkfDatePicker,
-  So as SkfDatePickerInput,
-  no as SkfDialog,
-  uo as SkfDivider,
-  To as SkfDrawer,
-  bo as SkfHeader,
-  lo as SkfHeading,
-  Do as SkfIcon,
-  vo as SkfInput,
-  Go as SkfLink,
-  Lo as SkfLoader,
-  wo as SkfLogo,
-  No as SkfMenu,
-  Ho as SkfMenuItem,
-  qo as SkfNav,
-  Wo as SkfNavItem,
-  $o as SkfOption,
-  Zo as SkfOptionGroup,
-  zo as SkfPopover,
-  Fo as SkfProgress,
-  Ko as SkfRadio,
-  Xo as SkfSegmentedButton,
-  Uo as SkfSegmentedButtonItem,
-  rr as SkfSelect,
-  fr as SkfStepper,
-  pr as SkfStepperItem,
-  ir as SkfSwitch,
-  cr as SkfTab,
-  kr as SkfTabGoup,
-  ar as SkfTabPanel,
-  dr as SkfTag,
-  Tr as SkfTextArea,
-  Dr as SkfToast,
-  br as SkfToastItem,
-  lr as SkfToastWrapper,
-  vr as SkfTooltip
+  X as SkfAccordion,
+  U as SkfAccordionItem,
+  Z as SkfAlert,
+  ro as SkfBreadcrumb,
+  $ as SkfBreadcrumbItem,
+  po as SkfButton,
+  eo as SkfCard,
+  io as SkfCheckbox,
+  co as SkfDatepicker,
+  ko as SkfDatepickerCalendar,
+  ao as SkfDatepickerPopup,
+  Io as SkfDialog,
+  lo as SkfDivider,
+  bo as SkfDrawer,
+  Do as SkfHeader,
+  vo as SkfHeading,
+  Po as SkfIcon,
+  Lo as SkfInput,
+  wo as SkfLink,
+  Mo as SkfLoader,
+  Oo as SkfLogo,
+  jo as SkfMenu,
+  Ro as SkfMenuItem,
+  Eo as SkfNav,
+  yo as SkfNavItem,
+  Jo as SkfPopover,
+  Qo as SkfProgress,
+  Vo as SkfRadio,
+  _o as SkfSegmentedButton,
+  Yo as SkfSegmentedButtonItem,
+  mr as SkfSelect,
+  tr as SkfSelectOption,
+  or as SkfSelectOptionGroup,
+  Sr as SkfStepper,
+  fr as SkfStepperItem,
+  xr as SkfSwitch,
+  dr as SkfTab,
+  nr as SkfTabPanel,
+  Ir as SkfTabs,
+  lr as SkfTag,
+  br as SkfTextArea,
+  Pr as SkfToast,
+  Dr as SkfToastItem,
+  vr as SkfToastWrapper,
+  Lr as SkfTooltip
 };

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -2,36 +2,55 @@ import { type Placement } from '@floating-ui/dom';
 import { SkfElement } from '../../components/skf-element.js';
 import { PopoverController } from '../../controllers/popover.controller.js';
 import { type CSSResultGroup } from 'lit';
+/**
+ * @description - Base class for popover components.
+ * This class provides common functionality for popovers, such as handling open/close states, positioning, and event management.
+ * It should be extended by specific popover components like `SkfPopover`, `SkfTooltip`, etc.
+ *
+ * @event {CustomEvent} skf-opened - Fired when the popover is opened
+ * @event {CustomEvent} skf-closed - Fired when the popover is closed
+ *
+ * @slot - The popover content
+ */
 export declare class SkfPopoverBase extends SkfElement {
     static styles: CSSResultGroup;
     static classMap: {};
+    /** @internal - The popover element, aka `this` */
     $popover: this;
+    /** Where the popover is positioned relative to the anchor element if it fits */
     placement: Placement;
+    /** The variant of the popover extending this base class */
     variant: 'menu' | 'popup' | 'tooltip';
+    /** The id of the element the popover will be anchored to */
     anchor?: string;
+    /** Whether the popover is currently open */
     isOpen: boolean;
+    /** @internal - Gap between popover and anchor */
     offset: number;
+    /** @internal - Element that triggered the popover */
     $anchor?: Element | HTMLElement | null;
+    /** If true, displays an arrow on the popover */
     arrow: boolean;
-    /** @internal */
+    /** @internal - the event that triggers the popover */
     triggerEvent: 'mouseenter' | 'click';
+    /** @internal - Reference to the arrow element */
     $arrow: HTMLElement;
     protected abortEventsController: AbortController;
     protected signal: AbortSignal;
     protected popoverController: PopoverController;
-    constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected _toggleOpen: (newValue?: boolean) => void;
     private _handleToggle;
     handleToggleOpen: () => Promise<void>;
-    handleAnchorEl(): void;
+    handleAnchorEl(): Promise<void>;
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
-    open(e: Event): void;
+    open: (e: Event) => void;
     /** @internal add additional open tasks here in UI component */
     openExtended(): void;
-    close(): void;
+    close: () => void;
     /** @internal add additional close tasks here in UI component */
     closeExtended(): void;
     /** @internal eventlisteners here should implement abort signal */

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,21 +1,21 @@
-import { flip as O, offset as x, arrow as A, computePosition as C } from "@floating-ui/dom";
-import { SkfElement as S } from "../../components/skf-element.js";
-import { PopoverController as P } from "../../controllers/popover.controller.js";
-import { uuid as _ } from "../../helpers/uuid.js";
+import { flip as w, offset as E, arrow as $, computePosition as O } from "@floating-ui/dom";
+import { SkfElement as C } from "../../components/skf-element.js";
+import { PopoverController as x } from "../../controllers/popover.controller.js";
+import { uuid as A } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
-import { componentStyles as L } from "../../../styles/component.styles.js";
-import { nothing as F, html as y } from "lit";
-import { property as u, state as c, query as T } from "lit/decorators.js";
-import { classMap as j } from "lit/directives/class-map.js";
-import { styles as k } from "./popover.styles.js";
-var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
-  for (var e = i > 1 ? void 0 : i ? R(t, o) : t, n = m.length - 1, a; n >= 0; n--)
+import { componentStyles as S } from "../../../styles/component.styles.js";
+import { nothing as P, html as g } from "lit";
+import { property as u, state as c, query as _ } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { styles as F } from "./popover.styles.js";
+var k = Object.defineProperty, T = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? T(t, o) : t, n = m.length - 1, a; n >= 0; n--)
     (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
-  return i && e && M(t, o, e), e;
+  return i && e && k(t, o, e), e;
 }, p;
-const s = (p = class extends S {
+const s = (p = class extends C {
   constructor() {
-    super(), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
+    super(...arguments), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new x(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
       const o = t.newState === "open";
@@ -28,11 +28,10 @@ const s = (p = class extends S {
       const t = this.getRootNode();
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
-      var n, a, h;
       if (!this.$anchor) return;
-      const t = [O(), x(this.offset)];
-      this.arrow && t.push(A({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await C(this.$anchor, this.$popover, {
+      const t = [w(), E(this.offset)];
+      this.arrow && t.push($({ element: this.$arrow }));
+      const { x: o, y: i, middlewareData: e } = await O(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
@@ -41,27 +40,36 @@ const s = (p = class extends S {
         left: `${String(o)}px`,
         top: `${String(i)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", v = (n = e.flip) == null ? void 0 : n.index, g = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, w = typeof g == "number" ? `${String(g)}px` : "", $ = typeof b == "number" ? `${String(b)}px` : "", E = {
+        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", h = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", y = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: $,
-          [this.placement.includes("left") ? "right" : "left"]: w,
-          [v ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(E[l] + (v ? 180 : 0)).toString()}deg`
+          top: b,
+          [this.placement.includes("left") ? "right" : "left"]: v,
+          [h ? n : a]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(y[a] + (h ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
-    }, this.setAttribute("popover", "");
+    }, this.open = (t) => {
+      t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.openExtended();
+    }, this.close = () => {
+      this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("popover", ""), this.addEventListener("toggle", (t) => {
+      this._handleToggle(t);
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortEventsController.abort();
   }
-  handleAnchorEl() {
+  async handleAnchorEl() {
     if (!this.$anchor) return;
     const t = this._containsFocusableElement(this);
     this.$anchor.addEventListener(
@@ -78,17 +86,11 @@ const s = (p = class extends S {
         t && i || this.close();
       },
       { signal: this.signal }
-    ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog", this.setAttribute("aria-modal", "false")), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open.bind(this), { signal: this.signal });
-  }
-  open(t) {
-    t.stopPropagation(), this._toggleOpen(!0), document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
+    ), this.$popover.id = await A(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
   }
   /** @internal add additional open tasks here in UI component */
   openExtended() {
   }
-  close() {
-    this.closeExtended(), this._toggleOpen(!1), document.removeEventListener("keydown", this.handleEscapeKey.bind(this));
-  }
   /** @internal add additional close tasks here in UI component */
   closeExtended() {
   }
@@ -101,15 +103,10 @@ const s = (p = class extends S {
     this.abortEventsController.abort();
   }
   render() {
-    var t;
-    return ["popup", "menu"].includes(this.variant) && ((t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false")), y`
-			<div
-				@toggle=${this._handleToggle}
-				class=${j({ popover: !0, ...p.classMap })}
-				id="popover"
-			>
+    return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), g`
+			<div class=${L({ popover: !0, ...p.classMap })} id="root">
 				<slot></slot>
-				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : F}
+				${this.arrow ? g`<div id="arrow"></div>` : P}
 			</div>
 		`;
   }
@@ -134,7 +131,7 @@ const s = (p = class extends S {
       return h;
     }
   }
-}, p.styles = [L, k], p.classMap = {}, p);
+}, p.styles = [S, F], p.classMap = {}, p);
 r([
   u()
 ], s.prototype, "placement", 2);
@@ -160,7 +157,7 @@ r([
   c()
 ], s.prototype, "triggerEvent", 2);
 r([
-  T("#arrow")
+  _("#arrow")
 ], s.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })
@@ -171,7 +168,7 @@ r([
 r([
   f("anchor")
 ], s.prototype, "handleAnchorChange", 2);
-let G = s;
+let U = s;
 export {
-  G as SkfPopoverBase
+  U as SkfPopoverBase
 };

package/dist/internal/base-classes/popover/popover.styles.js

@@ -1,9 +1,7 @@
 import { css as o } from "lit";
 const e = o`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			background-color: var(--skf-bg-color-neutral-1);
 			border: none;
 			border-radius: var(--skf-border-radius-sm);
 			box-shadow: var(--skf-shadow-md);
@@ -19,15 +17,16 @@ const e = o`
 			display: none;
 		}
 
-		#popover {
+		#root {
+			background-color: var(--skf-bg-color-neutral-1);
 			height: 100%;
 			width: 100%;
 		}
 
-		.popover__arrow {
+		#arrow {
 			--_skf-popover-arrow-size: calc(6px * 0.7071);
 
-			background-color: var(--skf-bg-color-neutral-1);
+			background-color: inherit;
 			block-size: calc(var(--_skf-popover-arrow-size) * 2);
 			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
 			inline-size: calc(var(--_skf-popover-arrow-size) * 2);

package/dist/internal/components/formBase.d.ts

@@ -37,6 +37,7 @@ export declare class FormBase extends SkfElement {
     /** If true, sets disabled state */
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    /** If true, sets disabled state */
     set required(isRequired: boolean);
     get required(): boolean;
     set nativeValidation(nativeValidation: boolean);

package/dist/internal/components/formBase.js

@@ -1,9 +1,9 @@
 import { LitElement as c } from "lit";
-import { property as d } from "lit/decorators.js";
+import { property as l } from "lit/decorators.js";
 import { SkfElement as u } from "./skf-element.js";
-var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, h = (l, t, e, r) => {
-  for (var i = _(t, e), n = l.length - 1, o; n >= 0; n--)
-    (o = l[n]) && (i = o(t, e, i) || i);
+var p = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (d, t, e, r) => {
+  for (var i = _(t, e), n = d.length - 1, h; n >= 0; n--)
+    (h = d[n]) && (i = h(t, e, i) || i);
   return i && p(t, e, i), i;
 };
 const a = class a extends u {
@@ -18,17 +18,6 @@ const a = class a extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), this._internals.form && this._internals.form.removeEventListener("reset", this._dispatchResetEvent);
   }
-  // @property()
-  // set autocomplete(value: string) {
-  // 	if (value) {
-  // 		this.autocomplete = value;
-  // 		this._internals.ariaAutoComplete = value;
-  // 	}
-  // }
-  // get autocomplete() {
-  // 	return this.autocomplete;
-  // }
-  /** If true, sets disabled state */
   set disabled(t) {
     this._disabled = t, this._internals.ariaDisabled = String(t);
   }
@@ -96,11 +85,14 @@ const a = class a extends u {
 };
 a.formAssociated = !0, a.shadowRootOptions = { ...c.shadowRootOptions, delegatesFocus: !0 };
 let s = a;
-h([
-  d({ type: Boolean })
+o([
+  l({ type: Boolean })
+], s.prototype, "disabled");
+o([
+  l({ type: Boolean })
 ], s.prototype, "required");
-h([
-  d({ type: Boolean, attribute: "native-validation" })
+o([
+  l({ type: Boolean, attribute: "native-validation" })
 ], s.prototype, "nativeValidation");
 export {
   s as FormBase

package/dist/internal/components/hint/hint.component.d.ts

@@ -3,7 +3,11 @@ import { SkfElement } from '../../components/skf-element.js';
 import type { Severity } from '../../types.js';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    disabled: boolean;
     severity?: Severity;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }