@latty-ds/react 0.6.0 → 0.8.0

package/dist/components/Image/Image.d.ts

@@ -5,10 +5,26 @@ export type ImageProps = HTMLAttributes<ImageEl> & {
     alt?: string;
     rounded?: ImageEl['rounded'];
     responsive?: boolean;
+    loading?: ImageEl['loading'];
+    onName?: () => void;
+    onLoad?: (detail: {
+        src: string;
+    }) => void;
+    onError?: (detail: {
+        src: string;
+    }) => void;
 };
 export declare const Image: import("react").ForwardRefExoticComponent<HTMLAttributes<ImageEl> & {
     src?: string;
     alt?: string;
     rounded?: ImageEl["rounded"];
     responsive?: boolean;
+    loading?: ImageEl["loading"];
+    onName?: () => void;
+    onLoad?: (detail: {
+        src: string;
+    }) => void;
+    onError?: (detail: {
+        src: string;
+    }) => void;
 } & import("react").RefAttributes<ImageEl>>;

package/dist/components/ListItem/ListItem.d.ts

@@ -3,8 +3,18 @@ import type { ListItem as ListItemEl, LattyIconName } from '@latty-ds/web';
 export type ListItemProps = HTMLAttributes<ListItemEl> & {
     iconStart?: LattyIconName;
     iconEnd?: LattyIconName;
+    clickable?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
 };
 export declare const ListItem: import("react").ForwardRefExoticComponent<HTMLAttributes<ListItemEl> & {
     iconStart?: LattyIconName;
     iconEnd?: LattyIconName;
+    clickable?: boolean;
+    href?: string;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
 } & import("react").RefAttributes<ListItemEl>>;

package/dist/index.cjs

@@ -69,59 +69,59 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_web = require("@latty-ds/web");
 
-// src/components/Alert/Alert.tsx
+// src/components/Accordion/Accordion.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Alert = (0, import_react.forwardRef)(function Alert2({ onClose, children, ...props }, forwardedRef) {
+var Accordion = (0, import_react.forwardRef)(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react.useRef)(null);
   (0, import_react.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onToggle) return;
+    const h = (ev) => onToggle(ev.detail);
+    el.addEventListener("toggle", h);
+    return () => el.removeEventListener("toggle", h);
+  }, [onToggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("lt-accordion", { ref: innerRef, ...props, children });
+});
+Accordion.displayName = "Accordion";
+
+// src/components/Alert/Alert.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Alert = (0, import_react2.forwardRef)(function Alert2({ onClose, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react2.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = () => onClose();
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("lt-alert", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("lt-alert", { ref: innerRef, ...props, children });
 });
 Alert.displayName = "Alert";
 
 // src/components/Avatar/Avatar.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Avatar = (0, import_react2.forwardRef)(function Avatar2({ children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("lt-avatar", { ref: innerRef, ...props, children });
-});
-Avatar.displayName = "Avatar";
-
-// src/components/Badge/Badge.tsx
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Badge = (0, import_react3.forwardRef)(function Badge2({ children, ...props }, forwardedRef) {
+var Avatar = (0, import_react3.forwardRef)(function Avatar2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react3.useRef)(null);
   (0, import_react3.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("lt-badge", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("lt-avatar", { ref: innerRef, ...props, children });
 });
-Badge.displayName = "Badge";
+Avatar.displayName = "Avatar";
 
-// src/components/Accordion/Accordion.tsx
+// src/components/Badge/Badge.tsx
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Accordion = (0, import_react4.forwardRef)(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
+var Badge = (0, import_react4.forwardRef)(function Badge2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react4.useRef)(null);
   (0, import_react4.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react4.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onToggle) return;
-    const h = (ev) => onToggle(ev.detail);
-    el.addEventListener("toggle", h);
-    return () => el.removeEventListener("toggle", h);
-  }, [onToggle]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("lt-accordion", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("lt-badge", { ref: innerRef, ...props, children });
 });
-Accordion.displayName = "Accordion";
+Badge.displayName = "Badge";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_react5 = require("react");
@@ -334,47 +334,47 @@ var Divider = (0, import_react16.forwardRef)(function Divider2({ children, ...pr
 });
 Divider.displayName = "Divider";
 
-// src/components/DropdownItem/DropdownItem.tsx
+// src/components/Dropdown/Dropdown.tsx
 var import_react17 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var DropdownItem = (0, import_react17.forwardRef)(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+var Dropdown = (0, import_react17.forwardRef)(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react17.useRef)(null);
   (0, import_react17.useImperativeHandle)(forwardedRef, () => innerRef.current);
   (0, import_react17.useEffect)(() => {
-    const el = innerRef.current;
-    if (!el || !onSelect) return;
-    const h = () => onSelect();
-    el.addEventListener("select", h);
-    return () => el.removeEventListener("select", h);
-  }, [onSelect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("lt-dropdown-item", { ref: innerRef, ...props, children });
-});
-DropdownItem.displayName = "DropdownItem";
-
-// src/components/Dropdown/Dropdown.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Dropdown = (0, import_react18.forwardRef)(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react18.useRef)(null);
-  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react18.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onOpen) return;
     const h = () => onOpen();
     el.addEventListener("open", h);
     return () => el.removeEventListener("open", h);
   }, [onOpen]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = () => onClose();
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("lt-dropdown", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("lt-dropdown", { ref: innerRef, ...props, children });
 });
 Dropdown.displayName = "Dropdown";
 
+// src/components/DropdownItem/DropdownItem.tsx
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DropdownItem = (0, import_react18.forwardRef)(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react18.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onSelect) return;
+    const h = () => onSelect();
+    el.addEventListener("select", h);
+    return () => el.removeEventListener("select", h);
+  }, [onSelect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("lt-dropdown-item", { ref: innerRef, ...props, children });
+});
+DropdownItem.displayName = "DropdownItem";
+
 // src/components/Header/Header.tsx
 var import_react19 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -403,22 +403,43 @@ IconButton.displayName = "IconButton";
 // src/components/Image/Image.tsx
 var import_react21 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Image = (0, import_react21.forwardRef)(function Image2({ children, ...props }, forwardedRef) {
+var Image = (0, import_react21.forwardRef)(function Image2({ onName, onLoad, onError, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react21.useRef)(null);
   (0, import_react21.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react21.useEffect)(() => {
+    const el = innerRef.current;
+    if (!el || !onName) return;
+    const h = () => onName();
+    el.addEventListener("name", h);
+    return () => el.removeEventListener("name", h);
+  }, [onName]);
+  (0, import_react21.useEffect)(() => {
+    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);
+  }, [onLoad]);
+  (0, import_react21.useEffect)(() => {
+    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);
+  }, [onError]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("lt-image", { ref: innerRef, ...props, children });
 });
 Image.displayName = "Image";
 
-// src/components/ListItem/ListItem.tsx
+// src/components/Link/Link.tsx
 var import_react22 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var ListItem = (0, import_react22.forwardRef)(function ListItem2({ children, ...props }, forwardedRef) {
+var Link = (0, import_react22.forwardRef)(function Link2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react22.useRef)(null);
   (0, import_react22.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("lt-list-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("lt-link", { ref: innerRef, ...props, children });
 });
-ListItem.displayName = "ListItem";
+Link.displayName = "Link";
 
 // src/components/List/List.tsx
 var import_react23 = require("react");
@@ -430,73 +451,73 @@ var List = (0, import_react23.forwardRef)(function List2({ children, ...props },
 });
 List.displayName = "List";
 
-// src/components/NavItem/NavItem.tsx
+// src/components/ListItem/ListItem.tsx
 var import_react24 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var NavItem = (0, import_react24.forwardRef)(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
+var ListItem = (0, import_react24.forwardRef)(function ListItem2({ children, ...props }, forwardedRef) {
   const innerRef = (0, import_react24.useRef)(null);
   (0, import_react24.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react24.useEffect)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("lt-list-item", { ref: innerRef, ...props, children });
+});
+ListItem.displayName = "ListItem";
+
+// src/components/Nav/Nav.tsx
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Nav = (0, import_react25.forwardRef)(function Nav2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lt-nav", { ref: innerRef, ...props, children });
+});
+Nav.displayName = "Nav";
+
+// src/components/NavItem/NavItem.tsx
+var import_react26 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var NavItem = (0, import_react26.forwardRef)(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react26.useEffect)(() => {
     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]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     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]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const el = innerRef.current;
     if (!el) return;
     if (iconStart) el.setAttribute("icon-start", iconStart);
     else el.removeAttribute("icon-start");
   }, [iconStart]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("lt-nav-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lt-nav-item", { ref: innerRef, ...props, children });
 });
 NavItem.displayName = "NavItem";
 
-// src/components/Nav/Nav.tsx
-var import_react25 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var Nav = (0, import_react25.forwardRef)(function Nav2({ children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("lt-nav", { ref: innerRef, ...props, children });
-});
-Nav.displayName = "Nav";
-
 // src/components/Pagination/Pagination.tsx
-var import_react26 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var Pagination = (0, import_react26.forwardRef)(function Pagination2({ onChange, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react26.useRef)(null);
-  (0, import_react26.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react26.useEffect)(() => {
+var import_react27 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Pagination = (0, import_react27.forwardRef)(function Pagination2({ onChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react27.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("lt-pagination", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("lt-pagination", { ref: innerRef, ...props, children });
 });
 Pagination.displayName = "Pagination";
 
-// src/components/Link/Link.tsx
-var import_react27 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Link = (0, import_react27.forwardRef)(function Link2({ children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react27.useRef)(null);
-  (0, import_react27.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("lt-link", { ref: innerRef, ...props, children });
-});
-Link.displayName = "Link";
-
 // src/components/Progress/Progress.tsx
 var import_react28 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -683,67 +704,67 @@ var Switch = (0, import_react38.forwardRef)(function Switch2({ onChange, childre
 });
 Switch.displayName = "Switch";
 
-// src/components/TabPanel/TabPanel.tsx
+// src/components/Tab/Tab.tsx
 var import_react39 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var TabPanel = (0, import_react39.forwardRef)(function TabPanel2({ children, ...props }, forwardedRef) {
+var Tab = (0, import_react39.forwardRef)(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
   const innerRef = (0, import_react39.useRef)(null);
   (0, import_react39.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("lt-tab-panel", { ref: innerRef, ...props, children });
-});
-TabPanel.displayName = "TabPanel";
-
-// src/components/Tab/Tab.tsx
-var import_react40 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var Tab = (0, import_react40.forwardRef)(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react40.useRef)(null);
-  (0, import_react40.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     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__ */ (0, import_jsx_runtime40.jsx)("lt-tab", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("lt-tab", { ref: innerRef, ...props, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/TabGroup/TabGroup.tsx
-var import_react41 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var TabGroup = (0, import_react41.forwardRef)(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react41.useEffect)(() => {
+var import_react40 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TabGroup = (0, import_react40.forwardRef)(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react40.useRef)(null);
+  (0, import_react40.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react40.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("lt-tab-group", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("lt-tab-group", { ref: innerRef, ...props, children });
 });
 TabGroup.displayName = "TabGroup";
 
 // src/components/Table/Table.tsx
-var import_react42 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var Table = (0, import_react42.forwardRef)(function Table2({ onSortChange, children, ...props }, forwardedRef) {
-  const innerRef = (0, import_react42.useRef)(null);
-  (0, import_react42.useImperativeHandle)(forwardedRef, () => innerRef.current);
-  (0, import_react42.useEffect)(() => {
+var import_react41 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Table = (0, import_react41.forwardRef)(function Table2({ onSortChange, children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react41.useEffect)(() => {
     const el = innerRef.current;
     if (!el || !onSortChange) return;
     const h = () => onSortChange();
     el.addEventListener("sort-change", h);
     return () => el.removeEventListener("sort-change", h);
   }, [onSortChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("lt-table", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("lt-table", { ref: innerRef, ...props, children });
 });
 Table.displayName = "Table";
 
+// src/components/TabPanel/TabPanel.tsx
+var import_react42 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var TabPanel = (0, import_react42.forwardRef)(function TabPanel2({ children, ...props }, forwardedRef) {
+  const innerRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("lt-tab-panel", { ref: innerRef, ...props, children });
+});
+TabPanel.displayName = "TabPanel";
+
 // src/components/Text/Text.tsx
 var import_react43 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import '@latty-ds/web';
+export { Accordion, type AccordionProps } from './components/Accordion';
 export { Alert, type AlertProps } from './components/Alert';
 export { Avatar, type AvatarProps } from './components/Avatar';
 export { Badge, type BadgeProps } from './components/Badge';
-export { Accordion, type AccordionProps } from './components/Accordion';
 export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';
 export { BreadcrumbItem, type BreadcrumbItemProps } from './components/BreadcrumbItem';
 export { Button, type ButtonProps } from './components/Button';
@@ -15,17 +15,17 @@ export { DateInput, type DateInputProps } from './components/DateInput';
 export { Datepicker, type DatepickerProps } from './components/Datepicker';
 export { Dialog, type DialogProps } from './components/Dialog';
 export { Divider, type DividerProps } from './components/Divider';
-export { DropdownItem, type DropdownItemProps } from './components/DropdownItem';
 export { Dropdown, type DropdownProps } from './components/Dropdown';
+export { DropdownItem, type DropdownItemProps } from './components/DropdownItem';
 export { Header, type HeaderProps } from './components/Header';
 export { IconButton, type IconButtonProps } from './components/IconButton';
 export { Image, type ImageProps } from './components/Image';
-export { ListItem, type ListItemProps } from './components/ListItem';
+export { Link, type LinkProps } from './components/Link';
 export { List, type ListProps } from './components/List';
-export { NavItem, type NavItemProps } from './components/NavItem';
+export { ListItem, type ListItemProps } from './components/ListItem';
 export { Nav, type NavProps } from './components/Nav';
+export { NavItem, type NavItemProps } from './components/NavItem';
 export { Pagination, type PaginationProps } from './components/Pagination';
-export { Link, type LinkProps } from './components/Link';
 export { Progress, type ProgressProps } from './components/Progress';
 export { Radio, type RadioProps } from './components/Radio';
 export { RadioGroup, type RadioGroupProps } from './components/RadioGroup';
@@ -37,10 +37,10 @@ export { Snackbar, type SnackbarProps } from './components/Snackbar';
 export { Spinner, type SpinnerProps } from './components/Spinner';
 export { Surface, type SurfaceProps } from './components/Surface';
 export { Switch, type SwitchProps } from './components/Switch';
-export { TabPanel, type TabPanelProps } from './components/TabPanel';
 export { Tab, type TabProps } from './components/Tab';
 export { TabGroup, type TabGroupProps } from './components/TabGroup';
 export { Table, type TableProps } from './components/Table';
+export { TabPanel, type TabPanelProps } from './components/TabPanel';
 export { Text, type TextProps } from './components/Text';
 export { Textfield, type TextfieldProps } from './components/Textfield';
 export { Tooltip, type TooltipProps } from './components/Tooltip';

package/dist/index.js

@@ -1,59 +1,59 @@
 // src/index.ts
 import "@latty-ds/web";
 
-// src/components/Alert/Alert.tsx
+// src/components/Accordion/Accordion.tsx
 import { useRef, useEffect, useImperativeHandle, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-var Alert = forwardRef(function Alert2({ onClose, children, ...props }, forwardedRef) {
+var Accordion = forwardRef(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
   const innerRef = useRef(null);
   useImperativeHandle(forwardedRef, () => innerRef.current);
   useEffect(() => {
+    const el = innerRef.current;
+    if (!el || !onToggle) return;
+    const h = (ev) => onToggle(ev.detail);
+    el.addEventListener("toggle", h);
+    return () => el.removeEventListener("toggle", h);
+  }, [onToggle]);
+  return /* @__PURE__ */ jsx("lt-accordion", { ref: innerRef, ...props, children });
+});
+Accordion.displayName = "Accordion";
+
+// src/components/Alert/Alert.tsx
+import { useRef as useRef2, 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) {
+  const innerRef = useRef2(null);
+  useImperativeHandle2(forwardedRef, () => innerRef.current);
+  useEffect2(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = () => onClose();
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  return /* @__PURE__ */ jsx("lt-alert", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx2("lt-alert", { ref: innerRef, ...props, children });
 });
 Alert.displayName = "Alert";
 
 // src/components/Avatar/Avatar.tsx
-import { useRef as useRef2, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Avatar = forwardRef2(function Avatar2({ children, ...props }, forwardedRef) {
-  const innerRef = useRef2(null);
-  useImperativeHandle2(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx2("lt-avatar", { ref: innerRef, ...props, children });
-});
-Avatar.displayName = "Avatar";
-
-// src/components/Badge/Badge.tsx
 import { useRef as useRef3, useImperativeHandle as useImperativeHandle3, forwardRef as forwardRef3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var Badge = forwardRef3(function Badge2({ children, ...props }, forwardedRef) {
+var Avatar = forwardRef3(function Avatar2({ children, ...props }, forwardedRef) {
   const innerRef = useRef3(null);
   useImperativeHandle3(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx3("lt-badge", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx3("lt-avatar", { ref: innerRef, ...props, children });
 });
-Badge.displayName = "Badge";
+Avatar.displayName = "Avatar";
 
-// src/components/Accordion/Accordion.tsx
-import { useRef as useRef4, useEffect as useEffect2, useImperativeHandle as useImperativeHandle4, forwardRef as forwardRef4 } from "react";
+// src/components/Badge/Badge.tsx
+import { useRef as useRef4, useImperativeHandle as useImperativeHandle4, forwardRef as forwardRef4 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Accordion = forwardRef4(function Accordion2({ onToggle, children, ...props }, forwardedRef) {
+var Badge = forwardRef4(function Badge2({ children, ...props }, forwardedRef) {
   const innerRef = useRef4(null);
   useImperativeHandle4(forwardedRef, () => innerRef.current);
-  useEffect2(() => {
-    const el = innerRef.current;
-    if (!el || !onToggle) return;
-    const h = (ev) => onToggle(ev.detail);
-    el.addEventListener("toggle", h);
-    return () => el.removeEventListener("toggle", h);
-  }, [onToggle]);
-  return /* @__PURE__ */ jsx4("lt-accordion", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx4("lt-badge", { ref: innerRef, ...props, children });
 });
-Accordion.displayName = "Accordion";
+Badge.displayName = "Badge";
 
 // src/components/Breadcrumb/Breadcrumb.tsx
 import { useRef as useRef5, useImperativeHandle as useImperativeHandle5, forwardRef as forwardRef5 } from "react";
@@ -266,47 +266,47 @@ var Divider = forwardRef16(function Divider2({ children, ...props }, forwardedRe
 });
 Divider.displayName = "Divider";
 
-// src/components/DropdownItem/DropdownItem.tsx
+// src/components/Dropdown/Dropdown.tsx
 import { useRef as useRef17, useEffect as useEffect11, useImperativeHandle as useImperativeHandle17, forwardRef as forwardRef17 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var DropdownItem = forwardRef17(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+var Dropdown = forwardRef17(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
   const innerRef = useRef17(null);
   useImperativeHandle17(forwardedRef, () => innerRef.current);
   useEffect11(() => {
-    const el = innerRef.current;
-    if (!el || !onSelect) return;
-    const h = () => onSelect();
-    el.addEventListener("select", h);
-    return () => el.removeEventListener("select", h);
-  }, [onSelect]);
-  return /* @__PURE__ */ jsx17("lt-dropdown-item", { ref: innerRef, ...props, children });
-});
-DropdownItem.displayName = "DropdownItem";
-
-// src/components/Dropdown/Dropdown.tsx
-import { useRef as useRef18, useEffect as useEffect12, useImperativeHandle as useImperativeHandle18, forwardRef as forwardRef18 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Dropdown = forwardRef18(function Dropdown2({ onOpen, onClose, children, ...props }, forwardedRef) {
-  const innerRef = useRef18(null);
-  useImperativeHandle18(forwardedRef, () => innerRef.current);
-  useEffect12(() => {
     const el = innerRef.current;
     if (!el || !onOpen) return;
     const h = () => onOpen();
     el.addEventListener("open", h);
     return () => el.removeEventListener("open", h);
   }, [onOpen]);
-  useEffect12(() => {
+  useEffect11(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = () => onClose();
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  return /* @__PURE__ */ jsx18("lt-dropdown", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx17("lt-dropdown", { ref: innerRef, ...props, children });
 });
 Dropdown.displayName = "Dropdown";
 
+// src/components/DropdownItem/DropdownItem.tsx
+import { useRef as useRef18, useEffect as useEffect12, useImperativeHandle as useImperativeHandle18, forwardRef as forwardRef18 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DropdownItem = forwardRef18(function DropdownItem2({ onSelect, children, ...props }, forwardedRef) {
+  const innerRef = useRef18(null);
+  useImperativeHandle18(forwardedRef, () => innerRef.current);
+  useEffect12(() => {
+    const el = innerRef.current;
+    if (!el || !onSelect) return;
+    const h = () => onSelect();
+    el.addEventListener("select", h);
+    return () => el.removeEventListener("select", h);
+  }, [onSelect]);
+  return /* @__PURE__ */ jsx18("lt-dropdown-item", { ref: innerRef, ...props, children });
+});
+DropdownItem.displayName = "DropdownItem";
+
 // src/components/Header/Header.tsx
 import { useRef as useRef19, useImperativeHandle as useImperativeHandle19, forwardRef as forwardRef19 } from "react";
 import { jsx as jsx19, jsxs } from "react/jsx-runtime";
@@ -333,24 +333,45 @@ var IconButton = forwardRef20(function IconButton2({ children, ...props }, forwa
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useRef as useRef21, useImperativeHandle as useImperativeHandle21, forwardRef as forwardRef21 } from "react";
+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({ children, ...props }, forwardedRef) {
+var Image = forwardRef21(function Image2({ onName, 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);
+  }, [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);
+  }, [onError]);
   return /* @__PURE__ */ jsx21("lt-image", { ref: innerRef, ...props, children });
 });
 Image.displayName = "Image";
 
-// src/components/ListItem/ListItem.tsx
+// src/components/Link/Link.tsx
 import { useRef as useRef22, useImperativeHandle as useImperativeHandle22, forwardRef as forwardRef22 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var ListItem = forwardRef22(function ListItem2({ children, ...props }, forwardedRef) {
+var Link = forwardRef22(function Link2({ children, ...props }, forwardedRef) {
   const innerRef = useRef22(null);
   useImperativeHandle22(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx22("lt-list-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx22("lt-link", { ref: innerRef, ...props, children });
 });
-ListItem.displayName = "ListItem";
+Link.displayName = "Link";
 
 // src/components/List/List.tsx
 import { useRef as useRef23, useImperativeHandle as useImperativeHandle23, forwardRef as forwardRef23 } from "react";
@@ -362,73 +383,73 @@ var List = forwardRef23(function List2({ children, ...props }, forwardedRef) {
 });
 List.displayName = "List";
 
-// src/components/NavItem/NavItem.tsx
-import { useRef as useRef24, useEffect as useEffect13, useImperativeHandle as useImperativeHandle24, forwardRef as forwardRef24 } from "react";
+// src/components/ListItem/ListItem.tsx
+import { useRef as useRef24, useImperativeHandle as useImperativeHandle24, forwardRef as forwardRef24 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var NavItem = forwardRef24(function NavItem2({ onNavItemClick, onNavCollapse, iconStart, children, ...props }, forwardedRef) {
+var ListItem = forwardRef24(function ListItem2({ children, ...props }, forwardedRef) {
   const innerRef = useRef24(null);
   useImperativeHandle24(forwardedRef, () => innerRef.current);
-  useEffect13(() => {
+  return /* @__PURE__ */ jsx24("lt-list-item", { ref: innerRef, ...props, children });
+});
+ListItem.displayName = "ListItem";
+
+// src/components/Nav/Nav.tsx
+import { useRef as useRef25, useImperativeHandle as useImperativeHandle25, forwardRef as forwardRef25 } from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Nav = forwardRef25(function Nav2({ children, ...props }, forwardedRef) {
+  const innerRef = useRef25(null);
+  useImperativeHandle25(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ jsx25("lt-nav", { ref: innerRef, ...props, children });
+});
+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) {
+  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]);
-  useEffect13(() => {
+  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]);
-  useEffect13(() => {
+  useEffect14(() => {
     const el = innerRef.current;
     if (!el) return;
     if (iconStart) el.setAttribute("icon-start", iconStart);
     else el.removeAttribute("icon-start");
   }, [iconStart]);
-  return /* @__PURE__ */ jsx24("lt-nav-item", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx26("lt-nav-item", { ref: innerRef, ...props, children });
 });
 NavItem.displayName = "NavItem";
 
-// src/components/Nav/Nav.tsx
-import { useRef as useRef25, useImperativeHandle as useImperativeHandle25, forwardRef as forwardRef25 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var Nav = forwardRef25(function Nav2({ children, ...props }, forwardedRef) {
-  const innerRef = useRef25(null);
-  useImperativeHandle25(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx25("lt-nav", { ref: innerRef, ...props, children });
-});
-Nav.displayName = "Nav";
-
 // src/components/Pagination/Pagination.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 Pagination = forwardRef26(function Pagination2({ onChange, children, ...props }, forwardedRef) {
-  const innerRef = useRef26(null);
-  useImperativeHandle26(forwardedRef, () => innerRef.current);
-  useEffect14(() => {
+import { useRef as useRef27, 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) {
+  const innerRef = useRef27(null);
+  useImperativeHandle27(forwardedRef, () => innerRef.current);
+  useEffect15(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ jsx26("lt-pagination", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx27("lt-pagination", { ref: innerRef, ...props, children });
 });
 Pagination.displayName = "Pagination";
 
-// src/components/Link/Link.tsx
-import { useRef as useRef27, useImperativeHandle as useImperativeHandle27, forwardRef as forwardRef27 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var Link = forwardRef27(function Link2({ children, ...props }, forwardedRef) {
-  const innerRef = useRef27(null);
-  useImperativeHandle27(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx27("lt-link", { ref: innerRef, ...props, children });
-});
-Link.displayName = "Link";
-
 // src/components/Progress/Progress.tsx
 import { useRef as useRef28, useImperativeHandle as useImperativeHandle28, forwardRef as forwardRef28 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -440,12 +461,12 @@ var Progress = forwardRef28(function Progress2({ children, ...props }, forwarded
 Progress.displayName = "Progress";
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef29, useEffect as useEffect15, useImperativeHandle as useImperativeHandle29, forwardRef as forwardRef29 } from "react";
+import { useRef as useRef29, 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) {
   const innerRef = useRef29(null);
   useImperativeHandle29(forwardedRef, () => innerRef.current);
-  useEffect15(() => {
+  useEffect16(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -457,12 +478,12 @@ var Radio = forwardRef29(function Radio2({ onChange, children, ...props }, forwa
 Radio.displayName = "Radio";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { useRef as useRef30, useEffect as useEffect16, useImperativeHandle as useImperativeHandle30, forwardRef as forwardRef30 } from "react";
+import { useRef as useRef30, useEffect as useEffect17, useImperativeHandle as useImperativeHandle30, forwardRef as forwardRef30 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef30(null);
   useImperativeHandle30(forwardedRef, () => innerRef.current);
-  useEffect16(() => {
+  useEffect17(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -474,12 +495,12 @@ var RadioGroup = forwardRef30(function RadioGroup2({ onChange, children, ...prop
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/Select/Select.tsx
-import { useRef as useRef31, useEffect as useEffect17, useImperativeHandle as useImperativeHandle31, forwardRef as forwardRef31 } from "react";
+import { useRef as useRef31, 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) {
   const innerRef = useRef31(null);
   useImperativeHandle31(forwardedRef, () => innerRef.current);
-  useEffect17(() => {
+  useEffect18(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -491,19 +512,19 @@ var Select = forwardRef31(function Select2({ onChange, children, ...props }, for
 Select.displayName = "Select";
 
 // src/components/SidePanel/SidePanel.tsx
-import { useRef as useRef32, useEffect as useEffect18, useImperativeHandle as useImperativeHandle32, forwardRef as forwardRef32 } from "react";
+import { useRef as useRef32, useEffect as useEffect19, 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) {
   const innerRef = useRef32(null);
   useImperativeHandle32(forwardedRef, () => innerRef.current);
-  useEffect18(() => {
+  useEffect19(() => {
     const el = innerRef.current;
     if (!el || !onClose) return;
     const h = (ev) => onClose(ev);
     el.addEventListener("close", h);
     return () => el.removeEventListener("close", h);
   }, [onClose]);
-  useEffect18(() => {
+  useEffect19(() => {
     const el = innerRef.current;
     if (!el) return;
     if (noCloseButton) el.setAttribute("no-close-button", "");
@@ -524,19 +545,19 @@ var Skeleton = forwardRef33(function Skeleton2({ children, ...props }, forwarded
 Skeleton.displayName = "Skeleton";
 
 // src/components/Slider/Slider.tsx
-import { useRef as useRef34, useEffect as useEffect19, useImperativeHandle as useImperativeHandle34, forwardRef as forwardRef34 } from "react";
+import { useRef as useRef34, useEffect as useEffect20, useImperativeHandle as useImperativeHandle34, forwardRef as forwardRef34 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...props }, forwardedRef) {
   const innerRef = useRef34(null);
   useImperativeHandle34(forwardedRef, () => innerRef.current);
-  useEffect19(() => {
+  useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
     const h = (ev) => onInput(ev.detail);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
-  useEffect19(() => {
+  useEffect20(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -548,26 +569,26 @@ var Slider = forwardRef34(function Slider2({ onInput, onChange, children, ...pro
 Slider.displayName = "Slider";
 
 // src/components/Snackbar/Snackbar.tsx
-import { useRef as useRef35, useEffect as useEffect20, useImperativeHandle as useImperativeHandle35, forwardRef as forwardRef35 } from "react";
+import { useRef as useRef35, 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) {
   const innerRef = useRef35(null);
   useImperativeHandle35(forwardedRef, () => innerRef.current);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onShow) return;
     const h = () => onShow();
     el.addEventListener("show", h);
     return () => el.removeEventListener("show", h);
   }, [onShow]);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onHide) return;
     const h = () => onHide();
     el.addEventListener("hide", h);
     return () => el.removeEventListener("hide", h);
   }, [onHide]);
-  useEffect20(() => {
+  useEffect21(() => {
     const el = innerRef.current;
     if (!el || !onAction) return;
     const h = () => onAction();
@@ -599,12 +620,12 @@ var Surface = forwardRef37(function Surface2({ children, ...props }, forwardedRe
 Surface.displayName = "Surface";
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef38, useEffect as useEffect21, useImperativeHandle as useImperativeHandle38, forwardRef as forwardRef38 } from "react";
+import { useRef as useRef38, 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) {
   const innerRef = useRef38(null);
   useImperativeHandle38(forwardedRef, () => innerRef.current);
-  useEffect21(() => {
+  useEffect22(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
@@ -615,67 +636,67 @@ var Switch = forwardRef38(function Switch2({ onChange, children, ...props }, for
 });
 Switch.displayName = "Switch";
 
-// src/components/TabPanel/TabPanel.tsx
-import { useRef as useRef39, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
+// src/components/Tab/Tab.tsx
+import { useRef as useRef39, useEffect as useEffect23, useImperativeHandle as useImperativeHandle39, forwardRef as forwardRef39 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var TabPanel = forwardRef39(function TabPanel2({ children, ...props }, forwardedRef) {
+var Tab = forwardRef39(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
   const innerRef = useRef39(null);
   useImperativeHandle39(forwardedRef, () => innerRef.current);
-  return /* @__PURE__ */ jsx39("lt-tab-panel", { ref: innerRef, ...props, children });
-});
-TabPanel.displayName = "TabPanel";
-
-// src/components/Tab/Tab.tsx
-import { useRef as useRef40, useEffect as useEffect22, useImperativeHandle as useImperativeHandle40, forwardRef as forwardRef40 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var Tab = forwardRef40(function Tab2({ onTabClick, children, ...props }, forwardedRef) {
-  const innerRef = useRef40(null);
-  useImperativeHandle40(forwardedRef, () => innerRef.current);
-  useEffect22(() => {
+  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__ */ jsx40("lt-tab", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx39("lt-tab", { ref: innerRef, ...props, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/TabGroup/TabGroup.tsx
-import { useRef as useRef41, useEffect as useEffect23, useImperativeHandle as useImperativeHandle41, forwardRef as forwardRef41 } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var TabGroup = forwardRef41(function TabGroup2({ onChange, children, ...props }, forwardedRef) {
-  const innerRef = useRef41(null);
-  useImperativeHandle41(forwardedRef, () => innerRef.current);
-  useEffect23(() => {
+import { useRef as useRef40, useEffect as useEffect24, 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(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);
     el.addEventListener("change", h);
     return () => el.removeEventListener("change", h);
   }, [onChange]);
-  return /* @__PURE__ */ jsx41("lt-tab-group", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx40("lt-tab-group", { ref: innerRef, ...props, children });
 });
 TabGroup.displayName = "TabGroup";
 
 // src/components/Table/Table.tsx
-import { useRef as useRef42, useEffect as useEffect24, useImperativeHandle as useImperativeHandle42, forwardRef as forwardRef42 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var Table = forwardRef42(function Table2({ onSortChange, children, ...props }, forwardedRef) {
-  const innerRef = useRef42(null);
-  useImperativeHandle42(forwardedRef, () => innerRef.current);
-  useEffect24(() => {
+import { useRef as useRef41, useEffect as useEffect25, 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) {
+  const innerRef = useRef41(null);
+  useImperativeHandle41(forwardedRef, () => innerRef.current);
+  useEffect25(() => {
     const el = innerRef.current;
     if (!el || !onSortChange) return;
     const h = () => onSortChange();
     el.addEventListener("sort-change", h);
     return () => el.removeEventListener("sort-change", h);
   }, [onSortChange]);
-  return /* @__PURE__ */ jsx42("lt-table", { ref: innerRef, ...props, children });
+  return /* @__PURE__ */ jsx41("lt-table", { ref: innerRef, ...props, children });
 });
 Table.displayName = "Table";
 
+// src/components/TabPanel/TabPanel.tsx
+import { useRef as useRef42, useImperativeHandle as useImperativeHandle42, forwardRef as forwardRef42 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var TabPanel = forwardRef42(function TabPanel2({ children, ...props }, forwardedRef) {
+  const innerRef = useRef42(null);
+  useImperativeHandle42(forwardedRef, () => innerRef.current);
+  return /* @__PURE__ */ jsx42("lt-tab-panel", { ref: innerRef, ...props, children });
+});
+TabPanel.displayName = "TabPanel";
+
 // src/components/Text/Text.tsx
 import { useRef as useRef43, useImperativeHandle as useImperativeHandle43, forwardRef as forwardRef43 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -687,19 +708,19 @@ var Text = forwardRef43(function Text2({ children, ...props }, forwardedRef) {
 Text.displayName = "Text";
 
 // src/components/Textfield/Textfield.tsx
-import { useRef as useRef44, useEffect as useEffect25, useImperativeHandle as useImperativeHandle44, forwardRef as forwardRef44 } from "react";
+import { useRef as useRef44, useEffect as useEffect26, 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) {
   const innerRef = useRef44(null);
   useImperativeHandle44(forwardedRef, () => innerRef.current);
-  useEffect25(() => {
+  useEffect26(() => {
     const el = innerRef.current;
     if (!el || !onInput) return;
     const h = (ev) => onInput(ev.detail);
     el.addEventListener("input", h);
     return () => el.removeEventListener("input", h);
   }, [onInput]);
-  useEffect25(() => {
+  useEffect26(() => {
     const el = innerRef.current;
     if (!el || !onChange) return;
     const h = (ev) => onChange(ev.detail);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latty-ds/react",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "React wrappers for the Latty design system — typed React components backed by @latty-ds/web",
   "license": "MIT",
   "repository": {
@@ -56,8 +56,8 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@latty-ds/icons": "0.6.0",
-    "@latty-ds/web": "0.6.0"
+    "@latty-ds/icons": "0.8.0",
+    "@latty-ds/web": "0.8.0"
   },
-  "gitHead": "5f2e9dbee20f32bc24117a40f8f2f65a4de07979"
+  "gitHead": "144dd8d2f7440fd5fd8ecb4f396407c4ce3be9f2"
 }