@nimbus-ds/components 5.22.0 → 5.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Box/index.d.ts +22 -15
  3. package/dist/CHANGELOG.md +6 -0
  4. package/dist/ScrollPane/index.d.ts +22 -15
  5. package/dist/SegmentedControl/index.d.ts +22 -15
  6. package/dist/Stepper/index.d.ts +22 -15
  7. package/dist/components-props.json +1 -1
  8. package/dist/index.d.ts +22 -15
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
4
4
 
5
+ ## 2025-09-16 `5.23.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - `Box`: Added `ai-generative-interactive` and `ai-generative-interactive-border` options to `background` property, and `aiFocus` option to `boxShadow` property. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2025-09-15 `5.22.0`
6
12
 
7
13
  #### 🎉 New features
package/dist/Box/index.d.ts CHANGED
@@ -125,12 +125,19 @@ declare const propertiesBox: {
125
125
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
126
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
127
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
129
+ * The right property participates in specifying the horizontal position of a positioned box.
130
+ */
129
131
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
132
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
133
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
134
  transparent: string;
133
135
  };
136
+ background: {
137
+ "ai-generative-interactive-border": string;
138
+ "ai-generative-interactive": string;
139
+ transparent: string;
140
+ };
134
141
  color: {
135
142
  currentColor: string;
136
143
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -151,7 +158,9 @@ declare const propertiesBox: {
151
158
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
159
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
160
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
162
+ * The right property participates in specifying the horizontal position of a positioned box.
163
+ */
155
164
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
165
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
166
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -177,10 +186,7 @@ declare const propertiesBox: {
177
186
  transparent: string;
178
187
  };
179
188
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
189
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
190
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
191
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
192
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +194,6 @@ declare const propertiesBox: {
188
194
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
195
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
196
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
197
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
198
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
199
  none: string;
@@ -268,6 +270,7 @@ declare const propertiesBox: {
268
270
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
271
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
272
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
274
  };
272
275
  transitionDuration: {
273
276
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,7 +320,9 @@ declare const propertiesBox: {
317
320
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
321
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
322
  h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
324
+ * This defines the ability for a flex item to shrink if necessary.
325
+ */
321
326
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
327
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
328
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -351,10 +356,7 @@ declare const propertiesBox: {
351
356
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
357
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
358
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
359
+ };
358
360
  };
359
361
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
362
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,6 +373,7 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
373
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
374
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
375
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
376
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
377
  export interface BoxConditions<T> extends Conditions<T> {
375
378
  focus?: T;
376
379
  focusWithin?: T;
@@ -631,6 +634,10 @@ export interface BoxSprinkle {
631
634
  * The zIndex property specifies the stack order of the box.
632
635
  */
633
636
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
637
+ /**
638
+ * The background property sets the background of the box.
639
+ */
640
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
641
  /**
635
642
  * The backgroundImage property sets one or more background images on an element.
636
643
  */
package/dist/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
4
4
 
5
+ ## 2025-09-16 `5.23.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - `Box`: Added `ai-generative-interactive` and `ai-generative-interactive-border` options to `background` property, and `aiFocus` option to `boxShadow` property. ([#352](https://github.com/TiendaNube/nimbus-design-system/pull/352) by [@joacotornello](https://github.com/joacotornello))
10
+
5
11
  ## 2025-09-15 `5.22.0`
6
12
 
7
13
  #### 🎉 New features
package/dist/ScrollPane/index.d.ts CHANGED
@@ -125,12 +125,19 @@ declare const propertiesBox: {
125
125
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
126
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
127
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
129
+ * The right property participates in specifying the horizontal position of a positioned box.
130
+ */
129
131
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
132
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
133
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
134
  transparent: string;
133
135
  };
136
+ background: {
137
+ "ai-generative-interactive-border": string;
138
+ "ai-generative-interactive": string;
139
+ transparent: string;
140
+ };
134
141
  color: {
135
142
  currentColor: string;
136
143
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -151,7 +158,9 @@ declare const propertiesBox: {
151
158
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
159
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
160
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
162
+ * The right property participates in specifying the horizontal position of a positioned box.
163
+ */
155
164
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
165
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
166
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -177,10 +186,7 @@ declare const propertiesBox: {
177
186
  transparent: string;
178
187
  };
179
188
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
189
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
190
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
191
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
192
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +194,6 @@ declare const propertiesBox: {
188
194
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
195
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
196
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
197
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
198
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
199
  none: string;
@@ -268,6 +270,7 @@ declare const propertiesBox: {
268
270
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
271
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
272
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
274
  };
272
275
  transitionDuration: {
273
276
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,7 +320,9 @@ declare const propertiesBox: {
317
320
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
321
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
322
  h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
324
+ * This defines the ability for a flex item to shrink if necessary.
325
+ */
321
326
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
327
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
328
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -351,10 +356,7 @@ declare const propertiesBox: {
351
356
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
357
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
358
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
359
+ };
358
360
  };
359
361
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
362
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,6 +373,7 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
373
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
374
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
375
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
376
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
377
  export interface BoxConditions<T> extends Conditions<T> {
375
378
  focus?: T;
376
379
  focusWithin?: T;
@@ -631,6 +634,10 @@ export interface BoxSprinkle {
631
634
  * The zIndex property specifies the stack order of the box.
632
635
  */
633
636
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
637
+ /**
638
+ * The background property sets the background of the box.
639
+ */
640
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
641
  /**
635
642
  * The backgroundImage property sets one or more background images on an element.
636
643
  */
package/dist/SegmentedControl/index.d.ts CHANGED
@@ -125,12 +125,19 @@ declare const propertiesBox: {
125
125
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
126
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
127
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
129
+ * The right property participates in specifying the horizontal position of a positioned box.
130
+ */
129
131
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
132
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
133
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
134
  transparent: string;
133
135
  };
136
+ background: {
137
+ "ai-generative-interactive-border": string;
138
+ "ai-generative-interactive": string;
139
+ transparent: string;
140
+ };
134
141
  color: {
135
142
  currentColor: string;
136
143
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -151,7 +158,9 @@ declare const propertiesBox: {
151
158
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
159
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
160
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
162
+ * The right property participates in specifying the horizontal position of a positioned box.
163
+ */
155
164
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
165
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
166
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -177,10 +186,7 @@ declare const propertiesBox: {
177
186
  transparent: string;
178
187
  };
179
188
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
189
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
190
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
191
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
192
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +194,6 @@ declare const propertiesBox: {
188
194
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
195
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
196
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
197
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
198
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
199
  none: string;
@@ -268,6 +270,7 @@ declare const propertiesBox: {
268
270
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
271
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
272
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
274
  };
272
275
  transitionDuration: {
273
276
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,7 +320,9 @@ declare const propertiesBox: {
317
320
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
321
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
322
  h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
324
+ * This defines the ability for a flex item to shrink if necessary.
325
+ */
321
326
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
327
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
328
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -351,10 +356,7 @@ declare const propertiesBox: {
351
356
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
357
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
358
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
359
+ };
358
360
  };
359
361
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
362
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,6 +373,7 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
373
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
374
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
375
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
376
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
377
  export interface BoxConditions<T> extends Conditions<T> {
375
378
  focus?: T;
376
379
  focusWithin?: T;
@@ -631,6 +634,10 @@ export interface BoxSprinkle {
631
634
  * The zIndex property specifies the stack order of the box.
632
635
  */
633
636
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
637
+ /**
638
+ * The background property sets the background of the box.
639
+ */
640
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
641
  /**
635
642
  * The backgroundImage property sets one or more background images on an element.
636
643
  */
package/dist/Stepper/index.d.ts CHANGED
@@ -125,12 +125,19 @@ declare const propertiesBox: {
125
125
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
126
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
127
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
129
+ * The right property participates in specifying the horizontal position of a positioned box.
130
+ */
129
131
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
132
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
133
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
134
  transparent: string;
133
135
  };
136
+ background: {
137
+ "ai-generative-interactive-border": string;
138
+ "ai-generative-interactive": string;
139
+ transparent: string;
140
+ };
134
141
  color: {
135
142
  currentColor: string;
136
143
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -151,7 +158,9 @@ declare const propertiesBox: {
151
158
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
159
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
153
160
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
154
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
+ "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
162
+ * The right property participates in specifying the horizontal position of a positioned box.
163
+ */
155
164
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
156
165
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
157
166
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -177,10 +186,7 @@ declare const propertiesBox: {
177
186
  transparent: string;
178
187
  };
179
188
  borderRadius: {
180
- "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
181
- * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
182
- * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
183
- */
189
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
190
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
191
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
192
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,10 +194,6 @@ declare const propertiesBox: {
188
194
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
195
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
196
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
- /**
192
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
193
- * In Flexbox, it aligns the item on the cross axis.
194
- */
195
197
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
198
  half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
199
  none: string;
@@ -268,6 +270,7 @@ declare const propertiesBox: {
268
270
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
271
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
272
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ aiFocus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
274
  };
272
275
  transitionDuration: {
273
276
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -317,7 +320,9 @@ declare const propertiesBox: {
317
320
  "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
321
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
322
  h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
320
- h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
+ h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
324
+ * This defines the ability for a flex item to shrink if necessary.
325
+ */
321
326
  h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
322
327
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
323
328
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -351,10 +356,7 @@ declare const propertiesBox: {
351
356
  h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
352
357
  h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
353
358
  h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
354
- }; /**
355
- * The boxSizing property sets how the total width and height of an box is calculated.
356
- * @default border-box
357
- */
359
+ };
358
360
  };
359
361
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
360
362
  export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
@@ -371,6 +373,7 @@ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transit
371
373
  export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
372
374
  export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
373
375
  export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
376
+ export type BoxBackgroundProperties = keyof typeof propertiesBox.background;
374
377
  export interface BoxConditions<T> extends Conditions<T> {
375
378
  focus?: T;
376
379
  focusWithin?: T;
@@ -631,6 +634,10 @@ export interface BoxSprinkle {
631
634
  * The zIndex property specifies the stack order of the box.
632
635
  */
633
636
  zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
637
+ /**
638
+ * The background property sets the background of the box.
639
+ */
640
+ background?: BoxBackgroundProperties | BoxConditions<BoxBackgroundProperties>;
634
641
  /**
635
642
  * The backgroundImage property sets one or more background images on an element.
636
643
  */