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

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-export { default as SkfAccordion, SkfAccordionItem } from './components/accordion/accordion.js';
+export { default as SkfAccordionItem } from './components/accordion/accordion-item.js';
+export { default as SkfAccordion } from './components/accordion/accordion.js';
 export { default as SkfAlert } from './components/alert/alert.js';
+export { default as SkfBreadcrumbItem } from './components/breadcrumb/breadcrumb-item.js';
+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 SkfCollapse } from './components/collapse/collapse.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 SkfDialog } from './components/dialog/dialog.js';
@@ -16,17 +18,19 @@ export { default as SkfInput } from './components/input/input.js';
 export { default as SkfLink } from './components/link/link.js';
 export { default as SkfLoader } from './components/loader/loader.js';
 export { default as SkfLogo } from './components/logo/logo.js';
-export { default as SkfMenuItem } from './components/menu-item/menu-item.js';
+export { default as SkfMenuItem } from './components/menu/menu-item.js';
 export { default as SkfMenu } from './components/menu/menu.js';
-export { default as SkfNavItem } from './components/nav-item/nav-item.js';
+export { default as SkfNavItem } from './components/nav/nav-item.js';
 export { default as SkfNav } from './components/nav/nav.js';
 export { default as SkfPopover } from './components/popover/popover.js';
 export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
-export { default as SkfOptionGroup } from './components/select-option-group/select-option-group.js';
-export { default as SkfOption } from './components/select-option/select-option.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 SkfSelect } from './components/select/select.js';
-export { default as SkfStepperItem } from './components/stepper-item/stepper-item.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';
@@ -34,5 +38,7 @@ export { default as SkfTabPanel } from './components/tab-panel/tab-panel.js';
 export { default as SkfTab } from './components/tab/tab.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';
+export { default as SkfToastWrapper } from './components/toast/toast-wrapper.js';
 export { default as SkfToast } from './components/toast/toast.js';
 export { default as SkfTooltip } from './components/tooltip/tooltip.js';

package/dist/index.js

@@ -1,9 +1,11 @@
+import "./components/accordion/accordion-item.js";
 import "./components/accordion/accordion.js";
 import "./components/alert/alert.js";
+import "./components/breadcrumb/breadcrumb-item.js";
+import "./components/breadcrumb/breadcrumb.js";
 import "./components/button/button.js";
 import "./components/card/card.js";
 import "./components/checkbox/checkbox.js";
-import "./components/collapse/collapse.js";
 import "./components/date-picker-input/datepicker-input.js";
 import "./components/date-picker/datepicker.js";
 import "./components/dialog/dialog.js";
@@ -16,17 +18,19 @@ import "./components/input/input.js";
 import "./components/link/link.js";
 import "./components/loader/loader.js";
 import "./components/logo/logo.js";
-import "./components/menu-item/menu-item.js";
+import "./components/menu/menu-item.js";
 import "./components/menu/menu.js";
-import "./components/nav-item/nav-item.js";
+import "./components/nav/nav-item.js";
 import "./components/nav/nav.js";
 import "./components/popover/popover.js";
 import "./components/progress/progress.js";
 import "./components/radio/radio.js";
-import "./components/select-option-group/select-option-group.js";
-import "./components/select-option/select-option.js";
+import "./components/segmented-button/segmented-button-item.js";
+import "./components/segmented-button/segmented-button.js";
+import "./components/select/select-option-group.js";
+import "./components/select/select-option.js";
 import "./components/select/select.js";
-import "./components/stepper-item/stepper-item.js";
+import "./components/stepper/stepper-item.js";
 import "./components/stepper/stepper.js";
 import "./components/switch/switch.js";
 import "./components/tab-group/tab-group.js";
@@ -34,85 +38,97 @@ import "./components/tab-panel/tab-panel.js";
 import "./components/tab/tab.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 { SkfAccordion as z } from "./components/accordion/accordion.component.js";
-import { SkfAlert as F } from "./components/alert/alert.component.js";
-import { SkfButton as K } from "./components/button/button.component.js";
-import { SkfCard as U } from "./components/card/card.component.js";
-import { SkfCheckbox as W } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as Y } from "./components/collapse/collapse.component.js";
-import { SkfDatePickerInput as _ } from "./components/date-picker-input/datepicker-input.component.js";
-import { SkfDatePicker as oo } from "./components/date-picker/datepicker.component.js";
-import { SkfDialog as to } from "./components/dialog/dialog.component.js";
-import { SkfDivider as fo } from "./components/divider/divider.component.js";
-import { SkfDrawer as eo } from "./components/drawer/drawer.component.js";
-import { SkfHeader as So } from "./components/header/header.component.js";
-import { SkfHeading as xo } from "./components/heading/heading.component.js";
-import { SkfIcon as no } from "./components/icon/icon.component.js";
-import { SkfInput as lo } from "./components/input/input.component.js";
-import { SkfLink as To } from "./components/link/link.component.js";
-import { SkfLoader as Io } from "./components/loader/loader.component.js";
-import { SkfLogo as go } from "./components/logo/logo.component.js";
-import { SkfMenuItem as Po } from "./components/menu-item/menu-item.component.js";
-import { SkfMenu as Ao } from "./components/menu/menu.component.js";
-import { SkfNavItem as Oo } from "./components/nav-item/nav-item.component.js";
-import { SkfNav as Lo } from "./components/nav/nav.component.js";
-import { SkfPopover as wo } from "./components/popover/popover.component.js";
-import { SkfProgress as Mo } from "./components/progress/progress.component.js";
-import { SkfRadio as Bo } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as jo } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as yo } from "./components/select-option/select-option.component.js";
-import { SkfSelect as Eo } from "./components/select/select.component.js";
-import { SkfStepperItem as Jo } from "./components/stepper-item/stepper-item.component.js";
-import { SkfStepper as Qo } from "./components/stepper/stepper.component.js";
-import { SkfSwitch as Vo } from "./components/switch/switch.component.js";
-import { SkfTabGroup as Xo } from "./components/tab-group/tab-group.component.js";
-import { SkfTabPanel as Zo } from "./components/tab-panel/tab-panel.component.js";
-import { SkfTab as $o } from "./components/tab/tab.component.js";
-import { SkfTag as rr } from "./components/tag/tag.component.js";
-import { SkfTextArea as pr } from "./components/textarea/textarea.component.js";
-import { SkfToast as mr } from "./components/toast/toast.component.js";
-import { SkfTooltip as ir } from "./components/tooltip/tooltip.component.js";
-import { SkfAccordionItem as kr } from "./components/accordion/accordion-item.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";
 export {
-  z as SkfAccordion,
-  kr as SkfAccordionItem,
-  F as SkfAlert,
-  K as SkfButton,
-  U as SkfCard,
-  W as SkfCheckbox,
-  Y as SkfCollapse,
-  oo as SkfDatePicker,
-  _ as SkfDatePickerInput,
-  to as SkfDialog,
-  fo as SkfDivider,
-  eo as SkfDrawer,
-  So as SkfHeader,
-  xo as SkfHeading,
-  no as SkfIcon,
-  lo as SkfInput,
-  To as SkfLink,
-  Io as SkfLoader,
-  go as SkfLogo,
-  Ao as SkfMenu,
-  Po as SkfMenuItem,
-  Lo as SkfNav,
-  Oo as SkfNavItem,
-  yo as SkfOption,
-  jo as SkfOptionGroup,
-  wo as SkfPopover,
-  Mo as SkfProgress,
-  Bo as SkfRadio,
-  Eo as SkfSelect,
-  Qo as SkfStepper,
-  Jo as SkfStepperItem,
-  Vo as SkfSwitch,
-  $o as SkfTab,
-  Xo as SkfTabGoup,
-  Zo as SkfTabPanel,
-  rr as SkfTag,
-  pr as SkfTextArea,
-  mr as SkfToast,
-  ir as SkfTooltip
+  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
 };

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

@@ -7,7 +7,7 @@ export declare class SkfPopoverBase extends SkfElement {
     static classMap: {};
     $popover: this;
     placement: Placement;
-    variant: 'dropdown' | 'popup' | 'tooltip';
+    variant: 'menu' | 'popup' | 'tooltip';
     anchor?: string;
     isOpen: boolean;
     offset: number;
@@ -27,12 +27,17 @@ export declare class SkfPopoverBase extends SkfElement {
     handleAnchorEl(): void;
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
-    open: (e: Event) => void;
-    close: () => void;
-    /** @internal */
+    handleEscapeKey: (e: KeyboardEvent) => void;
+    open(e: Event): void;
+    /** @internal add additional open tasks here in UI component */
+    openExtended(): void;
+    close(): void;
+    /** @internal add additional close tasks here in UI component */
+    closeExtended(): void;
+    /** @internal eventlisteners here should implement abort signal */
     addEventListeners($element: HTMLElement | Element): void;
     /** @internal */
-    removeEventListeners($element: HTMLElement | Element): void;
+    removeEventListeners(): void;
     render(): import("lit").TemplateResult<1>;
     /** @internal helper */
     private _containsFocusableElement;

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

@@ -1,63 +1,61 @@
-import { flip as C, offset as S, arrow as x, computePosition as A } from "@floating-ui/dom";
-import { SkfElement as _ } from "../../components/skf-element.js";
+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 w } from "../../helpers/uuid.js";
+import { uuid as _ } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
-import L from "../../../styles/component.styles.js";
-import { nothing as F, html as b } from "lit";
-import { property as m, state as c, query as M } from "lit/decorators.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 T } from "./popover.styles.js";
-var R = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (u, t, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? q(t, s) : t, n = u.length - 1, a; n >= 0; n--)
-    (a = u[n]) && (e = (i ? a(t, s, e) : a(e)) || e);
-  return i && e && R(t, s, e), e;
-}, l;
-const o = (l = class extends _ {
+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--)
+    (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
+  return i && e && M(t, o, e), e;
+}, p;
+const s = (p = class extends S {
   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) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
-      const s = t.newState === "open";
-      this.isOpen = s, this.emit(s ? "skf-opened" : "skf-closed");
+      const o = t.newState === "open";
+      this.isOpen = o, this.emit(o ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
       this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
       if (!this.anchor) return;
-      await this.popoverController.stop(), this.$anchor && this.removeEventListeners(this.$anchor);
+      await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
       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 = [C(), S(this.offset)];
-      this.arrow && t.push(x({ element: this.$arrow }));
-      const { x: s, y: i, middlewareData: e } = await A(this.$anchor, this.$popover, {
+      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, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
       });
       if (Object.assign(this.$popover.style, {
-        left: `${String(s)}px`,
+        left: `${String(o)}px`,
         top: `${String(i)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], p = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", g = (n = e.flip) == null ? void 0 : n.index, v = (a = e.arrow) == null ? void 0 : a.x, $ = (h = e.arrow) == null ? void 0 : h.y, y = typeof v == "number" ? `${String(v)}px` : "", E = typeof $ == "number" ? `${String($)}px` : "", O = {
+        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 = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: E,
-          [this.placement.includes("left") ? "right" : "left"]: y,
-          [g ? d : p]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(O[p] + (g ? 180 : 0)).toString()}deg`
+          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`
         });
       }
-    }, this.open = (t) => {
-      t.stopPropagation(), this._toggleOpen(!0);
-    }, this.close = () => {
-      this._toggleOpen(!1);
+    }, this.handleEscapeKey = (t) => {
+      t.key === "Escape" && this.close();
     }, this.setAttribute("popover", "");
   }
   disconnectedCallback() {
@@ -68,31 +66,50 @@ const o = (l = class extends _ {
     const t = this._containsFocusableElement(this);
     this.$anchor.addEventListener(
       "focusout",
-      (s) => {
-        const i = this.contains(s.relatedTarget);
+      (o) => {
+        const i = this.contains(o.relatedTarget);
         t && i || this.close();
       },
       { signal: this.signal }
-    ), this.addEventListener("focusout", this.close), this.$anchor.addEventListener("focusin", this.open, { signal: this.signal }), this.$anchor.setAttribute("aria-controls", w(this.$anchor.id)), this.$anchor.setAttribute("aria-has-popup", "true"), this.$popover.id = w(this.$anchor.id);
+    ), this.addEventListener(
+      "focusout",
+      (o) => {
+        const i = this.contains(o.relatedTarget);
+        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 });
   }
-  /** @internal */
+  open(t) {
+    t.stopPropagation(), this._toggleOpen(!0), document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
+  }
+  /** @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() {
+  }
+  /** @internal eventlisteners here should implement abort signal */
   addEventListeners(t) {
     throw new Error(`Cannot add eventListeners for ${t.id}. Method not implemented.`);
   }
   /** @internal */
-  removeEventListeners(t) {
-    throw new Error(`Cannot remove eventListeners for ${t.id}. Method not implemented.`);
+  removeEventListeners() {
+    this.abortEventsController.abort();
   }
   render() {
     var t;
-    return (t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), b`
+    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, ...l.classMap })}
+				class=${j({ popover: !0, ...p.classMap })}
 				id="popover"
 			>
 				<slot></slot>
-				${this.arrow ? b`<div class="popover__arrow" id="arrow"></div>` : F}
+				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : F}
 			</div>
 		`;
   }
@@ -109,52 +126,52 @@ const o = (l = class extends _ {
     function e(n, a) {
       const h = Array.from(
         n.querySelectorAll(a.join(", "))
-      ), d = Array.from(n.querySelectorAll("*")).map((p) => p.shadowRoot).filter((p) => p !== null);
-      for (const p of d)
+      ), d = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
+      for (const l of d)
         h.push(
-          ...e(p, a)
+          ...e(l, a)
         );
       return h;
     }
   }
-}, l.styles = [L, T], l.classMap = {}, l);
+}, p.styles = [L, k], p.classMap = {}, p);
 r([
-  m()
-], o.prototype, "placement", 2);
+  u()
+], s.prototype, "placement", 2);
 r([
-  m()
-], o.prototype, "variant", 2);
+  u()
+], s.prototype, "variant", 2);
 r([
-  m()
-], o.prototype, "anchor", 2);
+  u()
+], s.prototype, "anchor", 2);
 r([
   c()
-], o.prototype, "isOpen", 2);
+], s.prototype, "isOpen", 2);
 r([
   c()
-], o.prototype, "offset", 2);
+], s.prototype, "offset", 2);
 r([
   c()
-], o.prototype, "$anchor", 2);
+], s.prototype, "$anchor", 2);
 r([
   c()
-], o.prototype, "arrow", 2);
+], s.prototype, "arrow", 2);
 r([
   c()
-], o.prototype, "triggerEvent", 2);
+], s.prototype, "triggerEvent", 2);
 r([
-  M("#arrow")
-], o.prototype, "$arrow", 2);
+  T("#arrow")
+], s.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })
-], o.prototype, "handleToggleOpen", 2);
+], s.prototype, "handleToggleOpen", 2);
 r([
   f("$anchor")
-], o.prototype, "handleAnchorEl", 1);
+], s.prototype, "handleAnchorEl", 1);
 r([
   f("anchor")
-], o.prototype, "handleAnchorChange", 2);
-let H = o;
+], s.prototype, "handleAnchorChange", 2);
+let G = s;
 export {
-  H as SkfPopoverBase
+  G as SkfPopoverBase
 };

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

@@ -1,9 +1,9 @@
 import '../../../components/icon/icon.js';
 import { SkfElement } from '../../components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Severity } from '../../types.js';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {
     static styles: CSSResultGroup;
-    severity?: SeverityFgColor;
+    severity?: Severity;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/internal/components/hint/hint.component.js

@@ -1,10 +1,10 @@
 import "../../../components/icon/icon.js";
 import { SkfElement as l } from "../skf-element.js";
 import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
-import v from "../../../styles/component.styles.js";
+import { componentStyles as v } from "../../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as y } from "lit/decorators.js";
-import d from "./hint.styles.js";
+import { styles as d } from "./hint.styles.js";
 var a = Object.defineProperty, c = (s, i, m, h) => {
   for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
     (p = s[t]) && (r = p(i, m, r) || r);

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

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

package/dist/internal/components/hint/hint.styles.js

@@ -34,5 +34,5 @@ const s = r`
 	}
 `;
 export {
-  s as default
+  s as styles
 };

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

@@ -1,4 +1,5 @@
-import type { Icon, SeverityFgColor } from '@skf-design-system/ui-assets';
-type IconSeverity = Readonly<Record<SeverityFgColor, Icon>>;
+import type { Severity } from '../types.js';
+import type { Icon } from '@skf-design-system/ui-assets';
+type IconSeverity = Readonly<Record<Severity, Icon>>;
 export declare const ICON_SEVERITY: IconSeverity;
 export {};

package/dist/internal/constants/iconSeverity.js

@@ -1,10 +1,9 @@
-const n = Object.freeze({
-  alert: "warningDiamond",
+const n = {
   error: "danger",
   info: "info",
   success: "checkCircle",
   warning: "warningDiamond"
-});
+};
 export {
   n as ICON_SEVERITY
 };

package/dist/internal/helpers/hintSeverity.d.ts

@@ -1,2 +1,2 @@
-import type { FormFieldBaseProps } from '../types/formField.js';
-export declare function hintSeverity(hostSeverity: FormFieldBaseProps['severity'], invalid: boolean): "error" | ("success" | "info" | "warning" | "alert") | undefined;
+import type { FormFieldSeverity } from '../types.js';
+export declare function hintSeverity(invalid: boolean, hostSeverity?: FormFieldSeverity): "error" | FormFieldSeverity | undefined;

package/dist/internal/helpers/hintSeverity.js

@@ -1,5 +1,5 @@
 function t(r, e) {
-  return e ? "error" : r;
+  return r ? "error" : e;
 }
 export {
   t as hintSeverity

package/dist/internal/types/formField.d.ts

@@ -1,6 +1,6 @@
 import type { SeverityFgColor } from '@skf-design-system/ui-assets';
 type HTMLInputTypeAttribute = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-type FormFieldSeverity = Exclude<SeverityFgColor, 'error'>;
+export type FormFieldSeverity = Exclude<SeverityFgColor, 'alert' | 'error'>;
 export interface FormFieldBaseProps {
     customInvalid?: unknown;
     disabled?: boolean;