@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-scroll-area-B0V4Dr2j.js

@@ -0,0 +1,402 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+//#region src/components/scroll-area/pk-scroll-area.styles.ts
+var pkScrollAreaStyles = css`
+    @layer pk-component {
+        :host {
+            --pk-shadow-color: var(--pk-color-white);
+            --pk-shadow-size: 2rem;
+            --pk-start-shadow-opacity: 0;
+            --pk-end-shadow-opacity: 0;
+
+            display: block;
+            position: relative;
+            max-width: 100%;
+            overflow: hidden;
+            isolation: isolate;
+            font-family: var(--pk-font-family);
+        }
+
+        :host([orientation='vertical']) {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .root {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+        }
+
+        .viewport {
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            outline: none;
+            scroll-behavior: smooth;
+            scrollbar-width: none;
+        }
+
+        .viewport::-webkit-scrollbar {
+            display: none;
+        }
+
+        .viewport:focus-visible {
+            box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-color-sky-600) 50%, transparent);
+        }
+
+        :host([orientation='horizontal']) .viewport {
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
+        :host([orientation='vertical']) .viewport {
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        .content {
+            min-height: 100%;
+        }
+
+        :host([orientation='horizontal']) .content {
+            width: max-content;
+            min-height: 100%;
+        }
+
+        .start-shadow,
+        .end-shadow {
+            z-index: 2;
+            position: absolute;
+            pointer-events: none;
+        }
+
+        .start-shadow {
+            opacity: var(--pk-start-shadow-opacity);
+        }
+
+        .end-shadow {
+            opacity: var(--pk-end-shadow-opacity);
+        }
+
+        :host([orientation='horizontal']) .start-shadow,
+        :host([orientation='horizontal']) .end-shadow {
+            top: 0;
+            bottom: 0;
+            width: var(--pk-shadow-size);
+        }
+
+        :host([orientation='horizontal']) .start-shadow {
+            left: 0;
+            background: linear-gradient(to right, var(--pk-shadow-color), transparent 100%);
+        }
+
+        :host([orientation='horizontal']) .end-shadow {
+            right: 0;
+            background: linear-gradient(to left, var(--pk-shadow-color), transparent 100%);
+        }
+
+        :host([orientation='vertical']) .start-shadow,
+        :host([orientation='vertical']) .end-shadow {
+            left: 0;
+            right: 0;
+            height: var(--pk-shadow-size);
+        }
+
+        :host([orientation='vertical']) .start-shadow {
+            top: 0;
+            background: linear-gradient(to bottom, var(--pk-shadow-color), transparent 100%);
+        }
+
+        :host([orientation='vertical']) .end-shadow {
+            bottom: 0;
+            background: linear-gradient(to top, var(--pk-shadow-color), transparent 100%);
+        }
+
+        .scrollbar {
+            /* Cross-axis thickness — size variants override via --pk-scroll-thumb-size. */
+            --pk-scroll-thumb-size: 8px;
+
+            z-index: 3;
+            position: absolute;
+            touch-action: none;
+            user-select: none;
+            border-radius: 9999px;
+            /* Track stays subtle; thumb carries the Craft gray affordance. */
+            background: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);
+            opacity: 0;
+            transition: opacity 0.15s ease;
+        }
+
+        .scrollbar.pk-scroll-area__scrollbar--size-xs {
+            --pk-scroll-thumb-size: 6px;
+        }
+
+        .scrollbar.pk-scroll-area__scrollbar--size-sm {
+            --pk-scroll-thumb-size: 7px;
+        }
+
+        .scrollbar.pk-scroll-area__scrollbar--size-default {
+            --pk-scroll-thumb-size: 8px;
+        }
+
+        /* Inset from the clipped host edge so the rounded thumb is fully visible. */
+        .scrollbar[data-orientation='vertical'] {
+            top: 4px;
+            right: 3px;
+            bottom: 4px;
+            width: var(--pk-scroll-thumb-size);
+            height: auto;
+        }
+
+        .scrollbar[data-orientation='horizontal'] {
+            left: 4px;
+            right: 4px;
+            bottom: 3px;
+            width: auto;
+            height: var(--pk-scroll-thumb-size);
+        }
+
+        .scrollbar[data-hovering],
+        .scrollbar[data-scrolling] {
+            opacity: 1;
+        }
+
+        .thumb {
+            position: absolute;
+            border-radius: 9999px;
+            background: var(--pk-color-gray-350);
+            transition: background 0.12s ease;
+        }
+
+        /* Min size is along the scroll axis only — never force cross-axis past the track. */
+        .scrollbar[data-orientation='vertical'] .thumb {
+            left: 0;
+            right: 0;
+            width: auto;
+            min-height: 24px;
+        }
+
+        .scrollbar[data-orientation='horizontal'] .thumb {
+            top: 0;
+            bottom: 0;
+            height: auto;
+            min-width: 24px;
+        }
+
+        .thumb:hover {
+            background: var(--pk-color-gray-500);
+        }
+    }
+`;
+//#endregion
+//#region src/components/scroll-area/pk-scroll-area.ts
+var PkScrollArea = class PkScrollArea extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = "vertical";
+		this.size = "default";
+		this.withoutShadow = false;
+		this.withoutScrollbar = false;
+		this.hovering = false;
+		this.scrolling = false;
+		this.canScroll = false;
+		this.scrollTimeout = 0;
+	}
+	static {
+		this.styles = pkScrollAreaStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.resizeObserver = new ResizeObserver(() => this.updateScroll());
+	}
+	disconnectedCallback() {
+		this.resizeObserver?.disconnect();
+		window.clearTimeout(this.scrollTimeout);
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this.resizeObserver?.observe(this.content);
+		this.updateScroll();
+	}
+	/** Scrolls the internal viewport. */
+	scrollContentTo(options) {
+		this.content.scrollTo(options ?? {});
+	}
+	handleScroll() {
+		this.scrolling = true;
+		window.clearTimeout(this.scrollTimeout);
+		this.scrollTimeout = window.setTimeout(() => {
+			this.scrolling = false;
+		}, 800);
+		this.updateScroll();
+		this.dispatchEvent(new CustomEvent("pk-scroll", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleSlotChange() {
+		this.updateScroll();
+	}
+	handlePointerEnter() {
+		this.hovering = true;
+	}
+	handlePointerLeave() {
+		this.hovering = false;
+	}
+	handleKeyDown(event) {
+		if (event.key === "Home") {
+			event.preventDefault();
+			this.content.scrollTo({
+				left: this.orientation === "horizontal" ? 0 : void 0,
+				top: this.orientation === "vertical" ? 0 : void 0
+			});
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			this.content.scrollTo({
+				left: this.orientation === "horizontal" ? this.content.scrollWidth : void 0,
+				top: this.orientation === "vertical" ? this.content.scrollHeight : void 0
+			});
+		}
+	}
+	updateScroll() {
+		const content = this.content;
+		if (!content) return;
+		if (this.orientation === "horizontal") {
+			const clientWidth = Math.ceil(content.clientWidth);
+			const scrollLeft = Math.abs(Math.ceil(content.scrollLeft));
+			const maxScroll = Math.ceil(content.scrollWidth) - clientWidth;
+			this.canScroll = maxScroll > 0;
+			if (!this.withoutShadow) {
+				const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollLeft / (maxScroll * .05)) : 0;
+				const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollLeft) / (maxScroll * .05)) : 0;
+				this.style.setProperty("--pk-start-shadow-opacity", String(startShadowOpacity || 0));
+				this.style.setProperty("--pk-end-shadow-opacity", String(endShadowOpacity || 0));
+			}
+		} else {
+			const clientHeight = Math.ceil(content.clientHeight);
+			const scrollTop = Math.abs(Math.ceil(content.scrollTop));
+			const maxScroll = Math.ceil(content.scrollHeight) - clientHeight;
+			this.canScroll = maxScroll > 0;
+			if (!this.withoutShadow) {
+				const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollTop / (maxScroll * .05)) : 0;
+				const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollTop) / (maxScroll * .05)) : 0;
+				this.style.setProperty("--pk-start-shadow-opacity", String(startShadowOpacity || 0));
+				this.style.setProperty("--pk-end-shadow-opacity", String(endShadowOpacity || 0));
+			}
+		}
+		this.updateThumb();
+	}
+	updateThumb() {
+		if (this.withoutScrollbar || !this.thumbElement || !this.scrollbarElement) return;
+		const content = this.content;
+		if (this.orientation === "horizontal") {
+			const { scrollLeft, scrollWidth, clientWidth } = content;
+			if (scrollWidth <= clientWidth) {
+				this.scrollbarElement.style.display = "none";
+				return;
+			}
+			this.scrollbarElement.style.display = "flex";
+			const trackWidth = this.scrollbarElement.clientWidth;
+			const thumbRatio = clientWidth / scrollWidth;
+			const thumbWidth = Math.max(trackWidth * thumbRatio, 24);
+			const maxScroll = scrollWidth - clientWidth;
+			const thumbLeft = (maxScroll > 0 ? scrollLeft / maxScroll : 0) * (trackWidth - thumbWidth);
+			this.thumbElement.style.width = `${thumbWidth}px`;
+			this.thumbElement.style.height = "";
+			this.thumbElement.style.transform = `translateX(${thumbLeft}px)`;
+			return;
+		}
+		const { scrollTop, scrollHeight, clientHeight } = content;
+		if (scrollHeight <= clientHeight) {
+			this.scrollbarElement.style.display = "none";
+			return;
+		}
+		this.scrollbarElement.style.display = "flex";
+		const trackHeight = this.scrollbarElement.clientHeight;
+		const thumbRatio = clientHeight / scrollHeight;
+		const thumbHeight = Math.max(trackHeight * thumbRatio, 24);
+		const maxScroll = scrollHeight - clientHeight;
+		const thumbTop = (maxScroll > 0 ? scrollTop / maxScroll : 0) * (trackHeight - thumbHeight);
+		this.thumbElement.style.height = `${thumbHeight}px`;
+		this.thumbElement.style.width = "";
+		this.thumbElement.style.transform = `translateY(${thumbTop}px)`;
+	}
+	render() {
+		this.orientation;
+		return html`
+            <div
+                part="base"
+                class="root pk-scroll-area"
+                @pointerenter=${this.handlePointerEnter}
+                @pointerleave=${this.handlePointerLeave}
+            >
+                ${this.withoutShadow ? nothing : html`
+                        <div part="start-shadow" class="start-shadow" aria-hidden="true"></div>
+                        <div part="end-shadow" class="end-shadow" aria-hidden="true"></div>
+                    `}
+                <div
+                    part="viewport"
+                    class="viewport pk-scroll-area__viewport"
+                    tabindex=${this.canScroll ? "0" : nothing}
+                    @scroll=${this.handleScroll}
+                    @keydown=${this.handleKeyDown}
+                >
+                    <div
+                        part="content"
+                        class="content pk-scroll-area__content"
+                        @slotchange=${this.handleSlotChange}
+                    >
+                        <slot></slot>
+                    </div>
+                </div>
+                ${this.withoutScrollbar ? nothing : html`
+                        <div
+                            part="scrollbar"
+                            class=${classMap({
+			scrollbar: true,
+			"pk-scroll-area__scrollbar": true,
+			[`pk-scroll-area__scrollbar--size-${this.size}`]: true
+		})}
+                            data-orientation=${this.orientation}
+                            ?data-hovering=${this.hovering}
+                            ?data-scrolling=${this.scrolling}
+                        >
+                            <div part="thumb" class="thumb pk-scroll-area__thumb"></div>
+                        </div>
+                    `}
+            </div>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkScrollArea.prototype, "orientation", void 0);
+__decorate([property({ reflect: true })], PkScrollArea.prototype, "size", void 0);
+__decorate([property({
+	attribute: "without-shadow",
+	type: Boolean,
+	reflect: true
+})], PkScrollArea.prototype, "withoutShadow", void 0);
+__decorate([property({
+	attribute: "without-scrollbar",
+	type: Boolean,
+	reflect: true
+})], PkScrollArea.prototype, "withoutScrollbar", void 0);
+__decorate([query(".viewport")], PkScrollArea.prototype, "content", void 0);
+__decorate([query(".scrollbar")], PkScrollArea.prototype, "scrollbarElement", void 0);
+__decorate([query(".thumb")], PkScrollArea.prototype, "thumbElement", void 0);
+__decorate([state()], PkScrollArea.prototype, "hovering", void 0);
+__decorate([state()], PkScrollArea.prototype, "scrolling", void 0);
+__decorate([state()], PkScrollArea.prototype, "canScroll", void 0);
+PkScrollArea = __decorate([customElement("pk-scroll-area")], PkScrollArea);
+//#endregion
+export { PkScrollArea as t };
+
+//# sourceMappingURL=pk-scroll-area-B0V4Dr2j.js.map

package/dist/chunks/pk-scroll-area-B0V4Dr2j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-scroll-area-B0V4Dr2j.js","names":[],"sources":["../../src/components/scroll-area/pk-scroll-area.styles.ts","../../src/components/scroll-area/pk-scroll-area.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkScrollAreaStyles = css`\n    @layer pk-component {\n        :host {\n            --pk-shadow-color: var(--pk-color-white);\n            --pk-shadow-size: 2rem;\n            --pk-start-shadow-opacity: 0;\n            --pk-end-shadow-opacity: 0;\n\n            display: block;\n            position: relative;\n            max-width: 100%;\n            overflow: hidden;\n            isolation: isolate;\n            font-family: var(--pk-font-family);\n        }\n\n        :host([orientation='vertical']) {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n        }\n\n        .root {\n            position: relative;\n            overflow: hidden;\n            width: 100%;\n            height: 100%;\n        }\n\n        .viewport {\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            border-radius: inherit;\n            outline: none;\n            scroll-behavior: smooth;\n            scrollbar-width: none;\n        }\n\n        .viewport::-webkit-scrollbar {\n            display: none;\n        }\n\n        .viewport:focus-visible {\n            box-shadow: 0 0 0 3px color-mix(in oklab, var(--pk-color-sky-600) 50%, transparent);\n        }\n\n        :host([orientation='horizontal']) .viewport {\n            overflow-x: auto;\n            overflow-y: hidden;\n        }\n\n        :host([orientation='vertical']) .viewport {\n            flex: 1 1 auto;\n            min-height: 0;\n            overflow-x: hidden;\n            overflow-y: auto;\n        }\n\n        .content {\n            min-height: 100%;\n        }\n\n        :host([orientation='horizontal']) .content {\n            width: max-content;\n            min-height: 100%;\n        }\n\n        .start-shadow,\n        .end-shadow {\n            z-index: 2;\n            position: absolute;\n            pointer-events: none;\n        }\n\n        .start-shadow {\n            opacity: var(--pk-start-shadow-opacity);\n        }\n\n        .end-shadow {\n            opacity: var(--pk-end-shadow-opacity);\n        }\n\n        :host([orientation='horizontal']) .start-shadow,\n        :host([orientation='horizontal']) .end-shadow {\n            top: 0;\n            bottom: 0;\n            width: var(--pk-shadow-size);\n        }\n\n        :host([orientation='horizontal']) .start-shadow {\n            left: 0;\n            background: linear-gradient(to right, var(--pk-shadow-color), transparent 100%);\n        }\n\n        :host([orientation='horizontal']) .end-shadow {\n            right: 0;\n            background: linear-gradient(to left, var(--pk-shadow-color), transparent 100%);\n        }\n\n        :host([orientation='vertical']) .start-shadow,\n        :host([orientation='vertical']) .end-shadow {\n            left: 0;\n            right: 0;\n            height: var(--pk-shadow-size);\n        }\n\n        :host([orientation='vertical']) .start-shadow {\n            top: 0;\n            background: linear-gradient(to bottom, var(--pk-shadow-color), transparent 100%);\n        }\n\n        :host([orientation='vertical']) .end-shadow {\n            bottom: 0;\n            background: linear-gradient(to top, var(--pk-shadow-color), transparent 100%);\n        }\n\n        .scrollbar {\n            /* Cross-axis thickness — size variants override via --pk-scroll-thumb-size. */\n            --pk-scroll-thumb-size: 8px;\n\n            z-index: 3;\n            position: absolute;\n            touch-action: none;\n            user-select: none;\n            border-radius: 9999px;\n            /* Track stays subtle; thumb carries the Craft gray affordance. */\n            background: color-mix(in oklab, var(--pk-color-gray-200) 70%, transparent);\n            opacity: 0;\n            transition: opacity 0.15s ease;\n        }\n\n        .scrollbar.pk-scroll-area__scrollbar--size-xs {\n            --pk-scroll-thumb-size: 6px;\n        }\n\n        .scrollbar.pk-scroll-area__scrollbar--size-sm {\n            --pk-scroll-thumb-size: 7px;\n        }\n\n        .scrollbar.pk-scroll-area__scrollbar--size-default {\n            --pk-scroll-thumb-size: 8px;\n        }\n\n        /* Inset from the clipped host edge so the rounded thumb is fully visible. */\n        .scrollbar[data-orientation='vertical'] {\n            top: 4px;\n            right: 3px;\n            bottom: 4px;\n            width: var(--pk-scroll-thumb-size);\n            height: auto;\n        }\n\n        .scrollbar[data-orientation='horizontal'] {\n            left: 4px;\n            right: 4px;\n            bottom: 3px;\n            width: auto;\n            height: var(--pk-scroll-thumb-size);\n        }\n\n        .scrollbar[data-hovering],\n        .scrollbar[data-scrolling] {\n            opacity: 1;\n        }\n\n        .thumb {\n            position: absolute;\n            border-radius: 9999px;\n            background: var(--pk-color-gray-350);\n            transition: background 0.12s ease;\n        }\n\n        /* Min size is along the scroll axis only — never force cross-axis past the track. */\n        .scrollbar[data-orientation='vertical'] .thumb {\n            left: 0;\n            right: 0;\n            width: auto;\n            min-height: 24px;\n        }\n\n        .scrollbar[data-orientation='horizontal'] .thumb {\n            top: 0;\n            bottom: 0;\n            height: auto;\n            min-width: 24px;\n        }\n\n        .thumb:hover {\n            background: var(--pk-color-gray-500);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkScrollAreaStyles } from './pk-scroll-area.styles.js';\n\nexport type PkScrollAreaSize = 'xs' | 'sm' | 'default';\nexport type PkScrollAreaOrientation = 'horizontal' | 'vertical';\n\n/**\n * Scrollable region —  scroller pattern with optional custom thumb + edge shadows.\n *\n * @slot - Scrollable content\n *\n * @event pk-scroll - Emitted when the viewport scrolls.\n *\n * @csspart base - Root container\n * @csspart content - Scrollable content wrapper\n * @csspart viewport - Scroll viewport (alias for content)\n * @csspart start-shadow - Leading edge shadow\n * @csspart end-shadow - Trailing edge shadow\n * @csspart scrollbar - Custom scrollbar track\n * @csspart thumb - Custom scrollbar thumb\n */\n@customElement('pk-scroll-area')\nexport class PkScrollArea extends PkElement {\n    static override styles = pkScrollAreaStyles;\n\n    @property({ reflect: true })\n    orientation: PkScrollAreaOrientation = 'vertical';\n\n    @property({ reflect: true })\n    size: PkScrollAreaSize = 'default';\n\n    @property({ attribute: 'without-shadow', type: Boolean, reflect: true })\n    withoutShadow = false;\n\n    @property({ attribute: 'without-scrollbar', type: Boolean, reflect: true })\n    withoutScrollbar = false;\n\n    /** Readonly reference to the internal scroll container. */\n    @query('.viewport')\n    content!: HTMLDivElement;\n\n    @query('.scrollbar')\n    private scrollbarElement?: HTMLDivElement;\n\n    @query('.thumb')\n    private thumbElement?: HTMLDivElement;\n\n    @state()\n    private hovering = false;\n\n    @state()\n    private scrolling = false;\n\n    @state()\n    private canScroll = false;\n\n    private scrollTimeout = 0;\n    private resizeObserver?: ResizeObserver;\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.resizeObserver = new ResizeObserver(() => this.updateScroll());\n    }\n\n    override disconnectedCallback(): void {\n        this.resizeObserver?.disconnect();\n        window.clearTimeout(this.scrollTimeout);\n        super.disconnectedCallback();\n    }\n\n    override firstUpdated(): void {\n        this.resizeObserver?.observe(this.content);\n        this.updateScroll();\n    }\n\n    /** Scrolls the internal viewport. */\n    scrollContentTo(options?: ScrollToOptions): void {\n        this.content.scrollTo(options ?? {});\n    }\n\n    private handleScroll(): void {\n        this.scrolling = true;\n        window.clearTimeout(this.scrollTimeout);\n        this.scrollTimeout = window.setTimeout(() => {\n            this.scrolling = false;\n        }, 800);\n\n        this.updateScroll();\n        this.dispatchEvent(new CustomEvent('pk-scroll', { bubbles: true, composed: true }));\n    }\n\n    private handleSlotChange(): void {\n        this.updateScroll();\n    }\n\n    private handlePointerEnter(): void {\n        this.hovering = true;\n    }\n\n    private handlePointerLeave(): void {\n        this.hovering = false;\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        if (event.key === 'Home') {\n            event.preventDefault();\n            this.content.scrollTo({\n                left: this.orientation === 'horizontal' ? 0 : undefined,\n                top: this.orientation === 'vertical' ? 0 : undefined,\n            });\n        }\n\n        if (event.key === 'End') {\n            event.preventDefault();\n            this.content.scrollTo({\n                left: this.orientation === 'horizontal' ? this.content.scrollWidth : undefined,\n                top: this.orientation === 'vertical' ? this.content.scrollHeight : undefined,\n            });\n        }\n    }\n\n    private updateScroll(): void {\n        const content = this.content;\n\n        if (!content) {\n            return;\n        }\n\n        if (this.orientation === 'horizontal') {\n            const clientWidth = Math.ceil(content.clientWidth);\n            const scrollLeft = Math.abs(Math.ceil(content.scrollLeft));\n            const scrollWidth = Math.ceil(content.scrollWidth);\n            const maxScroll = scrollWidth - clientWidth;\n\n            this.canScroll = maxScroll > 0;\n\n            if (!this.withoutShadow) {\n                const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollLeft / (maxScroll * 0.05)) : 0;\n                const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollLeft) / (maxScroll * 0.05)) : 0;\n                this.style.setProperty('--pk-start-shadow-opacity', String(startShadowOpacity || 0));\n                this.style.setProperty('--pk-end-shadow-opacity', String(endShadowOpacity || 0));\n            }\n        } else {\n            const clientHeight = Math.ceil(content.clientHeight);\n            const scrollTop = Math.abs(Math.ceil(content.scrollTop));\n            const scrollHeight = Math.ceil(content.scrollHeight);\n            const maxScroll = scrollHeight - clientHeight;\n\n            this.canScroll = maxScroll > 0;\n\n            if (!this.withoutShadow) {\n                const startShadowOpacity = maxScroll > 0 ? Math.min(1, scrollTop / (maxScroll * 0.05)) : 0;\n                const endShadowOpacity = maxScroll > 0 ? Math.min(1, (maxScroll - scrollTop) / (maxScroll * 0.05)) : 0;\n                this.style.setProperty('--pk-start-shadow-opacity', String(startShadowOpacity || 0));\n                this.style.setProperty('--pk-end-shadow-opacity', String(endShadowOpacity || 0));\n            }\n        }\n\n        this.updateThumb();\n    }\n\n    private updateThumb(): void {\n        if (this.withoutScrollbar || !this.thumbElement || !this.scrollbarElement) {\n            return;\n        }\n\n        const content = this.content;\n\n        if (this.orientation === 'horizontal') {\n            const { scrollLeft, scrollWidth, clientWidth } = content;\n\n            if (scrollWidth <= clientWidth) {\n                this.scrollbarElement.style.display = 'none';\n                return;\n            }\n\n            this.scrollbarElement.style.display = 'flex';\n            const trackWidth = this.scrollbarElement.clientWidth;\n            const thumbRatio = clientWidth / scrollWidth;\n            const thumbWidth = Math.max(trackWidth * thumbRatio, 24);\n            const maxScroll = scrollWidth - clientWidth;\n            const scrollRatio = maxScroll > 0 ? scrollLeft / maxScroll : 0;\n            const thumbLeft = scrollRatio * (trackWidth - thumbWidth);\n\n            this.thumbElement.style.width = `${thumbWidth}px`;\n            this.thumbElement.style.height = '';\n            this.thumbElement.style.transform = `translateX(${thumbLeft}px)`;\n            return;\n        }\n\n        const { scrollTop, scrollHeight, clientHeight } = content;\n\n        if (scrollHeight <= clientHeight) {\n            this.scrollbarElement.style.display = 'none';\n            return;\n        }\n\n        this.scrollbarElement.style.display = 'flex';\n\n        const trackHeight = this.scrollbarElement.clientHeight;\n        const thumbRatio = clientHeight / scrollHeight;\n        const thumbHeight = Math.max(trackHeight * thumbRatio, 24);\n        const maxScroll = scrollHeight - clientHeight;\n        const scrollRatio = maxScroll > 0 ? scrollTop / maxScroll : 0;\n        const thumbTop = scrollRatio * (trackHeight - thumbHeight);\n\n        this.thumbElement.style.height = `${thumbHeight}px`;\n        this.thumbElement.style.width = '';\n        this.thumbElement.style.transform = `translateY(${thumbTop}px)`;\n    }\n\n    override render() {\n        const isVertical = this.orientation === 'vertical';\n\n        return html`\n            <div\n                part=\"base\"\n                class=\"root pk-scroll-area\"\n                @pointerenter=${this.handlePointerEnter}\n                @pointerleave=${this.handlePointerLeave}\n            >\n                ${this.withoutShadow\n                    ? nothing\n                    : html`\n                        <div part=\"start-shadow\" class=\"start-shadow\" aria-hidden=\"true\"></div>\n                        <div part=\"end-shadow\" class=\"end-shadow\" aria-hidden=\"true\"></div>\n                    `}\n                <div\n                    part=\"viewport\"\n                    class=\"viewport pk-scroll-area__viewport\"\n                    tabindex=${this.canScroll ? '0' : nothing}\n                    @scroll=${this.handleScroll}\n                    @keydown=${this.handleKeyDown}\n                >\n                    <div\n                        part=\"content\"\n                        class=\"content pk-scroll-area__content\"\n                        @slotchange=${this.handleSlotChange}\n                    >\n                        <slot></slot>\n                    </div>\n                </div>\n                ${this.withoutScrollbar\n                    ? nothing\n                    : html`\n                        <div\n                            part=\"scrollbar\"\n                            class=${classMap({\n                                scrollbar: true,\n                                'pk-scroll-area__scrollbar': true,\n                                [`pk-scroll-area__scrollbar--size-${this.size}`]: true,\n                            })}\n                            data-orientation=${this.orientation}\n                            ?data-hovering=${this.hovering}\n                            ?data-scrolling=${this.scrolling}\n                        >\n                            <div part=\"thumb\" class=\"thumb pk-scroll-area__thumb\"></div>\n                        </div>\n                    `}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-scroll-area': PkScrollArea;\n    }\n}\n"],"mappings":";;;;;AAEA,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACwB9B,IAAA,eAAA,MAAM,qBAAqB,UAAU;;;qBAID;cAGd;uBAGT;0BAGG;kBAaA;mBAGC;mBAGA;uBAEI;;;gBAjCC;;CAoCzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,IAAI,qBAAqB,KAAK,cAAc,CAAC;;CAGvE,uBAAsC;AAClC,OAAK,gBAAgB,YAAY;AACjC,SAAO,aAAa,KAAK,cAAc;AACvC,QAAM,sBAAsB;;CAGhC,eAA8B;AAC1B,OAAK,gBAAgB,QAAQ,KAAK,QAAQ;AAC1C,OAAK,cAAc;;;CAIvB,gBAAgB,SAAiC;AAC7C,OAAK,QAAQ,SAAS,WAAW,EAAE,CAAC;;CAGxC,eAA6B;AACzB,OAAK,YAAY;AACjB,SAAO,aAAa,KAAK,cAAc;AACvC,OAAK,gBAAgB,OAAO,iBAAiB;AACzC,QAAK,YAAY;KAClB,IAAI;AAEP,OAAK,cAAc;AACnB,OAAK,cAAc,IAAI,YAAY,aAAa;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGvF,mBAAiC;AAC7B,OAAK,cAAc;;CAGvB,qBAAmC;AAC/B,OAAK,WAAW;;CAGpB,qBAAmC;AAC/B,OAAK,WAAW;;CAGpB,cAAsB,OAA4B;AAC9C,MAAI,MAAM,QAAQ,QAAQ;AACtB,SAAM,gBAAgB;AACtB,QAAK,QAAQ,SAAS;IAClB,MAAM,KAAK,gBAAgB,eAAe,IAAI,KAAA;IAC9C,KAAK,KAAK,gBAAgB,aAAa,IAAI,KAAA;IAC9C,CAAC;;AAGN,MAAI,MAAM,QAAQ,OAAO;AACrB,SAAM,gBAAgB;AACtB,QAAK,QAAQ,SAAS;IAClB,MAAM,KAAK,gBAAgB,eAAe,KAAK,QAAQ,cAAc,KAAA;IACrE,KAAK,KAAK,gBAAgB,aAAa,KAAK,QAAQ,eAAe,KAAA;IACtE,CAAC;;;CAIV,eAA6B;EACzB,MAAM,UAAU,KAAK;AAErB,MAAI,CAAC,QACD;AAGJ,MAAI,KAAK,gBAAgB,cAAc;GACnC,MAAM,cAAc,KAAK,KAAK,QAAQ,YAAY;GAClD,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,QAAQ,WAAW,CAAC;GAE1D,MAAM,YADc,KAAK,KAAK,QAAQ,YACpB,GAAc;AAEhC,QAAK,YAAY,YAAY;AAE7B,OAAI,CAAC,KAAK,eAAe;IACrB,MAAM,qBAAqB,YAAY,IAAI,KAAK,IAAI,GAAG,cAAc,YAAY,KAAM,GAAG;IAC1F,MAAM,mBAAmB,YAAY,IAAI,KAAK,IAAI,IAAI,YAAY,eAAe,YAAY,KAAM,GAAG;AACtG,SAAK,MAAM,YAAY,6BAA6B,OAAO,sBAAsB,EAAE,CAAC;AACpF,SAAK,MAAM,YAAY,2BAA2B,OAAO,oBAAoB,EAAE,CAAC;;SAEjF;GACH,MAAM,eAAe,KAAK,KAAK,QAAQ,aAAa;GACpD,MAAM,YAAY,KAAK,IAAI,KAAK,KAAK,QAAQ,UAAU,CAAC;GAExD,MAAM,YADe,KAAK,KAAK,QAAQ,aACrB,GAAe;AAEjC,QAAK,YAAY,YAAY;AAE7B,OAAI,CAAC,KAAK,eAAe;IACrB,MAAM,qBAAqB,YAAY,IAAI,KAAK,IAAI,GAAG,aAAa,YAAY,KAAM,GAAG;IACzF,MAAM,mBAAmB,YAAY,IAAI,KAAK,IAAI,IAAI,YAAY,cAAc,YAAY,KAAM,GAAG;AACrG,SAAK,MAAM,YAAY,6BAA6B,OAAO,sBAAsB,EAAE,CAAC;AACpF,SAAK,MAAM,YAAY,2BAA2B,OAAO,oBAAoB,EAAE,CAAC;;;AAIxF,OAAK,aAAa;;CAGtB,cAA4B;AACxB,MAAI,KAAK,oBAAoB,CAAC,KAAK,gBAAgB,CAAC,KAAK,iBACrD;EAGJ,MAAM,UAAU,KAAK;AAErB,MAAI,KAAK,gBAAgB,cAAc;GACnC,MAAM,EAAE,YAAY,aAAa,gBAAgB;AAEjD,OAAI,eAAe,aAAa;AAC5B,SAAK,iBAAiB,MAAM,UAAU;AACtC;;AAGJ,QAAK,iBAAiB,MAAM,UAAU;GACtC,MAAM,aAAa,KAAK,iBAAiB;GACzC,MAAM,aAAa,cAAc;GACjC,MAAM,aAAa,KAAK,IAAI,aAAa,YAAY,GAAG;GACxD,MAAM,YAAY,cAAc;GAEhC,MAAM,aADc,YAAY,IAAI,aAAa,YAAY,MAC5B,aAAa;AAE9C,QAAK,aAAa,MAAM,QAAQ,GAAG,WAAW;AAC9C,QAAK,aAAa,MAAM,SAAS;AACjC,QAAK,aAAa,MAAM,YAAY,cAAc,UAAU;AAC5D;;EAGJ,MAAM,EAAE,WAAW,cAAc,iBAAiB;AAElD,MAAI,gBAAgB,cAAc;AAC9B,QAAK,iBAAiB,MAAM,UAAU;AACtC;;AAGJ,OAAK,iBAAiB,MAAM,UAAU;EAEtC,MAAM,cAAc,KAAK,iBAAiB;EAC1C,MAAM,aAAa,eAAe;EAClC,MAAM,cAAc,KAAK,IAAI,cAAc,YAAY,GAAG;EAC1D,MAAM,YAAY,eAAe;EAEjC,MAAM,YADc,YAAY,IAAI,YAAY,YAAY,MAC5B,cAAc;AAE9C,OAAK,aAAa,MAAM,SAAS,GAAG,YAAY;AAChD,OAAK,aAAa,MAAM,QAAQ;AAChC,OAAK,aAAa,MAAM,YAAY,cAAc,SAAS;;CAG/D,SAAkB;AACK,OAAK;AAExB,SAAO,IAAI;;;;gCAIa,KAAK,mBAAmB;gCACxB,KAAK,mBAAmB;;kBAEtC,KAAK,gBACD,UACA,IAAI;;;sBAGJ;;;;+BAIS,KAAK,YAAY,MAAM,QAAQ;8BAChC,KAAK,aAAa;+BACjB,KAAK,cAAc;;;;;sCAKZ,KAAK,iBAAiB;;;;;kBAK1C,KAAK,mBACD,UACA,IAAI;;;oCAGU,SAAS;GACb,WAAW;GACX,6BAA6B;IAC5B,mCAAmC,KAAK,SAAS;GACrD,CAAC,CAAC;+CACgB,KAAK,YAAY;6CACnB,KAAK,SAAS;8CACb,KAAK,UAAU;;;;sBAIvC;;;;;YAzOjB,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,aAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,iBAAA,KAAA,EAAA;YAGvE,SAAS;CAAE,WAAW;CAAqB,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,oBAAA,KAAA,EAAA;YAI1E,MAAM,YAAY,CAAA,EAAA,aAAA,WAAA,WAAA,KAAA,EAAA;YAGlB,MAAM,aAAa,CAAA,EAAA,aAAA,WAAA,oBAAA,KAAA,EAAA;YAGnB,MAAM,SAAS,CAAA,EAAA,aAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,OAAO,CAAA,EAAA,aAAA,WAAA,YAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,aAAA,WAAA,aAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,aAAA,WAAA,aAAA,KAAA,EAAA;2BAhCX,cAAc,iBAAiB,CAAA,EAAA,aAAA"}