@loadsmart/miranda-wc
Version:
Miranda Web Components component library
64 lines (63 loc) • 2.13 kB
TypeScript
import type { CSSResult } from 'lit';
declare const pseudoClassMap: {
active: string[];
disabled: string[];
focus: string[];
hover: string[];
visited: string[];
};
type PosPseudoClass = keyof typeof pseudoClassMap;
type AugumentedCSSResult = CSSResult & {
not: AugumentedCSSResult;
} & {
[key in PosPseudoClass]: AugumentedCSSResult;
};
type AdjacentSiblingCombinator = '+';
type ChildCombinator = '>';
type ColumnCombinator = '||';
type DescendantCombinator = ' ';
type GeneralSiblingCombinator = '~';
type NamespaceCombinator = '|';
type Combinator = AdjacentSiblingCombinator | ChildCombinator | ColumnCombinator | DescendantCombinator | GeneralSiblingCombinator | NamespaceCombinator;
/**
* # on
*
* Style utility to compose pseudo-classes.
*
* ## List of supported pseudo-classes
* - active
* - disabled
* - focus
* - hover
* - visited
*
* ## Usage
* You can compose multiple pseudo-classes by chaining them. You can also negate
* some pseudo-class calling `.not` before it. The order that they are chained
* will be respected.
*
* ```js
* css`
* ${on('.button').not.disabled.not.active.focus} {
* color: tomato;
* }
* `;
* ```
* Will result in:
* ```css
* .button:not(.is-disabled, :disabled):not(:active):is(.is-focused, :focus, :focus-visible, :focus-within) {
* color: tomato;
* }
* ```
*
* @param selectors A single selector or a list of selectors that will have the
* pseudo-classes concatenated to it.
* @param subSelectors A single selector or a list of selectors that will be
* combined with the resulting selectors.
* @param combinator Will be used to combine the resulting selectors with the
* subSelectors. The default value is the [Descendant Combinator (`' '`)](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator).
* If `null` is provided, no combinator will be used, i.e., they will be joined
* without any character between them.
*/
export declare function on(selectors: string | Array<string>, subSelectors?: string | Array<string>, combinator?: Combinator | null): AugumentedCSSResult;
export {};