@hotosm/ui 0.2.0-b2 → 0.2.0-b4

package/components/icons.ts

@@ -0,0 +1,84 @@
+//
+// Bundled icons hardcoded into hotosm/ui.
+// They are a subset of used Shoelace icons (which use Bootstrap icons)
+//
+
+import type { IconLibraryResolver } from "@shoelace-style/shoelace/dist/components/icon/library";
+import { registerIconLibrary } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';
+
+const icons = {
+  list: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+    </svg>
+  `,
+  'info-circle': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+    </svg>
+  `,
+  'arrow-counterclockwise': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+      <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+    </svg>
+  `,
+  'arrow-clockwise': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+    </svg>
+  `,
+  'type-bold': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+      <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+    </svg>
+  `,
+  'type-italic': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+      <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+    </svg>
+  `,
+  'type-underline': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
+      <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
+    </svg>
+  `,
+  'justify-left': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify-left" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+    </svg>
+  `,
+  justify: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+    </svg>
+  `,
+  'justify-right': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify-right" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+    </svg>
+  `,
+  'person-circle': `
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+      <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+      <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+    </svg>  
+  `
+};
+
+const libraryResolver: IconLibraryResolver = (name: string) => {
+    if (name in icons) {
+        return `data:image/svg+xml,${encodeURIComponent(icons[name as keyof typeof icons])}`;
+    }
+    return '';
+}
+
+function registerBundledIcons() {
+    registerIconLibrary('bundled', {
+        resolver: libraryResolver,
+    });
+}
+
+export default registerBundledIcons;

package/components/index.d.ts

@@ -1,4 +1,127 @@
-export { default as Button } from './Button';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
+import SlAnimation from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
+import SlAvatar from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
+import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
+import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
+import SlCard from '@shoelace-style/shoelace/dist/components/card/card.component.js';
+import SlCarousel from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
+import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
+import SlColorPicker from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
+import SlCopyButton from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
+import SlDetails from '@shoelace-style/shoelace/dist/components/details/details.component.js';
+import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
+import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
+import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
+import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
+import SlFormatDate from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
+import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
+import SlIconButton from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
+import SlImageComparer from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
+import SlInclude from '@shoelace-style/shoelace/dist/components/include/include.component.js';
+import SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js';
+import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
+import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
+import SlOption from '@shoelace-style/shoelace/dist/components/option/option.component.js';
+import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
+import SlProgressBar from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
+import SlProgressRing from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
+import SlQRCode from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
+import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
+import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
+import SlRange from '@shoelace-style/shoelace/dist/components/range/range.component.js';
+import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
+import SlResizeObserver from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
+import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.component.js';
+import SlSkeleton from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
+import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
+import SlSwitch from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
+import SlTab from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
+import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
+import SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
+import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
+import SlTextarea from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
+import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
+import SlTree from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
+import SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
+import SlVisuallyHidden from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
+import HotHeader from './header/header';
+import HotToolbar from './toolbar/toolbar';
+import HotTracking from './tracking/tracking';
+declare global {
+    interface HTMLElementTagNameMap {
+        'hot-alert': SlAlert;
+        'hot-animated-image': SlAnimatedImage;
+        'hot-animation': SlAnimation;
+        'hot-avatar': SlAvatar;
+        'hot-badge': SlBadge;
+        'hot-breadcrumb': SlBreadcrumb;
+        'hot-breadcrumb-item': SlBreadcrumbItem;
+        'hot-button': SlButton;
+        'hot-button-group': SlButtonGroup;
+        'hot-card': SlCard;
+        'hot-carousel': SlCarousel;
+        'hot-carousel-item': SlCarouselItem;
+        'hot-checkbox': SlCheckbox;
+        'hot-color-picker': SlColorPicker;
+        'hot-copy-button': SlCopyButton;
+        'hot-details': SlDetails;
+        'hot-dialog': SlDialog;
+        'hot-divider': SlDivider;
+        'hot-drawer': SlDrawer;
+        'hot-dropdown': SlDropdown;
+        'hot-format-bytes': SlFormatBytes;
+        'hot-format-date': SlFormatDate;
+        'hot-format-number': SlFormatNumber;
+        'hot-icon': SlIcon;
+        'hot-icon-button': SlIconButton;
+        'hot-image-comparer': SlImageComparer;
+        'hot-include': SlInclude;
+        'hot-input': SlInput;
+        'hot-menu': SlMenu;
+        'hot-menu-item': SlMenuItem;
+        'hot-menu-label': SlMenuLabel;
+        'hot-mutation-observer': SlMutationObserver;
+        'hot-option': SlOption;
+        'hot-popup': SlPopup;
+        'hot-progress-bar': SlProgressBar;
+        'hot-progress-ring': SlProgressRing;
+        'hot-qrcode': SlQRCode;
+        'hot-radio': SlRadio;
+        'hot-radio-button': SlRadioButton;
+        'hot-radio-group': SlRadioGroup;
+        'hot-range': SlRange;
+        'hot-rating': SlRating;
+        'hot-relative-time': SlRelativeTime;
+        'hot-resize-observer': SlResizeObserver;
+        'hot-select': SlSelect;
+        'hot-skeleton': SlSkeleton;
+        'hot-spinner': SlSpinner;
+        'hot-split-panel': SlSplitPanel;
+        'hot-switch': SlSwitch;
+        'hot-tab': SlTab;
+        'hot-tab-group': SlTabGroup;
+        'hot-tab-panel': SlTabPanel;
+        'hot-tag': SlTag;
+        'hot-textarea': SlTextarea;
+        'hot-tooltip': SlTooltip;
+        'hot-tree': SlTree;
+        'hot-tree-item': SlTreeItem;
+        'hot-visually-hidden': SlVisuallyHidden;
+        'hot-header': HotHeader;
+        'hot-toolbar': HotToolbar;
+        'hot-tracking': HotTracking;
+    }
+}
+export { SlAlert, SlAnimatedImage, SlAnimation, SlAvatar, SlBadge, SlBreadcrumb, SlBreadcrumbItem, SlButton, SlButtonGroup, SlCard, SlCarousel, SlCarouselItem, SlCheckbox, SlColorPicker, SlCopyButton, SlDetails, SlDialog, SlDivider, SlDrawer, SlDropdown, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuItem, SlMenuLabel, SlMutationObserver, SlOption, SlPopup, SlProgressBar, SlProgressRing, SlQRCode, SlRadio, SlRadioButton, SlRadioGroup, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlSelect, SlSkeleton, SlSpinner, SlSplitPanel, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, SlTree, SlTreeItem, SlVisuallyHidden, HotHeader, HotToolbar, HotTracking, };

package/components/index.js

@@ -1,6 +1,127 @@
 // Index to import all components together
 // import '@hotosm/ui/components';
-export { default as Button } from './Button';
-export { default as Header } from './Header';
-export { default as Toolbar } from './Toolbar';
-export { default as Tracking } from './Tracking';
+// Default Shoelace exports
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
+import SlAnimation from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
+import SlAvatar from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
+import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
+import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
+import SlCard from '@shoelace-style/shoelace/dist/components/card/card.component.js';
+import SlCarousel from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
+import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
+import SlColorPicker from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
+import SlCopyButton from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
+import SlDetails from '@shoelace-style/shoelace/dist/components/details/details.component.js';
+import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
+import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
+import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
+import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
+import SlFormatDate from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
+import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
+import SlIconButton from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
+import SlImageComparer from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
+import SlInclude from '@shoelace-style/shoelace/dist/components/include/include.component.js';
+import SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js';
+import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
+import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
+import SlOption from '@shoelace-style/shoelace/dist/components/option/option.component.js';
+import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
+import SlProgressBar from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
+import SlProgressRing from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
+import SlQRCode from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
+import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
+import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
+import SlRange from '@shoelace-style/shoelace/dist/components/range/range.component.js';
+import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
+import SlResizeObserver from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
+import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.component.js';
+import SlSkeleton from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
+import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
+import SlSwitch from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
+import SlTab from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
+import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
+import SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
+import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
+import SlTextarea from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
+import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
+import SlTree from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
+import SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
+import SlVisuallyHidden from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
+// Custom composite components
+import HotHeader from './header/header';
+import HotToolbar from './toolbar/toolbar';
+import HotTracking from './tracking/tracking';
+// Define web component names for Shoelace components
+SlAlert.define('hot-alert');
+SlAnimatedImage.define('hot-animated-image');
+SlAnimation.define('hot-animation');
+SlAvatar.define('hot-avatar');
+SlBadge.define('hot-badge');
+SlBreadcrumb.define('hot-breadcrumb');
+SlBreadcrumbItem.define('hot-breadcrumb-item');
+SlButton.define('hot-button');
+SlButtonGroup.define('hot-button-group');
+SlCard.define('hot-card');
+SlCarousel.define('hot-carousel');
+SlCarouselItem.define('hot-carousel-item');
+SlCheckbox.define('hot-checkbox');
+SlColorPicker.define('hot-color-picker');
+SlCopyButton.define('hot-copy-button');
+SlDetails.define('hot-details');
+SlDialog.define('hot-dialog');
+SlDivider.define('hot-divider');
+SlDrawer.define('hot-drawer');
+SlDropdown.define('hot-dropdown');
+SlFormatBytes.define('hot-format-bytes');
+SlFormatDate.define('hot-format-date');
+SlFormatNumber.define('hot-format-number');
+SlIcon.define('hot-icon');
+SlIconButton.define('hot-icon-button');
+SlImageComparer.define('hot-image-comparer');
+SlInclude.define('hot-include');
+SlInput.define('hot-input');
+SlMenu.define('hot-menu');
+SlMenuItem.define('hot-menu-item');
+SlMenuLabel.define('hot-menu-label');
+SlMutationObserver.define('hot-mutation-observer');
+SlOption.define('hot-option');
+SlPopup.define('hot-popup');
+SlProgressBar.define('hot-progress-bar');
+SlProgressRing.define('hot-progress-ring');
+SlQRCode.define('hot-qr-code');
+SlRadio.define('hot-radio');
+SlRadioButton.define('hot-radio-button');
+SlRadioGroup.define('hot-radio-group');
+SlRange.define('hot-range');
+SlRating.define('hot-rating');
+SlRelativeTime.define('hot-relative-time');
+SlResizeObserver.define('hot-resize-observer');
+SlSelect.define('hot-select');
+SlSkeleton.define('hot-skeleton');
+SlSpinner.define('hot-spinner');
+SlSplitPanel.define('hot-split-panel');
+SlSwitch.define('hot-switch');
+SlTab.define('hot-tab');
+SlTabGroup.define('hot-tab-group');
+SlTabPanel.define('hot-tab-panel');
+SlTag.define('hot-tag');
+SlTextarea.define('hot-textarea');
+SlTooltip.define('hot-tooltip');
+SlTree.define('hot-tree');
+SlTreeItem.define('hot-tree-item');
+SlVisuallyHidden.define('hot-visually-hidden');
+export { SlAlert, SlAnimatedImage, SlAnimation, SlAvatar, SlBadge, SlBreadcrumb, SlBreadcrumbItem, SlButton, SlButtonGroup, SlCard, SlCarousel, SlCarouselItem, SlCheckbox, SlColorPicker, SlCopyButton, SlDetails, SlDialog, SlDivider, SlDrawer, SlDropdown, SlFormatBytes, SlFormatDate, SlFormatNumber, SlIcon, SlIconButton, SlImageComparer, SlInclude, SlInput, SlMenu, SlMenuItem, SlMenuLabel, SlMutationObserver, SlOption, SlPopup, SlProgressBar, SlProgressRing, SlQRCode, SlRadio, SlRadioButton, SlRadioGroup, SlRange, SlRating, SlRelativeTime, SlResizeObserver, SlSelect, SlSkeleton, SlSpinner, SlSplitPanel, SlSwitch, SlTab, SlTabGroup, SlTabPanel, SlTag, SlTextarea, SlTooltip, SlTree, SlTreeItem, SlVisuallyHidden, 
+// Custom composite components
+HotHeader, HotToolbar, HotTracking, };

package/components/index.ts

@@ -0,0 +1,259 @@
+// Index to import all components together
+// import '@hotosm/ui/components';
+
+// Default Shoelace exports
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
+import SlAnimatedImage from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
+import SlAnimation from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
+import SlAvatar from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
+import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
+import SlBreadcrumb from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
+import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
+import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js';
+import SlButtonGroup from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
+import SlCard from '@shoelace-style/shoelace/dist/components/card/card.component.js';
+import SlCarousel from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
+import SlCarouselItem from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
+import SlCheckbox from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
+import SlColorPicker from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
+import SlCopyButton from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
+import SlDetails from '@shoelace-style/shoelace/dist/components/details/details.component.js';
+import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
+import SlDivider from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
+import SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
+import SlDropdown from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
+import SlFormatBytes from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
+import SlFormatDate from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
+import SlFormatNumber from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
+import SlIcon from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
+import SlIconButton from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
+import SlImageComparer from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
+import SlInclude from '@shoelace-style/shoelace/dist/components/include/include.component.js';
+import SlInput from '@shoelace-style/shoelace/dist/components/input/input.component.js';
+import SlMenu from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
+import SlMenuItem from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
+import SlMenuLabel from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
+import SlMutationObserver from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
+import SlOption from '@shoelace-style/shoelace/dist/components/option/option.component.js';
+import SlPopup from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
+import SlProgressBar from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
+import SlProgressRing from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
+import SlQRCode from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
+import SlRadio from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
+import SlRadioButton from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
+import SlRadioGroup from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
+import SlRange from '@shoelace-style/shoelace/dist/components/range/range.component.js';
+import SlRating from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
+import SlRelativeTime from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
+import SlResizeObserver from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
+import SlSelect from '@shoelace-style/shoelace/dist/components/select/select.component.js';
+import SlSkeleton from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
+import SlSpinner from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
+import SlSplitPanel from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
+import SlSwitch from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
+import SlTab from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
+import SlTabGroup from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
+import SlTabPanel from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
+import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
+import SlTextarea from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
+import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
+import SlTree from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
+import SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
+import SlVisuallyHidden from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
+
+// Custom composite components
+import HotHeader from './header/header';
+import HotToolbar from './toolbar/toolbar';
+import HotTracking from './tracking/tracking';
+
+// Define web component names for Shoelace components
+SlAlert.define('hot-alert');
+SlAnimatedImage.define('hot-animated-image');
+SlAnimation.define('hot-animation');
+SlAvatar.define('hot-avatar');
+SlBadge.define('hot-badge');
+SlBreadcrumb.define('hot-breadcrumb');
+SlBreadcrumbItem.define('hot-breadcrumb-item');
+SlButton.define('hot-button');
+SlButtonGroup.define('hot-button-group');
+SlCard.define('hot-card');
+SlCarousel.define('hot-carousel');
+SlCarouselItem.define('hot-carousel-item');
+SlCheckbox.define('hot-checkbox');
+SlColorPicker.define('hot-color-picker');
+SlCopyButton.define('hot-copy-button');
+SlDetails.define('hot-details');
+SlDialog.define('hot-dialog');
+SlDivider.define('hot-divider');
+SlDrawer.define('hot-drawer');
+SlDropdown.define('hot-dropdown');
+SlFormatBytes.define('hot-format-bytes');
+SlFormatDate.define('hot-format-date');
+SlFormatNumber.define('hot-format-number');
+SlIcon.define('hot-icon');
+SlIconButton.define('hot-icon-button');
+SlImageComparer.define('hot-image-comparer');
+SlInclude.define('hot-include');
+SlInput.define('hot-input');
+SlMenu.define('hot-menu');
+SlMenuItem.define('hot-menu-item');
+SlMenuLabel.define('hot-menu-label');
+SlMutationObserver.define('hot-mutation-observer');
+SlOption.define('hot-option');
+SlPopup.define('hot-popup');
+SlProgressBar.define('hot-progress-bar');
+SlProgressRing.define('hot-progress-ring');
+SlQRCode.define('hot-qr-code');
+SlRadio.define('hot-radio');
+SlRadioButton.define('hot-radio-button');
+SlRadioGroup.define('hot-radio-group');
+SlRange.define('hot-range');
+SlRating.define('hot-rating');
+SlRelativeTime.define('hot-relative-time');
+SlResizeObserver.define('hot-resize-observer');
+SlSelect.define('hot-select');
+SlSkeleton.define('hot-skeleton');
+SlSpinner.define('hot-spinner');
+SlSplitPanel.define('hot-split-panel');
+SlSwitch.define('hot-switch');
+SlTab.define('hot-tab');
+SlTabGroup.define('hot-tab-group');
+SlTabPanel.define('hot-tab-panel');
+SlTag.define('hot-tag');
+SlTextarea.define('hot-textarea');
+SlTooltip.define('hot-tooltip');
+SlTree.define('hot-tree');
+SlTreeItem.define('hot-tree-item');
+SlVisuallyHidden.define('hot-visually-hidden');
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'hot-alert': SlAlert;
+        'hot-animated-image': SlAnimatedImage;
+        'hot-animation': SlAnimation;
+        'hot-avatar': SlAvatar;
+        'hot-badge': SlBadge;
+        'hot-breadcrumb': SlBreadcrumb;
+        'hot-breadcrumb-item': SlBreadcrumbItem;
+        'hot-button': SlButton;
+        'hot-button-group': SlButtonGroup;
+        'hot-card': SlCard;
+        'hot-carousel': SlCarousel;
+        'hot-carousel-item': SlCarouselItem;
+        'hot-checkbox': SlCheckbox;
+        'hot-color-picker': SlColorPicker;
+        'hot-copy-button': SlCopyButton;
+        'hot-details': SlDetails;
+        'hot-dialog': SlDialog;
+        'hot-divider': SlDivider;
+        'hot-drawer': SlDrawer;
+        'hot-dropdown': SlDropdown;
+        'hot-format-bytes': SlFormatBytes;
+        'hot-format-date': SlFormatDate;
+        'hot-format-number': SlFormatNumber;
+        'hot-icon': SlIcon;
+        'hot-icon-button': SlIconButton;
+        'hot-image-comparer': SlImageComparer;
+        'hot-include': SlInclude;
+        'hot-input': SlInput;
+        'hot-menu': SlMenu;
+        'hot-menu-item': SlMenuItem;
+        'hot-menu-label': SlMenuLabel;
+        'hot-mutation-observer': SlMutationObserver;
+        'hot-option': SlOption;
+        'hot-popup': SlPopup;
+        'hot-progress-bar': SlProgressBar;
+        'hot-progress-ring': SlProgressRing;
+        'hot-qrcode': SlQRCode;
+        'hot-radio': SlRadio;
+        'hot-radio-button': SlRadioButton;
+        'hot-radio-group': SlRadioGroup;
+        'hot-range': SlRange;
+        'hot-rating': SlRating;
+        'hot-relative-time': SlRelativeTime;
+        'hot-resize-observer': SlResizeObserver;
+        'hot-select': SlSelect;
+        'hot-skeleton': SlSkeleton;
+        'hot-spinner': SlSpinner;
+        'hot-split-panel': SlSplitPanel;
+        'hot-switch': SlSwitch;
+        'hot-tab': SlTab;
+        'hot-tab-group': SlTabGroup;
+        'hot-tab-panel': SlTabPanel;
+        'hot-tag': SlTag;
+        'hot-textarea': SlTextarea;
+        'hot-tooltip': SlTooltip;
+        'hot-tree': SlTree;
+        'hot-tree-item': SlTreeItem;
+        'hot-visually-hidden': SlVisuallyHidden;
+        // Custom composite components
+        'hot-header': HotHeader;
+        'hot-toolbar': HotToolbar;
+        'hot-tracking': HotTracking;
+    }
+}
+
+export {
+    SlAlert,
+    SlAnimatedImage,
+    SlAnimation,
+    SlAvatar,
+    SlBadge,
+    SlBreadcrumb,
+    SlBreadcrumbItem,
+    SlButton,
+    SlButtonGroup,
+    SlCard,
+    SlCarousel,
+    SlCarouselItem,
+    SlCheckbox,
+    SlColorPicker,
+    SlCopyButton,
+    SlDetails,
+    SlDialog,
+    SlDivider,
+    SlDrawer,
+    SlDropdown,
+    SlFormatBytes,
+    SlFormatDate,
+    SlFormatNumber,
+    SlIcon,
+    SlIconButton,
+    SlImageComparer,
+    SlInclude,
+    SlInput,
+    SlMenu,
+    SlMenuItem,
+    SlMenuLabel,
+    SlMutationObserver,
+    SlOption,
+    SlPopup,
+    SlProgressBar,
+    SlProgressRing,
+    SlQRCode,
+    SlRadio,
+    SlRadioButton,
+    SlRadioGroup,
+    SlRange,
+    SlRating,
+    SlRelativeTime,
+    SlResizeObserver,
+    SlSelect,
+    SlSkeleton,
+    SlSpinner,
+    SlSplitPanel,
+    SlSwitch,
+    SlTab,
+    SlTabGroup,
+    SlTabPanel,
+    SlTag,
+    SlTextarea,
+    SlTooltip,
+    SlTree,
+    SlTreeItem,
+    SlVisuallyHidden,
+    // Custom composite components
+    HotHeader,
+    HotToolbar,
+    HotTracking,
+}

package/components/{Toolbar.d.ts → toolbar/toolbar.d.ts}

@@ -1,6 +1,4 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';