@astryxdesign/core 0.1.2-canary.04e71b2 → 0.1.2-canary.05be2c6

package/dist/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8LD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAyFX;yBA5Ge,IAAI"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2MD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}

package/dist/Grid/Grid.js

@@ -43,6 +43,26 @@ const baseStyles = {
     $$css: true
   }
 };
+
+// Dynamic track values compile to CSS variables + a class-level declaration
+// (grid-template-columns: var(--x)) instead of a raw inline style, so
+// consumer `xstyle` overrides — including ones inside @media queries — can
+// still win. A raw inline `grid-template-columns` would beat any class.
+const _temp = {
+  kJBjZk: "xhij9v2",
+  "$$css": true
+};
+const dynamicStyles = {
+  templateColumns: value => [{
+    kumcoG: value != null ? "xqketvx" : value,
+    $$css: true
+  }, {
+    "--x-gridTemplateColumns": value != null ? value : undefined
+  }],
+  autoRows: value => [_temp, {
+    "--x-gridAutoRows": `${value}px` != null ? `${value}px` : undefined
+  }]
+};
 const alignStyles = {
   start: {
     kGNEyG: "x7a106z",
@@ -313,12 +333,10 @@ export function Grid({
     gridTemplateColumns = '1fr';
   }
 
-  // Build inline style for dynamic values
+  // Build inline style for dynamic values. Track templates go through
+  // dynamicStyles (CSS-var indirection) so xstyle/@media overrides work;
+  // width/height stay inline as explicit caller-set dimensions.
   const inlineStyle = {
-    gridTemplateColumns,
-    ...(rowHeight != null && {
-      gridAutoRows: `${rowHeight}px`
-    }),
     ...(width != null && {
       width: typeof width === 'number' ? `${width}px` : width
     }),
@@ -342,7 +360,7 @@ export function Grid({
       gap,
       align,
       justify
-    }), stylex.props(baseStyles.grid, gap != null && gapStyles[gap], rowGap != null && rowGapStyles[rowGap], columnGap != null && columnGapStyles[columnGap], align != null && alignStyles[align], justify != null && justifyStyles[justify], xstyle), className, {
+    }), stylex.props(baseStyles.grid, dynamicStyles.templateColumns(gridTemplateColumns), rowHeight != null && dynamicStyles.autoRows(rowHeight), gap != null && gapStyles[gap], rowGap != null && rowGapStyles[rowGap], columnGap != null && columnGapStyles[columnGap], align != null && alignStyles[align], justify != null && justifyStyles[justify], xstyle), className, {
       ...style,
       ...inlineStyle
     }),

package/dist/TimeInput/TimeInput.d.ts.map

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

package/dist/TimeInput/TimeInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TimeInput.tsx
- * @input Uses React, useId, useState, useEffect, useCallback, useRef, Field, Icon
+ * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext
  * @output Exports TimeInput component, TimeInputProps
  * @position Core implementation; consumed by index.ts, tested by TimeInput.test.tsx
  *
@@ -22,12 +22,15 @@ import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderV
 import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
-import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs } from "../utils/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs, getInputARIA } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
+import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -93,10 +96,12 @@ export function TimeInput({
 }) {
   const size = useSize(sizeProp, 'md');
   const id = useId();
+  const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef(null);
   const containerRef = useRef(null);
+  const inputGroup = useInputGroup();
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
@@ -125,7 +130,10 @@ export function TimeInput({
     error: 'error',
     success: 'success'
   };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
 
   // Pending input while user is typing (null = show formatted value)
   const [pendingInput, setPendingInput] = useState(null);
@@ -273,6 +281,105 @@ export function TimeInput({
     inputRef,
     disabled: isDisabled
   });
+  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+    ref: el => {
+      containerRef.current = el;
+      // Anchor + hover/focus listeners for the disabled-message tooltip.
+      // Handlers are gated internally by isEnabled, so attaching
+      // unconditionally is safe.
+      disabledMessageTooltip.ref(el);
+    },
+    onClick: handleWrapperClick,
+    onMouseUp: handleWrapperMouseUp,
+    ...mergeProps(themeProps('time-input', {
+      size,
+      status: status?.type ?? null
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+    children: [/*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "clock",
+        size: "sm",
+        color: "secondary"
+      })
+    }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: inputLabelID,
+      children: label
+    }), inputGroup && description && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      id: descriptionID,
+      children: description
+    }), inputGroup && status?.message && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      id: statusMessageID,
+      role: status.type === 'error' ? 'alert' : 'status',
+      "aria-live": status.type === 'error' ? 'assertive' : 'polite',
+      children: status.message
+    }), /*#__PURE__*/_jsx("input", {
+      ref: mergeRefs(ref, inputRef),
+      id: id,
+      type: "text",
+      value: displayValue,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleInputKeyDown,
+      placeholder: displayPlaceholder
+      // With a disabledMessage the input keeps focusability via
+      // aria-disabled so the reason is focus-discoverable; typing and
+      // arrow-key adjustment are blocked with readOnly and the guards.
+      ,
+      disabled: isDisabled && !showsDisabledMessage,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      readOnly: showsDisabledMessage || undefined,
+      autoFocus: hasAutoFocus,
+      "data-autofocus": hasAutoFocus || undefined,
+      "aria-describedby": ariaDescribedBy,
+      "aria-required": isRequired === true ? 'true' : undefined,
+      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+      "aria-busy": isBusy || undefined,
+      "aria-labelledby": ariaLabelledBy,
+      ...{
+        0: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
+        },
+        2: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
+        },
+        1: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
+        },
+        3: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
+        }
+      }[!!isDisabled << 1 | !!!isInputValid << 0]
+    }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleClear,
+      "aria-label": `Clear ${label}`,
+      ...{
+        className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "close",
+        size: "sm",
+        color: "secondary"
+      })
+    }), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
+      icon: statusIconMap[status.type],
+      size: "md",
+      color: statusIconColorMap[status.type]
+    })]
+  });
+  if (inputGroup) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    });
+  }
   return /*#__PURE__*/_jsxs(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
@@ -289,86 +396,7 @@ export function TimeInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: [/*#__PURE__*/_jsxs("div", {
-      ref: el => {
-        containerRef.current = el;
-        // Anchor + hover/focus listeners for the disabled-message tooltip.
-        // Handlers are gated internally by isEnabled, so attaching
-        // unconditionally is safe.
-        disabledMessageTooltip.ref(el);
-      },
-      onClick: handleWrapperClick,
-      onMouseUp: handleWrapperMouseUp,
-      ...mergeProps(themeProps('time-input', {
-        size,
-        status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "clock",
-          size: "sm",
-          color: "secondary"
-        })
-      }), /*#__PURE__*/_jsx("input", {
-        ref: mergeRefs(ref, inputRef),
-        id: id,
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleInputKeyDown,
-        placeholder: displayPlaceholder
-        // With a disabledMessage the input keeps focusability via
-        // aria-disabled so the reason is focus-discoverable; typing and
-        // arrow-key adjustment are blocked with readOnly and the guards.
-        ,
-        disabled: isDisabled && !showsDisabledMessage,
-        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
-        readOnly: showsDisabledMessage || undefined,
-        autoFocus: hasAutoFocus,
-        "data-autofocus": hasAutoFocus || undefined,
-        "aria-describedby": ariaDescribedBy,
-        "aria-required": isRequired === true ? 'true' : undefined,
-        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
-        "aria-busy": isBusy || undefined,
-        ...{
-          0: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
-          },
-          2: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
-          },
-          1: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
-          },
-          3: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
-          }
-        }[!!isDisabled << 1 | !!!isInputValid << 0]
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
-        size: "sm"
-      }), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": `Clear ${label}`,
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "close",
-          size: "sm",
-          color: "secondary"
-        })
-      }), status && /*#__PURE__*/_jsx(Icon, {
-        icon: statusIconMap[status.type],
-        size: "md",
-        color: statusIconColorMap[status.type]
-      })]
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 TimeInput.displayName = 'TimeInput';

package/dist/astryx.css

@@ -14,6 +14,8 @@
   @property --x-counterReset { syntax: "*"; inherits: false;}
   @property --x-fontSize { syntax: "*"; inherits: false;}
   @property --x-gap { syntax: "*"; inherits: false;}
+  @property --x-gridAutoRows { syntax: "*"; inherits: false;}
+  @property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
   @property --x-height { syntax: "*"; inherits: false;}
   @property --x-left { syntax: "*"; inherits: false;}
   @property --x-marginInline { syntax: "*"; inherits: false;}
@@ -740,6 +742,7 @@
   .xv8on6e:not(#\#):not(#\#):not(#\#){font-weight:var(--text-supporting-weight)}
   .xu6a5m6:not(#\#):not(#\#):not(#\#){grid-auto-columns:1fr}
   .x1mt1orb:not(#\#):not(#\#):not(#\#){grid-auto-flow:column}
+  .xhij9v2:not(#\#):not(#\#):not(#\#){grid-auto-rows:var(--x-gridAutoRows)}
   .xcrlgei:not(#\#):not(#\#):not(#\#){grid-column-start:1}
   .x1agbcgv:not(#\#):not(#\#):not(#\#){grid-row-start:1}
   .x134kloy:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto 1fr}
@@ -748,6 +751,7 @@
   .x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
   .x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
   .x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
+  .xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
   .xihq33y:not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}
   .x1tu4anv:not(#\#):not(#\#):not(#\#){grid-template-rows:1fr}
   .xtijo5x:not(#\#):not(#\#):not(#\#){inset-inline-end:0}