@paperless/core 0.1.0-alpha.92 → 0.1.0-alpha.95

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -1,24 +1,45 @@
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
 export class ContentSlider {
   constructor() {
     /**
      * Wether to hide the indicator on mobile
      */
     this.hideMobileIndicator = false;
+    /**
+     * Wether to disable dragging the content
+     */
+    this.disableDrag = false;
+    /**
+     * Wether to disable clicking the indicator scrolls content
+     */
+    this.disableIndicatorClick = false;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
     this._items = [];
+    this._dragging = false;
   }
   componentWillRender() {
     const items = this._el.querySelectorAll(':scope > *');
     this._items = Array.from(items);
   }
+  componentDidRender() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
   componentDidLoad() {
+    this._calculateWidth();
     this._calculateIndicator();
   }
   render() {
     return (h(Host, { class: "p-content-slider" },
-      h("div", { class: "content", ref: (el) => (this._contentRef = el), onScroll: () => this._handleScroll() },
-        h("slot", null)),
-      h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { active: i === this._visibleIndex }))))));
+      h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+          height: `${this._outerHeight}px`,
+        }, ref: (el) => (this._sliderRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e) },
+        h("div", { class: "inner-slider", ref: (ref) => (this._innerSliderRef = ref) },
+          h("slot", null))),
+      h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
   }
   _handleScroll() {
     if (this._scrollHandlerTimeout) {
@@ -26,6 +47,41 @@ export class ContentSlider {
     }
     this._scrollHandlerTimeout = setTimeout(() => this._calculateIndicator(), 200);
   }
+  _mouseDownHandler(e) {
+    if (this.disableDrag || this._dragging) {
+      return;
+    }
+    this._startX = e.offsetX - this._innerSliderRef.offsetLeft;
+    this._dragging = true;
+  }
+  _mouseMoveHandler(e) {
+    if (!e || !this._dragging || this.disableDrag) {
+      return;
+    }
+    e.preventDefault();
+    const x = e.offsetX;
+    this._innerSliderRef.style.left = `${x - this._startX}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    if (parseInt(this._innerSliderRef.style.left) > 0) {
+      this._innerSliderRef.style.left = '0px';
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
+      this._innerSliderRef.style.left = `${maxLeft}px`;
+    }
+  }
+  mouseUpHandler() {
+    this._dragging = false;
+  }
+  resizeHandler() {
+    this._innerSliderRef.style.left = '0px';
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
   _calculateIndicator() {
     for (let i = 0; i < this._items.length; i++) {
       const item = this._items[i];
@@ -37,16 +93,44 @@ export class ContentSlider {
         break;
       }
     }
-    console.log(this._visibleIndex);
   }
   _isVisible(el) {
-    if (!this._contentRef || !el) {
+    if (!this._el || !el) {
       return false;
     }
     const elRect = el.getBoundingClientRect();
-    const containerRect = this._el.getBoundingClientRect();
-    return (elRect.left > containerRect.left &&
-      elRect.right < containerRect.right);
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return (elRect.left >= sliderRect.left && elRect.right <= sliderRect.right);
+  }
+  _scrollTo(i) {
+    if (this.disableIndicatorClick) {
+      return;
+    }
+    const el = this._items[i];
+    if (i === 0) {
+      this._innerSliderRef.style.left = '0px';
+      this._calculateIndicator();
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.left = `-${centerOffset}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
   }
   static get is() { return "p-content-slider"; }
   static get encapsulation() { return "shadow"; }
@@ -74,10 +158,62 @@ export class ContentSlider {
       "attribute": "hide-mobile-indicator",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "disableDrag": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to disable dragging the content"
+      },
+      "attribute": "disable-drag",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableIndicatorClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to disable clicking the indicator scrolls content"
+      },
+      "attribute": "disable-indicator-click",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
-    "_visibleIndex": {}
+    "_visibleIndex": {},
+    "_outerHeight": {},
+    "_totalWidth": {},
+    "_dragging": {}
   }; }
   static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "mouseup",
+      "method": "mouseUpHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "resize",
+      "method": "resizeHandler",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
 }

package/dist/collection/components/molecules/pagination/pagination.component.css

@@ -1,3 +1,3 @@
 p-pagination {
   @apply flex;
-} .static{position:static!important}*{box-sizing:border-box}
+} .static{position:static!important}*{box-sizing:border-box}.static{position:static!important}*{box-sizing:border-box}

package/dist/collection/tailwind/shadows.js

@@ -1,7 +1,11 @@
 module.exports = {
-  1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
-  2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
-  3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
-  4: ['0px 0.3125rem 1rem rgba(0,24,98, 0.08)', '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)'],
-  5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    1: '0px 0.0625rem 0.05rem rgba(0,0,0, 0.5)',
+    2: '0px 0.0625rem 0.1125rem rgba(0,0,0, 0.65)',
+    3: '0px 0.0625rem 0.125rem rgba(0,0,0, 0.65)',
+    4: [
+        '0px 0.3125rem 1rem rgba(0,24,98, 0.08)',
+        '0px 0.0625rem 0.1875rem rgba(0,24,98, 0.13)',
+    ],
+    5: '0px 0.1875rem 1rem rgba(0,24,98, 0.3)',
+    transparent: 'transparent',
 };

package/dist/components/index.d.ts

@@ -1,46 +1,46 @@
 /* paperless custom elements */
-export { Accordion as PAccordion } from '../types/components/p-accordion/p-accordion';
-export { Avatar as PAvatar } from '../types/components/p-avatar/p-avatar';
-export { AvatarGroup as PAvatarGroup } from '../types/components/p-avatar-group/p-avatar-group';
-export { Button as PButton } from '../types/components/p-button/p-button';
-export { CardBody as PCardBody } from '../types/components/p-card-body/p-card-body';
-export { CardContainer as PCardContainer } from '../types/components/p-card-container/p-card-container';
-export { CardHeader as PCardHeader } from '../types/components/p-card-header/p-card-header';
-export { ContentSlider as PContentSlider } from '../types/components/p-content-slider/p-content-slider';
-export { Counter as PCounter } from '../types/components/p-counter/p-counter';
-export { Divider as PDivider } from '../types/components/p-divider/p-divider';
-export { Dropdown as PDropdown } from '../types/components/p-dropdown/p-dropdown';
-export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/p-dropdown-menu-container/p-dropdown-menu-container';
-export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/p-dropdown-menu-item/p-dropdown-menu-item';
-export { Helper as PHelper } from '../types/components/p-helper/p-helper';
-export { Icon as PIcon } from '../types/components/p-icon/p-icon';
-export { Illustration as PIllustration } from '../types/components/p-illustration/p-illustration';
-export { InfoPanel as PInfoPanel } from '../types/components/p-info-panel/p-info-panel';
-export { InputGroup as PInputGroup } from '../types/components/p-input-group/p-input-group';
-export { Layout as PLayout } from '../types/components/p-layout/p-layout';
-export { Loader as PLoader } from '../types/components/p-loader/p-loader';
-export { Modal as PModal } from '../types/components/p-modal/p-modal';
-export { ModalBackdrop as PModalBackdrop } from '../types/components/p-modal-backdrop/p-modal-backdrop';
-export { ModalBody as PModalBody } from '../types/components/p-modal-body/p-modal-body';
-export { ModalContainer as PModalContainer } from '../types/components/p-modal-container/p-modal-container';
-export { ModalFooter as PModalFooter } from '../types/components/p-modal-footer/p-modal-footer';
-export { ModalHeader as PModalHeader } from '../types/components/p-modal-header/p-modal-header';
-export { Navbar as PNavbar } from '../types/components/p-navbar/p-navbar';
-export { NavigationItem as PNavigationItem } from '../types/components/p-navigation-item/p-navigation-item';
-export { Pagination as PPagination } from '../types/components/p-pagination/p-pagination';
-export { PaginationItem as PPaginationItem } from '../types/components/p-pagination-item/p-pagination-item';
-export { Profile as PProfile } from '../types/components/p-profile/p-profile';
-export { SegmentContainer as PSegmentContainer } from '../types/components/p-segment-container/p-segment-container';
-export { SegmentItem as PSegmentItem } from '../types/components/p-segment-item/p-segment-item';
-export { SliderIndicator as PSliderIndicator } from '../types/components/p-slider-indicator/p-slider-indicator';
-export { Status as PStatus } from '../types/components/p-status/p-status';
-export { Stepper as PStepper } from '../types/components/p-stepper/p-stepper';
-export { StepperItem as PStepperItem } from '../types/components/p-stepper-item/p-stepper-item';
-export { StepperLine as PStepperLine } from '../types/components/p-stepper-line/p-stepper-line';
-export { TabGroup as PTabGroup } from '../types/components/p-tab-group/p-tab-group';
-export { TabItem as PTabItem } from '../types/components/p-tab-item/p-tab-item';
-export { Tag as PTag } from '../types/components/p-tag/p-tag';
-export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
+export { Accordion as PAccordion } from '../types/components/molecules/accordion/accordion.component';
+export { Avatar as PAvatar } from '../types/components/atoms/avatar/avatar.component';
+export { AvatarGroup as PAvatarGroup } from '../types/components/atoms/avatar-group/avatar-group.component';
+export { Button as PButton } from '../types/components/atoms/button/button.component';
+export { CardBody as PCardBody } from '../types/components/atoms/card-body/card-body.component';
+export { CardContainer as PCardContainer } from '../types/components/atoms/card-container/card-container.component';
+export { CardHeader as PCardHeader } from '../types/components/atoms/card-header/card-header.component';
+export { ContentSlider as PContentSlider } from '../types/components/molecules/content-slider/content-slider.component';
+export { Counter as PCounter } from '../types/components/atoms/counter/counter.component';
+export { Divider as PDivider } from '../types/components/atoms/divider/divider.component';
+export { Dropdown as PDropdown } from '../types/components/molecules/dropdown/dropdown.component';
+export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/atoms/dropdown-menu-container/dropdown-menu-container.component';
+export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/atoms/dropdown-menu-item/dropdown-menu-item.component';
+export { Helper as PHelper } from '../types/components/atoms/helper/helper.component';
+export { Icon as PIcon } from '../types/components/atoms/icon/icon.component';
+export { Illustration as PIllustration } from '../types/components/atoms/illustration/illustration.component';
+export { InfoPanel as PInfoPanel } from '../types/components/atoms/info-panel/info-panel.component';
+export { InputGroup as PInputGroup } from '../types/components/molecules/input-group/input-group.component';
+export { Layout as PLayout } from '../types/components/atoms/layout/layout.component';
+export { Loader as PLoader } from '../types/components/atoms/loader/loader.component';
+export { Modal as PModal } from '../types/components/organisms/modal/modal.component';
+export { ModalBackdrop as PModalBackdrop } from '../types/components/atoms/modal-backdrop/modal-backdrop.component';
+export { ModalBody as PModalBody } from '../types/components/atoms/modal-body/modal-body.component';
+export { ModalContainer as PModalContainer } from '../types/components/atoms/modal-container/modal-container.component';
+export { ModalFooter as PModalFooter } from '../types/components/atoms/modal-footer/modal-footer.component';
+export { ModalHeader as PModalHeader } from '../types/components/atoms/modal-header/modal-header.component';
+export { Navbar as PNavbar } from '../types/components/organisms/navbar/navbar.component';
+export { NavigationItem as PNavigationItem } from '../types/components/molecules/navigation-item/navigation-item.component';
+export { Pagination as PPagination } from '../types/components/molecules/pagination/pagination.component';
+export { PaginationItem as PPaginationItem } from '../types/components/atoms/pagination-item/pagination-item.component';
+export { Profile as PProfile } from '../types/components/molecules/profile/profile.component';
+export { SegmentContainer as PSegmentContainer } from '../types/components/atoms/segment-container/segment-container.component';
+export { SegmentItem as PSegmentItem } from '../types/components/atoms/segment-item/segment-item.component';
+export { SliderIndicator as PSliderIndicator } from '../types/components/atoms/slider-indicator/slider-indicator.component';
+export { Status as PStatus } from '../types/components/atoms/status/status.component';
+export { Stepper as PStepper } from '../types/components/molecules/stepper/stepper.component';
+export { StepperItem as PStepperItem } from '../types/components/atoms/stepper-item/stepper-item.component';
+export { StepperLine as PStepperLine } from '../types/components/atoms/stepper-line/stepper-line.component';
+export { TabGroup as PTabGroup } from '../types/components/atoms/tab-group/tab-group.component';
+export { TabItem as PTabItem } from '../types/components/atoms/tab-item/tab-item.component';
+export { Tag as PTag } from '../types/components/atoms/tag/tag.component';
+export { Tooltip as PTooltip } from '../types/components/atoms/tooltip/tooltip.component';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/p-card-container.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const cardContainerComponentCss = ".static{position:static!important}.flex{display:flex!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important}.shadow-4,.shadow-5{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow-5{--tw-shadow:0px 0.1875rem 1rem rgba(0,24,98,.3)!important;--tw-shadow-colored:0px 0.1875rem 1rem var(--tw-shadow-color)!important}.shadow-transparent{--tw-shadow-color:transparent!important;--tw-shadow:var(--tw-shadow-colored)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.375rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%}:host([hoverable]){cursor:pointer}:host([hoverable]:hover){--tw-shadow:0px 0.1875rem 1rem rgba(0,24,98,.3)!important;--tw-shadow-colored:0px 0.1875rem 1rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}:host([shadow=false]){--tw-shadow-color:transparent!important;--tw-shadow:var(--tw-shadow-colored)!important}";
+const cardContainerComponentCss = ".static{position:static!important}.flex{display:flex!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.drop-shadow-4{--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important}.drop-shadow-4,.drop-shadow-5{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.drop-shadow-5{--tw-drop-shadow:drop-shadow(0px 0.1875rem 1rem rgba(0,24,98,.3))!important}.drop-shadow-transparent{--tw-drop-shadow:drop-shadow(transparent)!important}.drop-shadow-transparent,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13))!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.375rem;display:flex;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important;flex-direction:column;width:100%}:host([hoverable]){cursor:pointer}:host([hoverable]:hover){--tw-drop-shadow:drop-shadow(0px 0.1875rem 1rem rgba(0,24,98,.3))!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}:host([shadow=false]){--tw-drop-shadow:drop-shadow(transparent)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
 
 const CardContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/p-card-header.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './icon.component.js';
 
-const cardHeaderComponentCss = ".static{position:static!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.gap-3{gap:.75rem!important}.border-b{border-bottom-width:1px!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}*{box-sizing:border-box}p-card-header{--tw-text-opacity:1;--tw-border-opacity:1!important;align-items:center;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important;border-bottom-width:1px!important;color:rgb(128 130 158/var(--tw-text-opacity));display:flex;gap:.75rem;margin-left:1.5rem;margin-right:1.5rem;padding-bottom:.75rem;padding-top:.75rem}p-card-header .title{align-items:center;display:flex;font-weight:600}p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(218 230 240/var(--tw-text-opacity));margin-left:.5rem}p-card-container.has-hover:hover p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
+const cardHeaderComponentCss = ".static{position:static!important}.mx-6{margin-left:1.5rem!important;margin-right:1.5rem!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.border-b{border-bottom-width:1px!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}*{box-sizing:border-box}p-card-header{--tw-text-opacity:1;--tw-border-opacity:1!important;align-items:center;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important;border-bottom-width:1px!important;color:rgb(128 130 158/var(--tw-text-opacity));display:flex;gap:.75rem;margin-left:1.5rem;margin-right:1.5rem;padding-bottom:.75rem;padding-top:.75rem}p-card-header .title{--tw-text-opacity:1;align-items:center;color:rgb(81 83 107/var(--tw-text-opacity));display:flex;font-weight:600}p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(218 230 240/var(--tw-text-opacity));margin-left:.5rem}p-card-container.has-hover:hover p-card-header .title>p-icon{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
 const CardHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/p-content-slider.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './slider-indicator.component.js';
 
-const contentSliderComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.-mx-4{margin-left:-1rem!important;margin-right:-1rem!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.gap-2{gap:.5rem!important}.overflow-auto{overflow:auto!important}.px-4{padding-left:1rem!important;padding-right:1rem!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;margin-left:-1rem;margin-right:-1rem;overflow:hidden}@media (min-width:64rem){:host{margin-left:0;margin-right:0}}:host .content{display:flex;flex-wrap:nowrap;gap:.5rem;overflow:auto;padding-left:1rem;padding-right:1rem}@media (min-width:40rem){:host .content{gap:1rem}}@media (min-width:64rem){:host .content{flex-wrap:wrap;padding-left:0;padding-right:0}}:host .content>::slotted(*){flex-shrink:0;width:100%}@media (min-width:40rem){:host .content>::slotted(*){width:45%}}@media (min-width:64rem){:host .content>::slotted(*){flex:1 1 0%;width:100%}}:host .indicator{align-items:center;display:flex;gap:.5rem;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
+const contentSliderComponentCss = ".pointer-events-none{pointer-events:none!important}.visible{visibility:visible!important}.static{position:static!important}.absolute{position:absolute!important}.relative{position:relative!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-grab{cursor:-webkit-grab!important;cursor:grab!important}.cursor-grabbing{cursor:-webkit-grabbing!important;cursor:grabbing!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.gap-2{gap:.5rem!important}.overflow-visible{overflow:visible!important}.p-10{padding:2.5rem!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;margin:-2.5rem;overflow:hidden;padding:2.5rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:-webkit-grab;cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:default}}:host .slider.draggable.dragging{cursor:-webkit-grabbing;cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:default}}:host .slider .inner-slider{align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;pointer-events:none;position:absolute;width:100%}@media (min-width:40rem){:host .slider .inner-slider{gap:1rem}}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:45%}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:100%}}:host .indicator{align-items:center;display:flex;gap:.5rem;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}@media (min-width:40rem){.tablet\\:w-\\[45\\%\\]{width:45%!important}.tablet\\:gap-4{gap:1rem!important}}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}";
 
 const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,17 +12,37 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * Wether to hide the indicator on mobile
      */
     this.hideMobileIndicator = false;
+    /**
+     * Wether to disable dragging the content
+     */
+    this.disableDrag = false;
+    /**
+     * Wether to disable clicking the indicator scrolls content
+     */
+    this.disableIndicatorClick = false;
+    this._outerHeight = 0;
+    this._totalWidth = 0;
     this._items = [];
+    this._dragging = false;
   }
   componentWillRender() {
     const items = this._el.querySelectorAll(':scope > *');
     this._items = Array.from(items);
   }
+  componentDidRender() {
+    const outerHeight = this._items.at(0).getBoundingClientRect().height;
+    if (outerHeight != this._outerHeight) {
+      this._outerHeight = outerHeight;
+    }
+  }
   componentDidLoad() {
+    this._calculateWidth();
     this._calculateIndicator();
   }
   render() {
-    return (h(Host, { class: "p-content-slider" }, h("div", { class: "content", ref: (el) => (this._contentRef = el), onScroll: () => this._handleScroll() }, h("slot", null)), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { active: i === this._visibleIndex }))))));
+    return (h(Host, { class: "p-content-slider" }, h("div", { class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+        height: `${this._outerHeight}px`,
+      }, ref: (el) => (this._sliderRef = el), onScroll: () => this._handleScroll(), onMouseDown: (e) => this._mouseDownHandler(e), onMouseMove: (e) => this._mouseMoveHandler(e) }, h("div", { class: "inner-slider", ref: (ref) => (this._innerSliderRef = ref) }, h("slot", null))), h("div", { class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._items.map((_, i) => (h("p-slider-indicator", { class: !this.disableIndicatorClick && 'cursor-pointer', onClick: () => this._scrollTo(i), active: i === this._visibleIndex }))))));
   }
   _handleScroll() {
     if (this._scrollHandlerTimeout) {
@@ -30,6 +50,41 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
     this._scrollHandlerTimeout = setTimeout(() => this._calculateIndicator(), 200);
   }
+  _mouseDownHandler(e) {
+    if (this.disableDrag || this._dragging) {
+      return;
+    }
+    this._startX = e.offsetX - this._innerSliderRef.offsetLeft;
+    this._dragging = true;
+  }
+  _mouseMoveHandler(e) {
+    if (!e || !this._dragging || this.disableDrag) {
+      return;
+    }
+    e.preventDefault();
+    const x = e.offsetX;
+    this._innerSliderRef.style.left = `${x - this._startX}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _checkBoundary() {
+    let outer = this._sliderRef.getBoundingClientRect();
+    if (parseInt(this._innerSliderRef.style.left) > 0) {
+      this._innerSliderRef.style.left = '0px';
+    }
+    const maxLeft = (this._totalWidth - outer.width) * -1;
+    if (parseInt(this._innerSliderRef.style.left) < maxLeft) {
+      this._innerSliderRef.style.left = `${maxLeft}px`;
+    }
+  }
+  mouseUpHandler() {
+    this._dragging = false;
+  }
+  resizeHandler() {
+    this._innerSliderRef.style.left = '0px';
+    this._calculateWidth();
+    this._calculateIndicator();
+  }
   _calculateIndicator() {
     for (let i = 0; i < this._items.length; i++) {
       const item = this._items[i];
@@ -41,23 +96,56 @@ const ContentSlider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         break;
       }
     }
-    console.log(this._visibleIndex);
   }
   _isVisible(el) {
-    if (!this._contentRef || !el) {
+    if (!this._el || !el) {
       return false;
     }
     const elRect = el.getBoundingClientRect();
-    const containerRect = this._el.getBoundingClientRect();
-    return (elRect.left > containerRect.left &&
-      elRect.right < containerRect.right);
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    return (elRect.left >= sliderRect.left && elRect.right <= sliderRect.right);
+  }
+  _scrollTo(i) {
+    if (this.disableIndicatorClick) {
+      return;
+    }
+    const el = this._items[i];
+    if (i === 0) {
+      this._innerSliderRef.style.left = '0px';
+      this._calculateIndicator();
+      return;
+    }
+    const sliderRect = this._sliderRef.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const centerOffset = el.offsetLeft + elRect.width / 2 - sliderRect.width / 2;
+    this._innerSliderRef.style.left = `-${centerOffset}px`;
+    this._checkBoundary();
+    this._calculateIndicator();
+  }
+  _calculateWidth() {
+    let totalWidth = 0;
+    for (let item of this._items) {
+      const rect = item.getBoundingClientRect();
+      totalWidth += rect.width;
+    }
+    const sliderStyle = getComputedStyle(this._sliderRef);
+    const padding = parseInt(sliderStyle.padding) * 2;
+    const innerSliderStyle = getComputedStyle(this._innerSliderRef);
+    const gap = parseInt(innerSliderStyle.gap) * (this._items.length - 1);
+    totalWidth += padding + gap;
+    this._totalWidth = totalWidth;
   }
   get _el() { return this; }
   static get style() { return contentSliderComponentCss; }
 }, [1, "p-content-slider", {
     "hideMobileIndicator": [4, "hide-mobile-indicator"],
-    "_visibleIndex": [32]
-  }]);
+    "disableDrag": [4, "disable-drag"],
+    "disableIndicatorClick": [4, "disable-indicator-click"],
+    "_visibleIndex": [32],
+    "_outerHeight": [32],
+    "_totalWidth": [32],
+    "_dragging": [32]
+  }, [[9, "mouseup", "mouseUpHandler"], [9, "resize", "resizeHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/p-layout.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const layoutComponentCss = ".relative{position:relative!important}.sticky{position:-webkit-sticky!important;position:sticky!important}.order-2{order:2!important}.order-1{order:1!important}.order-3{order:3!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-screen{height:100vh!important}.h-full{height:100%!important}.w-screen{width:100vw!important}.w-full,.w-sidebar-mobile{width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.content-start{align-content:flex-start!important}.items-center{align-items:center!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}.pt-14{padding-top:3.5rem!important}*{box-sizing:border-box}:host{align-content:flex-start;display:grid;gap:0;grid-template-areas:\"topbar\" \"sidebar\" \"content\";grid-template-columns:1fr;grid-template-rows:repeat(1fr,3);height:100vh;overflow:hidden;width:100vw}@media (min-width:64rem){:host{grid-template-areas:\"topbar topbar\" \"sidebar content\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;order:2;position:-webkit-sticky;position:sticky;width:100%}@media (min-width:80rem){:host .topbar{order:1}}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;order:1;width:100%}@media (min-width:80rem){:host .sidebar{order:2;width:15rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-y:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}:host .content .inner-content{padding:1.5rem 1rem;position:relative}@media (min-width:80rem){:host .content .inner-content{padding:2rem;width:60rem}}@media (min-width:64rem){:host .content .inner-content{width:45rem}}@media (min-width:85.375rem){:host .content .inner-content{width:65rem}}@media (min-width:90rem){:host .content .inner-content{width:65rem}}@media (min-width:120rem){:host .content .inner-content{width:70rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content content\"}@media (min-width:64rem){:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content sidebar\"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;order:3;overflow:hidden;padding:.5rem;width:unset}@media (min-width:64rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3}@media (min-width:64rem){:host(.variant-login) .content{justify-content:center;order:2}}:host(.variant-login) .content .inner-content{box-sizing:border-box;padding-top:3.5rem;width:100%}@media (min-width:64rem){:host(.variant-login) .content .inner-content{padding:1.5rem 4.5rem 0}}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:w-content-desktop-xs{width:45rem!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}@media (min-width:80rem){.desktop-sm\\:w-content-desktop-sm{width:60rem!important}.desktop-sm\\:px-content-desktop-x{padding-left:2rem!important;padding-right:2rem!important}}@media (min-width:85.375rem){.desktop\\:w-content-desktop{width:65rem!important}}@media (min-width:90rem){.desktop-lg\\:w-content-desktop-lg{width:65rem!important}}";
+const layoutComponentCss = ".static{position:static!important}.relative{position:relative!important}.sticky{position:-webkit-sticky!important;position:sticky!important}.order-2{order:2!important}.order-1{order:1!important}.order-3{order:3!important}.flex{display:flex!important}.grid{display:grid!important}.hidden{display:none!important}.h-screen{height:100vh!important}.h-full{height:100%!important}.w-screen{width:100vw!important}.w-full,.w-sidebar-mobile{width:100%!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.content-start{align-content:flex-start!important}.items-center{align-items:center!important}.px-content-mobile-x{padding-left:1rem!important;padding-right:1rem!important}.pt-14{padding-top:3.5rem!important}*{box-sizing:border-box}:host{align-content:flex-start;display:grid;gap:0;grid-template-areas:\"topbar\" \"sidebar\" \"content\";grid-template-columns:1fr;grid-template-rows:repeat(1fr,3);height:100vh;overflow:hidden;width:100vw}@media (min-width:64rem){:host{grid-template-areas:\"topbar topbar\" \"sidebar content\";grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}}:host .content,:host .sidebar,:host .topbar{align-self:flex-start}:host .topbar{grid-area:topbar;order:2;position:-webkit-sticky;position:sticky;width:100%}@media (min-width:80rem){:host .topbar{order:1}}:host .sidebar{box-sizing:border-box;display:flex;grid-area:sidebar;height:100%;order:1;width:100%}@media (min-width:80rem){:host .sidebar{order:2;width:15rem}}:host .content{display:flex;flex-direction:column;grid-area:content;height:100%;order:3;overflow-y:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:relative}:host .content .inner-content{padding:1.5rem 1rem;position:relative}@media (min-width:80rem){:host .content .inner-content{padding:2rem;width:60rem}}@media (min-width:64rem){:host .content .inner-content{width:45rem}}@media (min-width:85.375rem){:host .content .inner-content{width:65rem}}@media (min-width:90rem){:host .content .inner-content{width:65rem}}@media (min-width:120rem){:host .content .inner-content{width:70rem}}:host(.variant-default) .content{flex:1 1 0%}:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content content\"}@media (min-width:64rem){:host(.variant-login){grid-template-areas:\"topbar topbar\" \"content sidebar\"}}:host(.variant-login) .sidebar{display:none;flex:1 1 0%;order:3;overflow:hidden;padding:.5rem;width:unset}@media (min-width:64rem){:host(.variant-login) .sidebar{display:flex}}:host(.variant-login) .sidebar .inner-content{padding:.5rem}:host(.variant-login) .content{align-items:center;order:3}@media (min-width:64rem){:host(.variant-login) .content{justify-content:center;order:2}}:host(.variant-login) .content .inner-content{box-sizing:border-box;padding-top:3.5rem;width:100%}@media (min-width:64rem){:host(.variant-login) .content .inner-content{padding:1.5rem 4.5rem 0}}@media (min-width:40rem){:host(.variant-login) .content .inner-content{width:30rem}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:w-content-desktop-xs{width:45rem!important}.desktop-xs\\:py-0{padding-bottom:0!important;padding-top:0!important}}@media (min-width:80rem){.desktop-sm\\:w-content-desktop-sm{width:60rem!important}.desktop-sm\\:px-content-desktop-x{padding-left:2rem!important;padding-right:2rem!important}}@media (min-width:85.375rem){.desktop\\:w-content-desktop{width:65rem!important}}@media (min-width:90rem){.desktop-lg\\:w-content-desktop-lg{width:65rem!important}}";
 
 const Layout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/slider-indicator.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sliderIndicatorComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.block{display:block!important}.hidden{display:none!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
+const sliderIndicatorComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.block{display:block!important}.hidden{display:none!important}.h-2{height:.5rem!important}.w-2{width:.5rem!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}.bg-mystic-dark{--tw-bg-opacity:1!important;background-color:rgb(218 230 240/var(--tw-bg-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(218 230 240/var(--tw-bg-opacity));border-radius:100%;display:block;height:.5rem;width:.5rem}:host(.active){--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity))}";
 
 const SliderIndicator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {