@sandlada/mdc/build/components/carousel/carousel.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{CarouselDefinition as i}from"../../component-definitions/carousel.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*
* @fileoverview
* Styles for `mdc-carousel` — the scroll-snap container.
*
* The host is the scroll container: a `flex` row with horizontal overflow and
* scroll snapping. Item widths are derived at runtime (see `base-carousel.ts`)
* and re-exposed here as inheritable `--_item-width-*` / `--_item-shape-*`
* custom properties so the slotted `mdc-carousel-item` cells can read them
* across the shadow boundary. Users may override every value through the
* public `--mdc-carousel-*` properties.
*/
const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-carousel`}),o=t(n(a,!0).join(``)),s=e`
    :host {
        ${o};

        /* Item sizes — widths are computed in base-carousel.ts; shapes come
           from CarouselDefinition. Both inherit to the slotted items. */
        --_item-width-large: var(--mdc-carousel-large-item-width, var(--_carousel-computed-large));
        --_item-width-medium: var(--mdc-carousel-medium-item-width, var(--_carousel-computed-medium));
        --_item-width-small: var(--mdc-carousel-small-item-width, var(--_carousel-computed-small));
        --_item-height: var(--mdc-carousel-item-height);

        display: flex;
        box-sizing: border-box;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        gap: var(--_item-spacing);
        padding-inline: var(--_container-inline-leading-padding-space) var(--_container-inline-trailing-padding-space);
        padding-block: var(--_container-block-leading-padding-space) var(--_container-block-trailing-padding-space);
        /* Items snap their start edge to the leading keyline (the inline
           padding position), matching the Compose keyline alignment. */
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--_container-inline-leading-padding-space) var(--_container-inline-trailing-padding-space);
        overscroll-behavior-x: contain;
        outline: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    :host::-webkit-scrollbar {
        display: none;
    }

    /* Uncontained: fixed-width items, free scrolling — no snap. */
    :host([variant='uncontained']) {
        scroll-snap-type: none;
    }
    :host([variant='uncontained']) ::slotted(mdc-carousel-item) {
        scroll-snap-align: none;
    }

    ::slotted(mdc-carousel-item) {
        flex: none;
        scroll-snap-align: start;
        /* One item per fling, mirroring Compose's single-advance behavior. */
        scroll-snap-stop: always;
    }
`;export{s as CarouselStyles};
//# sourceMappingURL=carousel.style.js.map