@sandlada/mdc/build/components/focus-ring/focus-ring.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{Easing as i}from"../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../node_modules/@sandlada/mdk/build/index.js";import{FocusRingDefinition as a}from"../../component-definitions/focus-ring.definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const o=r(a,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-focus-ring`}),s=t(n(o,!0).join(``)),c=e`

    @layer mdc {
        :host {
            ${s}
        }
    }

    @layer mdc {

        :host {
            border-style: solid;
            border-width: 0px;
            border-color: currentColor;
            outline-style: solid;
            outline-width: 0px;
            outline-color: currentColor;
            animation-delay: 0s, calc(var(--_duration) * 0.25);
            animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
            animation-timing-function: ${t(i.Emphasized.ToCSSVariable())};
            transition-property: border-width, outline-width, border-color, outline-color, color, opacity;
            transition-timing-function: ${t(i.Emphasized.ToCSSVariable())};
            transition-duration: calc(var(--_duration) * 0.5);
            box-sizing: border-box;
            color: var(--_enabled-color);
            display: none;
            pointer-events: none;
            position: absolute;
        }
        :host([focused]) {
            display: flex;
        }

        :host([disabled]) {
            display: none;
        }

        :host([animation-disabled]) {
            animation: none;
            transition: none;
        }

        :host(:not([inward])) {
            animation-name: outward-grow, outward-shrink;
            inset: calc(-1 * var(--_outward-offset));
            outline-width: var(--_width);
        }
        :host(:not([inward])[closing]) {
            opacity: 0;
        }

        :host([inward]) {
            animation-name: inward-grow, inward-shrink;
            border-width: var(--_width);
            inset: var(--_inward-offset);
        }
        :host([inward][closing]) {
            opacity: 0;
        }

        :host([shape-inherit]) {
            border-end-end-radius: inherit;
            border-end-start-radius: inherit;
            border-start-end-radius: inherit;
            border-start-start-radius: inherit;
        }

        /* NOTE: these two branches are written as flat selectors on purpose.
           Chrome does not resolve '&' nesting inside a ':host()' parent, so an
           '&:not([inward])' child rule never matches and the ring would end up
           with NO border-radius when 'shape-inherit' is off. */
        :host(:not([shape-inherit]):not([inward])) {
            border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
            border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
            border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
            border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
        }
        :host(:not([shape-inherit])[inward]) {
            border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
            border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
            border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
            border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
        }

        @keyframes outward-grow {
            from {
                outline-width: 0;
            }

            to {
                outline-width: var(--_active-width);
            }
        }

        @keyframes outward-shrink {
            from {
                outline-width: var(--_active-width);
            }
        }

        @keyframes inward-grow {
            from {
                border-width: 0;
            }

            to {
                border-width: var(--_active-width);
            }
        }

        @keyframes inward-shrink {
            from {
                border-width: var(--_active-width);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            :host {
                animation: none;
                transition: none;
            }
        }

        @media (forced-colors: active) {
            :host {
                color: CanvasText;
            }
        }

        @media (prefers-contrast: more) {
            :host {
                color: CanvasText;
            }
        }

        @media (prefers-contrast: less) {
            :host {
                color: var(--_enabled-color-reduced-contrast);
            }
        }
    }
`;export{c as FocusRingStyle};
//# sourceMappingURL=focus-ring.style.js.map