@graphprotocol/gds-css 0.0.1

package/dist/css-props/registerCSSProps.js

@@ -0,0 +1,231 @@
+import cssesc from 'cssesc';
+import { parseNumber } from '@graphprotocol/gds-utils';
+import { getRegisteredComponent, getRegisteredComponents, } from "../component-registry.js";
+import { getCSSPropRawValue } from "./getCSSPropRawValue.js";
+/**
+ * Registers CSS Props functionality in the Tailwind plugin. This includes custom properties,
+ * utilities, and variants for prop-based styling.
+ */
+export function registerCSSProps(api) {
+    const componentsByCSSProp = getRegisteredComponents(true).reduce((outerMap, component) => {
+        for (const cssProp of Object.values(component.cssProps)) {
+            const innerMap = outerMap.get(cssProp.kebabName) ??
+                outerMap.set(cssProp.kebabName, new Map()).get(cssProp.kebabName);
+            innerMap.set(component.kebabName, component);
+        }
+        return outerMap;
+    }, new Map());
+    const cssPropKebabNames = [...componentsByCSSProp.keys()];
+    /** Register a couple non-inherited custom properties for each prop name. */
+    for (const cssPropKebabName of cssPropKebabNames) {
+        api.addBase({
+            [`@property --gds-default-${cssPropKebabName}`]: {
+                syntax: "'*'",
+                inherits: 'false',
+            },
+            [`@property --gds-passed-${cssPropKebabName}`]: {
+                syntax: "'*'",
+                inherits: 'false',
+            },
+            [`@property --gds-prop-${cssPropKebabName}`]: {
+                syntax: "'*'",
+                inherits: 'false',
+            },
+        });
+    }
+    /** Register a custom property for each component-prop pair to restrict the allowed values. */
+    for (const component of getRegisteredComponents()) {
+        for (const cssProp of Object.values(component.cssProps)) {
+            const syntax = (() => {
+                switch (cssProp.type) {
+                    case 'values':
+                        return `'${cssProp.values.map((value) => getCSSPropRawValue(cssProp, value)).join(' | ')}'`;
+                    case 'string':
+                        return "'<string>'";
+                    case 'number':
+                        return "'<number>'";
+                    case 'length':
+                        return "'<length-percentage>'";
+                    case 'color':
+                        return "'<color>'";
+                    default:
+                        return "'*'";
+                }
+            })();
+            api.addBase({
+                [`@property --gds-${component.kebabName}-${cssProp.kebabName}`]: {
+                    syntax,
+                    /**
+                     * We only need this property to inherit if the type is not `values`, because `values` CSS
+                     * props are accessed via style queries.
+                     */
+                    inherits: cssProp.type === 'values' ? 'false' : 'true',
+                    'initial-value': (() => {
+                        if (cssProp.type === 'length' &&
+                            typeof cssProp.initialValue === 'string' &&
+                            /(cap|ch|em|ex|ic|lh)$/.test(cssProp.initialValue)) {
+                            // `initial-value` cannot be font-size-relative
+                            return '100%';
+                        }
+                        return getCSSPropRawValue(cssProp, cssProp.initialValue);
+                    })(),
+                },
+            });
+        }
+        /**
+         * Base styles for each component, including defining the default value of each CSS prop and
+         * applying the value passed via the React prop, if any. See `getCSSPropsAttributes` for details
+         * on how each prop type is handled.
+         */
+        api.addBase({
+            '@layer components': {
+                [`.${component.className}`]: {
+                    '--tw-sort': 'container-type',
+                    ...(component.containerName ? { 'container-name': component.containerName } : {}),
+                    ...Object.values(component.cssProps).reduce((rules, cssProp) => {
+                        return {
+                            ...rules,
+                            [`--gds-passed-or-default-${cssProp.kebabName}`]: `var(--gds-passed-${cssProp.kebabName}, var(--gds-default-${cssProp.kebabName}, ${getCSSPropRawValue(cssProp, cssProp.initialValue)}))`,
+                            [`--gds-${component.kebabName}-${cssProp.kebabName}`]: `var(--gds-prop-${cssProp.kebabName}, var(--gds-passed-or-default-${cssProp.kebabName}))`,
+                        };
+                    }, {}),
+                },
+            },
+        });
+    }
+    function parseBareValueNumber(bareValue, increment = 0.25) {
+        const number = parseNumber(bareValue, { strict: true });
+        if (number === null || number < 0 || !Number.isInteger(number * (1 / increment)))
+            return null;
+        return number;
+    }
+    /** Register `prop-{prop}-{value}` and `default-{prop}-{value}` utilities. */
+    for (const [cssPropKebabName, components] of componentsByCSSProp) {
+        const cssProps = [...components.values()].flatMap((component) => {
+            const cssProp = component.findCSSPropByKebabName(cssPropKebabName);
+            return cssProp ? [cssProp] : [];
+        });
+        const cssPropTypes = cssProps.map((cssProp) => cssProp.type);
+        const matchUtilitiesType = ['any'];
+        const matchUtilitiesValues = {
+            inherit: 'inherit',
+        };
+        cssProps.forEach((cssProp) => {
+            ;
+            [...(cssProp.values ?? []), ...(cssProp.suggestedValues ?? [])].forEach((value) => {
+                matchUtilitiesValues[String(value)] = getCSSPropRawValue(cssProp, value);
+            });
+        });
+        if (cssPropTypes.includes('number') && !cssPropTypes.includes('length')) {
+            const bareValueFunction = (value) => {
+                const numberValue = parseBareValueNumber(value.value);
+                if (numberValue === null)
+                    return undefined;
+                return String(numberValue);
+            };
+            matchUtilitiesValues['__BARE_VALUE__'] = bareValueFunction;
+        }
+        if (cssPropTypes.includes('length')) {
+            for (const [spacingKey, spacingValue] of Object.entries(api.theme('spacing'))) {
+                matchUtilitiesValues[spacingKey] =
+                    parseNumber(spacingKey, { strict: true }) !== null
+                        ? `--spacing(${spacingKey})`
+                        : spacingValue;
+            }
+            const bareValueFunction = (value) => {
+                const numberValue = parseBareValueNumber(value.value);
+                if (numberValue === null)
+                    return undefined;
+                return `--spacing(${numberValue})`;
+            };
+            matchUtilitiesValues['__BARE_VALUE__'] = bareValueFunction;
+        }
+        if (cssPropTypes.includes('color')) {
+            matchUtilitiesType.push('color'); // Allows using opacity modifiers
+            for (const colorKey in api.theme('colors')) {
+                matchUtilitiesValues[colorKey] = getCSSPropRawValue({ type: 'color', defaultValue: 'current' }, colorKey);
+            }
+        }
+        api.matchUtilities(Object.fromEntries(['prop', 'default'].map((utilityType) => [
+            `${utilityType}-${cssPropKebabName}`,
+            (value) => ({
+                [`--gds-${utilityType}-${cssPropKebabName}`]: value,
+            }),
+        ])), {
+            type: matchUtilitiesType,
+            values: matchUtilitiesValues,
+        });
+    }
+    /**
+     * Register `@prop-{prop}-{value}/{component}` and `@prop-not-{prop}-{value}/{component}` variants
+     * for props of type `values`, for components to use internally.
+     */
+    for (const variant of ['@prop-not', '@prop']) {
+        api.matchVariant(variant, (cssPropKebabNameAndValue, { modifier: componentKebabName }) => {
+            /**
+             * If the modifier is explicitly `dummy`, consider the variant invalid by returning an empty
+             * selector list (no CSS will be generated for it).
+             */
+            if (componentKebabName === 'dummy')
+                return [];
+            /**
+             * Default a missing modifier to `dummy` instead of considering the variant invalid so that
+             * it's suggested by Tailwind IntelliSense.
+             */
+            const component = getRegisteredComponent(componentKebabName ?? 'dummy');
+            /**
+             * If no component is found (i.e. the modifier is not a valid component name), consider the
+             * variant invalid.
+             */
+            if (!component)
+                return [];
+            try {
+                const { cssPropKebabName, value } = JSON.parse(cssPropKebabNameAndValue);
+                if (typeof cssPropKebabName !== 'string' ||
+                    (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean'))
+                    return [];
+                const cssProp = component.findCSSPropByKebabName(cssPropKebabName);
+                /**
+                 * Only consider the variant valid if the prop exists on the component and is of type
+                 * `values`, and the value is valid for it (unless the component is `dummy`, which is used
+                 * to list all variants in IntelliSense regardless of the component).
+                 */
+                if ((!cssProp || cssProp.type !== 'values' || !cssProp.values.includes(value)) &&
+                    component.kebabName !== 'dummy') {
+                    return [];
+                }
+                const rawValue = cssProp ? getCSSPropRawValue(cssProp, value) : String(value);
+                return [
+                    /** Style query selector for modern browsers. */
+                    `@container ${component.containerName} ${variant === '@prop-not' ? 'not' : ''} style(--gds-${component.kebabName}-${cssPropKebabName}: ${rawValue})`,
+                    /**
+                     * Fallback selector for browsers without style query support, which unfortunately
+                     * cannot be queried, but happens to be the same browsers that don't support view
+                     * transitions (except for Firefox which introduced support for view transitions in
+                     * version 144 but not style queries). Note that we don't want the polyfill rules to be
+                     * applied when style queries are supported to prevent bugs on the first render, where
+                     * polyfill attributes are present even when the polyfill is not needed (see
+                     * `useCSSPropsPolyfill` for an explanation why).
+                     */
+                    `@supports (not (view-transition-name: none)) or (-moz-orient: inline) { &:where(.${component.className}${variant === '@prop-not' ? ':not' : ':is'}([data-gds-prop-polyfill-${cssPropKebabName}=${cssesc(rawValue, { isIdentifier: true })}]) *) }`,
+                ];
+            }
+            catch {
+                /**
+                 * If the value is invalid JSON (e.g. `@prop-[some-arbitrary-string]`), consider the
+                 * variant invalid.
+                 */
+                return [];
+            }
+        }, {
+            values: Object.fromEntries([...componentsByCSSProp.entries()].flatMap(([cssPropKebabName, components]) => {
+                const cssPropValues = [...components.values()].flatMap((component) => component.findCSSPropByKebabName(cssPropKebabName)?.values ?? []);
+                return cssPropValues.map((value) => [
+                    `${cssPropKebabName}-${value}`,
+                    JSON.stringify({ cssPropKebabName, value }),
+                ]);
+            })),
+        });
+    }
+}
+//# sourceMappingURL=registerCSSProps.js.map

package/dist/css-props/registerCSSProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCSSProps.js","sourceRoot":"","sources":["../../src/css-props/registerCSSProps.ts"],"names":[],"mappings":"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"}

package/dist/css-props/types.d.ts

@@ -0,0 +1,29 @@
+import type { GDSColor } from '../design-tokens.generated.ts';
+type CSSUnit = 'px' | 'em' | 'rem' | 'lh' | 'rlh' | '%' | 'vw' | 'vh' | 'vmin' | 'vmax';
+type CSSLength = number | `${number}${CSSUnit}`;
+export type CSSPropValue = string | number | boolean;
+export type CSSPropString = string;
+export type CSSPropNumber = number;
+export type CSSPropLength = CSSLength;
+export type CSSPropColor = GDSColor | `${GDSColor}/${number}`;
+type Type = 'values' | 'string' | 'number' | 'length' | 'color';
+type TypeToValue<T extends Type, V extends CSSPropValue = CSSPropValue> = T extends 'values' ? V : T extends 'string' ? CSSPropString : T extends 'number' ? CSSPropNumber : T extends 'length' ? CSSPropLength : CSSPropColor;
+export type CSSPropDefinition<T extends Type = Type, V extends CSSPropValue[] = CSSPropValue[], D extends TypeToValue<T, V[number]> = TypeToValue<T, V[number]>> = T extends 'values' ? {
+    type: T;
+    values: V;
+    suggestedValues?: never;
+    defaultValue?: D & TypeToValue<T, V[number]>;
+} : T extends 'number' ? {
+    type: T;
+    values?: never;
+    suggestedValues?: number[];
+    defaultValue?: D & TypeToValue<T>;
+} : {
+    type: T;
+    values?: never;
+    suggestedValues?: never;
+    defaultValue?: D & TypeToValue<T>;
+};
+export type CSSPropType<P extends CSSPropDefinition> = P['values'] extends CSSPropValue[] ? TypeToValue<P['type'], P['values'][number]> : TypeToValue<P['type']>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/css-props/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/css-props/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAE7D,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AACvF,KAAK,SAAS,GAAG,MAAM,GAAG,GAAG,MAAM,GAAG,OAAO,EAAE,CAAA;AAE/C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AACpD,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAClC,MAAM,MAAM,aAAa,GAAG,MAAM,CAAA;AAClC,MAAM,MAAM,aAAa,GAAG,SAAS,CAAA;AACrC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,GAAG,QAAQ,IAAI,MAAM,EAAE,CAAA;AAE7D,KAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAC/D,KAAK,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,CAAC,SAAS,QAAQ,GACxF,CAAC,GACD,CAAC,SAAS,QAAQ,GAChB,aAAa,GACb,CAAC,SAAS,QAAQ,GAChB,aAAa,GACb,CAAC,SAAS,QAAQ,GAChB,aAAa,GACb,YAAY,CAAA;AAEtB,MAAM,MAAM,iBAAiB,CAC3B,CAAC,SAAS,IAAI,GAAG,IAAI,EACrB,CAAC,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE,EACzC,CAAC,SAAS,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAC7D,CAAC,SAAS,QAAQ,GAClB;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;CAAE,GAC7F,CAAC,SAAS,QAAQ,GAChB;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAAE,GAC1F;IAAE,IAAI,EAAE,CAAC,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IAAC,eAAe,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;CAAE,CAAA;AAE7F,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,iBAAiB,IAAI,CAAC,CAAC,QAAQ,CAAC,SAAS,YAAY,EAAE,GACrF,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAC3C,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA"}

package/dist/css-props/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/css-props/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/css-props/types.ts"],"names":[],"mappings":""}

package/dist/css-states/index.d.ts

@@ -0,0 +1,3 @@
+export { cssStates, cssStateVariables, type CSSState, type CSSStateValue } from './states.ts';
+export { registerCSSStates } from './registerCSSStates.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/css-states/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css-states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/css-states/index.js

@@ -0,0 +1,3 @@
+export { cssStates, cssStateVariables } from "./states.js";
+export { registerCSSStates } from "./registerCSSStates.js";
+//# sourceMappingURL=index.js.map

package/dist/css-states/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css-states/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAqC,MAAM,aAAa,CAAA;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/css-states/registerCSSStates.d.ts

@@ -0,0 +1,23 @@
+import type { PluginAPI } from '../types.ts';
+/**
+ * Registers CSS States functionality in the Tailwind plugin.
+ *
+ * This system abstracts away CSS's native states in order to:
+ *
+ * - Allow overriding the state of components (e.g. `<Button className="state-active" />`).
+ * - Allow reading the state of components from their root element even when the native state is
+ *   actually on a nested element (e.g. `group-has-checkbox-checked`), thanks to
+ *   `variants/plugin.ts` overriding some of Tailwind's built-in variants.
+ * - Allow setting and reading custom states for DRY purposes (e.g. `active:state-[highlighted]` and
+ *   `data-[highlighted]:state-[highlighted]` on a parent element and
+ *   `@state-[highlighted]:bg-strong` on a child; also supports key-values like `state-[foo=bar]
+ *   lg:state-[foo=baz]`).
+ *
+ * While this system is separate from the CSS Props one, it also leverages style queries and relies
+ * on the fact that component classes (e.g. `gds-button`) establish a container that can be queried.
+ * Furthermore, it uses some of the same techniques in the fallback implementation (querying by data
+ * attribute, `view-transition-name` to target browsers that don't support style queries, etc.),
+ * though the CSS props polyfill is not used. See `useCSSState` for more details.
+ */
+export declare function registerCSSStates(api: PluginAPI): void;
+//# sourceMappingURL=registerCSSStates.d.ts.map

package/dist/css-states/registerCSSStates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCSSStates.d.ts","sourceRoot":"","sources":["../../src/css-states/registerCSSStates.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAG5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,QA6G/C"}

package/dist/css-states/registerCSSStates.js

@@ -0,0 +1,119 @@
+import cssesc from 'cssesc';
+import { objectFromEntries } from 'ts-extras';
+import { cssStates, cssStateVariables, getCSSStateVariable } from "./states.js";
+/**
+ * Registers CSS States functionality in the Tailwind plugin.
+ *
+ * This system abstracts away CSS's native states in order to:
+ *
+ * - Allow overriding the state of components (e.g. `<Button className="state-active" />`).
+ * - Allow reading the state of components from their root element even when the native state is
+ *   actually on a nested element (e.g. `group-has-checkbox-checked`), thanks to
+ *   `variants/plugin.ts` overriding some of Tailwind's built-in variants.
+ * - Allow setting and reading custom states for DRY purposes (e.g. `active:state-[highlighted]` and
+ *   `data-[highlighted]:state-[highlighted]` on a parent element and
+ *   `@state-[highlighted]:bg-strong` on a child; also supports key-values like `state-[foo=bar]
+ *   lg:state-[foo=baz]`).
+ *
+ * While this system is separate from the CSS Props one, it also leverages style queries and relies
+ * on the fact that component classes (e.g. `gds-button`) establish a container that can be queried.
+ * Furthermore, it uses some of the same techniques in the fallback implementation (querying by data
+ * attribute, `view-transition-name` to target browsers that don't support style queries, etc.),
+ * though the CSS props polyfill is not used. See `useCSSState` for more details.
+ */
+export function registerCSSStates(api) {
+    /**
+     * Register a couple custom properties for each state variable.
+     *
+     * - All of them are non-inherited to prevent leaking.
+     * - Normally, we would only need `--gds-exposed-*` and `--gds-state-*` (with no `initial-value` on
+     *   `--gds-exposed-*`), but due to a limitation in the `style-observer` library
+     *   (https://github.com/LeaVerou/style-observer/issues/133), we need to set an `initial-value` on
+     *   any custom property we want to observe in JS. But we also need `--gds-state-*` to NOT have an
+     *   initial value so that we can define a fallback when a state is not set at all (see
+     *   `--gds-clickable-*`). So we register an additional `--gds-observed-*` property that is
+     *   guaranteed to have a valid value and can be observed.
+     */
+    for (const [variableName, { values, defaultValue }] of Object.entries(cssStateVariables)) {
+        api.addBase({
+            [`@property --gds-exposed-${variableName}`]: {
+                syntax: "'*'",
+                inherits: 'false',
+                'initial-value': '',
+            },
+            [`@property --gds-state-${variableName}`]: {
+                syntax: "'*'",
+                inherits: 'false',
+            },
+            [`@property --gds-observed-${variableName}`]: {
+                syntax: `'${[...new Set([...Object.values(values), defaultValue])].map((value) => String(value)).join(' | ')}'`,
+                inherits: 'false',
+                'initial-value': String(defaultValue),
+            },
+        });
+    }
+    /**
+     * Register `expose-{state}` utilities for components to use internally to expose their current
+     * state if the root element doesn't already do so (e.g. by being a button with the expected
+     * attributes on it), as well as `state-{state}` utilities for consumers to trigger the
+     * hover/focus/etc. state of components that support it.
+     */
+    api.matchUtilities({
+        expose: (state) => {
+            const stateVariable = getCSSStateVariable(state);
+            return {
+                [`--gds-exposed-${stateVariable.name}`]: stateVariable.value,
+                [`--gds-state-${stateVariable.name}`]: stateVariable.value,
+                [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+            };
+        },
+        state: (state) => {
+            const stateVariable = getCSSStateVariable(state);
+            return {
+                [`--gds-state-${stateVariable.name}`]: stateVariable.value,
+                [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+            };
+        },
+    }, { values: Object.fromEntries(cssStates.map((state) => [state, state])) });
+    /** Register `@state-*` and `@state-not-*` variants for components to use internally. */
+    for (const variant of ['@state-not', '@state']) {
+        api.matchVariant(variant, (state, { modifier }) => {
+            const containerName = modifier !== null ? `gds-${modifier}` : '';
+            const stateVariables = [getCSSStateVariable(state)];
+            // Make sure that `@state-hover` utilities are also applied on the active state
+            if (state === 'hover') {
+                stateVariables.push(getCSSStateVariable('active'));
+            }
+            const selectors = [
+                `@container ${containerName} ${variant === '@state-not' ? 'not' : ''} (${stateVariables
+                    .flatMap((stateVariable) => {
+                    const conditions = [
+                        `style(--gds-state-${stateVariable.name}${stateVariable.value ? `: ${stateVariable.value}` : ''})`,
+                    ];
+                    if (stateVariable.isDefault) {
+                        conditions.push(`(not style(--gds-state-${stateVariable.name}))`);
+                    }
+                    return conditions;
+                })
+                    .join(' or ')})`,
+            ];
+            if (containerName) {
+                // Fallback selector for browsers without style query support; see `css-props/registerCSSProps.ts` for more details
+                selectors.push(`@supports (not (view-transition-name: none)) or (-moz-orient: inline) { &:where(.${containerName}${variant === '@state-not' ? ':not' : ':is'}(${stateVariables
+                    .map((stateVariable) => `[data-gds-state-polyfill-${stateVariable.name}${stateVariable.value ? `=${cssesc(stateVariable.value, { isIdentifier: true })}` : ''}]`)
+                    .join(', ')}) *) }`);
+            }
+            return selectors;
+        }, {
+            values: objectFromEntries(cssStates
+                .filter((state) => {
+                // Prevent creating `@state-not-not-*` variants
+                if (variant === '@state-not' && state.startsWith('not-'))
+                    return false;
+                return true;
+            })
+                .map((state) => [state, state])),
+        });
+    }
+}
+//# sourceMappingURL=registerCSSStates.js.map

package/dist/css-states/registerCSSStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCSSStates.js","sourceRoot":"","sources":["../../src/css-states/registerCSSStates.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAA;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAG7C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAE/E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,iBAAiB,CAAC,GAAc;IAC9C;;;;;;;;;;;OAWG;IACH,KAAK,MAAM,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;QACzF,GAAG,CAAC,OAAO,CAAC;YACV,CAAC,2BAA2B,YAAY,EAAE,CAAC,EAAE;gBAC3C,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,OAAO;gBACjB,eAAe,EAAE,EAAE;aACpB;YACD,CAAC,yBAAyB,YAAY,EAAE,CAAC,EAAE;gBACzC,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,OAAO;aAClB;YACD,CAAC,4BAA4B,YAAY,EAAE,CAAC,EAAE;gBAC5C,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG,CAAsB,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG;gBACpI,QAAQ,EAAE,OAAO;gBACjB,eAAe,EAAE,MAAM,CAAC,YAAY,CAAC;aACtC;SACF,CAAC,CAAA;IACJ,CAAC;IAED;;;;;OAKG;IACH,GAAG,CAAC,cAAc,CAChB;QACE,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;YAChD,OAAO;gBACL,CAAC,iBAAiB,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK;gBAC5D,CAAC,eAAe,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK;gBAC1D,CAAC,kBAAkB,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK;aAC9D,CAAA;QACH,CAAC;QACD,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;YAChD,OAAO;gBACL,CAAC,eAAe,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK;gBAC1D,CAAC,kBAAkB,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,aAAa,CAAC,KAAK;aAC9D,CAAA;QACH,CAAC;KACF,EACD,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CACzE,CAAA;IAED,wFAAwF;IACxF,KAAK,MAAM,OAAO,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAU,EAAE,CAAC;QACxD,GAAG,CAAC,YAAY,CACd,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE;YACtB,MAAM,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;YAChE,MAAM,cAAc,GAAG,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAA;YACnD,+EAA+E;YAC/E,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;gBACtB,cAAc,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAA;YACpD,CAAC;YACD,MAAM,SAAS,GAAG;gBAChB,cAAc,aAAa,IAAI,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,cAAc;qBACpF,OAAO,CAAC,CAAC,aAAa,EAAE,EAAE;oBACzB,MAAM,UAAU,GAAG;wBACjB,qBAAqB,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG;qBACnG,CAAA;oBACD,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;wBAC5B,UAAU,CAAC,IAAI,CAAC,0BAA0B,aAAa,CAAC,IAAI,IAAI,CAAC,CAAA;oBACnE,CAAC;oBACD,OAAO,UAAU,CAAA;gBACnB,CAAC,CAAC;qBACD,IAAI,CAAC,MAAM,CAAC,GAAG;aACnB,CAAA;YACD,IAAI,aAAa,EAAE,CAAC;gBAClB,mHAAmH;gBACnH,SAAS,CAAC,IAAI,CACZ,oFAAoF,aAAa,GAAG,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,cAAc;qBAC5J,GAAG,CACF,CAAC,aAAa,EAAE,EAAE,CAChB,4BAA4B,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAC3I;qBACA,IAAI,CAAC,IAAI,CAAC,QAAQ,CACtB,CAAA;YACH,CAAC;YACD,OAAO,SAAS,CAAA;QAClB,CAAC,EACD;YACE,MAAM,EAAE,iBAAiB,CACvB,SAAS;iBACN,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;gBAChB,+CAA+C;gBAC/C,IAAI,OAAO,KAAK,YAAY,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;oBAAE,OAAO,KAAK,CAAA;gBACtE,OAAO,IAAI,CAAA;YACb,CAAC,CAAC;iBACD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAClC;SACF,CACF,CAAA;IACH,CAAC;AACH,CAAC"}

package/dist/css-states/states.d.ts

@@ -0,0 +1,71 @@
+export declare const cssStates: readonly ["open", "not-open", "current", "not-current", "checked", "indeterminate", "unchecked", "read-only", "blank", "not-blank", "idle", "hover", "focus", "not-focus", "active", "enabled", "disabled"];
+export type CSSState = (typeof cssStates)[number];
+export type CSSStateValue = string | boolean;
+export declare const cssStateVariables: {
+    pointer: {
+        values: {
+            idle: "idle";
+            hover: "hover";
+            active: "active";
+        } & Record<"idle" | "hover" | "active", "idle" | "hover" | "active">;
+        defaultValue: "idle" | "hover" | "active";
+    };
+    focus: {
+        values: {
+            focus: true;
+            'not-focus': false;
+        } & Record<"focus" | "not-focus", boolean>;
+        defaultValue: boolean;
+    };
+    checked: {
+        values: {
+            checked: true;
+            indeterminate: "indeterminate";
+            unchecked: false;
+        } & Record<"checked" | "indeterminate" | "unchecked", boolean | "indeterminate">;
+        defaultValue: boolean | "indeterminate";
+    };
+    disabled: {
+        values: {
+            enabled: false;
+            disabled: true;
+            'read-only': "read-only";
+        } & Record<"read-only" | "enabled" | "disabled", boolean | "read-only">;
+        defaultValue: boolean | "read-only";
+    };
+    open: {
+        values: {
+            open: true;
+            'not-open': false;
+        } & Record<"open" | "not-open", boolean>;
+        defaultValue: boolean;
+    };
+    current: {
+        values: {
+            current: true;
+            'not-current': false;
+        } & Record<"current" | "not-current", boolean>;
+        defaultValue: boolean;
+    };
+    blank: {
+        values: {
+            blank: true;
+            'not-blank': false;
+        } & Record<"blank" | "not-blank", boolean>;
+        defaultValue: boolean;
+    };
+};
+export declare function getCSSStateVariable(state: string): {
+    name: string;
+    value: string;
+    isDefault: boolean;
+};
+export declare function getPointerStateSelector(state: 'idle' | 'hover' | 'active'): string;
+export declare function getFocusStateSelector(visible: boolean, within: boolean): string;
+export declare function getCheckedStateSelector(checked: boolean | 'indeterminate'): string;
+export declare function getDisabledStateSelector(disabled: boolean | 'read-only'): string;
+export declare function getOpenStateSelector(open: boolean): string;
+export declare function getCurrentStateSelector(current: boolean): string;
+export declare function getBlankStateSelector(blank: boolean): string;
+export declare const cssStateSelectors: Record<CSSState, string>;
+//# sourceMappingURL=states.d.ts.map

package/dist/css-states/states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../src/css-states/states.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6MAkBZ,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAU5C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD7B,CAAA;AAQD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM;;;;EAgBhD;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,UAEzE;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,UAEtE;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,UAEzE;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,WAAW,UAEvE;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,UAEjD;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,UAEvD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,UAGnD;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAkBtD,CAAA"}