@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/carousel/carousel/carousel.js

@@ -0,0 +1,631 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, stopEventBubbling, OneOf, Type, raf } from "../../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../../global/index";
+import { CAROUSEL_CONTROLS, CAROUSEL_VARIANTS, } from "../carousel.interfaces";
+import { i18nDsCarousel } from "./carousel.i18n";
+/**
+ * Carousel coordinates ds-carousel-item children into a scrollable, accessible slide interface. Supports an image slider and a product tile strip.
+ *
+ * @slot - ds-carousel-item children.
+ * @part track - The scrollable item track.
+ */
+export class Carousel {
+    constructor() {
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.activeIndex = 0;
+        this.itemCount = 0;
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.dragging = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls.
+         */
+        this.controls = 'dots';
+        /**
+         * Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling.
+         */
+        this.variant = 'slide';
+        /**
+         * Number of items visible at once. `auto` sizes items by content. A number divides the container width equally.
+         */
+        this.itemsPerView = 'auto';
+        /**
+         * Accessible label for the carousel region.
+         */
+        this.label = '';
+        /**
+         * Number of items to advance per arrow click.
+         */
+        this.steps = 1;
+        this.intersectionInitialized = false;
+        this.momentumAnimId = 0;
+        this.dragStartX = 0;
+        this.dragStartScrollLeft = 0;
+        this.velocityHistory = [];
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            const items = this.getItems();
+            const currentIndex = items.findIndex(i => i.name === this.value);
+            const isForward = ev.key === 'ArrowRight';
+            const isBackward = ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateItem((_a = items[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateItem((_b = items[items.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateItem((_c = items[(currentIndex + 1) % items.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateItem((_d = items[(currentIndex - 1 + items.length) % items.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+            this.initIntersection();
+        };
+        this.scrollPrev = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            if (this.variant === 'slide') {
+                el.scrollBy({ left: -(el.clientWidth * this.steps), behavior: 'smooth' });
+                return;
+            }
+            const items = this.getItems();
+            const firstVisible = this.getFirstVisibleIndex(items, el);
+            const target = items[Math.max(firstVisible - this.steps, 0)];
+            if (!target)
+                return;
+            const fadeWidth = this.getFadeWidthPx();
+            const dx = target.getBoundingClientRect().left - el.getBoundingClientRect().left - fadeWidth;
+            el.scrollBy({ left: dx, behavior: 'smooth' });
+        };
+        this.scrollNext = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            if (this.variant === 'slide') {
+                el.scrollBy({ left: el.clientWidth * this.steps, behavior: 'smooth' });
+                return;
+            }
+            const items = this.getItems();
+            const firstVisible = this.getFirstVisibleIndex(items, el);
+            const target = items[Math.min(firstVisible + this.steps, items.length - 1)];
+            if (!target)
+                return;
+            const fadeWidth = this.getFadeWidthPx();
+            const dx = target.getBoundingClientRect().left - el.getBoundingClientRect().left - fadeWidth;
+            el.scrollBy({ left: dx, behavior: 'smooth' });
+        };
+        this.checkOverflow = () => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            this.canScrollLeft = el.scrollLeft > 0;
+            this.canScrollRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        };
+        this.handlePointerDown = (ev) => {
+            const el = this.trackEl;
+            if (!el)
+                return;
+            cancelAnimationFrame(this.momentumAnimId);
+            this.dragging = true;
+            this.dragStartX = ev.clientX;
+            this.dragStartScrollLeft = el.scrollLeft;
+            this.velocityHistory = [];
+            // Disable CSS smooth-scroll during drag so track follows pointer exactly.
+            // NOTE: setPointerCapture is intentionally deferred to the first pointermove.
+            // Setting it here causes Chromium to retarget click away from interactive
+            // children (carousel-items) when pointerdown and pointerup targets differ.
+            el.style.scrollBehavior = 'auto';
+        };
+        this.handlePointerMove = (ev) => {
+            if (!this.dragging || !this.trackEl)
+                return;
+            const el = this.trackEl;
+            // Capture the pointer on first actual movement so dragging stays smooth
+            // even when the pointer leaves the track — but only after a real drag starts.
+            if (!el.hasPointerCapture(ev.pointerId)) {
+                el.setPointerCapture(ev.pointerId);
+            }
+            const dx = ev.clientX - this.dragStartX;
+            el.scrollLeft = this.dragStartScrollLeft - dx;
+            this.velocityHistory.push({ x: ev.clientX, t: performance.now() });
+            if (this.velocityHistory.length > 5)
+                this.velocityHistory.shift();
+        };
+        this.handlePointerUp = (ev) => {
+            if (!this.dragging || !this.trackEl)
+                return;
+            const el = this.trackEl;
+            this.dragging = false;
+            el.style.scrollBehavior = '';
+            el.releasePointerCapture(ev.pointerId);
+            const velocity = this.calcVelocity();
+            if (this.variant === 'slide') {
+                const slideWidth = el.clientWidth;
+                const travelDx = this.dragStartScrollLeft - el.scrollLeft;
+                // Commit next/prev if swipe is fast enough or covers > 25 % of slide width
+                if (velocity > 0.3 || travelDx < -(slideWidth * 0.25)) {
+                    this.scrollNext();
+                }
+                else if (velocity < -0.3 || travelDx > slideWidth * 0.25) {
+                    this.scrollPrev();
+                }
+                else {
+                    el.scrollTo({ left: this.dragStartScrollLeft, behavior: 'smooth' });
+                }
+            }
+            else {
+                this.applyMomentum(velocity);
+            }
+        };
+        this.handlePaginationChange = (ev) => {
+            stopEventBubbling(ev);
+            const items = this.getItems();
+            const item = items[ev.detail - 1];
+            if (item)
+                this.activateItem(item.name);
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    componentDidLoad() {
+        this.setup();
+        this.initScroll();
+        this.initIntersection();
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+        if (this.variant === 'tile')
+            this.checkOverflow();
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.trackEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('scroll', this.checkOverflow);
+        cancelAnimationFrame(this.momentumAnimId);
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsCarouselItemSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateItem(ev.detail.name);
+    }
+    getFirstVisibleIndex(items, trackEl) {
+        const trackLeft = trackEl.getBoundingClientRect().left;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].getBoundingClientRect().left >= trackLeft - 2)
+                return i;
+        }
+        return 0;
+    }
+    getFadeWidthPx() {
+        var _a;
+        const outer = (_a = this.trackEl) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!outer)
+            return 0;
+        return parseFloat(getComputedStyle(outer, '::before').width) || 0;
+    }
+    // px/ms — positive means pointer moved left → content scrolled right
+    calcVelocity() {
+        const h = this.velocityHistory;
+        if (h.length < 2)
+            return 0;
+        const dt = h[h.length - 1].t - h[0].t;
+        return dt > 0 ? (h[0].x - h[h.length - 1].x) / dt : 0;
+    }
+    applyMomentum(velocity) {
+        const el = this.trackEl;
+        if (!el)
+            return;
+        // Convert px/ms to per-frame pixels at ~60 fps (16 ms/frame)
+        let v = velocity * 16;
+        const friction = 0.94;
+        const step = () => {
+            if (Math.abs(v) < 0.5)
+                return;
+            el.scrollLeft += v;
+            v *= friction;
+            this.momentumAnimId = raf(step);
+        };
+        this.momentumAnimId = raf(step);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    getItems() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-carousel-item'));
+    }
+    setup() {
+        const items = this.getItems();
+        this.itemCount = items.length;
+        items.forEach((item, i) => {
+            item.index = i + 1;
+            item.carouselVariant = this.variant;
+            if (this.itemsPerView !== 'auto') {
+                item.style.setProperty('--carousel-item-width', `calc(100% / ${this.itemsPerView})`);
+            }
+        });
+        if (!this.value && items.length) {
+            this.value = items[0].name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const items = this.getItems();
+        items.forEach(item => {
+            item.carouselVariant = this.variant;
+            item.selected = item.name === this.value;
+        });
+        this.activeIndex = items.findIndex(i => i.name === this.value);
+    }
+    activateItem(name) {
+        if (!name || name === this.value)
+            return;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.scrollToActive();
+    }
+    scrollToActive() {
+        const items = this.getItems();
+        const active = items.find(i => i.name === this.value);
+        if (active) {
+            active.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+        }
+    }
+    initScroll() {
+        const el = this.trackEl;
+        if (!el || this.variant !== 'tile')
+            return;
+        el.addEventListener('scroll', this.checkOverflow, { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkOverflow);
+        this.resizeObserver.observe(el);
+        this.checkOverflow();
+    }
+    initIntersection() {
+        var _a;
+        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.intersectionInitialized = false;
+        if (this.variant !== 'slide' || !this.trackEl)
+            return;
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            // Skip the initial fire (triggered by observe()) so a preset value prop
+            // is not overridden by whichever slide happens to be at scroll position 0.
+            if (!this.intersectionInitialized) {
+                this.intersectionInitialized = true;
+                return;
+            }
+            const visible = entries.find(e => e.isIntersecting && e.intersectionRatio >= 0.5);
+            if (!visible)
+                return;
+            const items = this.getItems();
+            const idx = items.findIndex(i => i === visible.target);
+            if (idx !== -1) {
+                this.activeIndex = idx;
+                this.value = items[idx].name;
+            }
+        }, { root: this.trackEl, threshold: 0.5 });
+        this.getItems().forEach(item => this.intersectionObserver.observe(item));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const i18n = i18nDsCarousel[this.language];
+        const isSlide = this.variant === 'slide';
+        const showPagination = this.controls === 'dots';
+        const showLargeArrows = this.controls === 'large';
+        const prevBtn = (h("button", { key: '1b5bb6d92e8745a2950a7b307e4cdb10b5e67329', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { key: '5fd82f4b5ebe7ec09d552727edbfa8a5ae539221', name: "caret-left", size: "sm" })));
+        const nextBtn = (h("button", { key: 'c6f4c94aac766ad33c766489044c9a9bd1b5726e', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { key: '8cfb442e07919ec88a46992e323c61fede8e0bb5', name: "caret-right", size: "sm" })));
+        const track = (h("div", { key: '0e7ddcde38d8a83793512bb0f577375753b657ba', class: { 'carousel-track': true, 'is-dragging': this.dragging }, part: "track", role: "region", "aria-label": this.label || i18n.scrollLeft, tabIndex: 0, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, ref: el => {
+                this.trackEl = el;
+            } }, h("slot", { key: '7559f5c3a986a32703b7c7ac306ccc6c43b419f5', onSlotchange: this.handleSlotChange })));
+        const atStart = this.activeIndex === 0;
+        const atEnd = this.activeIndex === this.itemCount - 1;
+        return (h(Host, { key: 'c2e560061487baa158ae0ce8db00b331eaa16341', class: {
+                'is-slide': isSlide,
+                'is-tile': !isSlide,
+                'has-overflow': this.canScrollLeft || this.canScrollRight,
+                'can-scroll-left': this.canScrollLeft,
+                'can-scroll-right': this.canScrollRight,
+            } }, h("div", { key: '2f6db134dcf6a5fe7cb8859cf52dfad7db063662', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (h("ds-pagination", { key: '7020aad4265c4ae2463ca8174d18cfb578fde252', class: "pagination", variant: "dots", totalPages: this.itemCount, value: this.activeIndex + 1, textPrevious: i18n.scrollLeft, textNext: i18n.scrollRight, onDsChange: this.handlePaginationChange }))));
+    }
+    static get is() { return "ds-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "controls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselControls",
+                    "resolved": "\"dots\" | \"large\" | \"none\"",
+                    "references": {
+                        "CarouselControls": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/carousel/carousel.interfaces.ts::CarouselControls",
+                            "referenceLocation": "CarouselControls"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control style. `dots` shows dot pagination with prev/next arrows (image variant). `large` shows large side arrows (product variant). `none` hides all controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls",
+                "defaultValue": "'dots'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselVariant",
+                    "resolved": "\"slide\" | \"tile\"",
+                    "references": {
+                        "CarouselVariant": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/carousel/carousel.interfaces.ts::CarouselVariant",
+                            "referenceLocation": "CarouselVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant. `slide` uses scroll-snap and shows one slide at a time. `tile` shows multiple items with free scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'slide'"
+            },
+            "itemsPerView": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'auto'",
+                    "resolved": "\"auto\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items visible at once. `auto` sizes items by content. A number divides the container width equally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-per-view",
+                "defaultValue": "'auto'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the carousel region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "steps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items to advance per arrow click."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "1"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the currently selected ds-carousel-item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "activeIndex": {},
+            "itemCount": {},
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "dragging": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected item changes."
+                },
+                "complexType": {
+                    "original": "CarouselChangeDetail",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "CarouselChangeDetail": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/carousel/carousel.interfaces.ts::CarouselChangeDetail",
+                            "referenceLocation": "CarouselChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "dsCarouselItemSelect",
+                "method": "listenToDsCarouselItemSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('carousel'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "createLogger", null);
+__decorate([
+    OneOf(CAROUSEL_CONTROLS),
+    __metadata("design:type", String)
+], Carousel.prototype, "controls", void 0);
+__decorate([
+    OneOf(CAROUSEL_VARIANTS),
+    __metadata("design:type", String)
+], Carousel.prototype, "variant", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Carousel.prototype, "label", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Carousel.prototype, "steps", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Carousel.prototype, "value", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "configChanged", null);

package/dist/collection/components/carousel/carousel-item/carousel-item.host.css

@@ -0,0 +1 @@
+:host(.is-slide){display:block;flex:0 0 100%;width:100%;scroll-snap-align:start;overflow:hidden;border-radius:var(--ds-alias-radius-base)}:host(.is-slide) img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}:host(.is-tile){position:relative;flex:0 0 var(--carousel-item-width, auto);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border-radius:var(--ds-alias-radius-base);background-color:var(--ds-alias-background-color-grey);cursor:pointer;outline:none;transition:background-color 120ms ease,box-shadow 120ms ease}@media(hover: hover)and (pointer: fine){:host(.is-tile):hover{background-color:var(--ds-alias-background-color-grey-hover)}}:host(.is-tile):active{background-color:var(--ds-alias-background-color-grey-active)}@media(hover: hover)and (pointer: fine){:host(.is-tile:focus-visible:not(:active)){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host(.is-tile.is-selected){background-color:var(--ds-alias-background-color-primary-light)}:host(.is-tile.is-purple){background-color:var(--ds-alias-background-color-purple-lighter)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-purple):hover{background-color:var(--ds-alias-background-color-purple-light)}}:host(.is-tile.is-purple):active{background-color:var(--ds-alias-background-color-purple)}:host(.is-tile.is-green){background-color:var(--ds-alias-background-color-green-lighter)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-green):hover{background-color:var(--ds-alias-background-color-green-light)}}:host(.is-tile.is-green):active{background-color:var(--ds-alias-background-color-green)}:host(.is-tile.is-red){background-color:var(--ds-alias-background-color-red-lighter)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-red):hover{background-color:var(--ds-alias-background-color-red-light)}}:host(.is-tile.is-red):active{background-color:var(--ds-alias-background-color-red)}:host(.is-tile.is-yellow){background-color:var(--ds-alias-background-color-yellow-lighter)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-yellow):hover{background-color:var(--ds-alias-background-color-yellow-light)}}:host(.is-tile.is-yellow):active{background-color:var(--ds-alias-background-color-yellow)}:host(.is-tile.is-navigation){padding:0;cursor:default}:host(.is-tile.is-navigation) ::slotted(a){flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem;border-radius:inherit;color:inherit;text-decoration:none;text-align:center;font-size:inherit;line-height:inherit;outline:none}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-navigation) ::slotted(a:focus-visible){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}