@rarui/components 1.12.0 → 1.13.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 (5) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/custom-elements.json +46 -1
  3. package/dist/index.d.ts +318 -223
  4. package/dist/index.js +108 -78
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -12284,7 +12284,7 @@ declare namespace DataType$1 {
12284
12284
  type VisualBox = "border-box" | "content-box" | "padding-box";
12285
12285
  }
12286
12286
 
12287
- type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string | number})`;
12287
+ type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string})`;
12288
12288
 
12289
12289
  declare const simplePseudoMap: {
12290
12290
  readonly ':-moz-any-link': true;
@@ -12323,6 +12323,7 @@ declare const simplePseudoMap: {
12323
12323
  readonly '::-ms-track': true;
12324
12324
  readonly '::-ms-value': true;
12325
12325
  readonly '::-webkit-backdrop': true;
12326
+ readonly '::-webkit-calendar-picker-indicator': true;
12326
12327
  readonly '::-webkit-inner-spin-button': true;
12327
12328
  readonly '::-webkit-input-placeholder': true;
12328
12329
  readonly '::-webkit-meter-bar': true;
@@ -12408,7 +12409,6 @@ declare const simplePseudoMap: {
12408
12409
  readonly ':visited': true;
12409
12410
  };
12410
12411
  type SimplePseudos = keyof typeof simplePseudoMap;
12411
-
12412
12412
  interface ContainerProperties {
12413
12413
  container?: string;
12414
12414
  containerType?: 'size' | 'inline-size' | (string & {});
@@ -12440,12 +12440,12 @@ interface AllQueries<StyleType> extends MediaQueries<StyleType & AllQueries<Styl
12440
12440
  }
12441
12441
  type WithQueries<StyleType> = StyleType & AllQueries<StyleType>;
12442
12442
  interface SelectorMap {
12443
- [selector: string]: CSSPropertiesWithVars & WithQueries<CSSPropertiesWithVars>;
12443
+ [selector: string]: WithQueries<CSSPropertiesWithVars>;
12444
12444
  }
12445
12445
  interface StyleWithSelectors extends CSSPropertiesAndPseudos {
12446
12446
  selectors?: SelectorMap;
12447
12447
  }
12448
- type StyleRule = StyleWithSelectors & WithQueries<StyleWithSelectors>;
12448
+ type StyleRule = WithQueries<StyleWithSelectors>;
12449
12449
  type ClassNames = string | Array<ClassNames>;
12450
12450
  type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
12451
12451
 
@@ -16136,47 +16136,47 @@ declare namespace DataType {
16136
16136
  type VisualBox = "border-box" | "content-box" | "padding-box";
16137
16137
  }
16138
16138
  declare const fontWeightProperties: {
16139
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16140
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16141
- semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16142
- bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16139
+ regular: `var(--${string})` | `var(--${string}, ${string})`;
16140
+ medium: `var(--${string})` | `var(--${string}, ${string})`;
16141
+ semiBold: `var(--${string})` | `var(--${string}, ${string})`;
16142
+ bold: `var(--${string})` | `var(--${string}, ${string})`;
16143
16143
  };
16144
16144
  declare const colorProperties: {
16145
16145
  currentColor: string;
16146
- brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16147
- "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16148
- disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16149
- error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16150
- info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16151
- invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16152
- "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16153
- "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16154
- "on-brand": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16155
- "on-error": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16156
- "on-info": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16157
- "on-success": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16158
- "on-warning": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16159
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16160
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16161
- success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16162
- warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16163
- "warning-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16146
+ brand: `var(--${string})` | `var(--${string}, ${string})`;
16147
+ "brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
16148
+ disabled: `var(--${string})` | `var(--${string}, ${string})`;
16149
+ error: `var(--${string})` | `var(--${string}, ${string})`;
16150
+ info: `var(--${string})` | `var(--${string}, ${string})`;
16151
+ invert: `var(--${string})` | `var(--${string}, ${string})`;
16152
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
16153
+ "invert-secondary": `var(--${string})` | `var(--${string}, ${string})`;
16154
+ "on-brand": `var(--${string})` | `var(--${string}, ${string})`;
16155
+ "on-error": `var(--${string})` | `var(--${string}, ${string})`;
16156
+ "on-info": `var(--${string})` | `var(--${string}, ${string})`;
16157
+ "on-success": `var(--${string})` | `var(--${string}, ${string})`;
16158
+ "on-warning": `var(--${string})` | `var(--${string}, ${string})`;
16159
+ primary: `var(--${string})` | `var(--${string}, ${string})`;
16160
+ secondary: `var(--${string})` | `var(--${string}, ${string})`;
16161
+ success: `var(--${string})` | `var(--${string}, ${string})`;
16162
+ warning: `var(--${string})` | `var(--${string}, ${string})`;
16163
+ "warning-alt": `var(--${string})` | `var(--${string}, ${string})`;
16164
16164
  };
16165
16165
  declare const borderColorProperties: {
16166
16166
  transparent: string;
16167
- brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16168
- "brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16169
- disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16170
- divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16171
- error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16172
- info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16173
- invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16174
- "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16175
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16176
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16177
- subdued: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16178
- success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16179
- warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16167
+ brand: `var(--${string})` | `var(--${string}, ${string})`;
16168
+ "brand-alt": `var(--${string})` | `var(--${string}, ${string})`;
16169
+ disabled: `var(--${string})` | `var(--${string}, ${string})`;
16170
+ divider: `var(--${string})` | `var(--${string}, ${string})`;
16171
+ error: `var(--${string})` | `var(--${string}, ${string})`;
16172
+ info: `var(--${string})` | `var(--${string}, ${string})`;
16173
+ invert: `var(--${string})` | `var(--${string}, ${string})`;
16174
+ "invert-disabled": `var(--${string})` | `var(--${string}, ${string})`;
16175
+ primary: `var(--${string})` | `var(--${string}, ${string})`;
16176
+ secondary: `var(--${string})` | `var(--${string}, ${string})`;
16177
+ subdued: `var(--${string})` | `var(--${string}, ${string})`;
16178
+ success: `var(--${string})` | `var(--${string}, ${string})`;
16179
+ warning: `var(--${string})` | `var(--${string}, ${string})`;
16180
16180
  };
16181
16181
 
16182
16182
  declare const chipStyles: {
@@ -16187,7 +16187,7 @@ declare const chipStyles: {
16187
16187
  */
16188
16188
  pill: {
16189
16189
  true: {
16190
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16190
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
16191
16191
  };
16192
16192
  };
16193
16193
  /**
@@ -16196,11 +16196,11 @@ declare const chipStyles: {
16196
16196
  */
16197
16197
  selected: {
16198
16198
  true: {
16199
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16200
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16201
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16199
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16200
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16201
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16202
16202
  ":hover": {
16203
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16203
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16204
16204
  };
16205
16205
  };
16206
16206
  };
@@ -16210,13 +16210,13 @@ declare const chipStyles: {
16210
16210
  */
16211
16211
  size: {
16212
16212
  medium: {
16213
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16214
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16213
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
16214
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16215
16215
  height: "2rem";
16216
16216
  };
16217
16217
  small: {
16218
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16219
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16218
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
16219
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16220
16220
  height: "1.5rem";
16221
16221
  };
16222
16222
  };
@@ -16302,20 +16302,20 @@ interface IconSprinkle extends IconDynamicProperties {
16302
16302
  }
16303
16303
 
16304
16304
  declare const textLineHeightProperties: {
16305
- xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16306
- xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16307
- s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16308
- m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16309
- l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16310
- xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16305
+ xxs: `var(--${string})` | `var(--${string}, ${string})`;
16306
+ xs: `var(--${string})` | `var(--${string}, ${string})`;
16307
+ s: `var(--${string})` | `var(--${string}, ${string})`;
16308
+ m: `var(--${string})` | `var(--${string}, ${string})`;
16309
+ l: `var(--${string})` | `var(--${string}, ${string})`;
16310
+ xl: `var(--${string})` | `var(--${string}, ${string})`;
16311
16311
  };
16312
16312
  declare const textFontSizeProperties: {
16313
- xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16314
- xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16315
- s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16316
- m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16317
- l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16318
- xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16313
+ xxs: `var(--${string})` | `var(--${string}, ${string})`;
16314
+ xs: `var(--${string})` | `var(--${string}, ${string})`;
16315
+ s: `var(--${string})` | `var(--${string}, ${string})`;
16316
+ m: `var(--${string})` | `var(--${string}, ${string})`;
16317
+ l: `var(--${string})` | `var(--${string}, ${string})`;
16318
+ xl: `var(--${string})` | `var(--${string}, ${string})`;
16319
16319
  };
16320
16320
 
16321
16321
  type TextDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "wordBreak" | "textTransform" | "textOverflow" | "width" | "whiteSpace"> & Pick<StandardShorthandProperties, "textDecoration" | "overflow">;
@@ -16340,20 +16340,20 @@ interface TextSprinkle extends TextDynamicProperties {
16340
16340
  }
16341
16341
 
16342
16342
  declare const titleLineHeightProperties: {
16343
- hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16344
- xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16345
- s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16346
- m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16347
- l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16348
- xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16343
+ hero: `var(--${string})` | `var(--${string}, ${string})`;
16344
+ xs: `var(--${string})` | `var(--${string}, ${string})`;
16345
+ s: `var(--${string})` | `var(--${string}, ${string})`;
16346
+ m: `var(--${string})` | `var(--${string}, ${string})`;
16347
+ l: `var(--${string})` | `var(--${string}, ${string})`;
16348
+ xl: `var(--${string})` | `var(--${string}, ${string})`;
16349
16349
  };
16350
16350
  declare const titleFontSizeProperties: {
16351
- hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16352
- xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16353
- s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16354
- m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16355
- l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16356
- xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16351
+ hero: `var(--${string})` | `var(--${string}, ${string})`;
16352
+ xs: `var(--${string})` | `var(--${string}, ${string})`;
16353
+ s: `var(--${string})` | `var(--${string}, ${string})`;
16354
+ m: `var(--${string})` | `var(--${string}, ${string})`;
16355
+ l: `var(--${string})` | `var(--${string}, ${string})`;
16356
+ xl: `var(--${string})` | `var(--${string}, ${string})`;
16357
16357
  };
16358
16358
 
16359
16359
  type TitleDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "textTransform"> & Pick<StandardShorthandProperties, "textDecoration">;
@@ -16388,24 +16388,24 @@ declare const avatarStyles: {
16388
16388
  small: {
16389
16389
  width: "20px";
16390
16390
  height: "20px";
16391
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16391
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16392
16392
  };
16393
16393
  medium: {
16394
16394
  width: "30px";
16395
16395
  height: "30px";
16396
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16396
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16397
16397
  };
16398
16398
  large: {
16399
16399
  width: "40px";
16400
16400
  height: "40px";
16401
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16402
- borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16401
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16402
+ borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
16403
16403
  };
16404
16404
  xLarge: {
16405
16405
  width: "60px";
16406
16406
  height: "60px";
16407
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16408
- borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16407
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16408
+ borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
16409
16409
  };
16410
16410
  };
16411
16411
  }>;
@@ -16438,39 +16438,39 @@ declare const badgeStyles: {
16438
16438
  */
16439
16439
  appearance: {
16440
16440
  brand: {
16441
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16442
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16443
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16441
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16442
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16443
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16444
16444
  };
16445
16445
  danger: {
16446
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16447
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16448
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16446
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16447
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16448
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16449
16449
  };
16450
16450
  success: {
16451
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16452
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16453
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16451
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16452
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16453
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16454
16454
  };
16455
16455
  warning: {
16456
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16457
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16458
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16456
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16457
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16458
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16459
16459
  };
16460
16460
  info: {
16461
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16462
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16463
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16461
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16462
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16463
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16464
16464
  };
16465
16465
  neutral: {
16466
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16467
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16468
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16466
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16467
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16468
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16469
16469
  };
16470
16470
  inverted: {
16471
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16472
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16473
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16471
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16472
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16473
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16474
16474
  };
16475
16475
  };
16476
16476
  /**
@@ -16479,22 +16479,22 @@ declare const badgeStyles: {
16479
16479
  */
16480
16480
  size: {
16481
16481
  large: {
16482
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16482
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16483
16483
  height: "3rem";
16484
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16485
- fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16484
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16485
+ fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
16486
16486
  };
16487
16487
  medium: {
16488
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16488
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16489
16489
  height: "2em";
16490
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16491
- fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16490
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16491
+ fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
16492
16492
  };
16493
16493
  small: {
16494
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16494
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16495
16495
  height: "1.5rem";
16496
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16497
- fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16496
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16497
+ fontWeight: `var(--${string})` | `var(--${string}, ${string})`;
16498
16498
  };
16499
16499
  dot: {
16500
16500
  height: "0.5rem";
@@ -16508,9 +16508,9 @@ declare const badgeStyles: {
16508
16508
  variant: {
16509
16509
  solid: {};
16510
16510
  outlined: {
16511
- borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16511
+ borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
16512
16512
  borderStyle: "solid";
16513
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16513
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16514
16514
  };
16515
16515
  };
16516
16516
  }>;
@@ -16537,34 +16537,34 @@ declare const buttonStyles: {
16537
16537
  */
16538
16538
  appearance: {
16539
16539
  brand: {
16540
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16541
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16542
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16540
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16541
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16542
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16543
16543
  };
16544
16544
  danger: {
16545
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16546
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16547
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16545
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16546
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16547
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16548
16548
  };
16549
16549
  success: {
16550
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16551
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16552
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16550
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16551
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16552
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16553
16553
  };
16554
16554
  warning: {
16555
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16556
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16557
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16555
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16556
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16557
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16558
16558
  };
16559
16559
  neutral: {
16560
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16561
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16562
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16560
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16561
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16562
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16563
16563
  };
16564
16564
  inverted: {
16565
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16566
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16567
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16565
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16566
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16567
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16568
16568
  };
16569
16569
  };
16570
16570
  /**
@@ -16573,22 +16573,22 @@ declare const buttonStyles: {
16573
16573
  */
16574
16574
  size: {
16575
16575
  large: {
16576
- gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16577
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16576
+ gap: `var(--${string})` | `var(--${string}, ${string})`;
16577
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16578
16578
  height: "3rem";
16579
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16579
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16580
16580
  };
16581
16581
  medium: {
16582
- gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16583
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16582
+ gap: `var(--${string})` | `var(--${string}, ${string})`;
16583
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16584
16584
  height: "2.5rem";
16585
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16585
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16586
16586
  };
16587
16587
  small: {
16588
- gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16589
- padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
16588
+ gap: `var(--${string})` | `var(--${string}, ${string})`;
16589
+ padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
16590
16590
  height: "2rem";
16591
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16591
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16592
16592
  };
16593
16593
  };
16594
16594
  /**
@@ -16599,11 +16599,11 @@ declare const buttonStyles: {
16599
16599
  solid: {
16600
16600
  selectors: {
16601
16601
  "&:hover:after": {
16602
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16602
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16603
16603
  };
16604
16604
  "&:active:after": {
16605
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16606
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16605
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16606
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16607
16607
  };
16608
16608
  };
16609
16609
  };
@@ -16624,6 +16624,7 @@ declare const buttonStyles: {
16624
16624
 
16625
16625
  type ButtonVariants = NonNullable<RecipeVariants<typeof buttonStyles.button>>;
16626
16626
 
16627
+ declare const overlayBackgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16627
16628
  declare const checkboxStyles: {
16628
16629
  checkbox: RuntimeFn<{
16629
16630
  /**
@@ -16631,9 +16632,9 @@ declare const checkboxStyles: {
16631
16632
  */
16632
16633
  error: {
16633
16634
  true: {
16634
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16635
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16635
16636
  ":checked": {
16636
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16637
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16637
16638
  };
16638
16639
  };
16639
16640
  };
@@ -16675,7 +16676,7 @@ declare const checkboxStyles: {
16675
16676
  error: {
16676
16677
  true: {
16677
16678
  vars: {
16678
- [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16679
+ [overlayBackgroundColor]: `var(--${string})` | `var(--${string}, ${string})`;
16679
16680
  };
16680
16681
  };
16681
16682
  };
@@ -16694,34 +16695,34 @@ declare const iconButtonStyles: {
16694
16695
  */
16695
16696
  appearance: {
16696
16697
  brand: {
16697
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16698
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16699
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16698
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16699
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16700
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16700
16701
  };
16701
16702
  danger: {
16702
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16703
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16704
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16703
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16704
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16705
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16705
16706
  };
16706
16707
  success: {
16707
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16708
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16709
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16708
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16709
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16710
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16710
16711
  };
16711
16712
  warning: {
16712
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16713
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16714
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16713
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16714
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16715
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16715
16716
  };
16716
16717
  neutral: {
16717
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16718
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16719
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16718
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16719
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16720
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16720
16721
  };
16721
16722
  inverted: {
16722
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16723
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16724
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16723
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16724
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16725
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16725
16726
  };
16726
16727
  };
16727
16728
  /**
@@ -16732,17 +16733,17 @@ declare const iconButtonStyles: {
16732
16733
  large: {
16733
16734
  height: "3rem";
16734
16735
  width: "3rem";
16735
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16736
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16736
16737
  };
16737
16738
  medium: {
16738
16739
  height: "2.5rem";
16739
16740
  width: "2.5rem";
16740
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16741
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16741
16742
  };
16742
16743
  small: {
16743
16744
  height: "2rem";
16744
16745
  width: "2rem";
16745
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16746
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16746
16747
  };
16747
16748
  };
16748
16749
  variant: {
@@ -16753,11 +16754,11 @@ declare const iconButtonStyles: {
16753
16754
  solid: {
16754
16755
  selectors: {
16755
16756
  "&:hover:after": {
16756
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16757
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16757
16758
  };
16758
16759
  "&:active:after": {
16759
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16760
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16760
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16761
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16761
16762
  };
16762
16763
  };
16763
16764
  };
@@ -16781,9 +16782,9 @@ declare const iconButtonStyles: {
16781
16782
  */
16782
16783
  rounded: {
16783
16784
  true: {
16784
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16785
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
16785
16786
  ":after": {
16786
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16787
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
16787
16788
  };
16788
16789
  };
16789
16790
  };
@@ -16800,13 +16801,13 @@ declare const styles$4: {
16800
16801
  */
16801
16802
  appearance: {
16802
16803
  brand: {
16803
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16804
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16804
16805
  };
16805
16806
  neutral: {
16806
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16807
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16807
16808
  };
16808
16809
  inverted: {
16809
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16810
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16810
16811
  };
16811
16812
  };
16812
16813
  /**
@@ -16860,9 +16861,9 @@ declare const progressStyles: {
16860
16861
  circleText: string;
16861
16862
  };
16862
16863
  declare const progressColorProperties: {
16863
- info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16864
- success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16865
- brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16864
+ info: `var(--${string})` | `var(--${string}, ${string})`;
16865
+ success: `var(--${string})` | `var(--${string}, ${string})`;
16866
+ brand: `var(--${string})` | `var(--${string}, ${string})`;
16866
16867
  };
16867
16868
 
16868
16869
  type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
@@ -16912,26 +16913,26 @@ declare const styles$3: {
16912
16913
  */
16913
16914
  error: {
16914
16915
  true: {
16915
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16916
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16916
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16917
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16917
16918
  selectors: {
16918
16919
  "&:has(input:disabled)": {
16919
16920
  opacity: "50%";
16920
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16921
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16921
16922
  };
16922
16923
  "&:has(input:checked)": {
16923
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16924
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16924
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16925
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
16925
16926
  };
16926
16927
  "&:has(input:checked):after": {
16927
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16928
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16928
16929
  };
16929
16930
  "&:hover:before": {
16930
16931
  opacity: number;
16931
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16932
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16932
16933
  };
16933
16934
  "&:active:before": {
16934
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16935
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16935
16936
  };
16936
16937
  };
16937
16938
  };
@@ -16962,28 +16963,28 @@ declare const statusStyles: {
16962
16963
  */
16963
16964
  appearance: {
16964
16965
  success: {
16965
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16966
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16966
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16967
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16967
16968
  };
16968
16969
  warning: {
16969
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16970
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16970
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16971
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16971
16972
  };
16972
16973
  danger: {
16973
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16974
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16974
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16975
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16975
16976
  };
16976
16977
  inverted: {
16977
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16978
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16978
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16979
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16979
16980
  };
16980
16981
  neutral: {
16981
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16982
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16982
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16983
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16983
16984
  };
16984
16985
  info: {
16985
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16986
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16986
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16987
+ color: `var(--${string})` | `var(--${string}, ${string})`;
16987
16988
  };
16988
16989
  };
16989
16990
  /**
@@ -16993,11 +16994,11 @@ declare const statusStyles: {
16993
16994
  size: {
16994
16995
  normal: {
16995
16996
  height: "1.75rem";
16996
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16997
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
16997
16998
  };
16998
16999
  small: {
16999
17000
  height: "1.5rem";
17000
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17001
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
17001
17002
  };
17002
17003
  };
17003
17004
  /**
@@ -17028,6 +17029,52 @@ declare const statusStyles: {
17028
17029
 
17029
17030
  type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
17030
17031
 
17032
+ declare const bannerStyles: {
17033
+ banner: RuntimeFn<{
17034
+ /**
17035
+ * Specifies the visual appearance of the banner message, influencing its color and style.
17036
+ * @default brand
17037
+ */
17038
+ appearance: {
17039
+ brand: {
17040
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17041
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17042
+ };
17043
+ info: {
17044
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17045
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17046
+ };
17047
+ neutral: {
17048
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17049
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17050
+ };
17051
+ inverted: {
17052
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17053
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17054
+ };
17055
+ warning: {
17056
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17057
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17058
+ };
17059
+ error: {
17060
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17061
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17062
+ };
17063
+ };
17064
+ /**
17065
+ * Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
17066
+ * @default false
17067
+ */
17068
+ floating: {
17069
+ true: {
17070
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
17071
+ };
17072
+ };
17073
+ }>;
17074
+ };
17075
+
17076
+ type BannerVariants = NonNullable<RecipeVariants<typeof bannerStyles.banner>>;
17077
+
17031
17078
  declare const textareaStyles: {
17032
17079
  textarea: RuntimeFn<{
17033
17080
  /**
@@ -17035,27 +17082,27 @@ declare const textareaStyles: {
17035
17082
  */
17036
17083
  appearance: {
17037
17084
  success: {
17038
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17085
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17039
17086
  ":hover": {
17040
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17087
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17041
17088
  };
17042
17089
  ":focus": {
17043
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17090
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17044
17091
  };
17045
17092
  ":disabled": {
17046
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17093
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17047
17094
  };
17048
17095
  };
17049
17096
  error: {
17050
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17097
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17051
17098
  ":hover": {
17052
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17099
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17053
17100
  };
17054
17101
  ":focus": {
17055
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17102
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17056
17103
  };
17057
17104
  ":disabled": {
17058
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17105
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
17059
17106
  };
17060
17107
  };
17061
17108
  };
@@ -17072,12 +17119,12 @@ declare const styles: {
17072
17119
  */
17073
17120
  inverted: {
17074
17121
  true: {
17075
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17076
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17122
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17123
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17077
17124
  };
17078
17125
  false: {
17079
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17080
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17126
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17127
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17081
17128
  };
17082
17129
  };
17083
17130
  /**
@@ -17086,7 +17133,7 @@ declare const styles: {
17086
17133
  */
17087
17134
  padding: {
17088
17135
  base: {
17089
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17136
+ padding: `var(--${string})` | `var(--${string}, ${string})`;
17090
17137
  };
17091
17138
  none: {
17092
17139
  padding: number;
@@ -17096,7 +17143,7 @@ declare const styles: {
17096
17143
  header: RuntimeFn<{
17097
17144
  padding: {
17098
17145
  base: {
17099
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17146
+ padding: `var(--${string})` | `var(--${string}, ${string})`;
17100
17147
  };
17101
17148
  none: {
17102
17149
  padding: number;
@@ -17117,7 +17164,7 @@ declare const cardStyles: {
17117
17164
  */
17118
17165
  padding: {
17119
17166
  base: {
17120
- padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17167
+ padding: `var(--${string})` | `var(--${string}, ${string})`;
17121
17168
  };
17122
17169
  none: {
17123
17170
  padding: number;
@@ -17127,9 +17174,9 @@ declare const cardStyles: {
17127
17174
  };
17128
17175
  declare const cardBackgroundColorProperties: {
17129
17176
  transparent: string;
17130
- background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17131
- primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17132
- secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17177
+ background: `var(--${string})` | `var(--${string}, ${string})`;
17178
+ primary: `var(--${string})` | `var(--${string}, ${string})`;
17179
+ secondary: `var(--${string})` | `var(--${string}, ${string})`;
17133
17180
  };
17134
17181
 
17135
17182
  type CardVariants = NonNullable<RecipeVariants<typeof cardStyles.card>>;
@@ -17192,8 +17239,8 @@ declare const stepperStyles: {
17192
17239
  */
17193
17240
  active: {
17194
17241
  true: {
17195
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17196
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17242
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17243
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17197
17244
  };
17198
17245
  };
17199
17246
  /**
@@ -17202,8 +17249,8 @@ declare const stepperStyles: {
17202
17249
  */
17203
17250
  done: {
17204
17251
  true: {
17205
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17206
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17252
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
17253
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17207
17254
  };
17208
17255
  };
17209
17256
  }>;
@@ -17215,14 +17262,14 @@ declare const stepperStyles: {
17215
17262
  */
17216
17263
  horizontal: {
17217
17264
  height: "1px";
17218
- marginLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17219
- marginRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17265
+ marginLeft: `var(--${string})` | `var(--${string}, ${string})`;
17266
+ marginRight: `var(--${string})` | `var(--${string}, ${string})`;
17220
17267
  marginTop: "20px";
17221
17268
  };
17222
17269
  vertical: {
17223
17270
  width: "1px";
17224
- marginTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17225
- marginBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17271
+ marginTop: `var(--${string})` | `var(--${string}, ${string})`;
17272
+ marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
17226
17273
  marginLeft: "18px";
17227
17274
  };
17228
17275
  };
@@ -17413,6 +17460,23 @@ interface TextareaProps extends TextareaVariants {
17413
17460
  lines?: number;
17414
17461
  }
17415
17462
 
17463
+ interface BannerTyping {
17464
+ /**
17465
+ * A function to be called when the user closes the banner. This function is typically used to handle the closing action.
17466
+ * @TJS-type () => void;
17467
+ */
17468
+ onClose?: () => void;
17469
+ /**
17470
+ * The appearance of the banner. This can be used to set the color of the banner.
17471
+ */
17472
+ appearance?: "brand" | "error" | "info" | "warning" | "neutral" | "inverted";
17473
+ /**
17474
+ * Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
17475
+ */
17476
+ floating?: boolean;
17477
+ }
17478
+ type BannerProps = BannerTyping & BannerVariants;
17479
+
17416
17480
  type CardProps = CardVariants & CardSprinkle;
17417
17481
 
17418
17482
  interface CardHeaderProps {
@@ -18007,6 +18071,37 @@ declare class RaruiLink extends LitElement {
18007
18071
  render(): TemplateResult<1>;
18008
18072
  }
18009
18073
 
18074
+ declare global {
18075
+ interface HTMLElementTagNameMap {
18076
+ "rarui-banner": RaruiBanner;
18077
+ }
18078
+ }
18079
+ /**
18080
+ * ## Rarui Banner
18081
+ * ---
18082
+ * Banner messages are displayed to the user at the top of the window/screen.
18083
+ *
18084
+ * See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/banner) for more details.
18085
+ */
18086
+ type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
18087
+ /**
18088
+ * If `true`, display the closing button in the upper right corner of the banner.
18089
+ * When clicked, it fires the `close` event that can be listened to externally.
18090
+ *
18091
+ * @default false
18092
+ */
18093
+ closable?: boolean;
18094
+ };
18095
+
18096
+ declare class RaruiBanner extends LitElement {
18097
+ appearance?: BannerProperties["appearance"];
18098
+ floating: BannerProperties["floating"];
18099
+ closable: BannerProperties["closable"];
18100
+ static styles: CSSResult;
18101
+ private handleClose;
18102
+ render(): TemplateResult<1>;
18103
+ }
18104
+
18010
18105
  declare global {
18011
18106
  interface HTMLElementTagNameMap {
18012
18107
  "rarui-card-header": RaruiCardHeader;