@latty-ds/react 0.10.4 → 1.0.0

package/dist/index.js

@@ -10,7 +10,7 @@ var Accordion = forwardRef(function Accordion2({ onToggle, children, ...props },
   useEffect(() => {
     const el = innerRef.current;
     if (!el || !onToggle) return;
-    const h = (ev) => onToggle(ev.detail);
+    const h = (ev) => onToggle(ev);
     el.addEventListener("toggle", h);
     return () => el.removeEventListener("toggle", h);
   }, [onToggle]);
@@ -19,18 +19,23 @@ var Accordion = forwardRef(function Accordion2({ onToggle, children, ...props },
 Accordion.displayName = "Accordion";
 
 // src/components/Alert/Alert.tsx
-import { useRef as useRef2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
+import { useRef as useRef2, useLayoutEffect, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Alert = forwardRef2(function Alert2({ onClose, children, ...props }, forwardedRef) {
+var Alert = forwardRef2(function Alert2({ onClose, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef2(null);
   useImperativeHandle2(forwardedRef, () => innerRef.current);
   useEffect2(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
-    const h = () => onClose();
+    const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
+  useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx2("lt-alert", { ref: innerRef, ...props, children });
 });
 Alert.displayName = "Alert";
@@ -56,11 +61,16 @@ var Badge = forwardRef4(function Badge2({ children, ...props }, forwardedRef) {
 Badge.displayName = "Badge";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { useRef as useRef5, useImperativeHandle as useImperativeHandle5, forwardRef as forwardRef5 } from "react";
+import { useRef as useRef5, useLayoutEffect as useLayoutEffect2, useImperativeHandle as useImperativeHandle5, forwardRef as forwardRef5 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Breadcrumb = forwardRef5(function Breadcrumb2({ children, ...props }, forwardedRef) {
+var Breadcrumb = forwardRef5(function Breadcrumb2({ labels, children, ...props }, forwardedRef) {
   const innerRef = useRef5(null);
   useImperativeHandle5(forwardedRef, () => innerRef.current);
+  useLayoutEffect2(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx5("lt-breadcrumb", { ref: innerRef, ...props, children });
 });
 Breadcrumb.displayName = "Breadcrumb";
@@ -86,110 +96,145 @@ var Button = forwardRef7(function Button2({ children, ...props }, forwardedRef)
 Button.displayName = "Button";
 
 // src/components/Calendar/Calendar.tsx
-import { useRef as useRef8, useEffect as useEffect3, useImperativeHandle as useImperativeHandle8, forwardRef as forwardRef8 } from "react";
+import { useRef as useRef8, useLayoutEffect as useLayoutEffect3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle8, forwardRef as forwardRef8 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var Calendar = forwardRef8(function Calendar2({ onChange, onMonthChange, children, ...props }, forwardedRef) {
+var Calendar = forwardRef8(function Calendar2({ onChange, onMonthChange, weekStart, disabledDates, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef8(null);
   useImperativeHandle8(forwardedRef, () => innerRef.current);
   useEffect3(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
   useEffect3(() => {
     const el = innerRef.current;
     if (!el || !onMonthChange) return;
-    const h = (ev) => onMonthChange(ev.detail);
-    el.addEventListener("month-change", h);
-    return () => el.removeEventListener("month-change", h);
+    const h = (ev) => onMonthChange(ev);
+    el.addEventListener("monthchange", h);
+    return () => el.removeEventListener("monthchange", h);
   }, [onMonthChange]);
+  useLayoutEffect3(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (weekStart !== void 0) el.weekStart = weekStart;
+    if (disabledDates !== void 0) el.disabledDates = disabledDates;
+    if (labels !== void 0) el.labels = labels;
+  }, [weekStart, disabledDates, labels]);
   return /* @__PURE__ */ jsx8("lt-calendar", { ref: innerRef, ...props, children });
 });
 Calendar.displayName = "Calendar";
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef9, useEffect as useEffect4, useImperativeHandle as useImperativeHandle9, forwardRef as forwardRef9 } from "react";
+import { useRef as useRef9, useLayoutEffect as useLayoutEffect4, useEffect as useEffect4, useImperativeHandle as useImperativeHandle9, forwardRef as forwardRef9 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Checkbox = forwardRef9(function Checkbox2({ onChange, children, ...props }, forwardedRef) {
+var Checkbox = forwardRef9(function Checkbox2({ onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef9(null);
   useImperativeHandle9(forwardedRef, () => innerRef.current);
   useEffect4(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect4(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx9("lt-checkbox", { ref: innerRef, ...props, children });
 });
 Checkbox.displayName = "Checkbox";
 
 // src/components/Chip/Chip.tsx
-import { useRef as useRef10, useEffect as useEffect5, useImperativeHandle as useImperativeHandle10, forwardRef as forwardRef10 } from "react";
+import { useRef as useRef10, useLayoutEffect as useLayoutEffect5, useEffect as useEffect5, useImperativeHandle as useImperativeHandle10, forwardRef as forwardRef10 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Chip = forwardRef10(function Chip2({ onDelete, children, ...props }, forwardedRef) {
+var Chip = forwardRef10(function Chip2({ onDelete, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef10(null);
   useImperativeHandle10(forwardedRef, () => innerRef.current);
   useEffect5(() => {
     const el = innerRef.current;
     if (!el || !onDelete) return;
-    const h = () => onDelete();
+    const h = (ev) => onDelete(ev);
     el.addEventListener("delete", h);
     return () => el.removeEventListener("delete", h);
   }, [onDelete]);
+  useLayoutEffect5(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx10("lt-chip", { ref: innerRef, ...props, children });
 });
 Chip.displayName = "Chip";
 
 // src/components/ColorInput/ColorInput.tsx
-import { useRef as useRef11, useEffect as useEffect6, useImperativeHandle as useImperativeHandle11, forwardRef as forwardRef11 } from "react";
+import { useRef as useRef11, useLayoutEffect as useLayoutEffect6, useEffect as useEffect6, useImperativeHandle as useImperativeHandle11, forwardRef as forwardRef11 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var ColorInput = forwardRef11(function ColorInput2({ onChange, children, ...props }, forwardedRef) {
+var ColorInput = forwardRef11(function ColorInput2({ onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef11(null);
   useImperativeHandle11(forwardedRef, () => innerRef.current);
   useEffect6(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect6(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx11("lt-color-input", { ref: innerRef, ...props, children });
 });
 ColorInput.displayName = "ColorInput";
 
 // src/components/Combobox/Combobox.tsx
-import { useRef as useRef12, useEffect as useEffect7, useImperativeHandle as useImperativeHandle12, forwardRef as forwardRef12 } from "react";
+import { useRef as useRef12, useLayoutEffect as useLayoutEffect7, useEffect as useEffect7, useImperativeHandle as useImperativeHandle12, forwardRef as forwardRef12 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Combobox = forwardRef12(function Combobox2({ onChange, children, ...props }, forwardedRef) {
+var Combobox = forwardRef12(function Combobox2({ onChange, options, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef12(null);
   useImperativeHandle12(forwardedRef, () => innerRef.current);
   useEffect7(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect7(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (options !== void 0) el.options = options;
+    if (labels !== void 0) el.labels = labels;
+  }, [options, labels]);
   return /* @__PURE__ */ jsx12("lt-combobox", { ref: innerRef, ...props, children });
 });
 Combobox.displayName = "Combobox";
 
 // src/components/DateInput/DateInput.tsx
-import { useRef as useRef13, useEffect as useEffect8, useImperativeHandle as useImperativeHandle13, forwardRef as forwardRef13 } from "react";
+import { useRef as useRef13, useLayoutEffect as useLayoutEffect8, useEffect as useEffect8, useImperativeHandle as useImperativeHandle13, forwardRef as forwardRef13 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var DateInput = forwardRef13(function DateInput2({ onChange, children, ...props }, forwardedRef) {
+var DateInput = forwardRef13(function DateInput2({ onChange, weekStart, disabledDates, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef13(null);
   useImperativeHandle13(forwardedRef, () => innerRef.current);
   useEffect8(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect8(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (weekStart !== void 0) el.weekStart = weekStart;
+    if (disabledDates !== void 0) el.disabledDates = disabledDates;
+    if (labels !== void 0) el.labels = labels;
+  }, [weekStart, disabledDates, labels]);
   return /* @__PURE__ */ jsx13("lt-date-input", { ref: innerRef, ...props, children });
 });
 DateInput.displayName = "DateInput";
@@ -203,14 +248,14 @@ var Datepicker = forwardRef14(function Datepicker2({ onChange, onInput, children
   useEffect9(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
   useEffect9(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
-    const h = (ev) => onInput(ev.detail);
+    const h = (ev) => onInput(ev);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
@@ -219,39 +264,30 @@ var Datepicker = forwardRef14(function Datepicker2({ onChange, onInput, children
 Datepicker.displayName = "Datepicker";
 
 // src/components/Dialog/Dialog.tsx
-import { useRef as useRef15, useEffect as useEffect10, useImperativeHandle as useImperativeHandle15, forwardRef as forwardRef15 } from "react";
+import { useRef as useRef15, useLayoutEffect as useLayoutEffect9, useEffect as useEffect10, useImperativeHandle as useImperativeHandle15, forwardRef as forwardRef15 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var Dialog = forwardRef15(function Dialog2({ onDialogOpen, onClose, onDialogClose, onOpen, children, ...props }, forwardedRef) {
+var Dialog = forwardRef15(function Dialog2({ onOpen, onClose, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef15(null);
   useImperativeHandle15(forwardedRef, () => innerRef.current);
   useEffect10(() => {
     const el = innerRef.current;
-    if (!el || !onDialogOpen) return;
-    const h = () => onDialogOpen();
-    el.addEventListener("dialog-open", h);
-    return () => el.removeEventListener("dialog-open", h);
-  }, [onDialogOpen]);
+    if (!el || !onOpen) return;
+    const h = (ev) => onOpen(ev);
+    el.addEventListener("open", h);
+    return () => el.removeEventListener("open", h);
+  }, [onOpen]);
   useEffect10(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
-    const h = () => onClose();
+    const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  useEffect10(() => {
-    const el = innerRef.current;
-    if (!el || !onDialogClose) return;
-    const h = () => onDialogClose();
-    el.addEventListener("dialog-close", h);
-    return () => el.removeEventListener("dialog-close", h);
-  }, [onDialogClose]);
-  useEffect10(() => {
+  useLayoutEffect9(() => {
     const el = innerRef.current;
-    if (!el || !onOpen) return;
-    const h = () => onOpen();
-    el.addEventListener("open", h);
-    return () => el.removeEventListener("open", h);
-  }, [onOpen]);
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx15("lt-dialog", { ref: innerRef, ...props, children });
 });
 Dialog.displayName = "Dialog";
@@ -275,14 +311,14 @@ var Dropdown = forwardRef17(function Dropdown2({ onOpen, onClose, children, ...p
   useEffect11(() => {
     const el = innerRef.current;
     if (!el || !onOpen) return;
-    const h = () => onOpen();
+    const h = (ev) => onOpen(ev);
     el.addEventListener("open", h);
     return () => el.removeEventListener("open", h);
   }, [onOpen]);
   useEffect11(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
-    const h = () => onClose();
+    const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
@@ -299,7 +335,7 @@ var DropdownItem = forwardRef18(function DropdownItem2({ onSelect, children, ...
   useEffect12(() => {
     const el = innerRef.current;
     if (!el || !onSelect) return;
-    const h = () => onSelect();
+    const h = (ev) => onSelect(ev);
     el.addEventListener("select", h);
     return () => el.removeEventListener("select", h);
   }, [onSelect]);
@@ -335,29 +371,22 @@ IconButton.displayName = "IconButton";
 // src/components/Image/Image.tsx
 import { useRef as useRef21, useEffect as useEffect13, useImperativeHandle as useImperativeHandle21, forwardRef as forwardRef21 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var Image = forwardRef21(function Image2({ onName, onLoad, onError, children, ...props }, forwardedRef) {
+var Image = forwardRef21(function Image2({ onLoad, onError, children, ...props }, forwardedRef) {
   const innerRef = useRef21(null);
   useImperativeHandle21(forwardedRef, () => innerRef.current);
-  useEffect13(() => {
-    const el = innerRef.current;
-    if (!el || !onName) return;
-    const h = () => onName();
-    el.addEventListener("name", h);
-    return () => el.removeEventListener("name", h);
-  }, [onName]);
   useEffect13(() => {
     const el = innerRef.current;
     if (!el || !onLoad) return;
-    const h = (ev) => onLoad(ev.detail);
-    el.addEventListener("lt-load", h);
-    return () => el.removeEventListener("lt-load", h);
+    const h = (ev) => onLoad(ev);
+    el.addEventListener("load", h);
+    return () => el.removeEventListener("load", h);
   }, [onLoad]);
   useEffect13(() => {
     const el = innerRef.current;
     if (!el || !onError) return;
-    const h = (ev) => onError(ev.detail);
-    el.addEventListener("lt-error", h);
-    return () => el.removeEventListener("lt-error", h);
+    const h = (ev) => onError(ev);
+    el.addEventListener("error", h);
+    return () => el.removeEventListener("error", h);
   }, [onError]);
   return /* @__PURE__ */ jsx21("lt-image", { ref: innerRef, ...props, children });
 });
@@ -406,23 +435,16 @@ Nav.displayName = "Nav";
 // src/components/NavItem/NavItem.tsx
 import { useRef as useRef26, useEffect as useEffect14, useImperativeHandle as useImperativeHandle26, forwardRef as forwardRef26 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var NavItem = forwardRef26(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
+var NavItem = forwardRef26(function NavItem2({ onToggle, iconStart, children, ...props }, forwardedRef) {
   const innerRef = useRef26(null);
   useImperativeHandle26(forwardedRef, () => innerRef.current);
   useEffect14(() => {
     const el = innerRef.current;
-    if (!el || !onNavItemClick) return;
-    const h = (ev) => onNavItemClick(ev);
-    el.addEventListener("nav-item-click", h);
-    return () => el.removeEventListener("nav-item-click", h);
-  }, [onNavItemClick]);
-  useEffect14(() => {
-    const el = innerRef.current;
-    if (!el || !onNavCollapse) return;
-    const h = (ev) => onNavCollapse(ev);
-    el.addEventListener("nav-collapse", h);
-    return () => el.removeEventListener("nav-collapse", h);
-  }, [onNavCollapse]);
+    if (!el || !onToggle) return;
+    const h = (ev) => onToggle(ev);
+    el.addEventListener("toggle", h);
+    return () => el.removeEventListener("toggle", h);
+  }, [onToggle]);
   useEffect14(() => {
     const el = innerRef.current;
     if (!el) return;
@@ -434,18 +456,23 @@ var NavItem = forwardRef26(function NavItem2({ onNavItemClick, onNavCollapse, ic
 NavItem.displayName = "NavItem";
 
 // src/components/Pagination/Pagination.tsx
-import { useRef as useRef27, useEffect as useEffect15, useImperativeHandle as useImperativeHandle27, forwardRef as forwardRef27 } from "react";
+import { useRef as useRef27, useLayoutEffect as useLayoutEffect10, useEffect as useEffect15, useImperativeHandle as useImperativeHandle27, forwardRef as forwardRef27 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-var Pagination = forwardRef27(function Pagination2({ onChange, children, ...props }, forwardedRef) {
+var Pagination = forwardRef27(function Pagination2({ onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef27(null);
   useImperativeHandle27(forwardedRef, () => innerRef.current);
   useEffect15(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect10(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx27("lt-pagination", { ref: innerRef, ...props, children });
 });
 Pagination.displayName = "Pagination";
@@ -461,18 +488,23 @@ var Progress = forwardRef28(function Progress2({ children, ...props }, forwarded
 Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef29, useEffect as useEffect16, useImperativeHandle as useImperativeHandle29, forwardRef as forwardRef29 } from "react";
+import { useRef as useRef29, useLayoutEffect as useLayoutEffect11, useEffect as useEffect16, useImperativeHandle as useImperativeHandle29, forwardRef as forwardRef29 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
-var Radio = forwardRef29(function Radio2({ onChange, children, ...props }, forwardedRef) {
+var Radio = forwardRef29(function Radio2({ onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef29(null);
   useImperativeHandle29(forwardedRef, () => innerRef.current);
   useEffect16(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect11(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx29("lt-radio", { ref: innerRef, ...props, children });
 });
 Radio.displayName = "Radio";
@@ -486,7 +518,7 @@ var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...prop
   useEffect17(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
@@ -495,26 +527,33 @@ var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...prop
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useRef as useRef31, useEffect as useEffect18, useImperativeHandle as useImperativeHandle31, forwardRef as forwardRef31 } from "react";
+import { useRef as useRef31, useLayoutEffect as useLayoutEffect12, useEffect as useEffect18, useImperativeHandle as useImperativeHandle31, forwardRef as forwardRef31 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
-var Select = forwardRef31(function Select2({ onChange, children, ...props }, forwardedRef) {
+var Select = forwardRef31(function Select2({ onChange, value, options, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef31(null);
   useImperativeHandle31(forwardedRef, () => innerRef.current);
   useEffect18(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect12(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (value !== void 0) el.value = value;
+    if (options !== void 0) el.options = options;
+    if (labels !== void 0) el.labels = labels;
+  }, [value, options, labels]);
   return /* @__PURE__ */ jsx31("lt-select", { ref: innerRef, ...props, children });
 });
 Select.displayName = "Select";
 
 // src/components/SidePanel/SidePanel.tsx
-import { useRef as useRef32, useEffect as useEffect19, useImperativeHandle as useImperativeHandle32, forwardRef as forwardRef32 } from "react";
+import { useRef as useRef32, useEffect as useEffect19, useLayoutEffect as useLayoutEffect13, useImperativeHandle as useImperativeHandle32, forwardRef as forwardRef32 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var SidePanel = forwardRef32(function SidePanel2({ onClose, noCloseButton, children, ...props }, forwardedRef) {
+var SidePanel = forwardRef32(function SidePanel2({ onClose, noCloseButton, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef32(null);
   useImperativeHandle32(forwardedRef, () => innerRef.current);
   useEffect19(() => {
@@ -530,6 +569,11 @@ var SidePanel = forwardRef32(function SidePanel2({ onClose, noCloseButton, child
     if (noCloseButton) el.setAttribute("no-close-button", "");
     else el.removeAttribute("no-close-button");
   }, [noCloseButton]);
+  useLayoutEffect13(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx32("lt-sidepanel", { ref: innerRef, ...props, children });
 });
 SidePanel.displayName = "SidePanel";
@@ -553,14 +597,14 @@ var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...pro
   useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
-    const h = (ev) => onInput(ev.detail);
+    const h = (ev) => onInput(ev);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
   useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
@@ -569,32 +613,37 @@ var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...pro
 Slider.displayName = "Slider";
 
 // src/components/Snackbar/Snackbar.tsx
-import { useRef as useRef35, useEffect as useEffect21, useImperativeHandle as useImperativeHandle35, forwardRef as forwardRef35 } from "react";
+import { useRef as useRef35, useLayoutEffect as useLayoutEffect14, useEffect as useEffect21, useImperativeHandle as useImperativeHandle35, forwardRef as forwardRef35 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
-var Snackbar = forwardRef35(function Snackbar2({ onShow, onHide, onAction, children, ...props }, forwardedRef) {
+var Snackbar = forwardRef35(function Snackbar2({ onShow, onHide, onAction, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef35(null);
   useImperativeHandle35(forwardedRef, () => innerRef.current);
   useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onShow) return;
-    const h = () => onShow();
+    const h = (ev) => onShow(ev);
     el.addEventListener("show", h);
     return () => el.removeEventListener("show", h);
   }, [onShow]);
   useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onHide) return;
-    const h = () => onHide();
+    const h = (ev) => onHide(ev);
     el.addEventListener("hide", h);
     return () => el.removeEventListener("hide", h);
   }, [onHide]);
   useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onAction) return;
-    const h = () => onAction();
+    const h = (ev) => onAction(ev);
     el.addEventListener("action", h);
     return () => el.removeEventListener("action", h);
   }, [onAction]);
+  useLayoutEffect14(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx35("lt-snackbar", { ref: innerRef, ...props, children });
 });
 Snackbar.displayName = "Snackbar";
@@ -620,49 +669,47 @@ var Surface = forwardRef37(function Surface2({ children, ...props }, forwardedRe
 Surface.displayName = "Surface";
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef38, useEffect as useEffect22, useImperativeHandle as useImperativeHandle38, forwardRef as forwardRef38 } from "react";
+import { useRef as useRef38, useLayoutEffect as useLayoutEffect15, useEffect as useEffect22, useImperativeHandle as useImperativeHandle38, forwardRef as forwardRef38 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-var Switch = forwardRef38(function Switch2({ onChange, children, ...props }, forwardedRef) {
+var Switch = forwardRef38(function Switch2({ onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef38(null);
   useImperativeHandle38(forwardedRef, () => innerRef.current);
   useEffect22(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect15(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx38("lt-switch", { ref: innerRef, ...props, children });
 });
 Switch.displayName = "Switch";
 
 // src/components/Tab/Tab.tsx
-import { useRef as useRef39, useEffect as useEffect23, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
+import { useRef as useRef39, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var Tab = forwardRef39(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
+var Tab = forwardRef39(function Tab2({ children, ...props }, forwardedRef) {
   const innerRef = useRef39(null);
   useImperativeHandle39(forwardedRef, () => innerRef.current);
-  useEffect23(() => {
-    const el = innerRef.current;
-    if (!el || !onTabClick) return;
-    const h = (ev) => onTabClick(ev);
-    el.addEventListener("tab-click", h);
-    return () => el.removeEventListener("tab-click", h);
-  }, [onTabClick]);
   return /* @__PURE__ */ jsx39("lt-tab", { ref: innerRef, ...props, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/TabGroup/TabGroup.tsx
-import { useRef as useRef40, useEffect as useEffect24, useImperativeHandle as useImperativeHandle40, forwardRef as forwardRef40 } from "react";
+import { useRef as useRef40, useEffect as useEffect23, useImperativeHandle as useImperativeHandle40, forwardRef as forwardRef40 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var TabGroup = forwardRef40(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef40(null);
   useImperativeHandle40(forwardedRef, () => innerRef.current);
-  useEffect24(() => {
+  useEffect23(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
@@ -671,18 +718,25 @@ var TabGroup = forwardRef40(function TabGroup2({ onChange, children, ...props },
 TabGroup.displayName = "TabGroup";
 
 // src/components/Table/Table.tsx
-import { useRef as useRef41, useEffect as useEffect25, useImperativeHandle as useImperativeHandle41, forwardRef as forwardRef41 } from "react";
+import { useRef as useRef41, useLayoutEffect as useLayoutEffect16, useEffect as useEffect24, useImperativeHandle as useImperativeHandle41, forwardRef as forwardRef41 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
-var Table = forwardRef41(function Table2({ onSortChange, children, ...props }, forwardedRef) {
+var Table = forwardRef41(function Table2({ onSortChange, columns, data, sort, children, ...props }, forwardedRef) {
   const innerRef = useRef41(null);
   useImperativeHandle41(forwardedRef, () => innerRef.current);
-  useEffect25(() => {
+  useEffect24(() => {
     const el = innerRef.current;
     if (!el || !onSortChange) return;
-    const h = () => onSortChange();
-    el.addEventListener("sort-change", h);
-    return () => el.removeEventListener("sort-change", h);
+    const h = (ev) => onSortChange(ev);
+    el.addEventListener("sortchange", h);
+    return () => el.removeEventListener("sortchange", h);
   }, [onSortChange]);
+  useLayoutEffect16(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (columns !== void 0) el.columns = columns;
+    if (data !== void 0) el.data = data;
+    if (sort !== void 0) el.sort = sort;
+  }, [columns, data, sort]);
   return /* @__PURE__ */ jsx41("lt-table", { ref: innerRef, ...props, children });
 });
 Table.displayName = "Table";
@@ -708,25 +762,30 @@ var Text = forwardRef43(function Text2({ children, ...props }, forwardedRef) {
 Text.displayName = "Text";
 
 // src/components/Textfield/Textfield.tsx
-import { useRef as useRef44, useEffect as useEffect26, useImperativeHandle as useImperativeHandle44, forwardRef as forwardRef44 } from "react";
+import { useRef as useRef44, useLayoutEffect as useLayoutEffect17, useEffect as useEffect25, useImperativeHandle as useImperativeHandle44, forwardRef as forwardRef44 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
-var Textfield = forwardRef44(function Textfield2({ onInput, onChange, children, ...props }, forwardedRef) {
+var Textfield = forwardRef44(function Textfield2({ onInput, onChange, labels, children, ...props }, forwardedRef) {
   const innerRef = useRef44(null);
   useImperativeHandle44(forwardedRef, () => innerRef.current);
-  useEffect26(() => {
+  useEffect25(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
-    const h = (ev) => onInput(ev.detail);
+    const h = (ev) => onInput(ev);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
-  useEffect26(() => {
+  useEffect25(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
-    const h = (ev) => onChange(ev.detail);
+    const h = (ev) => onChange(ev);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
+  useLayoutEffect17(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    if (labels !== void 0) el.labels = labels;
+  }, [labels]);
   return /* @__PURE__ */ jsx44("lt-textfield", { ref: innerRef, ...props, children });
 });
 Textfield.displayName = "Textfield";