@graphprotocol/gds-css 0.1.2 → 0.2.0

package/dist/component-registry.d.ts

@@ -1,71 +1,143 @@
 import { type DeepRecord } from '@graphprotocol/gds-utils';
 import type { CSSPropDefinition, CSSPropType } from './css-props/types.ts';
 export type CSSPropsConfig = Record<string, CSSPropDefinition>;
-type CSSProp<T extends CSSPropDefinition = CSSPropDefinition> = T & {
+type CSSProp<Def extends CSSPropDefinition = CSSPropDefinition> = Def & {
     readonly name: string;
     readonly kebabName: string;
-    readonly initialValue: CSSPropType<T>;
+    /** The container name to use in style queries for this prop. */
+    readonly containerName: string;
+    /** The CSS custom property that holds this prop's value (e.g. `--gds-button-size`). */
+    readonly cssProperty: string;
+    /** The initial value of this prop's CSS custom property. */
+    readonly initialValue: CSSPropType<Def>;
+    /** Whether this prop is defined or overridden in this component (not inherited via `extends`). */
+    readonly own: boolean;
+    /** The data attribute used by `useCSSPropsPolyfill` (e.g. `data-gds-prop-polyfill-size`). */
+    readonly polyfillAttribute: string;
 };
-type CSSProps<P extends CSSPropsConfig> = {
-    readonly [K in keyof P]: P[K] & CSSProp<P[K]>;
+type CSSProps<Props extends CSSPropsConfig> = {
+    readonly [K in keyof Props]: Props[K] & CSSProp<Props[K]>;
 };
-type VarsConfig = Record<string, VarCSS>;
+type IsolateOption = true | 'allow-inheritance' | false;
 type VarCSS = string | DeepRecord<string>;
-export declare class GDSComponent<P extends CSSPropsConfig = CSSPropsConfig, A extends boolean = boolean> {
+type VarsConfig = Record<string, VarCSS>;
+export declare class GDSComponent<Props extends CSSPropsConfig = CSSPropsConfig, AddonCompatible extends boolean = boolean> {
     readonly name: string;
     readonly kebabName: string;
     readonly className: string;
-    readonly containerName: string | null;
-    readonly addonCompatible: A;
-    readonly cssProps: CSSProps<P>;
+    readonly containerName: string;
+    readonly extends: GDSComponent | undefined;
+    readonly isolate: IsolateOption;
+    readonly addonCompatible: AddonCompatible;
+    readonly cssProps: CSSProps<Props>;
     readonly vars: VarsConfig | undefined;
     constructor(name: string, config?: {
-        containerName?: string | null | undefined;
-        addonCompatible?: A | undefined;
-        cssProps?: P | undefined;
+        extends?: GDSComponent | undefined;
+        isolate?: IsolateOption | undefined;
+        addonCompatible?: AddonCompatible | undefined;
+        cssProps?: Props | undefined;
         vars?: VarsConfig | undefined;
     });
-    getCSSPropByName<T extends keyof P & string>(name: T): CSSProps<P>[T];
-    findCSSPropByKebabName(kebabName: string): CSSProps<P>[Extract<keyof P, string>] | undefined;
+    /** Returns the chain of container names from the `extends` hierarchy as an array. */
+    getContainerNameChain(): string[];
+    getCSSPropByName<Name extends keyof Props & string>(name: Name): CSSProps<Props>[Name];
+    findCSSPropByKebabName(kebabName: string): CSSProps<Props>[Extract<keyof Props, string>] | undefined;
 }
-/** Type to validate CSS prop definitions. */
-type ValidateCSSPropDefinition<P> = P extends {
+/**
+ * Validates a CSS prop definition. Ensures:
+ *
+ * - `values` type props have at least one value.
+ * - `defaultValue` (if provided) is one of the `values`
+ */
+type ValidateCSSPropDefinition<Def> = Def extends {
+    type: 'values';
+    values: readonly [unknown, ...unknown[]];
+    defaultValue: infer Default;
+} ? Default extends Def['values'][number] ? Def : Omit<Def, 'defaultValue'> & {
+    defaultValue: Def['values'][number];
+} : Def extends {
     type: 'values';
-    values: readonly unknown[];
-} ? P['values'] extends readonly [unknown, ...unknown[]] ? P extends {
-    defaultValue?: unknown;
-} ? P['defaultValue'] extends P['values'][number] ? P : never : P : never : P;
-/** Type to validate all CSS props in an object. */
-type ValidateCSSPropsConfig<P extends Record<string, unknown>> = {
-    [K in keyof P]: ValidateCSSPropDefinition<P[K]>;
+    values: readonly [];
+} ? never : Def;
+/** Validates all CSS props in an object. Allows `null` to remove inherited props. */
+type ValidateCSSPropsConfig<Config extends Record<string, unknown>> = {
+    [K in keyof Config]: Config[K] extends null ? null : ValidateCSSPropDefinition<Config[K]>;
+};
+/** Validates that `vars` names don't conflict with `cssProps` names. */
+type ValidateVarsConfig<CSSPropsKeys, Vars extends VarsConfig> = {
+    [K in keyof Vars]: K extends CSSPropsKeys ? `Var "${K & string}" conflicts with cssProps. Choose a different name.` : Vars[K];
 };
-/** Type to validate that vars don't conflict with cssProps names. */
-type ValidateVarsConfig<P extends CSSPropsConfig, V extends VarsConfig> = {} extends P ? V : {
-    [K in keyof V]: K extends keyof P ? `Var "${K & string}" conflicts with cssProps. Choose a different name.` : V[K];
+/**
+ * Merges parent `cssProps` with own. Own props override parent props, `null` removes inherited
+ * props.
+ */
+type MergeCSSProps<ParentProps extends CSSPropsConfig | undefined, OwnProps extends Record<string, CSSPropDefinition | null>> = ParentProps extends CSSPropsConfig ? {
+    [K in keyof ParentProps as K extends keyof OwnProps ? OwnProps[K] extends null ? never : K : K]: K extends keyof OwnProps ? OwnProps[K] extends CSSPropDefinition ? OwnProps[K] : ParentProps[K] : ParentProps[K];
+} & {
+    [K in keyof OwnProps as K extends keyof ParentProps ? never : OwnProps[K] extends null ? never : K]: OwnProps[K] extends CSSPropDefinition ? OwnProps[K] : never;
+} : {
+    [K in keyof OwnProps as OwnProps[K] extends null ? never : K]: OwnProps[K] extends CSSPropDefinition ? OwnProps[K] : never;
+};
+/** Computed merged `cssProps` type for `createComponent`. */
+type MergedCSSProps<Extends extends GDSComponent | undefined, OwnProps extends Record<string, CSSPropDefinition | null>> = MergeCSSProps<Extends extends GDSComponent<infer ParentProps> ? ParentProps : undefined, OwnProps>;
+/**
+ * Empty object type without index signature (unlike `Record<string, never>` which has `keyof
+ * Record<string, never>` = `string`, not `never`).
+ */
+type EmptyObject = {
+    [K in never]: never;
 };
 /** Helper function to create a `GDSComponent` instance with proper type inference. */
-export declare function createComponent<const P extends CSSPropsConfig, const V extends VarsConfig, const A extends boolean>(name: string, config?: ConstructorParameters<typeof GDSComponent<P>>[1] & {
-    addonCompatible?: A;
-    cssProps?: ValidateCSSPropsConfig<P>;
-    vars?: ValidateVarsConfig<P, V>;
-}): GDSComponent<P, A>;
-/** Helper type to extract the CSS props config type from a `GDSComponent` instance. */
-export type ComponentCSSPropsConfig<C extends GDSComponent> = C extends GDSComponent<infer P> ? P : never;
+export declare function createComponent<const Extends extends GDSComponent | undefined = undefined, const OwnCSSProps extends Record<string, CSSPropDefinition | null> = EmptyObject, const Vars extends VarsConfig = EmptyObject, const AddonCompatible extends boolean = false>(name: string, config?: {
+    /**
+     * The parent component that this component extends. When set:
+     *
+     * - The component inherits all parent container names for CSS container queries (e.g. if
+     *   `Checkbox` extends `Checkable`, the following CSS will be generated: `.gds-checkbox {
+     *   container-name: gds-checkable gds-checkbox; }`).
+     * - The component inherits all parent `cssProps`, which can be overridden or removed (with
+     *   `null`).
+     * - The `isolate` option defaults to `false` since the parent already handles isolation (if not,
+     *   it can be set to `true` or `'allow-inheritance'`, but `isolate: false` will not cancel/undo
+     *   the parent's isolation).
+     */
+    extends?: Extends;
+    /**
+     * - `true`: add `isolation: isolate` and reset all inherited font/text properties.
+     * - `'allow-inheritance'`: only add `isolation: isolate` (keep inheriting font/text properties).
+     * - `false`: do nothing.
+     *
+     * @default true // or if `extends` is set, `false`
+     */
+    isolate?: IsolateOption;
+    /**
+     * Whether the component can be used as an addon (e.g. `<Button addonBefore={Component}>`).
+     * Setting this to `true` also includes this component's class in the selector generated by the
+     * `addon-compatible` custom variant.
+     *
+     * @default false
+     */
+    addonCompatible?: AddonCompatible;
+    cssProps?: ValidateCSSPropsConfig<OwnCSSProps>;
+    vars?: ValidateVarsConfig<keyof MergedCSSProps<Extends, OwnCSSProps>, Vars>;
+}): GDSComponent<MergedCSSProps<Extends, OwnCSSProps>, AddonCompatible>;
+/** Extracts the CSS props config type from a `GDSComponent` instance. */
+export type ComponentCSSPropsConfig<Component extends GDSComponent> = Component extends GDSComponent<infer Props> ? Props : never;
 /**
- * Helper type to extract CSS props types from components created with `createComponent`. Props
- * without a `defaultValue` are required, while those with a `defaultValue` are optional. Explicitly
- * includes `undefined` in the type to work with `exactOptionalPropertyTypes`.
+ * Extracts CSS props types from a component for use in React props. Props without a `defaultValue`
+ * are required, those with a `defaultValue` are optional. Explicitly includes `undefined` in the
+ * type to work with `exactOptionalPropertyTypes`.
  */
-export type ComponentCSSProps<C extends GDSComponent> = {
-    [K in keyof ComponentCSSPropsConfig<C> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? never : K]: CSSPropType<ComponentCSSPropsConfig<C>[K]>;
+export type ComponentCSSProps<Component extends GDSComponent> = {
+    [K in keyof ComponentCSSPropsConfig<Component> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<Component>[K] ? never : K]: CSSPropType<ComponentCSSPropsConfig<Component>[K]>;
 } & {
-    [K in keyof ComponentCSSPropsConfig<C> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? K : never]?: CSSPropType<ComponentCSSPropsConfig<C>[K]> | undefined;
+    [K in keyof ComponentCSSPropsConfig<Component> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<Component>[K] ? K : never]?: CSSPropType<ComponentCSSPropsConfig<Component>[K]> | undefined;
 };
 /**
  * Combined props type for GDS components. Includes CSS props and, for addon-compatible components,
  * a hidden prop to mark them as such.
  */
-export type GDSComponentProps<C extends GDSComponent> = ComponentCSSProps<C> & (C extends GDSComponent<CSSPropsConfig, true> ? {
+export type GDSComponentProps<Component extends GDSComponent> = ComponentCSSProps<Component> & (Component extends GDSComponent<CSSPropsConfig, true> ? {
     __addonCompatible?: undefined;
 } : {
     __addonCompatible?: never;

package/dist/component-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../src/component-registry.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../src/component-registry.ts"],"names":[],"mappings":"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"}

package/dist/component-registry.js

@@ -1,10 +1,11 @@
-import { objectEntries } from 'ts-extras';
 import { camelToKebab } from '@graphprotocol/gds-utils';
 export class GDSComponent {
     name;
     kebabName;
     className;
     containerName;
+    extends;
+    isolate;
     addonCompatible;
     cssProps;
     vars;
@@ -12,9 +13,30 @@ export class GDSComponent {
         this.name = name;
         this.kebabName = camelToKebab(name);
         this.className = `gds-${this.kebabName}`;
-        this.containerName = config?.containerName !== undefined ? config.containerName : this.className;
+        this.containerName = `gds-${this.kebabName}`;
+        this.extends = config?.extends;
+        this.isolate = config?.isolate ?? (this.extends ? false : true);
         this.addonCompatible = (config?.addonCompatible ?? false);
-        this.cssProps = Object.freeze(Object.fromEntries(objectEntries(config?.cssProps ?? {}).map(([propName, prop]) => {
+        this.vars = config?.vars;
+        // Merge `cssProps` from parent with own, allowing `null` to remove inherited props
+        const parentCSSProps = this.extends?.cssProps ?? {};
+        const ownCSSProps = (config?.cssProps ?? {});
+        const ownPropNames = new Set(Object.keys(ownCSSProps));
+        const mergedCSSProps = new Map();
+        for (const [propName, prop] of Object.entries(parentCSSProps)) {
+            if (ownCSSProps[propName] !== null) {
+                mergedCSSProps.set(propName, prop);
+            }
+        }
+        for (const [propName, prop] of Object.entries(ownCSSProps)) {
+            if (prop !== null) {
+                mergedCSSProps.set(propName, prop);
+            }
+        }
+        this.cssProps = Object.freeze(Object.fromEntries([...mergedCSSProps.entries()].map(([propName, prop]) => {
+            const kebabName = camelToKebab(propName);
+            const own = ownPropNames.has(propName);
+            const parentProp = parentCSSProps[propName];
             const initialValue = prop.defaultValue ??
                 (() => {
                     switch (prop.type) {
@@ -35,18 +57,31 @@ export class GDSComponent {
                 {
                     ...prop,
                     name: propName,
-                    kebabName: camelToKebab(propName),
+                    kebabName,
+                    // Inherited props keep their parent's `containerName` and `cssProperty`
+                    containerName: (!own && parentProp?.containerName) || this.containerName,
+                    cssProperty: (!own && parentProp?.cssProperty) || `--gds-${this.kebabName}-${kebabName}`,
                     initialValue,
+                    own,
+                    polyfillAttribute: `data-gds-prop-polyfill-${kebabName}`,
                 },
             ];
         })));
-        this.vars = config?.vars;
+    }
+    /** Returns the chain of container names from the `extends` hierarchy as an array. */
+    getContainerNameChain() {
+        const containerNames = [this.containerName];
+        let parent = this.extends;
+        while (parent) {
+            containerNames.unshift(parent.containerName);
+            parent = parent.extends;
+        }
+        return containerNames;
     }
     getCSSPropByName(name) {
         const prop = this.cssProps[name];
-        if (!prop) {
+        if (!prop)
             throw new Error(`Unknown CSS prop "${name}" for component "${this.name}"`);
-        }
         return prop;
     }
     findCSSPropByKebabName(kebabName) {

package/dist/component-registry.js.map

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

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

@@ -1,5 +1,5 @@
 export * from './types.ts';
 export { getCSSPropRawValue } from './getCSSPropRawValue.ts';
 export { parseCSSPropValue } from './parseCSSPropValue.ts';
-export { registerCSSProps } from './registerCSSProps.ts';
+export { setupCSSProps } from './setupCSSProps.ts';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/css-props/index.js

@@ -1,5 +1,5 @@
 export * from "./types.js";
 export { getCSSPropRawValue } from "./getCSSPropRawValue.js";
 export { parseCSSPropValue } from "./parseCSSPropValue.js";
-export { registerCSSProps } from "./registerCSSProps.js";
+export { setupCSSProps } from "./setupCSSProps.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/css-props/parseCSSPropValue.js

@@ -35,7 +35,7 @@ export function parseCSSPropValue(prop, rawValue) {
                 const numberValue = parseNumber(rawValue.slice(0, -2)); // Remove 'px'
                 return pxToTw(numberValue ?? 0);
             }
-            // Otherwise keep as-is (e.g., "1rem", "100%")
+            // Otherwise keep as-is (e.g. '1rem' or '100%')
             return rawValue;
         }
         case 'color': {

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

@@ -1 +1 @@
-{"version":3,"file":"parseCSSPropValue.js","sourceRoot":"","sources":["../../src/css-props/parseCSSPropValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAWvD;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAO,EACP,QAAgB;IAEhB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,yDAAyD;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAC9C,mCAAmC;YACnC,IAAI,KAAK,KAAK,MAAM;gBAAE,OAAO,IAA6C,CAAA;YAC1E,IAAI,KAAK,KAAK,OAAO;gBAAE,OAAO,KAA8C,CAAA;YAC5E,kCAAkC;YAClC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;YACtC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;gBACzB,OAAO,WAAoD,CAAA;YAC7D,CAAC;YACD,0BAA0B;YAC1B,OAAO,KAA8C,CAAA;QACvD,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAA2C,CAAA;QACrF,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;YACzC,OAAO,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;QACrE,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,wDAAwD;YACxD,IAAI,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvC,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,cAAc;gBACrE,OAAO,MAAM,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;YAC3E,CAAC;YACD,8CAA8C;YAC9C,OAAO,QAA2C,CAAA;QACpD,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,IAAI,QAAQ,KAAK,cAAc,EAAE,CAAC;gBAChC,OAAO,SAAkD,CAAA;YAC3D,CAAC;YACD,IAAI,QAAQ,KAAK,aAAa,EAAE,CAAC;gBAC/B,OAAO,aAAsD,CAAA;YAC/D,CAAC;YACD,+CAA+C;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,mDAAmD,CAAC,CAAA;YACzF,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,aAAa,CAAA;gBAC3C,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;oBACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;oBACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;wBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACzB,OAAO,GAAG,KAAK,IAAI,OAAO,EAAoC,CAAA;oBAChE,CAAC;gBACH,CAAC;YACH,CAAC;YACD,kCAAkC;YAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;YACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,CAAC,CAAmC,CAAA;YACtD,CAAC;YACD,uCAAuC;YACvC,OAAO,QAA0B,CAAA;QACnC,CAAC;IACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"parseCSSPropValue.js","sourceRoot":"","sources":["../../src/css-props/parseCSSPropValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAWvD;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAO,EACP,QAAgB;IAEhB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,yDAAyD;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAC9C,mCAAmC;YACnC,IAAI,KAAK,KAAK,MAAM;gBAAE,OAAO,IAA6C,CAAA;YAC1E,IAAI,KAAK,KAAK,OAAO;gBAAE,OAAO,KAA8C,CAAA;YAC5E,kCAAkC;YAClC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;YACtC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;gBACzB,OAAO,WAAoD,CAAA;YAC7D,CAAC;YACD,0BAA0B;YAC1B,OAAO,KAA8C,CAAA;QACvD,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAA2C,CAAA;QACrF,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;YACzC,OAAO,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;QACrE,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,wDAAwD;YACxD,IAAI,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvC,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,cAAc;gBACrE,OAAO,MAAM,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;YAC3E,CAAC;YACD,+CAA+C;YAC/C,OAAO,QAA2C,CAAA;QACpD,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,IAAI,QAAQ,KAAK,cAAc,EAAE,CAAC;gBAChC,OAAO,SAAkD,CAAA;YAC3D,CAAC;YACD,IAAI,QAAQ,KAAK,aAAa,EAAE,CAAC;gBAC/B,OAAO,aAAsD,CAAA;YAC/D,CAAC;YACD,+CAA+C;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,mDAAmD,CAAC,CAAA;YACzF,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,aAAa,CAAA;gBAC3C,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;oBACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;oBACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;wBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACzB,OAAO,GAAG,KAAK,IAAI,OAAO,EAAoC,CAAA;oBAChE,CAAC;gBACH,CAAC;YACH,CAAC;YACD,kCAAkC;YAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;YACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,CAAC,CAAmC,CAAA;YACtD,CAAC;YACD,uCAAuC;YACvC,OAAO,QAA0B,CAAA;QACnC,CAAC;IACH,CAAC;AACH,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { PluginAPI } from '../types.ts';
+/**
+ * Sets up the CSS props system via the Tailwind plugin. This includes custom properties, utilities,
+ * and variants for prop-based styling.
+ */
+export declare function setupCSSProps(api: PluginAPI): void;
+//# sourceMappingURL=setupCSSProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setupCSSProps.d.ts","sourceRoot":"","sources":["../../src/css-props/setupCSSProps.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C;;;GAGG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,SAAS,QAiP3C"}

package/dist/css-props/{registerCSSProps.js → setupCSSProps.js}

@@ -3,10 +3,10 @@ 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.
+ * Sets up the CSS props system via the Tailwind plugin. This includes custom properties, utilities,
+ * and variants for prop-based styling.
  */
-export function registerCSSProps(api) {
+export function setupCSSProps(api) {
     const componentsByCSSProp = getRegisteredComponents(true).reduce((outerMap, component) => {
         for (const cssProp of Object.values(component.cssProps)) {
             const innerMap = outerMap.get(cssProp.kebabName) ??
@@ -33,9 +33,13 @@ export function registerCSSProps(api) {
             },
         });
     }
-    /** 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)) {
+        // Only process own props (not inherited via `extends`); inherited props are handled by the parent component
+        const ownCSSProps = Object.values(component.cssProps).filter((cssProp) => cssProp.own);
+        if (ownCSSProps.length === 0)
+            continue;
+        /** Register a custom property for each component-prop pair to restrict the allowed values. */
+        for (const cssProp of ownCSSProps) {
             const syntax = (() => {
                 switch (cssProp.type) {
                     case 'values':
@@ -53,7 +57,7 @@ export function registerCSSProps(api) {
                 }
             })();
             api.addBase({
-                [`@property --gds-${component.kebabName}-${cssProp.kebabName}`]: {
+                [`@property ${cssProp.cssProperty}`]: {
                     syntax,
                     /**
                      * We only need this property to inherit if the type is not `values`, because `values` CSS
@@ -73,23 +77,17 @@ export function registerCSSProps(api) {
             });
         }
         /**
-         * 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.
+         * Add base styles for each component-prop pair, defining the default value of each CSS prop and
+         * applying the value passed via the React prop, if any. See `getCSSPropRawValue` 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}))`,
-                        };
-                    }, {}),
-                },
+                [`.${component.className}`]: ownCSSProps.reduce((rules, cssProp) => ({
+                    ...rules,
+                    [`--gds-passed-or-default-${cssProp.kebabName}`]: `var(--gds-passed-${cssProp.kebabName}, var(--gds-default-${cssProp.kebabName}, ${getCSSPropRawValue(cssProp, cssProp.initialValue)}))`,
+                    [cssProp.cssProperty]: `var(--gds-prop-${cssProp.kebabName}, var(--gds-passed-or-default-${cssProp.kebabName}))`,
+                }), {}),
             },
         });
     }
@@ -163,20 +161,13 @@ export function registerCSSProps(api) {
     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 the modifier is missing, return some dummy CSS so that the variant is suggested by
+             * Tailwind IntelliSense. If a modifier is present but is not a valid component name, then
+             * return an empty array (no CSS is generated and the variant is considered invalid).
              */
+            if (componentKebabName === null)
+                return '@container dummy';
+            const component = getRegisteredComponent(componentKebabName);
             if (!component)
                 return [];
             try {
@@ -186,18 +177,15 @@ export function registerCSSProps(api) {
                     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 no such prop exists on the component, or if one exists but is not of type `values`
+                 * or doesn't support the specified value, consider the variant invalid.
                  */
-                if ((!cssProp || cssProp.type !== 'values' || !cssProp.values.includes(value)) &&
-                    component.kebabName !== 'dummy') {
+                if (!cssProp || cssProp.type !== 'values' || !cssProp.values.includes(value))
                     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})`,
+                    `@container ${cssProp.containerName} ${variant === '@prop-not' ? 'not' : ''} style(${cssProp.cssProperty}: ${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
@@ -207,7 +195,7 @@ export function registerCSSProps(api) {
                      * 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 })}]) *) }`,
+                    `@supports (not (view-transition-name: none)) or (-moz-orient: inline) { &:where(.${component.className}${variant === '@prop-not' ? ':not' : ':is'}([${cssProp.polyfillAttribute}=${cssesc(rawValue, { isIdentifier: true })}]) *) }`,
                 ];
             }
             catch {
@@ -228,4 +216,4 @@ export function registerCSSProps(api) {
         });
     }
 }
-//# sourceMappingURL=registerCSSProps.js.map
+//# sourceMappingURL=setupCSSProps.js.map

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

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

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

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

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

@@ -1 +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"}
+{"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,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/css-states/index.js

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

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

@@ -1 +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"}
+{"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,cAAc,EAAE,MAAM,qBAAqB,CAAA"}

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

@@ -0,0 +1,20 @@
+import type { PluginAPI } from '../types.ts';
+/**
+ * Sets up the CSS states system via 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]`).
+ *
+ * Like CSS props, this system leverages style queries and uses a similar fallback mechanism
+ * (querying by data attribute + using `view-transition-name` to target browsers that don't support
+ * style queries), though the CSS props polyfill is not used. See `useCSSState` for more details.
+ */
+export declare function setupCSSStates(api: PluginAPI): void;
+//# sourceMappingURL=setupCSSStates.d.ts.map

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

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