@hotosm/ui 0.2.0-b3 → 0.2.0-b5

package/components/index.ts

@@ -0,0 +1,265 @@
+// Index to import all components together
+
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
+
+// 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 HotLogo from './logo/logo';
+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 {
+    // setBasePath helper to use the UI behind proxies etc
+    setBasePath,
+    // Standard shoelace components
+    SlAlert as Alert,
+    SlAnimatedImage as AnimatedImage,
+    SlAnimation as Animation,
+    SlAvatar as Avatar,
+    SlBadge as Badge,
+    SlBreadcrumb as Breadcrumb,
+    SlBreadcrumbItem as BreadcrumbItem,
+    SlButton as Button,
+    SlButtonGroup as ButtonGroup,
+    SlCard as Card,
+    SlCarousel as Carousel,
+    SlCarouselItem as CarouselItem,
+    SlCheckbox as Checkbox,
+    SlColorPicker as ColorPicker,
+    SlCopyButton as CopyButton,
+    SlDetails as Details,
+    SlDialog as Dialog,
+    SlDivider as Divider,
+    SlDrawer as Drawer,
+    SlDropdown as Dropdown,
+    SlFormatBytes as FormatBytes,
+    SlFormatDate as FormatDate,
+    SlFormatNumber as FormatNumber,
+    SlIcon as Icon,
+    SlIconButton as IconButton,
+    SlImageComparer as ImageComparer,
+    SlInclude as Include,
+    SlInput as Input,
+    SlMenu as Menu,
+    SlMenuItem as MenuItem,
+    SlMenuLabel as MenuLabel,
+    SlMutationObserver as MutationObserver,
+    SlOption as Option,
+    SlPopup as Popup,
+    SlProgressBar as ProgressBar,
+    SlProgressRing as ProgressRing,
+    SlQRCode as QRCode,
+    SlRadio as Radio,
+    SlRadioButton as RadioButton,
+    SlRadioGroup as RadioGroup,
+    SlRange as Range,
+    SlRating as Rating,
+    SlRelativeTime as RelativeTime,
+    SlResizeObserver as ResizeObserver,
+    SlSelect as Select,
+    SlSkeleton as Skeleton,
+    SlSpinner as Spinner,
+    SlSplitPanel as SplitPanel,
+    SlSwitch as Switch,
+    SlTab as Tab,
+    SlTabGroup as TabGroup,
+    SlTabPanel as TabPanel,
+    SlTag as Tag,
+    SlTextarea as Textarea,
+    SlTooltip as Tooltip,
+    SlTree as Tree,
+    SlTreeItem as TreeItem,
+    SlVisuallyHidden as VisuallyHidden,
+    // Custom composite components
+    HotHeader as Header,
+    HotLogo as Logo,
+    HotToolbar as Toolbar,
+    HotTracking as Tracking,
+}

package/components/logo/logo.styles.ts

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+
+export default css`
+  .logo {
+    line-height: 0;
+    height: var(--sl-spacing-3x-large)
+  }
+`

package/components/logo/logo.ts

@@ -0,0 +1,37 @@
+
+import HotLogoIconSVG from '../../theme/logo/hot-logo-icon.svg';
+import HotLogoTextSVG from '../../theme/logo/hot-logo-text.svg';
+
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import styles from './logo.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+export class Logo extends LitElement {
+
+  static styles: CSSResultGroup = [styles];
+
+  name = 'hot-logo';
+
+  @property({ type: Boolean })
+  accessor iconOnly = false;
+
+  @property({ type: Boolean })
+  accessor textOnly = false;
+
+  protected render() {
+
+    return html`
+      <div class="logo">
+        ${ !this.textOnly ? html`<img src=${HotLogoIconSVG} />` : null }
+        ${ !this.iconOnly ? html`<img src=${HotLogoTextSVG} />` : null }
+      </div>
+    `;
+  }
+
+}
+
+export default Logo;
+
+// Define web component
+customElements.define("hot-logo", Logo);

package/components/react/Header.ts

@@ -0,0 +1,16 @@
+// @ts-ignore
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Header from '../header/header';
+
+const reactWrapper = createComponent({
+  tagName: 'hot-header',
+  elementClass: Header,
+  react: React,
+  events: {
+    onLogin: 'login',
+  },
+  displayName: 'HotHeader'
+});
+
+export default reactWrapper;

package/{react/Header.js → components/react/Logo.ts}

@@ -1,11 +1,15 @@
+
 // @ts-ignore
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import Header from '../components/Header';
+import Logo from '../logo/logo';
+
 const reactWrapper = createComponent({
-    tagName: 'hot-header',
-    elementClass: Header,
-    react: React,
-    displayName: 'hot-header'
+  tagName: 'hot-logo',
+  elementClass: Logo,
+  react: React,
+  events: {},
+  displayName: 'HotLogo'
 });
+
 export default reactWrapper;

package/components/react/Toolbar.ts

@@ -0,0 +1,24 @@
+
+// @ts-ignore
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Toolbar from '../toolbar/toolbar';
+
+const reactWrapper = createComponent({
+  tagName: 'hot-toolbar',
+  elementClass: Toolbar,
+  react: React,
+  events: {
+    onUndoClick: 'undo',
+    onRedoClick: 'redo',
+    onBoldClick: 'bold',
+    onItalicClick: 'italic',
+    onUnderlineClick: 'underline',
+    onLeftalignClick: 'leftalign',
+    onCenteralignClick: 'centeralign',
+    onRightalignClick: 'rightalign',
+  },
+  displayName: 'HotToolbar'
+});
+
+export default reactWrapper;

package/components/react/Tracking.ts

@@ -0,0 +1,17 @@
+// @ts-ignore
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Tracking from '../tracking/tracking';
+
+const reactWrapper = createComponent({
+  tagName: 'hot-tracking',
+  elementClass: Tracking,
+  react: React,
+  events: {
+    onAgree: 'agree',
+    onDisagree: 'disagree',
+  },
+  displayName: 'HotTracking'
+});
+
+export default reactWrapper;

package/components/react/index.ts

@@ -0,0 +1,63 @@
+export { default as Header } from './Header';
+export { default as Toolbar } from './Toolbar';
+export { default as Tracking } from './Tracking';
+export { default as Logo } from './Logo';
+
+export { default as Alert } from '@shoelace-style/shoelace/dist/react/alert/index.js';
+export { default as AnimatedImage } from '@shoelace-style/shoelace/dist/react/animated-image/index.js';
+export { default as Animation } from '@shoelace-style/shoelace/dist/react/animation/index.js';
+export { default as Avatar } from '@shoelace-style/shoelace/dist/react/avatar/index.js';
+export { default as Badge } from '@shoelace-style/shoelace/dist/react/badge/index.js';
+export { default as Breadcrumb } from '@shoelace-style/shoelace/dist/react/breadcrumb/index.js';
+export { default as BreadcrumbItem } from '@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js';
+export { default as Button } from '@shoelace-style/shoelace/dist/react/button/index.js';
+export { default as ButtonGroup } from '@shoelace-style/shoelace/dist/react/button-group/index.js';
+export { default as Card } from '@shoelace-style/shoelace/dist/react/card/index.js';
+export { default as Carousel } from '@shoelace-style/shoelace/dist/react/carousel/index.js';
+export { default as CarouselItem } from '@shoelace-style/shoelace/dist/react/carousel-item/index.js';
+export { default as Checkbox } from '@shoelace-style/shoelace/dist/react/checkbox/index.js';
+export { default as ColorPicker } from '@shoelace-style/shoelace/dist/react/color-picker/index.js';
+export { default as CopyButton } from '@shoelace-style/shoelace/dist/react/copy-button/index.js';
+export { default as Details } from '@shoelace-style/shoelace/dist/react/details/index.js';
+export { default as Dialog } from '@shoelace-style/shoelace/dist/react/dialog/index.js';
+export { default as Divider } from '@shoelace-style/shoelace/dist/react/divider/index.js';
+export { default as Drawer } from '@shoelace-style/shoelace/dist/react/drawer/index.js';
+export { default as Dropdown } from '@shoelace-style/shoelace/dist/react/dropdown/index.js';
+export { default as FormatBytes } from '@shoelace-style/shoelace/dist/react/format-bytes/index.js';
+export { default as FormatDate } from '@shoelace-style/shoelace/dist/react/format-date/index.js';
+export { default as FormatNumber } from '@shoelace-style/shoelace/dist/react/format-number/index.js';
+export { default as Icon } from '@shoelace-style/shoelace/dist/react/icon/index.js';
+export { default as IconButton } from '@shoelace-style/shoelace/dist/react/icon-button/index.js';
+export { default as ImageComparer } from '@shoelace-style/shoelace/dist/react/image-comparer/index.js';
+export { default as Include } from '@shoelace-style/shoelace/dist/react/include/index.js';
+export { default as Input } from '@shoelace-style/shoelace/dist/react/input/index.js';
+export { default as Menu } from '@shoelace-style/shoelace/dist/react/menu/index.js';
+export { default as MenuItem } from '@shoelace-style/shoelace/dist/react/menu-item/index.js';
+export { default as MenuLabel } from '@shoelace-style/shoelace/dist/react/menu-label/index.js';
+export { default as MutationObserver } from '@shoelace-style/shoelace/dist/react/mutation-observer/index.js';
+export { default as Option } from '@shoelace-style/shoelace/dist/react/option/index.js';
+export { default as Popup } from '@shoelace-style/shoelace/dist/react/popup/index.js';
+export { default as ProgressBar } from '@shoelace-style/shoelace/dist/react/progress-bar/index.js';
+export { default as ProgressRing } from '@shoelace-style/shoelace/dist/react/progress-ring/index.js';
+export { default as QRCode } from '@shoelace-style/shoelace/dist/react/qr-code/index.js';
+export { default as Radio } from '@shoelace-style/shoelace/dist/react/radio/index.js';
+export { default as RadioButton } from '@shoelace-style/shoelace/dist/react/radio-button/index.js';
+export { default as RadioGroup } from '@shoelace-style/shoelace/dist/react/radio-group/index.js';
+export { default as Range } from '@shoelace-style/shoelace/dist/react/range/index.js';
+export { default as Rating } from '@shoelace-style/shoelace/dist/react/rating/index.js';
+export { default as RelativeTime } from '@shoelace-style/shoelace/dist/react/relative-time/index.js';
+export { default as ResizeObserver } from '@shoelace-style/shoelace/dist/react/resize-observer/index.js';
+export { default as Select } from '@shoelace-style/shoelace/dist/react/select/index.js';
+export { default as Skeleton } from '@shoelace-style/shoelace/dist/react/skeleton/index.js';
+export { default as Spinner } from '@shoelace-style/shoelace/dist/react/spinner/index.js';
+export { default as SplitPanel } from '@shoelace-style/shoelace/dist/react/split-panel/index.js';
+export { default as Switch } from '@shoelace-style/shoelace/dist/react/switch/index.js';
+export { default as Tab } from '@shoelace-style/shoelace/dist/react/tab/index.js';
+export { default as TabGroup } from '@shoelace-style/shoelace/dist/react/tab-group/index.js';
+export { default as TabPanel } from '@shoelace-style/shoelace/dist/react/tab-panel/index.js';
+export { default as Tag } from '@shoelace-style/shoelace/dist/react/tag/index.js';
+export { default as Textarea } from '@shoelace-style/shoelace/dist/react/textarea/index.js';
+export { default as Tooltip } from '@shoelace-style/shoelace/dist/react/tooltip/index.js';
+export { default as Tree } from '@shoelace-style/shoelace/dist/react/tree/index.js';
+export { default as TreeItem } from '@shoelace-style/shoelace/dist/react/tree-item/index.js';
+export { default as VisuallyHidden } from '@shoelace-style/shoelace/dist/react/visually-hidden/index.js';

package/components/toolbar/toolbar.styles.ts

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+export default css`
+  .toolbar {
+  }
+`

package/components/toolbar/toolbar.ts

@@ -0,0 +1,171 @@
+import "../../theme/hot-sl.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";
+import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
+
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import styles from './toolbar.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+import registerBundledIcons from "../../components/icons";
+
+registerBundledIcons();
+
+export class Toolbar extends LitElement {
+
+  static styles: CSSResultGroup = [styles];
+
+  name = "hot-toolbar";
+
+  /** Change the position of the tooltips relative to buttons. */
+  @property({ type: String, attribute: "tooltip-position" })
+  accessor tooltipPosition =
+    "top";
+
+  protected render() {
+    return html`
+      <div class="toolbar">
+        ${this.renderButtonGroup("History", [
+          {
+            content: "Undo",
+            icon: "arrow-counterclockwise",
+            label: "Undo",
+            action: this.undo,
+          },
+          {
+            content: "Redo",
+            icon: "arrow-clockwise",
+            label: "Redo",
+            action: this.redo,
+          },
+        ])}
+        ${this.renderButtonGroup("Formatting", [
+          {
+            content: "Bold",
+            icon: "type-bold",
+            label: "Bold",
+            action: this.bold,
+          },
+          {
+            content: "Italic",
+            icon: "type-italic",
+            label: "Italic",
+            action: this.italic,
+          },
+          {
+            content: "Underline",
+            icon: "type-underline",
+            label: "Underline",
+            action: this.underline,
+          },
+        ])}
+        ${this.renderButtonGroup("Alignment", [
+          {
+            content: "Align Left",
+            icon: "justify-left",
+            label: "Align Left",
+            action: this.alignLeft,
+          },
+          {
+            content: "Align Center",
+            icon: "justify",
+            label: "Align Center",
+            action: this.alignCenter,
+          },
+          {
+            content: "Align Right",
+            icon: "justify-right",
+            label: "Align Right",
+            action: this.alignRight,
+          },
+        ])}
+      </div>
+    `;
+  }
+
+  private renderButtonGroup(
+    label: string,
+    buttons: Array<{
+      content: string;
+      icon: string;
+      label: string;
+      action?: (e: MouseEvent) => void;
+    }>
+  ) {
+    return html`
+      <sl-button-group label=${label}>
+        ${buttons.map((button) => this.renderButton(button))}
+      </sl-button-group>
+    `;
+  }
+
+  private renderButton({
+    content,
+    icon,
+    label,
+    action,
+  }: {
+    content: string;
+    icon: string;
+    label: string;
+    action?: (e: MouseEvent) => void;
+  }) {
+    return html`
+      <sl-tooltip content=${content} placement="${this.tooltipPosition}">
+        <sl-button @click=${action ?? (() => {})}
+          ><sl-icon library="bundled" name=${icon} label=${label}></sl-icon
+        ></sl-button>
+      </sl-tooltip>
+    `;
+  }
+
+  private readonly undo = (e: MouseEvent) => {
+    // As the original event is also named 'click'
+    // stop propagation of the original event
+    e.stopPropagation();
+    this.dispatchEvent(new Event("undo"));
+  };
+
+  private readonly redo = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("redo"));
+  };
+
+  private readonly bold = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("bold"));
+  };
+
+  private readonly italic = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("italic"));
+  };
+
+  private readonly underline = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("underline"));
+  };
+
+  private readonly alignLeft = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("leftalign"));
+  };
+
+  private readonly alignCenter = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("centeralign"));
+  };
+
+  private readonly alignRight = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("rightalign"));
+  };
+}
+
+export default Toolbar;
+
+// Define web component
+customElements.define("hot-toolbar", Toolbar);

package/components/tracking/tracking.styles.ts

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+
+export default css`
+  .tracking {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 80vw;
+    text-align: center;
+  }
+
+  .tracking--header {
+    font-weight: var(--sl-font-weight-bold);
+    font-size: var(--sl-font-size-large);
+    text-align: center;
+  }
+
+  .tracking--link {
+    color: var(--sl-color-primary-700);
+  }
+`