UNPKG

@sandlada/mdc

Version:

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

7 lines (6 loc) 2.09 kB
import{a as e}from"../../lit-element-Ho-VPzO1.js";import{RippleDefinition as o}from"../../component-definitions/ripple.definition.js";import{createWrappedTokens as t}from"../../utils/tokens/create-wrapped-tokens.js";import{stringTokens as s}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../state-C-haZXan.js"; /** * @license * Copyright 2025 Kai-Orion & Sandlada * SPDX-License-Identifier: MIT */const r=t("--mdc-ripple",o),a=e`:host{${s(r)}}@media (forced-colors:active){.ripple,:host{display:none}}:host{display:flex;margin:auto;pointer-events:none;border-radius:inherit;position:absolute;inset:0;overflow:hidden}:host([disabled]){display:none}.ripple{border-radius:inherit;position:absolute;inset:0;overflow:hidden;-webkit-tap-highlight-color:transparent}:host([disable-hover-state-layer]) .hover-state-layer{display:none}:host([disable-focus-state-layer]) .focus-state-layer{display:none}:host([disable-press-state-layer]) .press-state-layer{display:none}.focus-state-layer,.hover-state-layer,.press-state-layer{position:absolute;opacity:0;border-radius:inherit;pointer-events:none;overflow:hidden;-webkit-tap-highlight-color:transparent}.hover-state-layer{inset:0;background-color:${r["--_hovered-color"]};transition:opacity 15ms linear,background-color 15ms linear}.focus-state-layer{inset:0;background-color:${r["--_focused-color"]};transition:opacity 50ms linear,background-color 15ms linear}.press-state-layer{inset:0;background:radial-gradient(closest-side,${r["--_pressed-color"]} max(calc(100% - 70px),65%),transparent 100%);transform-origin:center center;transition:opacity 375ms linear}:host([hovered]:not([disable-hover-state-layer])) .hover-state-layer{background-color:${r["--_hovered-color"]};opacity:${r["--_hovered-opacity"]}}:host([focused]:not([disable-focus-state-layer])) .focus-state-layer{background-color:${r["--_focused-color"]};opacity:${r["--_focused-opacity"]}}:host([pressed]:not([disable-press-state-layer])) .press-state-layer{opacity:${r["--_pressed-opacity"]};transition-duration:105ms}`;export{a as styles};