@ship-ui/core 0.18.5 → 0.18.11

package/fesm2022/ship-ui-core.mjs

@@ -1,9 +1,18 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, ElementRef, Renderer2, input, ChangeDetectionStrategy, Component, viewChild, effect, HostListener, NgModule, signal, Injectable, DOCUMENT, model, output, ApplicationRef, OutputEmitterRef, TemplateRef, createComponent, isSignal, DestroyRef, PLATFORM_ID, ViewChild, Directive, contentChild, contentChildren, afterNextRender, Injector, HostBinding, untracked, runInInjectionContext, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
+import { InjectionToken, inject, computed, ElementRef, Renderer2, input, ChangeDetectionStrategy, Component, viewChild, effect, HostListener, NgModule, signal, Injectable, DOCUMENT, model, output, ApplicationRef, OutputEmitterRef, TemplateRef, createComponent, isSignal, DestroyRef, PLATFORM_ID, ViewChild, Directive, untracked, contentChild, contentChildren, afterNextRender, Injector, HostBinding, runInInjectionContext, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { isPlatformBrowser, JsonPipe, DatePipe, isPlatformServer, NgTemplateOutlet } from '@angular/common';
+import { ShipButton as ShipButton$1 } from 'ship-ui';
 import { NgModel } from '@angular/forms';
 import { SIGNAL } from '@angular/core/primitives/signals';
 
+const defaultThemeColors = {
+    primary: 'hsl(217, 91%, 60%)',
+    accent: 'hsl(258, 90%, 66%)',
+    warn: 'hsl(37, 92%, 50%)',
+    error: 'hsl(0, 84%, 60%)',
+    success: 'hsl(159, 84%, 39%)',
+    base: 'hsl(0, 0%, 46%)'
+};
 const SHIP_CONFIG = new InjectionToken('Ship UI Config');
 
 function shipComponentClasses(componentName, inputs) {
@@ -40,6 +49,8 @@ function shipComponentClasses(componentName, inputs) {
         const dynamic = (inputs.dynamic?.() ?? componentConfig?.dynamic) || false;
         // Resolve readonly (Input > Component Config > false)
         const readonly = (inputs.readonly?.() ?? componentConfig?.readonly) || false;
+        // Resolve alwaysShow (Input > Component Config > false)
+        const alwaysShow = (inputs.alwaysShow?.() ?? componentConfig?.alwaysShow) || false;
         const classList = [];
         if (color)
             classList.push(color);
@@ -60,6 +71,8 @@ function shipComponentClasses(componentName, inputs) {
             classList.push('dynamic');
         if (readonly)
             classList.push('readonly');
+        if (alwaysShow)
+            classList.push('always-show');
         return classList.join(' ');
     });
 }
@@ -654,6 +667,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }] });
 
+function contentProjectionSignal(querySelector, options = { childList: true }) {
+    const hostElement = inject((ElementRef)).nativeElement;
+    const destroyRef = inject(DestroyRef);
+    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : /* istanbul ignore next */ []));
+    const updateElements = () => {
+        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
+    };
+    updateElements();
+    if (typeof MutationObserver === 'undefined')
+        return projectedElementsSignal.asReadonly();
+    const observer = new MutationObserver((mutations) => {
+        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
+        if (hasChildListChanges) {
+            updateElements();
+        }
+    });
+    observer.observe(hostElement, options);
+    destroyRef.onDestroy(() => observer.disconnect());
+    return projectedElementsSignal.asReadonly();
+}
+
+class ShipAccordion {
+    constructor() {
+        this.selfElement = inject((ElementRef)).nativeElement;
+        this.name = input(`sh-accordion-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.allowMultiple = input(false, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('accordion', {
+            variant: this.variant,
+            size: this.size,
+        });
+        this.items = contentProjectionSignal('details', {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['open', 'value'],
+        });
+        this.selfElement.addEventListener('toggle', this.onToggle.bind(this), true);
+        effect(() => {
+            const isMultiple = this.allowMultiple();
+            const groupName = this.name();
+            const valStr = this.value();
+            const vals = valStr ? valStr.split(',').filter((v) => v !== '') : [];
+            this.items().forEach((details) => {
+                if (!isMultiple) {
+                    details.setAttribute('name', groupName);
+                }
+                else {
+                    details.removeAttribute('name');
+                }
+                const summary = details.querySelector('summary');
+                if (summary && !summary.querySelector('sh-icon')) {
+                    const icon = document.createElement('sh-icon');
+                    icon.textContent = 'caret-down';
+                    summary.appendChild(icon);
+                }
+                let contentWrapper = details.querySelector(':scope > .content');
+                if (!contentWrapper) {
+                    const newWrapper = document.createElement('div');
+                    newWrapper.className = 'content';
+                    const childrenToMove = Array.from(details.childNodes).filter((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE &&
+                            node.tagName.toLowerCase() === 'summary') {
+                            return false;
+                        }
+                        return true;
+                    });
+                    childrenToMove.forEach((child) => newWrapper.appendChild(child));
+                    details.appendChild(newWrapper);
+                    contentWrapper = newWrapper;
+                }
+                const itemVal = details.getAttribute('value');
+                if (itemVal && vals.includes(itemVal)) {
+                    // Avoid triggering endless loops by only setting open if it actually changed
+                    if (!details.open)
+                        details.open = true;
+                }
+                else if (itemVal) {
+                    if (details.open)
+                        details.open = false;
+                }
+            });
+        });
+    }
+    onToggle(event) {
+        const target = event.target;
+        if (target.tagName !== 'DETAILS')
+            return;
+        if (!this.selfElement.contains(target))
+            return;
+        const itemVal = target.getAttribute('value');
+        if (!itemVal)
+            return; // Uncontrolled details element
+        const isOpen = target.open;
+        if (this.allowMultiple()) {
+            let vals = this.value()
+                ? this.value()
+                    .split(',')
+                    .filter((v) => v !== '')
+                : [];
+            if (isOpen && !vals.includes(itemVal))
+                vals.push(itemVal);
+            if (!isOpen)
+                vals = vals.filter((v) => v !== itemVal);
+            this.value.set(vals.join(','));
+        }
+        else {
+            if (isOpen) {
+                this.value.set(itemVal);
+            }
+            else {
+                if (this.value() === itemVal) {
+                    this.value.set(null);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipAccordion, isStandalone: true, selector: "sh-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sh-accordion": "true", "class": "hostClasses()" } }, ngImport: i0, template: `
+    <ng-content></ng-content>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipAccordion, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-accordion',
+                    template: `
+    <ng-content></ng-content>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class.sh-accordion]': 'true',
+                        '[class]': 'hostClasses()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 function classMutationSignal(_element = null) {
     const element = _element ?? inject(ElementRef).nativeElement;
     if (!element)
@@ -1788,27 +1940,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 args: ['document:touchend', ['$event']]
             }] } });
 
-function contentProjectionSignal(querySelector, options = { childList: true }) {
-    const hostElement = inject((ElementRef)).nativeElement;
-    const destroyRef = inject(DestroyRef);
-    const projectedElementsSignal = signal([], ...(ngDevMode ? [{ debugName: "projectedElementsSignal" }] : /* istanbul ignore next */ []));
-    const updateElements = () => {
-        projectedElementsSignal.set(Array.from(hostElement.querySelectorAll(querySelector)));
-    };
-    updateElements();
-    if (typeof MutationObserver === 'undefined')
-        return projectedElementsSignal.asReadonly();
-    const observer = new MutationObserver((mutations) => {
-        const hasChildListChanges = mutations.some((mutation) => mutation.type === 'childList');
-        if (hasChildListChanges) {
-            updateElements();
-        }
-    });
-    observer.observe(hostElement, options);
-    destroyRef.onDestroy(() => observer.disconnect());
-    return projectedElementsSignal.asReadonly();
-}
-
 class ShipSelectionGroup {
     constructor(itemSelector, activeClass) {
         this.itemSelector = itemSelector;
@@ -2112,69 +2243,313 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sharp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharp", required: false }] }], dynamic: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamic", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
-// TODOS
-// - Add a color picker input
-// - Add alpha support
+function hslToRgbExact(h, s, l) {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+}
+function hsvToRgbExact(h, s, v) {
+    const sNorm = s / 100;
+    const vNorm = v / 100;
+    const c = vNorm * sNorm;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = vNorm - c;
+    let r = 0, g = 0, b = 0;
+    if (h >= 0 && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (h >= 60 && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (h >= 120 && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (h >= 180 && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (h >= 240 && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else if (h >= 300 && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+function rgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const d = max - min;
+    const v = max;
+    const s = max === 0 ? 0 : d / max;
+    let h = 0;
+    if (max !== min) {
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, v: v * 100 };
+}
+function rgbToHex(r, g, b) {
+    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+function rgbaToHex8(r, g, b, a) {
+    const alphaHex = Math.round(a * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return rgbToHex(r, g, b) + alphaHex;
+}
+function rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0, l = (max + min) / 2;
+    if (max === min) {
+        h = s = 0;
+    }
+    else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    const hDeg = Math.floor(h * 360);
+    const sPct = Math.round(s * 100);
+    const lPct = Math.round(l * 100);
+    return {
+        h: hDeg,
+        s: sPct,
+        l: lPct,
+        string: `hsl(${hDeg}, ${sPct}%, ${lPct}%)`,
+    };
+}
+function rgbToOklch(r, g, b) {
+    // Convert sRGB to Linear sRGB
+    const toLinear = (c) => {
+        const v = c / 255;
+        return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    const lr = toLinear(r);
+    const lg = toLinear(g);
+    const lb = toLinear(b);
+    // Convert Linear sRGB to LMS (Oklab intermediate)
+    const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+    const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+    const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+    // Cube root of LMS
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    // Convert LMS to OKLAB
+    const oklabL = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
+    const oklabA = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
+    const oklabB = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
+    // Convert OKLAB to OKLCH
+    const chroma = Math.sqrt(oklabA * oklabA + oklabB * oklabB);
+    let hue = Math.atan2(oklabB, oklabA) * (180 / Math.PI);
+    if (hue < 0)
+        hue += 360;
+    return { l: oklabL, c: chroma, h: hue };
+}
+function hslToOklch(h, s, l) {
+    const [r, g, b] = hslToRgbExact(h, s, l);
+    return rgbToOklch(r, g, b);
+}
+
 class ShipColorPicker {
     constructor() {
         this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
         this.canvasRef = viewChild.required('colorCanvas');
-        this.canvasData = signal(null, ...(ngDevMode ? [{ debugName: "canvasData" }] : /* istanbul ignore next */ []));
+        this.#canvasData = signal(null, ...(ngDevMode ? [{ debugName: "#canvasData" }] : /* istanbul ignore next */ []));
         this.showDarkColors = input(false, ...(ngDevMode ? [{ debugName: "showDarkColors" }] : /* istanbul ignore next */ []));
         this.renderingType = input('hsl', ...(ngDevMode ? [{ debugName: "renderingType" }] : /* istanbul ignore next */ []));
         this.gridSize = input(20, ...(ngDevMode ? [{ debugName: "gridSize" }] : /* istanbul ignore next */ []));
-        this.hue = input(0, ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
+        this.hue = model(0, ...(ngDevMode ? [{ debugName: "hue" }] : /* istanbul ignore next */ []));
         this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
-        this.selectedColor = model([255, 255, 255], ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.selectedColor = model([255, 255, 255, 1], ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        this.alpha = model(1, ...(ngDevMode ? [{ debugName: "alpha" }] : /* istanbul ignore next */ []));
         this.currentColor = output();
         this.centerLightness = computed(() => (this.showDarkColors() ? 200 : 100), ...(ngDevMode ? [{ debugName: "centerLightness" }] : /* istanbul ignore next */ []));
         this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
         this.markerPosition = signal({ x: '50%', y: '50%' }, ...(ngDevMode ? [{ debugName: "markerPosition" }] : /* istanbul ignore next */ []));
         this._pos = { x: '0', y: '0' };
         this._markerPosition = effect(() => (this._pos = this.markerPosition()), ...(ngDevMode ? [{ debugName: "_markerPosition" }] : /* istanbul ignore next */ []));
-        this.selectedColorRgb = computed(() => `rgb(${this.selectedColor().join(',')})`, ...(ngDevMode ? [{ debugName: "selectedColorRgb" }] : /* istanbul ignore next */ []));
-        this.selectedColorHex = computed(() => this.rgbToHex(...this.selectedColor()), ...(ngDevMode ? [{ debugName: "selectedColorHex" }] : /* istanbul ignore next */ []));
-        this.selectedColorHsl = computed(() => this.rgbToHsl(...this.selectedColor()), ...(ngDevMode ? [{ debugName: "selectedColorHsl" }] : /* istanbul ignore next */ []));
+        this.#skipMarkerUpdate = false;
+        this.selectedColorRgb = computed(() => {
+            const c = this.selectedColor();
+            return c[3] !== undefined ? `rgba(${c[0]},${c[1]},${c[2]},${c[3]})` : `rgb(${c[0]},${c[1]},${c[2]})`;
+        }, ...(ngDevMode ? [{ debugName: "selectedColorRgb" }] : /* istanbul ignore next */ []));
+        this.selectedColorHex = computed(() => rgbToHex(...this.selectedColor()), ...(ngDevMode ? [{ debugName: "selectedColorHex" }] : /* istanbul ignore next */ []));
+        this.selectedColorHsl = computed(() => rgbToHsl(...this.selectedColor()).string, ...(ngDevMode ? [{ debugName: "selectedColorHsl" }] : /* istanbul ignore next */ []));
+        this.alphaEffect = effect(() => {
+            const a = this.alpha();
+            const current = untracked(() => this.selectedColor());
+            if (current[3] !== a) {
+                this.#skipMarkerUpdate = false;
+                this.selectedColor.set([current[0], current[1], current[2], a]);
+            }
+        }, ...(ngDevMode ? [{ debugName: "alphaEffect" }] : /* istanbul ignore next */ []));
+        this._prevColorStr = '';
         this.selectedColorEffect = effect(() => {
             const selectedColor = this.selectedColor();
-            const hsl = this.rgbToHsl(...selectedColor);
-            const hex = this.rgbToHex(...selectedColor);
-            this.updateMarkerFromColor(selectedColor);
+            const r = selectedColor[0];
+            const g = selectedColor[1];
+            const b = selectedColor[2];
+            const a = selectedColor[3] ?? 1;
+            untracked(() => {
+                if (this.alpha() !== a) {
+                    this.alpha.set(a);
+                }
+            });
+            const str = `${r},${g},${b},${a}`;
+            if (this._prevColorStr === str && !this.#skipMarkerUpdate) {
+                // We still want to clear skipMarkerUpdate if it was set
+                // wait, actually if skipMarkerUpdate is true, it means we JUST dragged.
+                // In that case we do want to emit currentColor.
+            }
+            const hsl = rgbToHsl(r, g, b);
+            const hex = rgbToHex(r, g, b);
+            if (this.#skipMarkerUpdate) {
+                this.#skipMarkerUpdate = false;
+                this._prevColorStr = str;
+            }
+            else {
+                if (this._prevColorStr !== str) {
+                    this.updateMarkerFromColor(selectedColor);
+                    this._prevColorStr = str;
+                }
+                else {
+                    // Color is structurally identical and not from a drag event, skip marker jump
+                }
+            }
             this.currentColor.emit({
-                rgb: `rgb(${selectedColor.join(',')})`,
+                rgb: `rgb(${r}, ${g}, ${b})`,
+                rgba: `rgba(${r}, ${g}, ${b}, ${a})`,
                 hex: hex,
-                hsl: hsl,
-                hue: hsl.match(/\d+/g).map(Number)[0],
-                saturation: hsl.match(/\d+/g).map(Number)[1],
+                hex8: rgbaToHex8(r, g, b, a),
+                hsl: hsl.string,
+                hsla: `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`,
+                hue: hsl.h,
+                saturation: hsl.s,
+                alpha: a,
             });
         }, ...(ngDevMode ? [{ debugName: "selectedColorEffect" }] : /* istanbul ignore next */ []));
+        this.alphaColorRedrawEffect = effect(() => {
+            const color = this.selectedColor();
+            if (this.renderingType() === 'alpha' && this.#canvasData()) {
+                untracked(() => this.drawAlpha());
+            }
+        }, ...(ngDevMode ? [{ debugName: "alphaColorRedrawEffect" }] : /* istanbul ignore next */ []));
+        this.previousLayoutHash = '';
+        this.previousHue = null;
         this.renderingTypeEffect = effect(() => {
-            const currentRenderingType = this.renderingType();
-            if (this.canvasData()) {
-                this.drawColorPicker();
-                if (currentRenderingType === 'hsl') {
-                    this.adjustMarkerPosition();
-                    queueMicrotask(() => this.updateMarkerFromColor(this.selectedColor()));
+            const currentHue = this.hue();
+            const layoutHash = this.getLayoutHash();
+            const canvasData = untracked(() => this.#canvasData());
+            if (canvasData) {
+                untracked(() => this.drawColorPicker());
+                if (this.previousLayoutHash !== layoutHash) {
+                    if (this.renderingType() === 'hsl') {
+                        this.adjustMarkerPosition();
+                        queueMicrotask(() => this.updateMarkerFromColor(untracked(() => this.selectedColor())));
+                    }
+                    else {
+                        this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                    }
+                    this.previousLayoutHash = layoutHash;
+                    this.previousHue = currentHue;
                 }
-                else {
-                    this.updateMarkerFromColor(this.selectedColor());
+                else if (this.previousHue !== currentHue) {
+                    const pos = untracked(() => this.markerPosition());
+                    const { canvas, ctx } = canvasData;
+                    let x = (parseFloat(pos.x.replace('%', '')) / 100) * Math.max(1, canvas.width - 1);
+                    let y = (parseFloat(pos.y.replace('%', '')) / 100) * Math.max(1, canvas.height - 1);
+                    x = Math.max(0, Math.min(canvas.width - 1, Math.round(x)));
+                    y = Math.max(0, Math.min(canvas.height - 1, Math.round(y)));
+                    const color = untracked(() => this.getColorAtPosition(x, y));
+                    if (this.renderingType() !== 'alpha') {
+                        color[3] = untracked(() => this.selectedColor()[3] ?? 1);
+                    }
+                    this.#skipMarkerUpdate = true;
+                    this.selectedColor.set(color);
+                    this.previousHue = currentHue;
                 }
             }
         }, ...(ngDevMode ? [{ debugName: "renderingTypeEffect" }] : /* istanbul ignore next */ []));
+        this.#resizeObserver = typeof ResizeObserver !== 'undefined'
+            ? new ResizeObserver((entries) => {
+                for (const entry of entries) {
+                    if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+                        this.setCanvasSize();
+                    }
+                }
+            })
+            : null;
         this.initColor = null;
     }
     #document;
+    #platformId;
+    #canvasData;
+    #skipMarkerUpdate;
     onResize() {
         this.setCanvasSize();
     }
+    getLayoutHash() {
+        return `${this.renderingType()}-${this.direction()}-${this.gridSize()}-${this.showDarkColors()}`;
+    }
+    #resizeObserver;
     ngAfterViewInit() {
         this.initColor = this.selectedColor();
+        const canvas = this.canvasRef()?.nativeElement;
+        if (canvas?.parentElement) {
+            this.#resizeObserver?.observe(canvas.parentElement);
+        }
         this.setCanvasSize();
         this.initCanvasEvents();
     }
-    updateMarkerFromColor(rgb) {
-        const [r, g, b] = rgb;
-        const coords = this.findPositionByColor(r, g, b);
+    ngOnDestroy() {
+        this.#resizeObserver?.disconnect();
+    }
+    updateMarkerFromColor(rgba) {
+        const [r, g, b, a] = rgba;
+        const coords = this.findPositionByColor(r, g, b, a);
         if (coords === null)
             return;
         const { x, y } = coords;
@@ -2187,11 +2562,63 @@ class ShipColorPicker {
         };
         this.updateColorAndMarker(mockEvent, false, true);
     }
-    findPositionByColor(r, g, b) {
-        const canvasData = this.canvasData();
+    findPositionByColor(r, g, b, a) {
+        const canvasData = this.#canvasData();
         if (!canvasData || !canvasData.canvas)
             return null;
         const { canvas, ctx } = canvasData;
+        if (canvas.width === 0 || canvas.height === 0)
+            return null;
+        if (this.renderingType() === 'alpha') {
+            const aVal = a ?? 1;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(aVal * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(aVal * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'hue') {
+            const hsl = rgbToHsl(r, g, b);
+            const ratio = hsl.h / 360;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(ratio * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(ratio * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'rgb') {
+            const hsv = rgbToHsv(r, g, b);
+            return {
+                x: Math.round((hsv.s / 100) * (canvas.width - 1)),
+                y: Math.round((1 - hsv.v / 100) * (canvas.height - 1)),
+            };
+        }
+        if (this.renderingType() === 'saturation') {
+            const hsl = rgbToHsl(r, g, b);
+            const ratio = hsl.s / 100;
+            if (this.direction() === 'horizontal') {
+                return { x: Math.round(ratio * (canvas.width - 1)), y: Math.round((canvas.height - 1) / 2) };
+            }
+            else {
+                return { x: Math.round((canvas.width - 1) / 2), y: Math.round(ratio * (canvas.height - 1)) };
+            }
+        }
+        if (this.renderingType() === 'hsl') {
+            const { centerX, centerY, radius } = canvasData;
+            const hsl = rgbToHsl(r, g, b);
+            const centerL = this.centerLightness();
+            let distance = 0;
+            if (centerL > 0) {
+                distance = ((100 - hsl.l) * radius) / ((50 * centerL) / 100);
+            }
+            const angle = (hsl.h / 360) * 2 * Math.PI - Math.PI;
+            return {
+                x: Math.round(centerX + distance * Math.cos(angle)),
+                y: Math.round(centerY + distance * Math.sin(angle)),
+            };
+        }
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
         let bestMatch = { x: 0, y: 0, distance: Infinity };
         for (let y = 0; y < canvas.height; y++) {
@@ -2209,7 +2636,7 @@ class ShipColorPicker {
         return { x: bestMatch.x, y: bestMatch.y };
     }
     adjustMarkerPosition() {
-        const { canvas, centerX, centerY, radius } = this.canvasData();
+        const { canvas, centerX, centerY, radius } = this.#canvasData();
         let { x, y } = this._pos;
         let markerX = (parseFloat(x.replace('%', '')) / 100) * canvas.width;
         let markerY = (parseFloat(y.replace('%', '')) / 100) * canvas.height;
@@ -2224,7 +2651,10 @@ class ShipColorPicker {
         }
     }
     initCanvasEvents() {
-        const { canvas } = this.canvasData();
+        const data = this.#canvasData();
+        if (!data)
+            return;
+        const { canvas } = data;
         canvas.addEventListener('mousedown', (event) => {
             this.isDragging.set(true);
             this.updateColorAndMarker(event);
@@ -2247,6 +2677,8 @@ class ShipColorPicker {
         this.#document.addEventListener('touchcancel', () => this.isDragging.set(false));
     }
     setCanvasSize() {
+        if (!isPlatformBrowser(this.#platformId))
+            return;
         const canvas = this.canvasRef()?.nativeElement;
         if (canvas) {
             const ctx = canvas.getContext('2d', {
@@ -2257,7 +2689,7 @@ class ShipColorPicker {
             const parentWidth = canvas.parentElement?.offsetWidth || canvas.offsetWidth;
             canvas.width = parentWidth;
             canvas.height = parentWidth;
-            this.canvasData.set({
+            this.#canvasData.set({
                 canvas,
                 ctx,
                 centerX: canvas.width / 2,
@@ -2265,10 +2697,42 @@ class ShipColorPicker {
                 radius: Math.min(canvas.width, canvas.height) / 2,
             });
             this.drawColorPicker();
+            setTimeout(() => {
+                if (!this.isDragging()) {
+                    this.updateMarkerFromColor(untracked(() => this.selectedColor()));
+                }
+            });
+        }
+    }
+    getColorAtPosition(mouseX, mouseY) {
+        const { canvas, ctx } = this.#canvasData();
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const xRatio = mouseX / w;
+        const yRatio = mouseY / h;
+        if (this.renderingType() === 'rgb') {
+            return hsvToRgbExact(this.hue(), xRatio * 100, (1 - yRatio) * 100);
+        }
+        else if (this.renderingType() === 'saturation') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            return hslToRgbExact(this.hue(), ratio * 100, 50);
+        }
+        else if (this.renderingType() === 'hue') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            return hslToRgbExact(ratio * 360, 100, 50);
+        }
+        else if (this.renderingType() === 'alpha') {
+            const ratio = this.direction() === 'horizontal' ? xRatio : yRatio;
+            const current = this.selectedColor();
+            return [current[0], current[1], current[2], parseFloat(ratio.toFixed(2))];
+        }
+        else {
+            const pixelData = ctx.getImageData(mouseX, mouseY, 1, 1).data;
+            return [pixelData[0], pixelData[1], pixelData[2]];
         }
     }
     updateColorAndMarker(event, outsideCanvas = false, onlyMarker = false) {
-        const { canvas, ctx } = this.canvasData();
+        const { canvas, ctx } = this.#canvasData();
         let mouseX = event instanceof MouseEvent ? event.offsetX : event.clientX;
         let mouseY = event instanceof MouseEvent ? event.offsetY : event.clientY;
         if (outsideCanvas) {
@@ -2289,13 +2753,16 @@ class ShipColorPicker {
         }
         mouseX = Math.max(0, Math.min(canvas.width - 1, Math.round(mouseX)));
         mouseY = Math.max(0, Math.min(canvas.height - 1, Math.round(mouseY)));
-        const pixelData = ctx.getImageData(mouseX, mouseY, 1, 1).data;
-        const [r, g, b] = pixelData;
         if (!onlyMarker) {
-            this.selectedColor.set([r, g, b]);
+            const newColor = this.getColorAtPosition(mouseX, mouseY);
+            if (this.renderingType() !== 'alpha') {
+                newColor[3] = this.selectedColor()[3] ?? 1;
+            }
+            this.#skipMarkerUpdate = true;
+            this.selectedColor.set(newColor);
         }
-        const xPercent = ((mouseX / canvas.width) * 100).toFixed(2) + '%';
-        const yPercent = ((mouseY / canvas.height) * 100).toFixed(2) + '%';
+        const xPercent = ((mouseX / Math.max(1, canvas.width - 1)) * 100).toFixed(2) + '%';
+        const yPercent = ((mouseY / Math.max(1, canvas.height - 1)) * 100).toFixed(2) + '%';
         this.markerPosition.set({ x: xPercent, y: yPercent });
     }
     drawColorPicker() {
@@ -2309,6 +2776,9 @@ class ShipColorPicker {
             case 'hue':
                 this.drawHue();
                 break;
+            case 'alpha':
+                this.drawAlpha();
+                break;
             case 'rgb':
                 this.drawRgb();
                 break;
@@ -2317,32 +2787,48 @@ class ShipColorPicker {
                 break;
         }
     }
+    drawAlpha() {
+        const { canvas, ctx } = this.#canvasData();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, this.direction() === 'horizontal' ? w : 0, this.direction() === 'horizontal' ? 0 : h);
+        const [r, g, b] = this.selectedColor();
+        gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
+        gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 1)`);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
     drawRgb() {
-        const { canvas, ctx } = this.canvasData();
+        const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
-        gradient.addColorStop(0, 'white');
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, w, 0);
+        gradient.addColorStop(0, '#ffffff');
         gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
         ctx.fillStyle = gradient;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
-        const gradient2 = ctx.createLinearGradient(0, 0, 0, canvas.height);
+        const gradient2 = ctx.createLinearGradient(0, 0, 0, h);
         gradient2.addColorStop(0, 'rgba(0, 0, 0, 0)');
-        gradient2.addColorStop(1, 'black');
+        gradient2.addColorStop(1, '#000000');
         ctx.fillStyle = gradient2;
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
     drawSaturation() {
-        const { canvas, ctx } = this.canvasData();
+        const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
         if (this.direction() === 'horizontal') {
-            const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+            const gradient = ctx.createLinearGradient(0, 0, w, 0);
             gradient.addColorStop(0, `hsl(${this.hue()}, 0%, 50%)`);
             gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
         else {
-            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            const gradient = ctx.createLinearGradient(0, 0, 0, h);
             gradient.addColorStop(0, `hsl(${this.hue()}, 0%, 50%)`);
             gradient.addColorStop(1, `hsl(${this.hue()}, 100%, 50%)`);
             ctx.fillStyle = gradient;
@@ -2350,9 +2836,11 @@ class ShipColorPicker {
         }
     }
     drawHue() {
-        const { canvas, ctx } = this.canvasData();
+        const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const gradient = ctx.createLinearGradient(0, 0, this.direction() === 'horizontal' ? canvas.width : 0, this.direction() === 'horizontal' ? 0 : canvas.height);
+        const w = Math.max(1, canvas.width - 1);
+        const h = Math.max(1, canvas.height - 1);
+        const gradient = ctx.createLinearGradient(0, 0, this.direction() === 'horizontal' ? w : 0, this.direction() === 'horizontal' ? 0 : h);
         for (let i = 0; i <= 360; i += 10) {
             gradient.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
         }
@@ -2360,7 +2848,7 @@ class ShipColorPicker {
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
     drawColorWheel() {
-        const { canvas, ctx, centerX, centerY, radius } = this.canvasData();
+        const { canvas, ctx, centerX, centerY, radius } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         for (let y = 0; y < canvas.height; y++) {
             for (let x = 0; x < canvas.width; x++) {
@@ -2375,7 +2863,7 @@ class ShipColorPicker {
         }
     }
     drawGrid() {
-        const { canvas, ctx } = this.canvasData();
+        const { canvas, ctx } = this.#canvasData();
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         const gridSize = this.gridSize();
         const cellSize = canvas.width / gridSize;
@@ -2396,38 +2884,8 @@ class ShipColorPicker {
             }
         }
     }
-    rgbToHex(r, g, b) {
-        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-    }
-    rgbToHsl(r, g, b) {
-        r /= 255;
-        g /= 255;
-        b /= 255;
-        const max = Math.max(r, g, b), min = Math.min(r, g, b);
-        let h = 0, s = 0, l = (max + min) / 2;
-        if (max === min) {
-            h = s = 0;
-        }
-        else {
-            const d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-            switch (max) {
-                case r:
-                    h = (g - b) / d + (g < b ? 6 : 0);
-                    break;
-                case g:
-                    h = (b - r) / d + 2;
-                    break;
-                case b:
-                    h = (r - g) / d + 4;
-                    break;
-            }
-            h /= 6;
-        }
-        return `hsl(${Math.floor(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: ShipColorPicker, isStandalone: true, selector: "sh-color-picker", inputs: { showDarkColors: { classPropertyName: "showDarkColors", publicName: "showDarkColors", isSignal: true, isRequired: false, transformFunction: null }, renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", currentColor: "currentColor" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "renderingType()", "class.vertical": "(renderingType() === \"hue\" || renderingType() === \"saturation\") && direction() === \"vertical\"" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["colorCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: ShipColorPicker, isStandalone: true, selector: "sh-color-picker", inputs: { showDarkColors: { classPropertyName: "showDarkColors", publicName: "showDarkColors", isSignal: true, isRequired: false, transformFunction: null }, renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, gridSize: { classPropertyName: "gridSize", publicName: "gridSize", isSignal: true, isRequired: false, transformFunction: null }, hue: { classPropertyName: "hue", publicName: "hue", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hue: "hueChange", selectedColor: "selectedColorChange", alpha: "alphaChange", currentColor: "currentColor" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class": "renderingType()", "class.vertical": "(renderingType() === \"hue\" || renderingType() === \"saturation\") && direction() === \"vertical\"" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["colorCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <canvas #colorCanvas></canvas>
     <div
       class="marker"
@@ -2455,641 +2913,389 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         '[class.vertical]': '(renderingType() === "hue" || renderingType() === "saturation") && direction() === "vertical"',
                     },
                 }]
-        }], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['colorCanvas', { isSignal: true }] }], showDarkColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDarkColors", required: false }] }], renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], hue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hue", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }, { type: i0.Output, args: ["selectedColorChange"] }], currentColor: [{ type: i0.Output, args: ["currentColor"] }], onResize: [{
+        }], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['colorCanvas', { isSignal: true }] }], showDarkColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDarkColors", required: false }] }], renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], gridSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridSize", required: false }] }], hue: [{ type: i0.Input, args: [{ isSignal: true, alias: "hue", required: false }] }, { type: i0.Output, args: ["hueChange"] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }, { type: i0.Output, args: ["selectedColorChange"] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }, { type: i0.Output, args: ["alphaChange"] }], currentColor: [{ type: i0.Output, args: ["currentColor"] }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', []]
             }] } });
 
-class ShipDatepicker {
+const BASE_SPACE = 4;
+const SCROLLABLE_STYLES = ['scroll', 'auto'];
+const DEFAULT_OPTIONS = {
+    width: undefined,
+    height: undefined,
+    closeOnButton: true,
+    closeOnEsc: true,
+};
+class ShipPopover {
     constructor() {
-        this.#INIT_DATE = new Date(new Date().setHours(0, 0, 0, 0));
-        this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
-        this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
-        this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : /* istanbul ignore next */ []));
-        this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.startOfWeek = input(1, ...(ngDevMode ? [{ debugName: "startOfWeek" }] : /* istanbul ignore next */ []));
-        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
-        this.daysRef = viewChild('daysRef', ...(ngDevMode ? [{ debugName: "daysRef" }] : /* istanbul ignore next */ []));
-        this.currentDate = signal(this.date() ?? this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
-        this.monthOffsets = computed(() => {
-            return Array.from({ length: this.monthsToShow() }, (_, i) => i);
-        }, ...(ngDevMode ? [{ debugName: "monthOffsets" }] : /* istanbul ignore next */ []));
-        this.selectedDateStylePosition = signal(null, ...(ngDevMode ? [{ debugName: "selectedDateStylePosition" }] : /* istanbul ignore next */ []));
-        this.weekdays = computed(() => {
-            const startOfWeek = this.startOfWeek();
-            const weekdayLabels = this.weekdayLabels();
-            return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
-        }, ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
-        this.currentClasses = classMutationSignal();
-        this.someEffect = effect(() => {
-            const _ = this.currentClasses();
-            this.#findSelectedAndCalc();
-        }, ...(ngDevMode ? [{ debugName: "someEffect" }] : /* istanbul ignore next */ []));
-        this.#newDateEffect = effect(() => {
-            if (this.monthsToShow() > 1)
-                return;
-            this.#setDateAsCurrent();
-        }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : /* istanbul ignore next */ []));
-    }
-    #INIT_DATE;
-    getLastVisibleMonth() {
-        const lastMonthOffset = this.monthsToShow() - 1;
-        return this.getOffsetDate(lastMonthOffset);
-    }
-    getOffsetDate(monthOffset) {
-        const date = new Date(this.currentDate());
-        date.setMonth(date.getMonth() + monthOffset);
-        return date;
+        this.#document = inject(DOCUMENT);
+        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
+        this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : /* istanbul ignore next */ []));
+        this.asSheetOnMobile = input(false, ...(ngDevMode ? [{ debugName: "asSheetOnMobile" }] : /* istanbul ignore next */ []));
+        this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : /* istanbul ignore next */ []));
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this.defaultOptionMerge = computed(() => ({
+            ...DEFAULT_OPTIONS,
+            ...this.options(),
+        }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : /* istanbul ignore next */ []));
+        this.triggerRef = viewChild.required('triggerRef');
+        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
+        this.popoverContentRef = viewChild('popoverContentRef', ...(ngDevMode ? [{ debugName: "popoverContentRef" }] : /* istanbul ignore next */ []));
+        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : /* istanbul ignore next */ []));
+        this.openAbort = null;
+        this.#originalOverflow = null;
+        this.openEffect = effect(() => {
+            const open = this.isOpen();
+            queueMicrotask(() => {
+                const popoverEl = this.popoverRef()?.nativeElement;
+                if (!popoverEl) {
+                    this.openAbort?.abort();
+                    this.openAbort = null;
+                    return;
+                }
+                if (open) {
+                    if (this.openAbort) {
+                        this.openAbort.abort();
+                    }
+                    this.openAbort = new AbortController();
+                    this.#document.addEventListener('keydown', (e) => {
+                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
+                            e.preventDefault();
+                        }
+                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
+                            this.isOpen.set(false);
+                        }
+                    }, {
+                        signal: this.openAbort?.signal,
+                    });
+                    if (!popoverEl.isConnected)
+                        return;
+                    popoverEl.showPopover();
+                    const isMobileSheet = this.asSheetOnMobile() && window.innerWidth <= 768;
+                    if (isMobileSheet) {
+                        this.#originalOverflow = this.#document.body.style.overflow;
+                        this.#document.body.style.overflow = 'hidden';
+                        this.menuStyle.set(null); // Clear any leftover inline styles
+                    }
+                    if (!this.SUPPORTS_ANCHOR && !isMobileSheet) {
+                        setTimeout(() => {
+                            const scrollableParent = this.#findScrollableParent(popoverEl);
+                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
+                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), {
+                                signal: this.openAbort?.signal,
+                            });
+                            this.#calculateMenuPosition();
+                        });
+                    }
+                }
+                else {
+                    this.closed.emit();
+                    popoverEl.hidePopover();
+                    this.openAbort?.abort();
+                    this.openAbort = null;
+                    if (this.asSheetOnMobile() && this.#originalOverflow !== null) {
+                        this.#document.body.style.overflow = this.#originalOverflow;
+                        this.#originalOverflow = null;
+                    }
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : /* istanbul ignore next */ []));
     }
-    getMonthDates(monthOffset) {
-        const offsetDate = this.getOffsetDate(monthOffset);
-        return this.#generateMonthDates(offsetDate, this.startOfWeek());
+    #document;
+    #originalOverflow;
+    toggleIsOpen(event) {
+        if (!this.disableOpenByClick()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.isOpen.set(!this.isOpen());
+        }
     }
-    #newDateEffect;
-    ngOnInit() {
-        if (this.monthsToShow() === 1)
+    eventClose($event) {
+        if (!this.isOpen())
             return;
-        this.#setDateAsCurrent();
-    }
-    #setDateAsCurrent() {
-        const newDate = this.date();
-        if (newDate)
-            this.currentDate.set(newDate);
-        this.#findSelectedAndCalc();
+        this.isOpen.set(false);
     }
-    #findSelectedAndCalc() {
-        setTimeout(() => {
-            const selectedElement = this.daysRef()?.nativeElement.querySelector('.sel');
-            if (!selectedElement) {
-                return this.selectedDateStylePosition.update((x) => (x ? { ...x, opacity: '0' } : null));
+    #findScrollableParent(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
+                parent.scrollHeight > parent.clientHeight) {
+                return parent;
             }
-            this.setSelectedDateStylePosition(selectedElement);
-        });
-    }
-    #generateMonthDates(date, startOfWeek) {
-        const year = date.getFullYear();
-        const month = date.getMonth();
-        const firstDay = new Date(year, month, 1).getDay();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        const dates = [];
-        let offset = firstDay - startOfWeek;
-        if (offset < 0) {
-            offset += 7;
-        }
-        const lastDayOfPrevMonth = new Date(year, month, 0).getDate();
-        for (let i = offset - 1; i >= 0; i--) {
-            dates.push(new Date(year, month - 1, lastDayOfPrevMonth - i, 0, 0, 0, 0));
-        }
-        for (let i = 1; i <= daysInMonth; i++) {
-            dates.push(new Date(year, month, i, 0, 0, 0, 0));
-        }
-        let nextMonthDay = 1;
-        while (dates.length % 7 !== 0) {
-            dates.push(new Date(year, month + 1, nextMonthDay++, 0, 0, 0, 0));
+            parent = parent.parentElement;
         }
-        return dates;
+        return this.#document.documentElement;
     }
-    nextMonth() {
-        this.currentDate.update((currentDate) => {
-            const newDate = new Date(currentDate);
-            newDate.setMonth(currentDate.getMonth() + 1);
-            return newDate;
-        });
-        this.#findSelectedAndCalc();
+    /**
+     * Position generators that mirror the CSS position-try-fallbacks.
+     * Each returns { left, top } for the popover-content in fixed coordinates.
+     */
+    // bottom span-right: below trigger, left edge aligned with trigger left
+    #bottomSpanRight(t, _m) {
+        return { left: t.left, top: t.bottom + BASE_SPACE };
     }
-    previousMonth() {
-        this.currentDate.update((currentDate) => {
-            const newDate = new Date(currentDate);
-            newDate.setMonth(currentDate.getMonth() - 1);
-            return newDate;
-        });
-        this.#findSelectedAndCalc();
+    // top span-right: above trigger, left edge aligned with trigger left
+    #topSpanRight(t, m) {
+        return { left: t.left, top: t.top - m.height - BASE_SPACE };
     }
-    setDate(newDate, selectedElement) {
-        const createDateWithExistingTime = (newDate, existingDate) => {
-            const hours = existingDate?.getHours() ?? 0;
-            const minutes = existingDate?.getMinutes() ?? 0;
-            const seconds = existingDate?.getSeconds() ?? 0;
-            const milliseconds = existingDate?.getMilliseconds() ?? 0;
-            return new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), hours, minutes, seconds, milliseconds);
-        };
-        if (!this.asRange()) {
-            this.date.set(createDateWithExistingTime(newDate, this.date()));
-            this.endDate.set(null);
-        }
-        else {
-            const startDate = this.date();
-            const endDate = this.endDate();
-            const utcDate = createDateWithExistingTime(newDate, null);
-            if (!startDate) {
-                this.date.set(utcDate);
-            }
-            else if (!endDate) {
-                if (utcDate < startDate) {
-                    this.date.set(utcDate);
-                    this.endDate.set(null);
-                }
-                else {
-                    this.endDate.set(utcDate);
-                }
-            }
-            else {
-                this.date.set(utcDate);
-                this.endDate.set(null);
-            }
-        }
-        if (this.asRange())
-            return;
-        this.setSelectedDateStylePosition(selectedElement);
+    // bottom span-left: below trigger, right edge aligned with trigger right
+    #bottomSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.bottom + BASE_SPACE };
     }
-    isDateSelected(date) {
-        const startDate = this.date();
-        const endDate = this.endDate();
-        if (startDate === null)
-            return null;
-        const startOfDay = (date) => {
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
-        };
-        const endOfDay = (date) => {
-            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-        };
-        const currentDate = startOfDay(date);
-        const rangeStart = startOfDay(startDate);
-        const rangeEnd = endDate ? endOfDay(endDate) : null;
-        let classes = [];
-        if (this.asRange()) {
-            if (rangeEnd === null) {
-                if (currentDate.getTime() === rangeStart.getTime()) {
-                    classes.push('sel first last');
-                }
-            }
-            else {
-                if (currentDate.getTime() === rangeStart.getTime()) {
-                    classes.push('first');
-                }
-                if (currentDate.getTime() === startOfDay(rangeEnd).getTime()) {
-                    classes.push('last');
-                }
-                if (currentDate >= rangeStart && currentDate <= rangeEnd) {
-                    classes.push('sel');
-                    const dayOfWeek = currentDate.getDay();
-                    const startOfWeek = this.startOfWeek();
-                    if (dayOfWeek === startOfWeek) {
-                        classes.push('week-start');
-                    }
-                    const endOfWeek = (startOfWeek + 6) % 7;
-                    if (dayOfWeek === endOfWeek) {
-                        classes.push('week-end');
-                    }
-                }
-                const nextDate = new Date(currentDate);
-                nextDate.setDate(currentDate.getDate() + 1);
-                const prevDate = new Date(currentDate);
-                prevDate.setDate(currentDate.getDate() - 1);
-                const isFirstOfMonth = currentDate.getDate() === 1;
-                const isLastOfMonth = nextDate.getMonth() !== currentDate.getMonth();
-                if (isFirstOfMonth) {
-                    classes.push('month-start');
-                }
-                if (isLastOfMonth) {
-                    classes.push('month-end');
-                }
-            }
-        }
-        else {
-            if (currentDate.getTime() === rangeStart.getTime()) {
-                classes.push('sel');
-            }
-        }
-        return classes.join(' ') || null;
+    // top span-left: above trigger, right edge aligned with trigger right
+    #topSpanLeft(t, m) {
+        return { left: t.right - m.width, top: t.top - m.height - BASE_SPACE };
     }
-    setSelectedDateStylePosition(selectedElement) {
-        this.selectedDateStylePosition.set({
-            transform: `translate(${selectedElement.offsetLeft}px, ${selectedElement.offsetTop}px)`,
-            opacity: '1',
-        });
+    // right span-bottom: to the right of trigger, top edge aligned with trigger top
+    #rightSpanBottom(t, _m) {
+        return { left: t.right + BASE_SPACE, top: t.top };
     }
-    getMonthName(date) {
-        return date.toLocaleString('default', { month: 'long' });
+    // left span-bottom: to the left of trigger, top edge aligned with trigger top
+    #leftSpanBottom(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top };
     }
-    getFullYear(date) {
-        return date.getFullYear();
+    // right center: to the right of trigger, vertically centered
+    #rightCenter(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
     }
-    // Rest of the component methods remain the same, but update isCurrentMonth:
-    isCurrentMonth(date, monthOffset) {
-        const offsetDate = this.getOffsetDate(monthOffset);
-        return date.getMonth() === offsetDate.getMonth();
+    // left center: to the left of trigger, vertically centered
+    #leftCenter(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipDatepicker, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange" }, host: { properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <header>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
-      <div class="title">
-        {{ getMonthName(currentDate()!) }}
-        @if (monthsToShow() > 1) {
-          - {{ getMonthName(getLastVisibleMonth()) }}
+    // right span-top: to the right of trigger, bottom edge aligned with trigger bottom
+    #rightSpanTop(t, m) {
+        return { left: t.right + BASE_SPACE, top: t.bottom - m.height };
+    }
+    // left span-top: to the left of trigger, bottom edge aligned with trigger bottom
+    #leftSpanTop(t, m) {
+        return { left: t.left - m.width - BASE_SPACE, top: t.bottom - m.height };
+    }
+    /** Check if a position fits entirely within the viewport */
+    #fitsInViewport(pos, m) {
+        return (pos.left >= 0 &&
+            pos.top >= 0 &&
+            pos.left + m.width <= window.innerWidth &&
+            pos.top + m.height <= window.innerHeight);
+    }
+    /** Clamp a position so the popover stays within the viewport */
+    #clampToViewport(pos, m) {
+        return {
+            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
+            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
+        };
+    }
+    #calculateMenuPosition() {
+        const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
+        const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
+        if (!triggerRect || !menuRect)
+            return;
+        // Mirror the CSS position-try-fallbacks order
+        const tryOrderDefault = [
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+            this.#rightSpanBottom,
+            this.#leftSpanBottom,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#rightSpanTop,
+            this.#leftSpanTop,
+        ];
+        const tryOrderMultiLayer = [
+            this.#rightSpanBottom,
+            this.#rightSpanTop,
+            this.#leftSpanBottom,
+            this.#leftSpanTop,
+            this.#rightCenter,
+            this.#leftCenter,
+            this.#bottomSpanRight,
+            this.#topSpanRight,
+            this.#bottomSpanLeft,
+            this.#topSpanLeft,
+        ];
+        const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
+        // Try each position, use the first one that fits
+        for (const positionFn of tryOrder) {
+            const pos = positionFn.call(this, triggerRect, menuRect);
+            if (this.#fitsInViewport(pos, menuRect)) {
+                this.menuStyle.set({ left: pos.left + 'px', top: pos.top + 'px' });
+                return;
+            }
         }
-        {{ getFullYear(currentDate()!) }}
+        // If nothing fits perfectly, use the first position clamped to viewport
+        const fallback = this.#clampToViewport(tryOrder[0].call(this, triggerRect, menuRect), menuRect);
+        this.menuStyle.set({ left: fallback.left + 'px', top: fallback.top + 'px' });
+    }
+    ngOnDestroy() {
+        this.openAbort?.abort();
+        this.openAbort = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipPopover, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, asSheetOnMobile: { classPropertyName: "asSheetOnMobile", publicName: "asSheetOnMobile", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()", "class.as-sheet": "asSheetOnMobile()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
+      <div class="trigger-wrapper">
+        <ng-content select="[trigger]" />
+        <ng-content select="button" />
+        <ng-content select="[shButton]" />
       </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
-    </header>
-
-    <section class="months-container">
-      @for (monthOffset of monthOffsets(); track monthOffset) {
-        <div class="month">
-          <nav class="weekdays">
-            @for (day of weekdays(); track $index) {
-              <div>{{ day }}</div>
-            }
-          </nav>
-
-          <div class="days" #daysRef>
-            @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
-                #elementRef
-                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
-                [class]="isDateSelected(calDate)"
-                (click)="setDate(calDate, elementRef)">
-                {{ calDate.getDate() }}
-              </div>
-            }
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
+    </div>
 
-            @if (!asRange()) {
-              <article class="days">
-                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
-              </article>
-            }
-          </div>
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
         </div>
-      }
-    </section>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDatepicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipPopover, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-datepicker',
-                    imports: [ShipIcon],
+                    selector: 'sh-popover',
+                    imports: [],
                     template: `
-    <header>
-      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
-      <div class="title">
-        {{ getMonthName(currentDate()!) }}
-        @if (monthsToShow() > 1) {
-          - {{ getMonthName(getLastVisibleMonth()) }}
-        }
-        {{ getFullYear(currentDate()!) }}
+    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
+      <div class="trigger-wrapper">
+        <ng-content select="[trigger]" />
+        <ng-content select="button" />
+        <ng-content select="[shButton]" />
       </div>
-      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
-    </header>
-
-    <section class="months-container">
-      @for (monthOffset of monthOffsets(); track monthOffset) {
-        <div class="month">
-          <nav class="weekdays">
-            @for (day of weekdays(); track $index) {
-              <div>{{ day }}</div>
-            }
-          </nav>
-
-          <div class="days" #daysRef>
-            @for (calDate of getMonthDates(monthOffset); track $index) {
-              <div
-                #elementRef
-                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
-                [class]="isDateSelected(calDate)"
-                (click)="setDate(calDate, elementRef)">
-                {{ calDate.getDate() }}
-              </div>
-            }
+      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
+    </div>
 
-            @if (!asRange()) {
-              <article class="days">
-                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
-              </article>
-            }
-          </div>
+    @if (isOpen()) {
+      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
+        <div class="overlay" (click)="eventClose($event)"></div>
+        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
+          <ng-content />
         </div>
-      }
-    </section>
+      </div>
+    }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        '[class.as-range]': 'asRange()',
-                        '[class]': '"columns-" + monthsToShow()',
-                        '[class.disabled]': 'disabled()',
+                        '[class.multi-layer]': 'asMultiLayer()',
+                        '[class.as-sheet]': 'asSheetOnMobile()',
                     },
                 }]
-        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }] } });
+        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], asSheetOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "asSheetOnMobile", required: false }] }], disableOpenByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOpenByClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popoverRef', { isSignal: true }] }], popoverContentRef: [{ type: i0.ViewChild, args: ['popoverContentRef', { isSignal: true }] }] } });
 
-const BASE_SPACE = 4;
-const SCROLLABLE_STYLES = ['scroll', 'auto'];
-const DEFAULT_OPTIONS = {
-    width: undefined,
-    height: undefined,
-    closeOnButton: true,
-    closeOnEsc: true,
-};
-class ShipPopover {
+class ShipFormFieldPopover {
     constructor() {
-        this.#document = inject(DOCUMENT);
-        this.SUPPORTS_ANCHOR = typeof CSS !== 'undefined' && CSS.supports('position-anchor', '--abc') && CSS.supports('anchor-name', '--abc');
-        this.asMultiLayer = input(false, ...(ngDevMode ? [{ debugName: "asMultiLayer" }] : /* istanbul ignore next */ []));
-        this.disableOpenByClick = input(false, ...(ngDevMode ? [{ debugName: "disableOpenByClick" }] : /* istanbul ignore next */ []));
+        this.#selfRef = inject(ElementRef);
         this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
         this.closed = output();
-        this.defaultOptionMerge = computed(() => ({
-            ...DEFAULT_OPTIONS,
-            ...this.options(),
-        }), ...(ngDevMode ? [{ debugName: "defaultOptionMerge" }] : /* istanbul ignore next */ []));
-        this.triggerRef = viewChild.required('triggerRef');
-        this.popoverRef = viewChild('popoverRef', ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
-        this.popoverContentRef = viewChild('popoverContentRef', ...(ngDevMode ? [{ debugName: "popoverContentRef" }] : /* istanbul ignore next */ []));
-        this.id = signal('--' + generateUniqueId(), ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-        this.menuStyle = signal(null, ...(ngDevMode ? [{ debugName: "menuStyle" }] : /* istanbul ignore next */ []));
-        this.openAbort = null;
-        this.openEffect = effect(() => {
-            const open = this.isOpen();
-            queueMicrotask(() => {
-                const popoverEl = this.popoverRef()?.nativeElement;
-                if (!popoverEl) {
-                    this.openAbort?.abort();
-                    this.openAbort = null;
-                    return;
-                }
-                if (open) {
-                    if (this.openAbort) {
-                        this.openAbort.abort();
-                    }
-                    this.openAbort = new AbortController();
-                    this.#document.addEventListener('keydown', (e) => {
-                        if (e.key === 'Escape' && !this.defaultOptionMerge().closeOnEsc) {
-                            e.preventDefault();
-                        }
-                        if (e.key === 'Escape' && this.defaultOptionMerge().closeOnEsc) {
-                            this.isOpen.set(false);
-                        }
-                    }, {
-                        signal: this.openAbort?.signal,
-                    });
-                    if (!popoverEl.isConnected)
-                        return;
-                    popoverEl.showPopover();
-                    if (!this.SUPPORTS_ANCHOR) {
-                        setTimeout(() => {
-                            const scrollableParent = this.#findScrollableParent(popoverEl);
-                            scrollableParent.addEventListener('scroll', () => this.#calculateMenuPosition(), {
-                                signal: this.openAbort?.signal,
-                            });
-                            window?.addEventListener('resize', () => this.#calculateMenuPosition(), {
-                                signal: this.openAbort?.signal,
-                            });
-                            this.#calculateMenuPosition();
-                        });
-                    }
-                }
-                else {
-                    this.closed.emit();
-                    popoverEl.hidePopover();
-                    this.openAbort?.abort();
-                    this.openAbort = null;
-                }
-            });
-        }, ...(ngDevMode ? [{ debugName: "openEffect" }] : /* istanbul ignore next */ []));
+        this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('formField', {
+            color: this.color,
+            variant: this.variant,
+            size: this.size,
+            readonly: this.readonly,
+        });
     }
-    #document;
-    toggleIsOpen(event) {
-        if (!this.disableOpenByClick()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.isOpen.set(!this.isOpen());
+    #selfRef;
+    onClick() {
+        if (this.#selfRef.nativeElement.querySelector('input')) {
+            this.#selfRef.nativeElement.querySelector('input').focus();
         }
-    }
-    eventClose($event) {
-        if (!this.isOpen())
-            return;
-        this.isOpen.set(false);
-    }
-    #findScrollableParent(element) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (SCROLLABLE_STYLES.indexOf(window?.getComputedStyle(parent).overflowY) > -1 &&
-                parent.scrollHeight > parent.clientHeight) {
-                return parent;
-            }
-            parent = parent.parentElement;
+        if (this.#selfRef.nativeElement.querySelector('textarea')) {
+            this.#selfRef.nativeElement.querySelector('textarea').focus();
         }
-        return this.#document.documentElement;
-    }
-    /**
-     * Position generators that mirror the CSS position-try-fallbacks.
-     * Each returns { left, top } for the popover-content in fixed coordinates.
-     */
-    // bottom span-right: below trigger, left edge aligned with trigger left
-    #bottomSpanRight(t, _m) {
-        return { left: t.left, top: t.bottom + BASE_SPACE };
-    }
-    // top span-right: above trigger, left edge aligned with trigger left
-    #topSpanRight(t, m) {
-        return { left: t.left, top: t.top - m.height - BASE_SPACE };
-    }
-    // bottom span-left: below trigger, right edge aligned with trigger right
-    #bottomSpanLeft(t, m) {
-        return { left: t.right - m.width, top: t.bottom + BASE_SPACE };
-    }
-    // top span-left: above trigger, right edge aligned with trigger right
-    #topSpanLeft(t, m) {
-        return { left: t.right - m.width, top: t.top - m.height - BASE_SPACE };
-    }
-    // right span-bottom: to the right of trigger, top edge aligned with trigger top
-    #rightSpanBottom(t, _m) {
-        return { left: t.right + BASE_SPACE, top: t.top };
-    }
-    // left span-bottom: to the left of trigger, top edge aligned with trigger top
-    #leftSpanBottom(t, m) {
-        return { left: t.left - m.width - BASE_SPACE, top: t.top };
-    }
-    // right center: to the right of trigger, vertically centered
-    #rightCenter(t, m) {
-        return { left: t.right + BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
-    }
-    // left center: to the left of trigger, vertically centered
-    #leftCenter(t, m) {
-        return { left: t.left - m.width - BASE_SPACE, top: t.top + t.height / 2 - m.height / 2 };
-    }
-    // right span-top: to the right of trigger, bottom edge aligned with trigger bottom
-    #rightSpanTop(t, m) {
-        return { left: t.right + BASE_SPACE, top: t.bottom - m.height };
-    }
-    // left span-top: to the left of trigger, bottom edge aligned with trigger bottom
-    #leftSpanTop(t, m) {
-        return { left: t.left - m.width - BASE_SPACE, top: t.bottom - m.height };
-    }
-    /** Check if a position fits entirely within the viewport */
-    #fitsInViewport(pos, m) {
-        return (pos.left >= 0 &&
-            pos.top >= 0 &&
-            pos.left + m.width <= window.innerWidth &&
-            pos.top + m.height <= window.innerHeight);
     }
-    /** Clamp a position so the popover stays within the viewport */
-    #clampToViewport(pos, m) {
-        return {
-            left: Math.max(0, Math.min(pos.left, window.innerWidth - m.width)),
-            top: Math.max(0, Math.min(pos.top, window.innerHeight - m.height)),
-        };
+    close() {
+        this.closed.emit();
     }
-    #calculateMenuPosition() {
-        const triggerRect = this.triggerRef()?.nativeElement.getBoundingClientRect();
-        const menuRect = this.popoverContentRef()?.nativeElement.getBoundingClientRect();
-        if (!triggerRect || !menuRect)
-            return;
-        // Mirror the CSS position-try-fallbacks order
-        const tryOrderDefault = [
-            this.#bottomSpanRight,
-            this.#topSpanRight,
-            this.#bottomSpanLeft,
-            this.#topSpanLeft,
-            this.#rightSpanBottom,
-            this.#leftSpanBottom,
-            this.#rightCenter,
-            this.#leftCenter,
-            this.#rightSpanTop,
-            this.#leftSpanTop,
-        ];
-        const tryOrderMultiLayer = [
-            this.#rightSpanBottom,
-            this.#rightSpanTop,
-            this.#leftSpanBottom,
-            this.#leftSpanTop,
-            this.#rightCenter,
-            this.#leftCenter,
-            this.#bottomSpanRight,
-            this.#topSpanRight,
-            this.#bottomSpanLeft,
-            this.#topSpanLeft,
-        ];
-        const tryOrder = this.asMultiLayer() ? tryOrderMultiLayer : tryOrderDefault;
-        // Try each position, use the first one that fits
-        for (const positionFn of tryOrder) {
-            const pos = positionFn.call(this, triggerRect, menuRect);
-            if (this.#fitsInViewport(pos, menuRect)) {
-                this.menuStyle.set({ left: pos.left + 'px', top: pos.top + 'px' });
-                return;
+    ngOnInit() {
+        const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+        const text = this.#selfRef.nativeElement.querySelector('textarea');
+        if (!supportFieldSizing && text !== null) {
+            const text = this.#selfRef.nativeElement.querySelector('textarea');
+            function resize() {
+                text.style.height = 'auto';
+                text.style.height = text.scrollHeight + 'px';
+            }
+            /* 0-timeout to get the already changed text */
+            function delayedResize() {
+                setTimeout(resize, 0);
+            }
+            if (text) {
+                text.addEventListener('change', resize);
+                text.addEventListener('cut', delayedResize);
+                text.addEventListener('paste', delayedResize);
+                text.addEventListener('drop', delayedResize);
+                text.addEventListener('keydown', delayedResize);
+                text.focus();
+                text.select();
+                resize();
             }
         }
-        // If nothing fits perfectly, use the first position clamped to viewport
-        const fallback = this.#clampToViewport(tryOrder[0].call(this, triggerRect, menuRect), menuRect);
-        this.menuStyle.set({ left: fallback.left + 'px', top: fallback.top + 'px' });
-    }
-    ngOnDestroy() {
-        this.openAbort?.abort();
-        this.openAbort = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipPopover, isStandalone: true, selector: "sh-popover", inputs: { asMultiLayer: { classPropertyName: "asMultiLayer", publicName: "asMultiLayer", isSignal: true, isRequired: false, transformFunction: null }, disableOpenByClick: { classPropertyName: "disableOpenByClick", publicName: "disableOpenByClick", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { properties: { "class.multi-layer": "asMultiLayer()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true, isSignal: true }, { propertyName: "popoverContentRef", first: true, predicate: ["popoverContentRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
-      <div class="trigger-wrapper">
-        <ng-content select="[trigger]" />
-        <ng-content select="button" />
-        <ng-content select="[shButton]" />
-      </div>
-      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
-    </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipFormFieldPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" }, properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <ng-content select="label"></ng-content>
 
-    @if (isOpen()) {
-      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
-        <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
-          <ng-content />
+    <sh-popover
+      [(isOpen)]="isOpen"
+      (closed)="close()"
+      [asSheetOnMobile]="true"
+      [options]="{
+        closeOnButton: false,
+        closeOnEsc: true,
+      }">
+      <div trigger class="input-wrap">
+        <div class="prefix">
+          <ng-content select="[prefix]"></ng-content>
+          <ng-content select="[textPrefix]"></ng-content>
         </div>
+
+        <div class="prefix-space"></div>
+
+        <ng-content select="input"></ng-content>
+
+        <ng-content select="textarea"></ng-content>
+
+        <ng-content select="[textSuffix]"></ng-content>
+        <div class="suffix-space"></div>
+        <ng-content select="[suffix]"></ng-content>
       </div>
-    }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      <ng-content select="[popoverContent]"></ng-content>
+    </sh-popover>
+
+    <div class="helpers">
+      <div class="error-wrap">
+        <ng-content select="[error]"></ng-content>
+      </div>
+
+      <div class="hint">
+        <ng-content select="[hint]"></ng-content>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipFormFieldPopover, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-popover',
-                    imports: [],
+                    selector: 'sh-form-field-popover',
+                    imports: [ShipPopover],
                     template: `
-    <div class="trigger" #triggerRef [attr.popovertarget]="id() + 'hello'" (click)="toggleIsOpen($event)">
-      <div class="trigger-wrapper">
-        <ng-content select="[trigger]" />
-        <ng-content select="button" />
-        <ng-content select="[shButton]" />
-      </div>
-      <div class="trigger-anchor" [style.anchor-name]="id()"></div>
-    </div>
-
-    @if (isOpen()) {
-      <div [attr.id]="id() + 'hello'" popover="manual" #popoverRef class="popover">
-        <div class="overlay" (click)="eventClose($event)"></div>
-        <div class="popover-content" #popoverContentRef [style.position-anchor]="id()" [style]="menuStyle()">
-          <ng-content />
-        </div>
-      </div>
-    }
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.multi-layer]': 'asMultiLayer()',
-                    },
-                }]
-        }], propDecorators: { asMultiLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "asMultiLayer", required: false }] }], disableOpenByClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOpenByClick", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerRef', { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: ['popoverRef', { isSignal: true }] }], popoverContentRef: [{ type: i0.ViewChild, args: ['popoverContentRef', { isSignal: true }] }] } });
-
-class ShipFormFieldPopover {
-    constructor() {
-        this.#selfRef = inject(ElementRef);
-        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.closed = output();
-    }
-    #selfRef;
-    onClick() {
-        if (this.#selfRef.nativeElement.querySelector('input')) {
-            this.#selfRef.nativeElement.querySelector('input').focus();
-        }
-        if (this.#selfRef.nativeElement.querySelector('textarea')) {
-            this.#selfRef.nativeElement.querySelector('textarea').focus();
-        }
-    }
-    close() {
-        this.closed.emit();
-    }
-    ngOnInit() {
-        const supportFieldSizing = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
-        const text = this.#selfRef.nativeElement.querySelector('textarea');
-        if (!supportFieldSizing && text !== null) {
-            const text = this.#selfRef.nativeElement.querySelector('textarea');
-            function resize() {
-                text.style.height = 'auto';
-                text.style.height = text.scrollHeight + 'px';
-            }
-            /* 0-timeout to get the already changed text */
-            function delayedResize() {
-                setTimeout(resize, 0);
-            }
-            if (text) {
-                text.addEventListener('change', resize);
-                text.addEventListener('cut', delayedResize);
-                text.addEventListener('paste', delayedResize);
-                text.addEventListener('drop', delayedResize);
-                text.addEventListener('keydown', delayedResize);
-                text.focus();
-                text.select();
-                resize();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipFormFieldPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipFormFieldPopover, isStandalone: true, selector: "sh-form-field-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", closed: "closed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: `
     <ng-content select="label"></ng-content>
 
     <sh-popover
       [(isOpen)]="isOpen"
       (closed)="close()"
+      [asSheetOnMobile]="true"
       [options]="{
         closeOnButton: false,
         closeOnEsc: true,
@@ -3118,62 +3324,727 @@ class ShipFormFieldPopover {
         <ng-content select="[error]"></ng-content>
       </div>
 
-      <div class="hint">
-        <ng-content select="[hint]"></ng-content>
-      </div>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      <div class="hint">
+        <ng-content select="[hint]"></ng-content>
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                }]
+        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class ShipColorPickerInput {
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.renderingType = input('hsl', ...(ngDevMode ? [{ debugName: "renderingType" }] : /* istanbul ignore next */ []));
+        this.format = input('rgb', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.closed = output();
+        this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.currentClass = classMutationSignal();
+        this.isEyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;
+        this.showEyeDropper = input(true, ...(ngDevMode ? [{ debugName: "showEyeDropper" }] : /* istanbul ignore next */ []));
+        this.internalHue = signal(0, ...(ngDevMode ? [{ debugName: "internalHue" }] : /* istanbul ignore next */ []));
+        this.internalAlpha = signal(1, ...(ngDevMode ? [{ debugName: "internalAlpha" }] : /* istanbul ignore next */ []));
+        this.internalColorTuple = signal([255, 255, 255, 1], ...(ngDevMode ? [{ debugName: "internalColorTuple" }] : /* istanbul ignore next */ []));
+        this.hasAlpha = computed(() => ['rgba', 'hex8', 'hsla'].includes(this.format()), ...(ngDevMode ? [{ debugName: "hasAlpha" }] : /* istanbul ignore next */ []));
+        this.formattedColorString = computed(() => {
+            const format = this.format();
+            const tuple = this.internalColorTuple();
+            const [r, g, b, aRaw] = tuple;
+            const a = aRaw ?? 1;
+            switch (format) {
+                case 'rgb':
+                    return `rgb(${r}, ${g}, ${b})`;
+                case 'rgba':
+                    return `rgba(${r}, ${g}, ${b}, ${a})`;
+                case 'hex':
+                    return rgbToHex(r, g, b);
+                case 'hex8':
+                    return rgbaToHex8(r, g, b, a);
+                case 'hsl':
+                    return rgbToHsl(r, g, b).string;
+                case 'hsla': {
+                    const hsl = rgbToHsl(r, g, b);
+                    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+                }
+                default:
+                    return `rgb(${r}, ${g}, ${b})`;
+            }
+        }, ...(ngDevMode ? [{ debugName: "formattedColorString" }] : /* istanbul ignore next */ []));
+        this.#formatSyncEffect = effect(() => {
+            const str = this.formattedColorString();
+            const input = untracked(() => this.#inputRef());
+            if (input && input.value !== str) {
+                if (this.#document.activeElement !== input) {
+                    input.value = str;
+                    input.dispatchEvent(new Event('input'));
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "#formatSyncEffect" }] : /* istanbul ignore next */ []));
+        this.pureHueColor = computed(() => {
+            return hslToRgbExact(this.internalHue(), 100, 50);
+        }, ...(ngDevMode ? [{ debugName: "pureHueColor" }] : /* istanbul ignore next */ []));
+        this.#inputRef = signal(null, ...(ngDevMode ? [{ debugName: "#inputRef" }] : /* istanbul ignore next */ []));
+        this.#inputObserver = contentProjectionSignal('#input-wrap input');
+        this.#inputRefEffect = effect(() => {
+            const inputs = this.#inputObserver();
+            if (!inputs.length)
+                return;
+            const input = inputs[0];
+            if (!input)
+                return;
+            this.#createCustomInputEventListener(input);
+            input.addEventListener('inputValueChanged', (event) => {
+                this.parseAndSetColor(event.detail.value);
+            });
+            input.addEventListener('input', (event) => {
+                const target = event.target;
+                this.parseAndSetColor(target.value);
+            });
+            input.addEventListener('blur', () => {
+                const str = untracked(() => this.formattedColorString());
+                if (input.value !== str) {
+                    input.value = str;
+                    input.dispatchEvent(new Event('input'));
+                }
+            });
+            input.addEventListener('focus', () => {
+                this.isOpen.set(true);
+            });
+            this.#inputRef.set(input);
+            input.autocomplete = 'off';
+            if (typeof input.value === 'string' && input.value) {
+                this.parseAndSetColor(input.value);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#inputRefEffect" }] : /* istanbul ignore next */ []));
+    }
+    #document;
+    #formatSyncEffect;
+    #inputRef;
+    #inputObserver;
+    onMainColorChange(colorObj) {
+        if (colorObj.hue !== undefined) {
+            if (this.renderingType() === 'hsl' && colorObj.saturation > 0) {
+                this.internalHue.set(colorObj.hue);
+            }
+        }
+    }
+    onHuePickerChange(colorObj) {
+        if (colorObj.hue !== undefined && colorObj.hue !== this.internalHue()) {
+            this.internalHue.set(colorObj.hue);
+        }
+    }
+    async openEyeDropper(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            // @ts-ignore
+            const eyeDropper = new window.EyeDropper();
+            const result = await eyeDropper.open();
+            if (result && result.sRGBHex) {
+                this.parseAndSetColor(result.sRGBHex);
+                // Force the text field to immediately display the new output string according to the active format
+                const input = untracked(() => this.#inputRef());
+                if (input) {
+                    const str = this.formattedColorString();
+                    if (input.value !== str) {
+                        input.value = str;
+                        input.dispatchEvent(new Event('input'));
+                    }
+                }
+            }
+        }
+        catch (e) {
+            // User cancelled
+        }
+    }
+    close() {
+        this.closed.emit(this.formattedColorString());
+    }
+    #inputRefEffect;
+    parseAndSetColor(colorStr) {
+        if (!colorStr)
+            return;
+        if (colorStr === untracked(() => this.formattedColorString()))
+            return;
+        const div = this.#document.createElement('div');
+        div.style.color = colorStr;
+        if (div.style.color === '')
+            return; // Not a valid color format
+        this.#document.body.appendChild(div);
+        const computedColor = getComputedStyle(div).color;
+        this.#document.body.removeChild(div);
+        const rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+        if (rgbaMatch) {
+            const r = parseInt(rgbaMatch[1], 10);
+            const g = parseInt(rgbaMatch[2], 10);
+            const b = parseInt(rgbaMatch[3], 10);
+            const a = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+            const current = untracked(() => this.internalColorTuple());
+            if (current[0] !== r || current[1] !== g || current[2] !== b || (current[3] ?? 1) !== a) {
+                this.internalColorTuple.set([r, g, b, a]);
+                this.internalAlpha.set(a);
+                // Also update hue so the hue slider matches the typed color!
+                const max = Math.max(r, g, b) / 255;
+                const min = Math.min(r, g, b) / 255;
+                if (max !== min) {
+                    const d = max - min;
+                    let h = 0;
+                    switch (max) {
+                        case r / 255:
+                            h = (g / 255 - b / 255) / d + (g / 255 < b / 255 ? 6 : 0);
+                            break;
+                        case g / 255:
+                            h = (b / 255 - r / 255) / d + 2;
+                            break;
+                        case b / 255:
+                            h = (r / 255 - g / 255) / d + 4;
+                            break;
+                    }
+                    h /= 6;
+                    this.internalHue.set(Math.floor(h * 360));
+                }
+            }
+        }
+    }
+    hslToRgbExact(h, s, l) {
+        s /= 100;
+        l /= 100;
+        const k = (n) => (n + h / 30) % 12;
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+    }
+    rgbToHex(r, g, b) {
+        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+    rgbaToHex8(r, g, b, a) {
+        const alphaHex = Math.round(a * 255)
+            .toString(16)
+            .padStart(2, '0');
+        return this.rgbToHex(r, g, b) + alphaHex;
+    }
+    rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s = 0, l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0;
+        }
+        else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        const hDeg = Math.floor(h * 360);
+        const sPct = Math.round(s * 100);
+        const lPct = Math.round(l * 100);
+        return {
+            h: hDeg,
+            s: sPct,
+            l: lPct,
+            string: `hsl(${hDeg}, ${sPct}%, ${lPct}%)`,
+        };
+    }
+    #createCustomInputEventListener(input) {
+        Object.defineProperty(input, 'value', {
+            configurable: true,
+            get() {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                return descriptor.get.call(this);
+            },
+            set(newVal) {
+                const descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+                descriptor.set.call(this, newVal);
+                const inputEvent = new CustomEvent('inputValueChanged', {
+                    bubbles: true,
+                    cancelable: true,
+                    detail: {
+                        value: newVal,
+                    },
+                });
+                this.dispatchEvent(inputEvent);
+                return newVal;
+            },
+        });
+        return input;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipColorPickerInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipColorPickerInput, isStandalone: true, selector: "sh-color-picker-input", inputs: { renderingType: { classPropertyName: "renderingType", publicName: "renderingType", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, showEyeDropper: { classPropertyName: "showEyeDropper", publicName: "showEyeDropper", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", isOpen: "isOpenChange" }, ngImport: i0, template: `
+    <sh-form-field-popover 
+      (closed)="close()" 
+      [(isOpen)]="isOpen" 
+      [class]="currentClass()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [readonly]="readonly()"
+    >
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input-container" ngProjectAs="input">
+        <ng-content select="input" />
+
+        <div class="color-indicator" [style.--indicator-color]="formattedColorString()"></div>
+
+        @if (isEyeDropperSupported && showEyeDropper()) {
+          <button size="xsmall" tabindex="-1" variant="outlined" shButton (click)="openEyeDropper($event)">
+            <sh-icon>eyedropper</sh-icon>
+          </button>
+        }
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-color-picker
+            [renderingType]="renderingType()"
+            [direction]="'horizontal'"
+            [(selectedColor)]="internalColorTuple"
+            [hue]="internalHue()"
+            [(alpha)]="internalAlpha"
+            (currentColor)="onMainColorChange($event)" />
+
+          @if (renderingType() !== 'hsl') {
+            <sh-color-picker
+              renderingType="hue"
+              [direction]="'horizontal'"
+              [hue]="internalHue()"
+              [selectedColor]="pureHueColor()"
+              (currentColor)="onHuePickerChange($event)" />
+          }
+
+          @if (hasAlpha()) {
+            <sh-color-picker
+              renderingType="alpha"
+              [direction]="'horizontal'"
+              [(alpha)]="internalAlpha"
+              [(selectedColor)]="internalColorTuple" />
+          }
+        }
+      </div>
+    </sh-form-field-popover>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipColorPicker, selector: "sh-color-picker", inputs: ["showDarkColors", "renderingType", "gridSize", "hue", "direction", "selectedColor", "alpha"], outputs: ["hueChange", "selectedColorChange", "alphaChange", "currentColor"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipButton$1, selector: "[shButton]", inputs: ["color", "variant", "size", "readonly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipColorPickerInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sh-color-picker-input',
+                    imports: [ShipFormFieldPopover, ShipColorPicker, ShipIcon, ShipButton$1],
+                    template: `
+    <sh-form-field-popover 
+      (closed)="close()" 
+      [(isOpen)]="isOpen" 
+      [class]="currentClass()"
+      [variant]="variant()"
+      [size]="size()"
+      [color]="color()"
+      [readonly]="readonly()"
+    >
+      <ng-content select="label" ngProjectAs="label" />
+
+      <ng-content select="[prefix]" ngProjectAs="[prefix]" />
+      <ng-content select="[textPrefix]" ngProjectAs="[textPrefix]" />
+
+      <div id="input-wrap" class="input-container" ngProjectAs="input">
+        <ng-content select="input" />
+
+        <div class="color-indicator" [style.--indicator-color]="formattedColorString()"></div>
+
+        @if (isEyeDropperSupported && showEyeDropper()) {
+          <button size="xsmall" tabindex="-1" variant="outlined" shButton (click)="openEyeDropper($event)">
+            <sh-icon>eyedropper</sh-icon>
+          </button>
+        }
+      </div>
+
+      <ng-content select="[textSuffix]" ngProjectAs="[textSuffix]" />
+      <ng-content select="[suffix]" ngProjectAs="[suffix]" />
+
+      <div popoverContent>
+        @if (this.isOpen()) {
+          <sh-color-picker
+            [renderingType]="renderingType()"
+            [direction]="'horizontal'"
+            [(selectedColor)]="internalColorTuple"
+            [hue]="internalHue()"
+            [(alpha)]="internalAlpha"
+            (currentColor)="onMainColorChange($event)" />
+
+          @if (renderingType() !== 'hsl') {
+            <sh-color-picker
+              renderingType="hue"
+              [direction]="'horizontal'"
+              [hue]="internalHue()"
+              [selectedColor]="pureHueColor()"
+              (currentColor)="onHuePickerChange($event)" />
+          }
+
+          @if (hasAlpha()) {
+            <sh-color-picker
+              renderingType="alpha"
+              [direction]="'horizontal'"
+              [(alpha)]="internalAlpha"
+              [(selectedColor)]="internalColorTuple" />
+          }
+        }
+      </div>
+    </sh-form-field-popover>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { renderingType: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderingType", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], showEyeDropper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEyeDropper", required: false }] }] } });
+
+class ShipDatepicker {
+    constructor() {
+        this.#INIT_DATE = new Date(new Date().setHours(0, 0, 0, 0));
+        this.date = model(null, ...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
+        this.endDate = model(null, ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
+        this.asRange = input(false, ...(ngDevMode ? [{ debugName: "asRange" }] : /* istanbul ignore next */ []));
+        this.monthsToShow = input(1, ...(ngDevMode ? [{ debugName: "monthsToShow" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.startOfWeek = input(1, ...(ngDevMode ? [{ debugName: "startOfWeek" }] : /* istanbul ignore next */ []));
+        this.weekdayLabels = input(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+        this.daysRef = viewChild('daysRef', ...(ngDevMode ? [{ debugName: "daysRef" }] : /* istanbul ignore next */ []));
+        this.currentDate = signal(this.date() ?? this.#INIT_DATE, ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
+        this.monthOffsets = computed(() => {
+            return Array.from({ length: this.monthsToShow() }, (_, i) => i);
+        }, ...(ngDevMode ? [{ debugName: "monthOffsets" }] : /* istanbul ignore next */ []));
+        this.selectedDateStylePosition = signal(null, ...(ngDevMode ? [{ debugName: "selectedDateStylePosition" }] : /* istanbul ignore next */ []));
+        this.weekdays = computed(() => {
+            const startOfWeek = this.startOfWeek();
+            const weekdayLabels = this.weekdayLabels();
+            return weekdayLabels.slice(startOfWeek).concat(weekdayLabels.slice(0, startOfWeek));
+        }, ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+        this.currentClasses = classMutationSignal();
+        this.someEffect = effect(() => {
+            const _ = this.currentClasses();
+            this.#findSelectedAndCalc();
+        }, ...(ngDevMode ? [{ debugName: "someEffect" }] : /* istanbul ignore next */ []));
+        this.#newDateEffect = effect(() => {
+            if (this.monthsToShow() > 1)
+                return;
+            this.#setDateAsCurrent();
+        }, ...(ngDevMode ? [{ debugName: "#newDateEffect" }] : /* istanbul ignore next */ []));
+    }
+    #INIT_DATE;
+    getLastVisibleMonth() {
+        const lastMonthOffset = this.monthsToShow() - 1;
+        return this.getOffsetDate(lastMonthOffset);
+    }
+    getOffsetDate(monthOffset) {
+        const date = new Date(this.currentDate());
+        date.setMonth(date.getMonth() + monthOffset);
+        return date;
+    }
+    getMonthDates(monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return this.#generateMonthDates(offsetDate, this.startOfWeek());
+    }
+    #newDateEffect;
+    ngOnInit() {
+        if (this.monthsToShow() === 1)
+            return;
+        this.#setDateAsCurrent();
+    }
+    #setDateAsCurrent() {
+        const newDate = this.date();
+        if (newDate)
+            this.currentDate.set(newDate);
+        this.#findSelectedAndCalc();
+    }
+    #findSelectedAndCalc() {
+        setTimeout(() => {
+            const selectedElement = this.daysRef()?.nativeElement.querySelector('.sel');
+            if (!selectedElement) {
+                return this.selectedDateStylePosition.update((x) => (x ? { ...x, opacity: '0' } : null));
+            }
+            this.setSelectedDateStylePosition(selectedElement);
+        });
+    }
+    #generateMonthDates(date, startOfWeek) {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const dates = [];
+        let offset = firstDay - startOfWeek;
+        if (offset < 0) {
+            offset += 7;
+        }
+        const lastDayOfPrevMonth = new Date(year, month, 0).getDate();
+        for (let i = offset - 1; i >= 0; i--) {
+            dates.push(new Date(year, month - 1, lastDayOfPrevMonth - i, 0, 0, 0, 0));
+        }
+        for (let i = 1; i <= daysInMonth; i++) {
+            dates.push(new Date(year, month, i, 0, 0, 0, 0));
+        }
+        let nextMonthDay = 1;
+        while (dates.length % 7 !== 0) {
+            dates.push(new Date(year, month + 1, nextMonthDay++, 0, 0, 0, 0));
+        }
+        return dates;
+    }
+    nextMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() + 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
+    }
+    previousMonth() {
+        this.currentDate.update((currentDate) => {
+            const newDate = new Date(currentDate);
+            newDate.setMonth(currentDate.getMonth() - 1);
+            return newDate;
+        });
+        this.#findSelectedAndCalc();
+    }
+    setDate(newDate, selectedElement) {
+        const createDateWithExistingTime = (newDate, existingDate) => {
+            const hours = existingDate?.getHours() ?? 0;
+            const minutes = existingDate?.getMinutes() ?? 0;
+            const seconds = existingDate?.getSeconds() ?? 0;
+            const milliseconds = existingDate?.getMilliseconds() ?? 0;
+            return new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), hours, minutes, seconds, milliseconds);
+        };
+        if (!this.asRange()) {
+            this.date.set(createDateWithExistingTime(newDate, this.date()));
+            this.endDate.set(null);
+        }
+        else {
+            const startDate = this.date();
+            const endDate = this.endDate();
+            const utcDate = createDateWithExistingTime(newDate, null);
+            if (!startDate) {
+                this.date.set(utcDate);
+            }
+            else if (!endDate) {
+                if (utcDate < startDate) {
+                    this.date.set(utcDate);
+                    this.endDate.set(null);
+                }
+                else {
+                    this.endDate.set(utcDate);
+                }
+            }
+            else {
+                this.date.set(utcDate);
+                this.endDate.set(null);
+            }
+        }
+        if (this.asRange())
+            return;
+        this.setSelectedDateStylePosition(selectedElement);
+    }
+    isDateSelected(date) {
+        const startDate = this.date();
+        const endDate = this.endDate();
+        if (startDate === null)
+            return null;
+        const startOfDay = (date) => {
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+        };
+        const endOfDay = (date) => {
+            return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+        };
+        const currentDate = startOfDay(date);
+        const rangeStart = startOfDay(startDate);
+        const rangeEnd = endDate ? endOfDay(endDate) : null;
+        let classes = [];
+        if (this.asRange()) {
+            if (rangeEnd === null) {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('sel first last');
+                }
+            }
+            else {
+                if (currentDate.getTime() === rangeStart.getTime()) {
+                    classes.push('first');
+                }
+                if (currentDate.getTime() === startOfDay(rangeEnd).getTime()) {
+                    classes.push('last');
+                }
+                if (currentDate >= rangeStart && currentDate <= rangeEnd) {
+                    classes.push('sel');
+                    const dayOfWeek = currentDate.getDay();
+                    const startOfWeek = this.startOfWeek();
+                    if (dayOfWeek === startOfWeek) {
+                        classes.push('week-start');
+                    }
+                    const endOfWeek = (startOfWeek + 6) % 7;
+                    if (dayOfWeek === endOfWeek) {
+                        classes.push('week-end');
+                    }
+                }
+                const nextDate = new Date(currentDate);
+                nextDate.setDate(currentDate.getDate() + 1);
+                const prevDate = new Date(currentDate);
+                prevDate.setDate(currentDate.getDate() - 1);
+                const isFirstOfMonth = currentDate.getDate() === 1;
+                const isLastOfMonth = nextDate.getMonth() !== currentDate.getMonth();
+                if (isFirstOfMonth) {
+                    classes.push('month-start');
+                }
+                if (isLastOfMonth) {
+                    classes.push('month-end');
+                }
+            }
+        }
+        else {
+            if (currentDate.getTime() === rangeStart.getTime()) {
+                classes.push('sel');
+            }
+        }
+        return classes.join(' ') || null;
+    }
+    setSelectedDateStylePosition(selectedElement) {
+        this.selectedDateStylePosition.set({
+            transform: `translate(${selectedElement.offsetLeft}px, ${selectedElement.offsetTop}px)`,
+            opacity: '1',
+        });
+    }
+    getMonthName(date) {
+        return date.toLocaleString('default', { month: 'long' });
+    }
+    getFullYear(date) {
+        return date.getFullYear();
+    }
+    // Rest of the component methods remain the same, but update isCurrentMonth:
+    isCurrentMonth(date, monthOffset) {
+        const offsetDate = this.getOffsetDate(monthOffset);
+        return date.getMonth() === offsetDate.getMonth();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ShipDatepicker, isStandalone: true, selector: "sh-datepicker", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, asRange: { classPropertyName: "asRange", publicName: "asRange", isSignal: true, isRequired: false, transformFunction: null }, monthsToShow: { classPropertyName: "monthsToShow", publicName: "monthsToShow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, startOfWeek: { classPropertyName: "startOfWeek", publicName: "startOfWeek", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange", endDate: "endDateChange" }, host: { properties: { "class.as-range": "asRange()", "class": "\"columns-\" + monthsToShow()", "class.disabled": "disabled()" } }, viewQueries: [{ propertyName: "daysRef", first: true, predicate: ["daysRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <header>
+      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
+      </div>
+      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
+
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
+
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <div
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </div>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
+        </div>
+      }
+    </section>
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipFormFieldPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDatepicker, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sh-form-field-popover',
-                    imports: [ShipPopover],
+                    selector: 'sh-datepicker',
+                    imports: [ShipIcon],
                     template: `
-    <ng-content select="label"></ng-content>
-
-    <sh-popover
-      [(isOpen)]="isOpen"
-      (closed)="close()"
-      [options]="{
-        closeOnButton: false,
-        closeOnEsc: true,
-      }">
-      <div trigger class="input-wrap">
-        <div class="prefix">
-          <ng-content select="[prefix]"></ng-content>
-          <ng-content select="[textPrefix]"></ng-content>
-        </div>
-
-        <div class="prefix-space"></div>
-
-        <ng-content select="input"></ng-content>
-
-        <ng-content select="textarea"></ng-content>
-
-        <ng-content select="[textSuffix]"></ng-content>
-        <div class="suffix-space"></div>
-        <ng-content select="[suffix]"></ng-content>
+    <header>
+      <button (click)="previousMonth()"><sh-icon>caret-left</sh-icon></button>
+      <div class="title">
+        {{ getMonthName(currentDate()!) }}
+        @if (monthsToShow() > 1) {
+          - {{ getMonthName(getLastVisibleMonth()) }}
+        }
+        {{ getFullYear(currentDate()!) }}
       </div>
-      <ng-content select="[popoverContent]"></ng-content>
-    </sh-popover>
+      <button (click)="nextMonth()"><sh-icon>caret-right</sh-icon></button>
+    </header>
 
-    <div class="helpers">
-      <div class="error-wrap">
-        <ng-content select="[error]"></ng-content>
-      </div>
+    <section class="months-container">
+      @for (monthOffset of monthOffsets(); track monthOffset) {
+        <div class="month">
+          <nav class="weekdays">
+            @for (day of weekdays(); track $index) {
+              <div>{{ day }}</div>
+            }
+          </nav>
 
-      <div class="hint">
-        <ng-content select="[hint]"></ng-content>
-      </div>
-    </div>
+          <div class="days" #daysRef>
+            @for (calDate of getMonthDates(monthOffset); track $index) {
+              <div
+                #elementRef
+                [class.out-of-scope]="!isCurrentMonth(calDate, monthOffset)"
+                [class]="isDateSelected(calDate)"
+                (click)="setDate(calDate, elementRef)">
+                {{ calDate.getDate() }}
+              </div>
+            }
+
+            @if (!asRange()) {
+              <article class="days">
+                <div class="sel-el" [style]="selectedDateStylePosition()"></div>
+              </article>
+            }
+          </div>
+        </div>
+      }
+    </section>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class.as-range]': 'asRange()',
+                        '[class]': '"columns-" + monthsToShow()',
+                        '[class.disabled]': 'disabled()',
+                    },
                 }]
-        }], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }, { type: i0.Output, args: ["dateChange"] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }, { type: i0.Output, args: ["endDateChange"] }], asRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "asRange", required: false }] }], monthsToShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthsToShow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], startOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOfWeek", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], daysRef: [{ type: i0.ViewChild, args: ['daysRef', { isSignal: true }] }] } });
 
 class ShipDatepickerInput {
     constructor() {
@@ -3285,7 +4156,7 @@ class ShipDatepickerInput {
     </sh-form-field-popover>
 
     <ng-template #defaultIndicator></ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDatepickerInput, decorators: [{
             type: Component,
@@ -3457,7 +4328,7 @@ class ShipDaterangeInput {
         }
       </div>
     </sh-form-field-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipDatepicker, selector: "sh-datepicker", inputs: ["date", "endDate", "asRange", "monthsToShow", "disabled", "startOfWeek", "weekdayLabels"], outputs: ["dateChange", "endDateChange"] }, { kind: "component", type: ShipFormFieldPopover, selector: "sh-form-field-popover", inputs: ["isOpen", "color", "variant", "size", "readonly"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipDaterangeInput, decorators: [{
             type: Component,
@@ -3783,124 +4654,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], overlayText: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayText", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }] } });
 
-class ShipAccordion {
-    constructor() {
-        this.selfElement = inject((ElementRef)).nativeElement;
-        this.name = input(`sh-accordion-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.allowMultiple = input(false, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : /* istanbul ignore next */ []));
-        this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.hostClasses = shipComponentClasses('accordion', {
-            variant: this.variant,
-            size: this.size,
-        });
-        this.items = contentProjectionSignal('details', {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['open', 'value'],
-        });
-        this.selfElement.addEventListener('toggle', this.onToggle.bind(this), true);
-        effect(() => {
-            const isMultiple = this.allowMultiple();
-            const groupName = this.name();
-            const valStr = this.value();
-            const vals = valStr ? valStr.split(',').filter((v) => v !== '') : [];
-            this.items().forEach((details) => {
-                if (!isMultiple) {
-                    details.setAttribute('name', groupName);
-                }
-                else {
-                    details.removeAttribute('name');
-                }
-                const summary = details.querySelector('summary');
-                if (summary && !summary.querySelector('sh-icon')) {
-                    const icon = document.createElement('sh-icon');
-                    icon.textContent = 'caret-down';
-                    summary.appendChild(icon);
-                }
-                let contentWrapper = details.querySelector(':scope > .content');
-                if (!contentWrapper) {
-                    const newWrapper = document.createElement('div');
-                    newWrapper.className = 'content';
-                    const childrenToMove = Array.from(details.childNodes).filter((node) => {
-                        if (node.nodeType === Node.ELEMENT_NODE &&
-                            node.tagName.toLowerCase() === 'summary') {
-                            return false;
-                        }
-                        return true;
-                    });
-                    childrenToMove.forEach((child) => newWrapper.appendChild(child));
-                    details.appendChild(newWrapper);
-                    contentWrapper = newWrapper;
-                }
-                const itemVal = details.getAttribute('value');
-                if (itemVal && vals.includes(itemVal)) {
-                    // Avoid triggering endless loops by only setting open if it actually changed
-                    if (!details.open)
-                        details.open = true;
-                }
-                else if (itemVal) {
-                    if (details.open)
-                        details.open = false;
-                }
-            });
-        });
-    }
-    onToggle(event) {
-        const target = event.target;
-        if (target.tagName !== 'DETAILS')
-            return;
-        if (!this.selfElement.contains(target))
-            return;
-        const itemVal = target.getAttribute('value');
-        if (!itemVal)
-            return; // Uncontrolled details element
-        const isOpen = target.open;
-        if (this.allowMultiple()) {
-            let vals = this.value()
-                ? this.value()
-                    .split(',')
-                    .filter((v) => v !== '')
-                : [];
-            if (isOpen && !vals.includes(itemVal))
-                vals.push(itemVal);
-            if (!isOpen)
-                vals = vals.filter((v) => v !== itemVal);
-            this.value.set(vals.join(','));
-        }
-        else {
-            if (isOpen) {
-                this.value.set(itemVal);
-            }
-            else {
-                if (this.value() === itemVal) {
-                    this.value.set(null);
-                }
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipAccordion, isStandalone: true, selector: "sh-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sh-accordion": "true", "class": "hostClasses()" } }, ngImport: i0, template: `
-    <ng-content></ng-content>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipAccordion, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sh-accordion',
-                    template: `
-    <ng-content></ng-content>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class.sh-accordion]': 'true',
-                        '[class]': 'hostClasses()',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
 class ShipList {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ShipList, isStandalone: true, selector: "sh-list", ngImport: i0, template: `
@@ -4474,7 +5227,7 @@ class ShipMenu {
         <ng-content select="[menu]" />
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipMenu, decorators: [{
             type: Component,
@@ -4674,6 +5427,18 @@ class ShipRangeSlider {
             max: 100,
             step: 1,
         }, ...(ngDevMode ? [{ debugName: "inputState" }] : /* istanbul ignore next */ []));
+        this.color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input(null, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.sharp = input(undefined, ...(ngDevMode ? [{ debugName: "sharp" }] : /* istanbul ignore next */ []));
+        this.alwaysShow = input(undefined, ...(ngDevMode ? [{ debugName: "alwaysShow" }] : /* istanbul ignore next */ []));
+        this.hostClasses = shipComponentClasses('rangeSlider', {
+            color: this.color,
+            variant: this.variant,
+            size: this.size,
+            sharp: this.sharp,
+            alwaysShow: this.alwaysShow,
+        });
         this.valuePercentage = computed(() => {
             const { min, max } = this.inputState();
             const currentValue = this.value() ?? min;
@@ -4843,7 +5608,7 @@ class ShipRangeSlider {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipRangeSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipRangeSlider, isStandalone: true, selector: "sh-range-slider", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.has-input": "this.hasInputElement" } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ShipRangeSlider, isStandalone: true, selector: "sh-range-slider", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, sharp: { classPropertyName: "sharp", publicName: "sharp", isSignal: true, isRequired: false, transformFunction: null }, alwaysShow: { classPropertyName: "alwaysShow", publicName: "alwaysShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sh-range-slider": "true", "class": "hostClasses()", "class.has-input": "this.hasInputElement" } }, ngImport: i0, template: `
     <div class="label">
       <ng-content select="label"></ng-content>
     </div>
@@ -4900,8 +5665,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class.sh-range-slider]': 'true',
+                        '[class]': 'hostClasses()',
+                    },
                 }]
-        }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], hasInputElement: [{
+        }], propDecorators: { unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], sharp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sharp", required: false }] }], alwaysShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShow", required: false }] }], hasInputElement: [{
                 type: HostBinding,
                 args: ['class.has-input']
             }] } });
@@ -5659,7 +6428,7 @@ class ShipSelect {
         }
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopover, selector: "sh-popover", inputs: ["asMultiLayer", "asSheetOnMobile", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormField, selector: "sh-form-field", inputs: ["color", "variant", "size", "readonly"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipCheckbox, selector: "sh-checkbox", inputs: ["checked", "color", "variant", "readonly", "disabled", "noInternalInput"], outputs: ["checkedChange"] }, { kind: "component", type: ShipSpinner, selector: "sh-spinner", inputs: ["color"] }, { kind: "component", type: ShipChip, selector: "sh-chip", inputs: ["color", "variant", "size", "sharp", "dynamic", "readonly"] }, { kind: "component", type: ShipDivider, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ShipSelect, decorators: [{
             type: Component,
@@ -7727,5 +8496,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GridSortable, SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortable, SHIP_CONFIG, ShipAccordion, ShipAlert, ShipAlertContainer, ShipAlertModule, ShipAlertService, ShipBlueprint, ShipButton, ShipButtonGroup, ShipCard, ShipCheckbox, ShipChip, ShipColorPicker, ShipColorPickerInput, ShipDatepicker, ShipDatepickerInput, ShipDaterangeInput, ShipDialog, ShipDialogService, ShipDivider, ShipEventCard, ShipFileDragDrop, ShipFileUpload, ShipFormField, ShipFormFieldExperimental, ShipIcon, ShipInputMask, ShipList, ShipMenu, ShipPopover, ShipPreventWheel, ShipProgressBar, ShipRadio, ShipRangeSlider, ShipResize, ShipSelect, ShipSidenav, ShipSort, ShipSortable, ShipSpinner, ShipStepper, ShipStickyColumns, ShipTable, ShipTabs, ShipThemeToggle, ShipToggle, ShipToggleCard, ShipTooltip, ShipTooltipWrapper, ShipVirtualScroll, TEST_NODES, defaultThemeColors, hslToOklch, hslToRgbExact, hsvToRgbExact, moveIndex, rgbToHex, rgbToHsl, rgbToHsv, rgbToOklch, rgbaToHex8, watchHostClass };
 //# sourceMappingURL=ship-ui-core.mjs.map