wj-elements 0.0.28 → 0.0.30

package/dist/wj-masonry.js

@@ -183,7 +183,7 @@ class Masonry extends WJElement {
     debounce(this.layout, ms, this.debounceId);
   }
 }
-customElements.get("wj-masonry") || window.customElements.define("wj-masonry", Masonry);
+WJElement.define("wj-masonry", Masonry);
 export {
-  Masonry
+  Masonry as default
 };

package/dist/wj-master.js

@@ -3,82 +3,80 @@ import { defaultStoreActions, store } from "./wj-store.js";
 import { b, w } from "./router-links-F7MJWhZi.js";
 import { fetchAndParseCSS } from "./wj-fetchAndParseCSS.js";
 import { L as Localizer } from "./localize-DSOailh_.js";
-import { Animation } from "./wj-animation.js";
-import { Aside } from "./wj-aside.js";
-import { Avatar } from "./wj-avatar.js";
-import { Badge } from "./wj-badge.js";
-import { Breadcrumb } from "./wj-breadcrumb.js";
-import { Breadcrumbs } from "./wj-breadcrumbs.js";
-import { Button } from "./wj-button.js";
-import { ButtonGroup } from "./wj-button-group.js";
-import { Card } from "./wj-card.js";
-import { CardContent } from "./wj-card-content.js";
-import { CardControls } from "./wj-card-controls.js";
-import { CardHeader } from "./wj-card-header.js";
-import { CardSubtitle } from "./wj-card-subtitle.js";
-import { CardTitle } from "./wj-card-title.js";
-import { Carousel } from "./wj-carousel.js";
-import { CarouselItem } from "./wj-carousel-item.js";
-import { Checkbox } from "./wj-checkbox.js";
-import { Chip } from "./wj-chip.js";
-import { Col } from "./wj-col.js";
-import { ColorPicker } from "./wj-color-picker.js";
-import { Container } from "./wj-container.js";
-import { CopyButton } from "./wj-copy-button.js";
-import { Dialog } from "./wj-dialog.js";
-import { Divider } from "./wj-divider.js";
-import { Dropdown } from "./wj-dropdown.js";
-import { FileUpload } from "./wj-file-upload.js";
-import { FileUploadItem } from "./wj-file-upload-item.js";
-import { Footer } from "./wj-footer.js";
-import { FormatDigital } from "./wj-format-digital.js";
-import { Grid } from "./wj-grid.js";
-import { Header } from "./wj-header.js";
-import { Icon } from "./wj-icon.js";
-import { IconPicker } from "./wj-icon-picker.js";
-import { Img } from "./wj-img.js";
-import { ImgComparer } from "./wj-img-comparer.js";
-import { InfiniteScroll } from "./wj-infinite-scroll.js";
-import { Input } from "./wj-input.js";
-import { InputFile } from "./wj-input-file.js";
-import { Item } from "./wj-item.js";
-import { Label } from "./wj-label.js";
-import { List } from "./wj-list.js";
-import { Main } from "./wj-main.js";
-import { Masonry } from "./wj-masonry.js";
-import { Menu } from "./wj-menu.js";
-import { MenuButton } from "./wj-menu-button.js";
-import { MenuItem } from "./wj-menu-item.js";
-import { MenuLabel } from "./wj-menu-label.js";
-import { Nav } from "./wj-nav.js";
-import { NavMenu } from "./wj-nav-menu.js";
-import { Option } from "./wj-option.js";
-import { Options } from "./wj-options.js";
-import { Popup } from "./wj-popup.js";
-import { ProgressBar } from "./wj-progress-bar.js";
-import { Radio } from "./wj-radio.js";
-import { RadioGroup } from "./wj-radio-group.js";
-import { Rate } from "./wj-rate.js";
-import { RelativeTime } from "./wj-relative-time.js";
-import { Route } from "./wj-route.js";
-import { Routerx } from "./wj-routerx.js";
-import { RouterLink } from "./wj-router-link.js";
+import { default as default3 } from "./wj-animation.js";
+import { default as default4 } from "./wj-aside.js";
+import { default as default5 } from "./wj-avatar.js";
+import { default as default6 } from "./wj-badge.js";
+import { default as default7 } from "./wj-breadcrumb.js";
+import { default as default8 } from "./wj-breadcrumbs.js";
+import { default as default9 } from "./wj-button.js";
+import { default as default10 } from "./wj-button-group.js";
+import { default as default11 } from "./wj-card.js";
+import { default as default12 } from "./wj-card-content.js";
+import { default as default13 } from "./wj-card-controls.js";
+import { default as default14 } from "./wj-card-header.js";
+import { default as default15 } from "./wj-card-subtitle.js";
+import { default as default16 } from "./wj-card-title.js";
+import { default as default17 } from "./wj-carousel.js";
+import { default as default18 } from "./wj-carousel-item.js";
+import { default as default19 } from "./wj-checkbox.js";
+import { default as default20 } from "./wj-chip.js";
+import { default as default21 } from "./wj-col.js";
+import { default as default22 } from "./wj-color-picker.js";
+import { default as default23 } from "./wj-container.js";
+import { default as default24 } from "./wj-copy-button.js";
+import { default as default25 } from "./wj-dialog.js";
+import { default as default26 } from "./wj-divider.js";
+import { default as default27 } from "./wj-dropdown.js";
+import { default as default28 } from "./wj-file-upload.js";
+import { default as default29 } from "./wj-file-upload-item.js";
+import { default as default30 } from "./wj-footer.js";
+import { default as default31 } from "./wj-format-digital.js";
+import { default as default32 } from "./wj-grid.js";
+import { default as default33 } from "./wj-header.js";
+import { default as default34 } from "./wj-icon.js";
+import { default as default35 } from "./wj-icon-picker.js";
+import { default as default36 } from "./wj-img.js";
+import { default as default37 } from "./wj-img-comparer.js";
+import { default as default38 } from "./wj-infinite-scroll.js";
+import { default as default39 } from "./wj-input.js";
+import { default as default40 } from "./wj-input-file.js";
+import { default as default41 } from "./wj-item.js";
+import { default as default42 } from "./wj-label.js";
+import { default as default43 } from "./wj-list.js";
+import { default as default44 } from "./wj-main.js";
+import { default as default45 } from "./wj-masonry.js";
+import { default as default46 } from "./wj-menu.js";
+import { default as default47 } from "./wj-menu-button.js";
+import { default as default48 } from "./wj-menu-item.js";
+import { default as default49 } from "./wj-menu-label.js";
+import { default as default50 } from "./wj-option.js";
+import { default as default51 } from "./wj-options.js";
+import { default as default52 } from "./wj-popup.js";
+import { default as default53 } from "./wj-progress-bar.js";
+import { default as default54 } from "./wj-radio.js";
+import { default as default55 } from "./wj-radio-group.js";
+import { default as default56 } from "./wj-rate.js";
+import { default as default57 } from "./wj-relative-time.js";
+import { default as default58 } from "./wj-route.js";
+import { default as default59 } from "./wj-routerx.js";
+import { default as default60 } from "./wj-router-link.js";
 import "./wj-router-outlet.js";
-import { Row } from "./wj-row.js";
-import { Select } from "./wj-select.js";
-import { Slider } from "./wj-slider.js";
-import { SplitView } from "./wj-split-view.js";
-import { Tab } from "./wj-tab.js";
-import { TabGroup } from "./wj-tab-group.js";
-import { TabPanel } from "./wj-tab-panel.js";
-import { Textarea } from "./wj-textarea.js";
-import { Thumbnail } from "./wj-thumbnail.js";
-import { Toast } from "./wj-toast.js";
-import { Toggle } from "./wj-toggle.js";
-import { Toolbar } from "./wj-toolbar.js";
-import { ToolbarAction } from "./wj-toolbar-action.js";
-import { Tooltip } from "./wj-tooltip.js";
-import { VisuallyHidden } from "./wj-visually-hidden.js";
+import { default as default61 } from "./wj-row.js";
+import { default as default62 } from "./wj-select.js";
+import { default as default63 } from "./wj-slider.js";
+import { default as default64 } from "./wj-split-view.js";
+import { default as default65 } from "./wj-tab.js";
+import { default as default66 } from "./wj-tab-group.js";
+import { default as default67 } from "./wj-tab-panel.js";
+import { default as default68 } from "./wj-textarea.js";
+import { default as default69 } from "./wj-thumbnail.js";
+import { default as default70 } from "./wj-toast.js";
+import { default as default71 } from "./wj-toggle.js";
+import { default as default72 } from "./wj-toolbar.js";
+import { default as default73 } from "./wj-toolbar-action.js";
+import { default as default74 } from "./wj-tooltip.js";
+import { default as default75 } from "./wj-visually-hidden.js";
 const sk = {
   code: "sk",
   name: "Slovak",
@@ -100,82 +98,80 @@ const en = {
 };
 Localizer.registerTranslation(en);
 export {
-  Animation,
-  Aside,
-  Avatar,
-  Badge,
-  Breadcrumb,
-  Breadcrumbs,
-  Button,
-  ButtonGroup,
-  Card,
-  CardContent,
-  CardControls,
-  CardHeader,
-  CardSubtitle,
-  CardTitle,
-  Carousel,
-  CarouselItem,
-  Checkbox,
-  Chip,
-  Col,
-  ColorPicker,
-  Container,
-  CopyButton,
-  Dialog,
-  Divider,
-  Dropdown,
-  FileUpload,
-  FileUploadItem,
-  Footer,
-  FormatDigital,
-  Grid,
-  Header,
-  Icon,
-  IconPicker,
-  Img,
-  ImgComparer,
-  InfiniteScroll,
-  Input,
-  InputFile,
-  Item,
-  Label,
-  List,
+  default3 as Animation,
+  default4 as Aside,
+  default5 as Avatar,
+  default6 as Badge,
+  default7 as Breadcrumb,
+  default8 as Breadcrumbs,
+  default9 as Button,
+  default10 as ButtonGroup,
+  default11 as Card,
+  default12 as CardContent,
+  default13 as CardControls,
+  default14 as CardHeader,
+  default15 as CardSubtitle,
+  default16 as CardTitle,
+  default17 as Carousel,
+  default18 as CarouselItem,
+  default19 as Checkbox,
+  default20 as Chip,
+  default21 as Col,
+  default22 as ColorPicker,
+  default23 as Container,
+  default24 as CopyButton,
+  default25 as Dialog,
+  default26 as Divider,
+  default27 as Dropdown,
+  default28 as FileUpload,
+  default29 as FileUploadItem,
+  default30 as Footer,
+  default31 as FormatDigital,
+  default32 as Grid,
+  default33 as Header,
+  default34 as Icon,
+  default35 as IconPicker,
+  default36 as Img,
+  default37 as ImgComparer,
+  default38 as InfiniteScroll,
+  default39 as Input,
+  default40 as InputFile,
+  default41 as Item,
+  default42 as Label,
+  default43 as List,
   Localizer,
-  Main,
-  Masonry,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuLabel,
-  Nav,
-  NavMenu,
-  Option,
-  Options,
-  Popup,
-  ProgressBar,
-  Radio,
-  RadioGroup,
-  Rate,
-  RelativeTime,
-  Route,
-  RouterLink,
-  Routerx,
-  Row,
-  Select,
-  Slider,
-  SplitView,
-  Tab,
-  TabGroup,
-  TabPanel,
-  Textarea,
-  Thumbnail,
-  Toast,
-  Toggle,
-  Toolbar,
-  ToolbarAction,
-  Tooltip,
-  VisuallyHidden,
+  default44 as Main,
+  default45 as Masonry,
+  default46 as Menu,
+  default47 as MenuButton,
+  default48 as MenuItem,
+  default49 as MenuLabel,
+  default50 as Option,
+  default51 as Options,
+  default52 as Popup,
+  default53 as ProgressBar,
+  default54 as Radio,
+  default55 as RadioGroup,
+  default56 as Rate,
+  default57 as RelativeTime,
+  default58 as Route,
+  default60 as RouterLink,
+  default59 as Routerx,
+  default61 as Row,
+  default62 as Select,
+  default63 as Slider,
+  default64 as SplitView,
+  default65 as Tab,
+  default66 as TabGroup,
+  default67 as TabPanel,
+  default68 as Textarea,
+  default69 as Thumbnail,
+  default70 as Toast,
+  default71 as Toggle,
+  default72 as Toolbar,
+  default73 as ToolbarAction,
+  default74 as Tooltip,
+  default75 as VisuallyHidden,
   default2 as WJElement,
   b as bindRouterLinks,
   defaultStoreActions,

package/dist/wj-menu-button.js

@@ -32,7 +32,7 @@ class MenuButton extends WJElement {
     });
   }
 }
-customElements.get("wj-menu-button") || window.customElements.define("wj-menu-button", MenuButton);
+WJElement.define("wj-menu-button", MenuButton);
 export {
-  MenuButton
+  MenuButton as default
 };

package/dist/wj-menu-item.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 import WJElement, { WjElementUtils, event } from "./wj-element.js";
 import { b as bindRouterLinks } from "./router-links-F7MJWhZi.js";
-const styles = '/*\n[ WJ Menu Item ]\n*/\n:host {\n  --wj-menu-item-color: var(--wj-color);\n  --wj-menu-item-background: transparent;\n  --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n  --wj-menu-item-background-hover: var(--wj-border-color);\n  --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n  --wj-menu-item-background-focus: var(--wj-border-color);\n  --wj-menu-item-color-active: var(--wj-color-contrast-8);\n  --wj-menu-item-background-active: var(--wj-border-color);\n  --wj-menu-item-padding-top: .5rem;\n  --wj-menu-item-padding-bottom: .5rem;\n  --wj-menu-item-line-height: 1.8rem;\n  --wj-menu-item-safe-triangle-cursor-x: 0;\n  --wj-menu-item-safe-triangle-cursor-y: 0;\n  --wj-menu-item-safe-triangle-submenu-start-x: 0;\n  --wj-menu-item-safe-triangle-submenu-start-y: 0;\n  --wj-menu-item-safe-triangle-submenu-end-x: 0;\n  --wj-menu-item-safe-triangle-submenu-end-y: 0;\n  --wj-menu-submenu-offset: 0;\n  --wj-menu-item-icon-visibility: hidden;\n  display: block;\n}\n:host .native-menu-item {\n  background: var(--wj-menu-item-background);\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  color: var(--wj-menu-item-color);\n  padding-top: var(--wj-menu-item-padding-top);\n  padding-bottom: var(--wj-menu-item-padding-bottom);\n  transition: var(--wj-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n  width: 100%;\n  line-height: var(--wj-menu-item-line-height);\n}\n:host .native-menu-item:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:focus {\n  color: var(--wj-menu-item-color-focus);\n  background: var(--wj-menu-item-background-focus);\n}\n:host .native-menu-item:active {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n  flex: 1 1 auto;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n:host .native-menu-item .check-icon {\n  flex: 0 0 auto;\n  display: var(--wj-menu-item-check-icon-display, flex);\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n  visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n  content: "";\n  position: fixed;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  clip-path: polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y), var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y), var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y));\n}\n\n.submenu-icon {\n  --wj-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: var(--wj-menu-item-icon-visibility);\n}\n\n.has-submenu .submenu-icon {\n  --wj-menu-item-icon-visibility: visible;\n}\n\n.submenu-icon.collapse {\n  flex: none;\n  right: 10px;\n  position: relative;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0.5rem;\n}\n\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n  --wj-menu-border-width: 0 !important;\n  --wj-menu-margin-inline: 2rem 0 !important;\n}\n\n:host ::slotted([slot=start]) {\n  width: 1.5rem;\n}\n\n:host(.wj-menu-variant-context) {\n  display: block;\n}\n\n:host(.active) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n\n:host(.open) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}';
+const styles = '/*\n[ WJ Menu Item ]\n*/\n:host {\n  --wj-menu-item-color: var(--wj-color);\n  --wj-menu-item-background: transparent;\n  --wj-menu-item-color-hover: var(--wj-color-contrast-8);\n  --wj-menu-item-background-hover: var(--wj-border-color);\n  --wj-menu-item-color-focus: var(--wj-color-contrast-8);\n  --wj-menu-item-background-focus: var(--wj-border-color);\n  --wj-menu-item-color-active: var(--wj-color-contrast-8);\n  --wj-menu-item-background-active: var(--wj-border-color);\n  --wj-menu-item-padding-top: .5rem;\n  --wj-menu-item-padding-bottom: .5rem;\n  --wj-menu-item-line-height: 1.8rem;\n  --wj-menu-item-safe-triangle-cursor-x: 0;\n  --wj-menu-item-safe-triangle-cursor-y: 0;\n  --wj-menu-item-safe-triangle-submenu-start-x: 0;\n  --wj-menu-item-safe-triangle-submenu-start-y: 0;\n  --wj-menu-item-safe-triangle-submenu-end-x: 0;\n  --wj-menu-item-safe-triangle-submenu-end-y: 0;\n  --wj-menu-submenu-offset: 0;\n  --wj-menu-item-icon-visibility: hidden;\n  display: block;\n}\n:host .native-menu-item {\n  background: var(--wj-menu-item-background);\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: center;\n  color: var(--wj-menu-item-color);\n  padding-top: var(--wj-menu-item-padding-top);\n  padding-bottom: var(--wj-menu-item-padding-bottom);\n  transition: var(--wj-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n  width: 100%;\n}\n:host .native-menu-item:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item:focus {\n  color: var(--wj-menu-item-color-focus);\n  background: var(--wj-menu-item-background-focus);\n}\n:host .native-menu-item:active {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item .label {\n  flex: 1 1 auto;\n  display: inline-block;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  line-height: normal;\n}\n:host .native-menu-item .check-icon {\n  flex: 0 0 auto;\n  display: var(--wj-menu-item-check-icon-display, flex);\n  align-items: center;\n  justify-content: center;\n  width: var(--wj-menu-check-icon-width, 1.5rem);\n  visibility: hidden;\n}\n:host .native-menu-item .check-icon.checked {\n  visibility: visible;\n}\n:host .native-menu-item.expanded-submenu {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n:host .native-menu-item.expanded-submenu:hover {\n  color: var(--wj-menu-item-color-hover);\n  background: var(--wj-menu-item-background-hover);\n}\n:host .native-menu-item.expanded-submenu::after {\n  content: "";\n  position: fixed;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  clip-path: polygon(var(--wj-menu-item-safe-triangle-cursor-x) var(--wj-menu-item-safe-triangle-cursor-y), var(--wj-menu-item-safe-triangle-submenu-start-x) var(--wj-menu-item-safe-triangle-submenu-start-y), var(--wj-menu-item-safe-triangle-submenu-end-x) var(--wj-menu-item-safe-triangle-submenu-end-y));\n}\n\n:host(.collapse) ::slotted([slot=start]) {\n  margin: 0;\n  width: auto;\n  display: contents;\n}\n:host(.collapse) ::slotted([slot=end]) {\n  display: none;\n}\n:host(.collapse) .label,\n:host(.collapse) .check-icon,\n:host(.collapse) .submenu-icon {\n  display: none;\n}\n\n.submenu-icon {\n  --wj-icon-size: 14px !important;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  visibility: var(--wj-menu-item-icon-visibility);\n}\n\n.has-submenu .submenu-icon {\n  --wj-menu-item-icon-visibility: visible;\n}\n\n.submenu-icon.collapse {\n  flex: none;\n  right: 10px;\n  position: relative;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n\n::slotted([slot=start]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-end: 0.5rem;\n}\n\n::slotted([slot=end]) {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  margin-inline-start: 0.5rem;\n}\n\n:host(.wj-menu-variant-nav) ::slotted([slot=submenu]) {\n  --wj-menu-border-width: 0 !important;\n  --wj-menu-margin-inline: 2rem 0 !important;\n}\n\n:host ::slotted([slot=start]) {\n  width: 1.5rem;\n}\n\n:host(.wj-menu-variant-context) {\n  display: block;\n}\n\n:host(.active) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}\n\n:host(.open) {\n  color: var(--wj-menu-item-color-active);\n  background: var(--wj-menu-item-background-active);\n}';
 class MenuItem extends WJElement {
   constructor() {
     super();
@@ -51,8 +51,9 @@ class MenuItem extends WJElement {
     return "CONTEXT";
   }
   get collapse() {
-    var _a;
-    return (_a = this.parentElement) == null ? void 0 : _a.hasAttribute("collapse");
+    if (this.closest("[collapse]"))
+      return true;
+    return false;
   }
   static get cssStyleSheet() {
     return styles;
@@ -65,12 +66,27 @@ class MenuItem extends WJElement {
     this.isShadowRoot = "open";
     this.setAttribute("active-class", "open");
   }
-  draw(context, store, params) {
+  beforeDraw(context, store, params) {
     var _a;
+    (_a = this.querySelector("wj-menu")) == null ? void 0 : _a.removeAttribute("active");
+  }
+  draw(context, store, params) {
+    var _a, _b, _c;
     let fragment = document.createDocumentFragment();
     this.setAttribute("tabindex", "0");
+    console.log("DRAW", this.variant, this.collapse);
+    this.classList.forEach((className) => {
+      if (className.startsWith("wj-menu-variant-")) {
+        this.classList.remove(className);
+      }
+    });
+    this.classList.remove("collapse");
     this.classList.add("wj-menu-variant-" + this.variant.toLowerCase());
-    (_a = this.querySelector("wj-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
+    if (!this.collapse) {
+      (_a = this.querySelector("wj-menu")) == null ? void 0 : _a.setAttribute("variant", this.variant.toLowerCase());
+    } else if ((_b = this.parentElement) == null ? void 0 : _b.hasAttribute("collapse")) {
+      this.classList.add("collapse");
+    }
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.setAttribute("id", "anchor");
@@ -114,7 +130,7 @@ class MenuItem extends WJElement {
       fragment.appendChild(popup);
       isAppend = true;
     }
-    if (this.collapse && !this.hasSubmenu) {
+    if (((_c = this.parentElement) == null ? void 0 : _c.hasAttribute("collapse")) && !this.hasSubmenu) {
       fragment.appendChild(this.collapseItem(native));
     } else if (!isAppend) {
       fragment.appendChild(native);
@@ -130,33 +146,32 @@ class MenuItem extends WJElement {
     this.addEventListener("mousemove", this.dispatchMove);
     this.addEventListener("wj-popup:reposition", this.dispatchReposition);
     event.addListener(this, "mouseover", null, (e) => {
-      if (this.hasAttribute("manual") || this.variant === "NAV" && !this.collapse)
-        return;
-      e.stopPropagation();
-      this.showSubmenu();
-      this.focus();
+      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
+        if (this.hasAttribute("manual") || this.variant === "NAV" && this.collapse)
+          return;
+        this.submenuActivated(e);
+        e.stopPropagation();
+        this.showSubmenu();
+        this.focus();
+      }
     });
     event.addListener(this, "focusout", null, (e) => {
-      if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse) {
-        return;
+      if (this.collapse || this.variant === "CONTEXT" && this.hasSubmenu) {
+        console.log("SOM TU:");
+        if (e.relatedTarget && this.contains(e.relatedTarget) || this.variant === "NAV" && !this.collapse) {
+          return;
+        }
+        this.submenuActivated(e);
+        this.hideSubmenu();
       }
-      this.hideSubmenu();
     });
-    if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
-      event.addListener(this, "click", null, (e) => {
-        let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
-        if (!submenuElements.hasAttribute("active")) {
-          submenuElements.setAttribute("active", "");
-        } else {
-          if (this === e.target)
-            submenuElements.removeAttribute("active");
-        }
+    event.addListener(this, "click", null, (e) => {
+      if (!this.collapse && this.variant === "NAV" && this.hasSubmenu) {
+        this.submenuActivated(e);
+        this.hideSubmenu();
         e.stopPropagation();
-      });
-    } else {
-      event.addListener(this, "click", null, (e) => {
-      });
-    }
+      }
+    });
   }
   collapseItem(native) {
     let tooltip = document.createElement("wj-tooltip");
@@ -167,6 +182,7 @@ class MenuItem extends WJElement {
     return tooltip;
   }
   showSubmenu() {
+    console.log("SHOW SUBMENU", this.hasSubmenu);
     this.tabIndex = -1;
     if (this.hasSubmenu) {
       this.popup.setAttribute("active", "");
@@ -175,6 +191,7 @@ class MenuItem extends WJElement {
     }
   }
   hideSubmenu() {
+    console.log("HIDE SUBMENU", this);
     this.tabIndex = 0;
     if (this.hasSubmenu) {
       this.popup.removeAttribute("active");
@@ -182,8 +199,22 @@ class MenuItem extends WJElement {
       this.native.classList.remove("expanded-submenu");
     }
   }
+  submenuActivated(e) {
+    if (this.hasSubmenu) {
+      let submenuElements = this.submenu.assignedElements({ flatten: true })[0];
+      if (!submenuElements.hasAttribute("active")) {
+        submenuElements.setAttribute("active", "");
+      } else {
+        if (this === e.target)
+          submenuElements.removeAttribute("active");
+      }
+    }
+  }
+  beforeDisconnect() {
+    this.context.innerHTML = "";
+  }
 }
-customElements.get("wj-menu-item") || window.customElements.define("wj-menu-item", MenuItem);
+WJElement.define("wj-menu-item", MenuItem);
 export {
-  MenuItem
+  MenuItem as default
 };

package/dist/wj-menu-label.js

@@ -30,7 +30,7 @@ class MenuLabel extends WJElement {
     return fragment;
   }
 }
-customElements.get("wj-menu-label") || window.customElements.define("wj-menu-label", MenuLabel);
+WJElement.define("wj-menu-label", MenuLabel);
 export {
-  MenuLabel
+  MenuLabel as default
 };

package/dist/wj-menu.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-const styles = "/*\n[ Wj Menu ]\n*/\n:host {\n  --wj-menu-background: var(--wj-background);\n  --wj-menu-border-width: 1px;\n  --wj-menu-border-style: solid;\n  --wj-menu-border-color: var(--wj-border-color);\n  --wj-menu-border-radius: 4px;\n  --wj-menu-padding-top: .5rem;\n  --wj-menu-padding-bottom: .5rem;\n  --wj-menu-padding-inline: 0;\n  --wj-menu-margin-top: ;\n  --wj-menu-margin-bottom: 0;\n  --wj-menu-margin-inline: 0;\n  --wj-menu-z-index: 900;\n  display: none;\n  background: var(--wj-menu-background);\n  position: relative;\n  border-width: var(--wj-menu-border-width);\n  border-style: var(--wj-menu-border-style);\n  border-color: var(--wj-menu-border-color);\n  z-index: var(--wj-menu-z-index);\n  border-radius: var(--wj-border-radius-small);\n  padding-top: var(--wj-menu-padding-top);\n  padding-bottom: var(--wj-menu-padding-bottom);\n  padding-inline: var(--wj-menu-padding-inline);\n  margin-top: var(--wj-menu-margin-top);\n  margin-bottom: var(--wj-menu-margin-bottom);\n  margin-inline: var(--wj-menu-margin-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n}\n:host .native-menu {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n  margin: 0;\n}\n\n:host(.wj-menu-collapse) {\n  max-width: 70px !important;\n}\n\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wj-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n  display: none;\n}\n\n:host([active]) {\n  display: flex !important;\n}";
+const styles = "/*\n[ Wj Menu ]\n*/\n:host {\n  --wj-menu-background: var(--wj-background);\n  --wj-menu-border-width: 1px;\n  --wj-menu-border-style: solid;\n  --wj-menu-border-color: var(--wj-border-color);\n  --wj-menu-border-radius: var(--wj-border-radius-small);\n  --wj-menu-padding-top: .5rem;\n  --wj-menu-padding-bottom: .5rem;\n  --wj-menu-padding-inline: 0;\n  --wj-menu-margin-top: ;\n  --wj-menu-margin-bottom: 0;\n  --wj-menu-margin-inline: 0;\n  --wj-menu-collapse-width: 65px;\n  display: none;\n  background: var(--wj-menu-background);\n  position: relative;\n  border-width: var(--wj-menu-border-width);\n  border-style: var(--wj-menu-border-style);\n  border-color: var(--wj-menu-border-color);\n  z-index: var(--wj-menu-z-index, 8);\n  border-radius: var(--wj-menu-border-radius);\n  padding-top: var(--wj-menu-padding-top);\n  padding-bottom: var(--wj-menu-padding-bottom);\n  padding-inline: var(--wj-menu-padding-inline);\n  margin-top: var(--wj-menu-margin-top);\n  margin-bottom: var(--wj-menu-margin-bottom);\n  margin-inline: var(--wj-menu-margin-inline);\n  overflow: auto;\n  overscroll-behavior: none;\n}\n:host .native-menu {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n:host .native-menu ::slotted(wj-button) {\n  margin: 0;\n}\n\n:host(.wj-menu-collapse) {\n  width: var(--wj-menu-collapse-width);\n}\n\n:host([variant=context]) {\n  display: block !important;\n  margin-left: var(--wj-menu-submenu-offset);\n}\n\n:host([variant=megamenu]) .native-menu {\n  flex-direction: row;\n  align-items: end;\n  flex-wrap: nowrap;\n}\n:host([variant=megamenu]) .native-menu .check-icon {\n  display: none;\n}\n\n:host([active]) {\n  display: flex !important;\n}";
 class Menu extends WJElement {
   constructor() {
     super();
@@ -32,8 +32,16 @@ class Menu extends WJElement {
     fragment.appendChild(native);
     return fragment;
   }
+  afterDraw() {
+    Array.from(this.children).forEach((child) => {
+      child.refresh();
+    });
+  }
+  beforeDisconnect() {
+    this.context.innerHTML = "";
+  }
 }
-customElements.get("wj-menu") || window.customElements.define("wj-menu", Menu);
+WJElement.define("wj-menu", Menu);
 export {
-  Menu
+  Menu as default
 };

package/dist/wj-option.js

@@ -52,7 +52,7 @@ class Option extends WJElement {
     event.addListener(this, "click", "wj:option-change");
   }
 }
-customElements.get("wj-option") || window.customElements.define("wj-option", Option);
+WJElement.define("wj-option", Option);
 export {
-  Option
+  Option as default
 };

package/dist/wj-options.js

@@ -37,7 +37,7 @@ class Options extends WJElement {
     return data;
   }
 }
-customElements.get("wj-options") || window.customElements.define("wj-options", Options);
+WJElement.define("wj-options", Options);
 export {
-  Options
+  Options as default
 };

package/dist/wj-popup.js

@@ -1454,7 +1454,7 @@ class Popup extends WJElement {
     event.removeElement(this.anchorEl);
   }
 }
-customElements.get("wj-popup") || window.customElements.define("wj-popup", Popup);
+WJElement.define("wj-popup", Popup);
 export {
-  Popup
+  Popup as default
 };

package/dist/wj-progress-bar.js

@@ -127,7 +127,7 @@ class ProgressBar extends WJElement {
     return this.getCircleDasharray(radius) * ((100 - progress) / 100);
   }
 }
-customElements.get("wj-progress-bar") || window.customElements.define("wj-progress-bar", ProgressBar);
+WJElement.define("wj-progress-bar", ProgressBar);
 export {
-  ProgressBar
+  ProgressBar as default
 };

package/dist/wj-radio-group.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wj-element.js";
-import { Radio } from "./wj-radio.js";
+import Radio from "./wj-radio.js";
 const styles = "/*\n[ WJ Radio Group ]\n*/\n.wj-inline {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n}";
 class RadioGroup extends WJElement {
   constructor() {
@@ -58,7 +58,7 @@ class RadioGroup extends WJElement {
     return Array.from(this.childNodes);
   }
 }
-customElements.get("wj-radio-group") || window.customElements.define("wj-radio-group", RadioGroup);
+WJElement.define("wj-radio-group", RadioGroup);
 export {
-  RadioGroup
+  RadioGroup as default
 };

package/dist/wj-radio.js

@@ -65,7 +65,7 @@ class Radio extends WJElement {
     event.removeElement(this);
   }
 }
-customElements.get("wj-radio") || window.customElements.define("wj-radio", Radio);
+WJElement.define("wj-radio", Radio);
 export {
-  Radio
+  Radio as default
 };

package/dist/wj-rate.js

@@ -170,7 +170,7 @@ class Rate extends WJElement {
     return Math.ceil(numberToRound * multiplier) / multiplier;
   }
 }
-customElements.get("wj-rate") || window.customElements.define("wj-rate", Rate);
+WJElement.define("wj-rate", Rate);
 export {
-  Rate
+  Rate as default
 };

package/dist/wj-relative-time.js

@@ -67,7 +67,7 @@ class RelativeTime extends WJElement {
     return regex.test(str);
   }
 }
-customElements.get("wj-relative-time") || window.customElements.define("wj-relative-time", RelativeTime);
+WJElement.define("wj-relative-time", RelativeTime);
 export {
-  RelativeTime
+  RelativeTime as default
 };