@rarui/components 1.12.0 → 1.14.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.
- package/CHANGELOG.md +14 -1
- package/custom-elements.json +116 -1
- package/dist/index.d.ts +535 -223
- package/dist/index.js +171 -97
- package/package.json +3 -3
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
|
|
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]:
|
|
12443
|
+
[selector: string]: WithQueries<CSSPropertiesWithVars>;
|
|
12444
12444
|
}
|
|
12445
12445
|
interface StyleWithSelectors extends CSSPropertiesAndPseudos {
|
|
12446
12446
|
selectors?: SelectorMap;
|
|
12447
12447
|
}
|
|
12448
|
-
type StyleRule =
|
|
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})
|
|
16140
|
-
medium: `var(--${string})` | `var(--${string}, ${string})
|
|
16141
|
-
semiBold: `var(--${string})` | `var(--${string}, ${string})
|
|
16142
|
-
bold: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
16200
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16201
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
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})
|
|
16214
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16219
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
16402
|
-
borderWidth: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16408
|
-
borderWidth: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16442
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16443
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16447
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16448
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16452
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16453
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16457
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16458
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16462
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16463
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16467
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16468
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16472
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16473
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16482
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16483
16483
|
height: "3rem";
|
|
16484
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16485
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16488
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16489
16489
|
height: "2em";
|
|
16490
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16491
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16494
|
+
padding: `0 var(--${string})` | `0 var(--${string}, ${string})`;
|
|
16495
16495
|
height: "1.5rem";
|
|
16496
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
16497
|
-
fontWeight: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16511
|
+
borderWidth: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16512
16512
|
borderStyle: "solid";
|
|
16513
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16541
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16542
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16546
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16547
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16551
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16552
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16556
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16557
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16561
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16562
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16566
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16567
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16577
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
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})
|
|
16579
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16580
16580
|
};
|
|
16581
16581
|
medium: {
|
|
16582
|
-
gap: `var(--${string})` | `var(--${string}, ${string})
|
|
16583
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
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})
|
|
16585
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16586
16586
|
};
|
|
16587
16587
|
small: {
|
|
16588
|
-
gap: `var(--${string})` | `var(--${string}, ${string})
|
|
16589
|
-
padding: `0 var(--${string})` | `0 var(--${string}, ${string})
|
|
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})
|
|
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})
|
|
16602
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16603
16603
|
};
|
|
16604
16604
|
"&:active:after": {
|
|
16605
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16606
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16635
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16635
16636
|
":checked": {
|
|
16636
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
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
|
-
[
|
|
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})
|
|
16698
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16699
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16703
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16704
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16708
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16709
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16713
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16714
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16718
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16719
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16723
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16724
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
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})
|
|
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})
|
|
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})
|
|
16757
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16757
16758
|
};
|
|
16758
16759
|
"&:active:after": {
|
|
16759
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16760
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
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})
|
|
16785
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16785
16786
|
":after": {
|
|
16786
|
-
borderRadius: `var(--${string})` | `var(--${string}, ${string})
|
|
16787
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16787
16788
|
};
|
|
16788
16789
|
};
|
|
16789
16790
|
};
|
|
@@ -16792,6 +16793,29 @@ declare const iconButtonStyles: {
|
|
|
16792
16793
|
|
|
16793
16794
|
type IconButtonVariants = NonNullable<RecipeVariants<typeof iconButtonStyles.iconButton>>;
|
|
16794
16795
|
|
|
16796
|
+
declare const styles$5: {
|
|
16797
|
+
label: RuntimeFn<{
|
|
16798
|
+
/**
|
|
16799
|
+
* Specifies whether the label is hidden or not
|
|
16800
|
+
* @default false
|
|
16801
|
+
*/
|
|
16802
|
+
hidden: {
|
|
16803
|
+
true: {
|
|
16804
|
+
border: "0";
|
|
16805
|
+
clip: "rect(0 0 0 0)";
|
|
16806
|
+
height: "1px";
|
|
16807
|
+
margin: "-1px";
|
|
16808
|
+
overflow: "hidden";
|
|
16809
|
+
padding: "0";
|
|
16810
|
+
position: "absolute";
|
|
16811
|
+
width: "1px";
|
|
16812
|
+
};
|
|
16813
|
+
};
|
|
16814
|
+
}>;
|
|
16815
|
+
};
|
|
16816
|
+
|
|
16817
|
+
type LabelVariants = RecipeVariants<typeof styles$5.label>;
|
|
16818
|
+
|
|
16795
16819
|
declare const styles$4: {
|
|
16796
16820
|
link: RuntimeFn<{
|
|
16797
16821
|
/**
|
|
@@ -16800,13 +16824,13 @@ declare const styles$4: {
|
|
|
16800
16824
|
*/
|
|
16801
16825
|
appearance: {
|
|
16802
16826
|
brand: {
|
|
16803
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16827
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16804
16828
|
};
|
|
16805
16829
|
neutral: {
|
|
16806
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16830
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16807
16831
|
};
|
|
16808
16832
|
inverted: {
|
|
16809
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16833
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16810
16834
|
};
|
|
16811
16835
|
};
|
|
16812
16836
|
/**
|
|
@@ -16860,9 +16884,9 @@ declare const progressStyles: {
|
|
|
16860
16884
|
circleText: string;
|
|
16861
16885
|
};
|
|
16862
16886
|
declare const progressColorProperties: {
|
|
16863
|
-
info: `var(--${string})` | `var(--${string}, ${string})
|
|
16864
|
-
success: `var(--${string})` | `var(--${string}, ${string})
|
|
16865
|
-
brand: `var(--${string})` | `var(--${string}, ${string})
|
|
16887
|
+
info: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16888
|
+
success: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16889
|
+
brand: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16866
16890
|
};
|
|
16867
16891
|
|
|
16868
16892
|
type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
|
|
@@ -16912,26 +16936,26 @@ declare const styles$3: {
|
|
|
16912
16936
|
*/
|
|
16913
16937
|
error: {
|
|
16914
16938
|
true: {
|
|
16915
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16916
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16939
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16940
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16917
16941
|
selectors: {
|
|
16918
16942
|
"&:has(input:disabled)": {
|
|
16919
16943
|
opacity: "50%";
|
|
16920
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16944
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16921
16945
|
};
|
|
16922
16946
|
"&:has(input:checked)": {
|
|
16923
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16924
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16947
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16948
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16925
16949
|
};
|
|
16926
16950
|
"&:has(input:checked):after": {
|
|
16927
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16951
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16928
16952
|
};
|
|
16929
16953
|
"&:hover:before": {
|
|
16930
16954
|
opacity: number;
|
|
16931
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16955
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16932
16956
|
};
|
|
16933
16957
|
"&:active:before": {
|
|
16934
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16958
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16935
16959
|
};
|
|
16936
16960
|
};
|
|
16937
16961
|
};
|
|
@@ -16962,28 +16986,28 @@ declare const statusStyles: {
|
|
|
16962
16986
|
*/
|
|
16963
16987
|
appearance: {
|
|
16964
16988
|
success: {
|
|
16965
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16966
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16989
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16990
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16967
16991
|
};
|
|
16968
16992
|
warning: {
|
|
16969
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16970
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16993
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16994
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16971
16995
|
};
|
|
16972
16996
|
danger: {
|
|
16973
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16974
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
16997
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16998
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16975
16999
|
};
|
|
16976
17000
|
inverted: {
|
|
16977
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16978
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17001
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17002
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16979
17003
|
};
|
|
16980
17004
|
neutral: {
|
|
16981
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16982
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17005
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17006
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16983
17007
|
};
|
|
16984
17008
|
info: {
|
|
16985
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
16986
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17009
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17010
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16987
17011
|
};
|
|
16988
17012
|
};
|
|
16989
17013
|
/**
|
|
@@ -16993,11 +17017,11 @@ declare const statusStyles: {
|
|
|
16993
17017
|
size: {
|
|
16994
17018
|
normal: {
|
|
16995
17019
|
height: "1.75rem";
|
|
16996
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
17020
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
16997
17021
|
};
|
|
16998
17022
|
small: {
|
|
16999
17023
|
height: "1.5rem";
|
|
17000
|
-
fontSize: `var(--${string})` | `var(--${string}, ${string})
|
|
17024
|
+
fontSize: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17001
17025
|
};
|
|
17002
17026
|
};
|
|
17003
17027
|
/**
|
|
@@ -17028,6 +17052,52 @@ declare const statusStyles: {
|
|
|
17028
17052
|
|
|
17029
17053
|
type StatusVariants = NonNullable<RecipeVariants<typeof statusStyles.status>>;
|
|
17030
17054
|
|
|
17055
|
+
declare const bannerStyles: {
|
|
17056
|
+
banner: RuntimeFn<{
|
|
17057
|
+
/**
|
|
17058
|
+
* Specifies the visual appearance of the banner message, influencing its color and style.
|
|
17059
|
+
* @default brand
|
|
17060
|
+
*/
|
|
17061
|
+
appearance: {
|
|
17062
|
+
brand: {
|
|
17063
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17064
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17065
|
+
};
|
|
17066
|
+
info: {
|
|
17067
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17068
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17069
|
+
};
|
|
17070
|
+
neutral: {
|
|
17071
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17072
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17073
|
+
};
|
|
17074
|
+
inverted: {
|
|
17075
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17076
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17077
|
+
};
|
|
17078
|
+
warning: {
|
|
17079
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17080
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17081
|
+
};
|
|
17082
|
+
error: {
|
|
17083
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17084
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17085
|
+
};
|
|
17086
|
+
};
|
|
17087
|
+
/**
|
|
17088
|
+
* 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.
|
|
17089
|
+
* @default false
|
|
17090
|
+
*/
|
|
17091
|
+
floating: {
|
|
17092
|
+
true: {
|
|
17093
|
+
borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17094
|
+
};
|
|
17095
|
+
};
|
|
17096
|
+
}>;
|
|
17097
|
+
};
|
|
17098
|
+
|
|
17099
|
+
type BannerVariants = NonNullable<RecipeVariants<typeof bannerStyles.banner>>;
|
|
17100
|
+
|
|
17031
17101
|
declare const textareaStyles: {
|
|
17032
17102
|
textarea: RuntimeFn<{
|
|
17033
17103
|
/**
|
|
@@ -17035,27 +17105,27 @@ declare const textareaStyles: {
|
|
|
17035
17105
|
*/
|
|
17036
17106
|
appearance: {
|
|
17037
17107
|
success: {
|
|
17038
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17108
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17039
17109
|
":hover": {
|
|
17040
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17110
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17041
17111
|
};
|
|
17042
17112
|
":focus": {
|
|
17043
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17113
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17044
17114
|
};
|
|
17045
17115
|
":disabled": {
|
|
17046
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17116
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17047
17117
|
};
|
|
17048
17118
|
};
|
|
17049
17119
|
error: {
|
|
17050
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17120
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17051
17121
|
":hover": {
|
|
17052
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17122
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17053
17123
|
};
|
|
17054
17124
|
":focus": {
|
|
17055
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17125
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17056
17126
|
};
|
|
17057
17127
|
":disabled": {
|
|
17058
|
-
borderColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17128
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17059
17129
|
};
|
|
17060
17130
|
};
|
|
17061
17131
|
};
|
|
@@ -17064,6 +17134,117 @@ declare const textareaStyles: {
|
|
|
17064
17134
|
|
|
17065
17135
|
type TextareaVariants = NonNullable<RecipeVariants<typeof textareaStyles.textarea>>;
|
|
17066
17136
|
|
|
17137
|
+
declare const styles$1: {
|
|
17138
|
+
toggle: RuntimeFn<{
|
|
17139
|
+
/**
|
|
17140
|
+
* Specifies the size of the toggle, controlling its dimensions.
|
|
17141
|
+
* @default large
|
|
17142
|
+
*/
|
|
17143
|
+
size: {
|
|
17144
|
+
large: {
|
|
17145
|
+
":before": {
|
|
17146
|
+
width: "1.5rem";
|
|
17147
|
+
height: "1.5rem";
|
|
17148
|
+
};
|
|
17149
|
+
":after": {
|
|
17150
|
+
top: "-.3125rem";
|
|
17151
|
+
left: "-.3125rem";
|
|
17152
|
+
height: "2.75rem";
|
|
17153
|
+
width: "2.75rem";
|
|
17154
|
+
};
|
|
17155
|
+
};
|
|
17156
|
+
small: {
|
|
17157
|
+
":before": {
|
|
17158
|
+
width: "1rem";
|
|
17159
|
+
height: "1rem";
|
|
17160
|
+
};
|
|
17161
|
+
":after": {
|
|
17162
|
+
top: "-.4375rem";
|
|
17163
|
+
left: "-.5rem";
|
|
17164
|
+
height: "2.5rem";
|
|
17165
|
+
width: "2.5rem";
|
|
17166
|
+
};
|
|
17167
|
+
};
|
|
17168
|
+
};
|
|
17169
|
+
/**
|
|
17170
|
+
* Specifies whether the radiobutton is in error state
|
|
17171
|
+
* @default false
|
|
17172
|
+
*/
|
|
17173
|
+
error: {
|
|
17174
|
+
true: {
|
|
17175
|
+
":before": {
|
|
17176
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17177
|
+
};
|
|
17178
|
+
selectors: {
|
|
17179
|
+
"&:has(input:checked):before": {
|
|
17180
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17181
|
+
};
|
|
17182
|
+
};
|
|
17183
|
+
};
|
|
17184
|
+
};
|
|
17185
|
+
}>;
|
|
17186
|
+
input: string;
|
|
17187
|
+
slider: RuntimeFn<{
|
|
17188
|
+
size: {
|
|
17189
|
+
large: {
|
|
17190
|
+
width: "3.25rem";
|
|
17191
|
+
height: "2rem";
|
|
17192
|
+
":after": {
|
|
17193
|
+
content: "";
|
|
17194
|
+
};
|
|
17195
|
+
};
|
|
17196
|
+
small: {
|
|
17197
|
+
width: "2.75rem";
|
|
17198
|
+
height: "1.5rem";
|
|
17199
|
+
};
|
|
17200
|
+
};
|
|
17201
|
+
error: {
|
|
17202
|
+
true: {
|
|
17203
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17204
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17205
|
+
"&[aria-disabled='true']": {
|
|
17206
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17207
|
+
borderColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17208
|
+
};
|
|
17209
|
+
};
|
|
17210
|
+
};
|
|
17211
|
+
}>;
|
|
17212
|
+
unchecked: RuntimeFn<{
|
|
17213
|
+
size: {
|
|
17214
|
+
large: {
|
|
17215
|
+
left: "1rem";
|
|
17216
|
+
height: "1.5rem";
|
|
17217
|
+
width: "1.5rem";
|
|
17218
|
+
borderRadius: "0.75rem";
|
|
17219
|
+
};
|
|
17220
|
+
small: {
|
|
17221
|
+
left: "0.75rem";
|
|
17222
|
+
width: "1rem";
|
|
17223
|
+
height: "1rem";
|
|
17224
|
+
borderRadius: "0.5rem";
|
|
17225
|
+
};
|
|
17226
|
+
};
|
|
17227
|
+
}>;
|
|
17228
|
+
checked: RuntimeFn<{
|
|
17229
|
+
size: {
|
|
17230
|
+
large: {
|
|
17231
|
+
left: "2.25rem";
|
|
17232
|
+
height: "1.5rem";
|
|
17233
|
+
width: "1.5rem";
|
|
17234
|
+
borderRadius: "0.75rem";
|
|
17235
|
+
};
|
|
17236
|
+
small: {
|
|
17237
|
+
left: "2rem";
|
|
17238
|
+
width: "1rem";
|
|
17239
|
+
height: "1rem";
|
|
17240
|
+
borderRadius: "0.5rem";
|
|
17241
|
+
};
|
|
17242
|
+
};
|
|
17243
|
+
}>;
|
|
17244
|
+
};
|
|
17245
|
+
|
|
17246
|
+
type ToggleVariants = RecipeVariants<typeof styles$1.toggle>;
|
|
17247
|
+
|
|
17067
17248
|
declare const styles: {
|
|
17068
17249
|
tooltip: RuntimeFn<{
|
|
17069
17250
|
/**
|
|
@@ -17072,12 +17253,12 @@ declare const styles: {
|
|
|
17072
17253
|
*/
|
|
17073
17254
|
inverted: {
|
|
17074
17255
|
true: {
|
|
17075
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17076
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17256
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17257
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17077
17258
|
};
|
|
17078
17259
|
false: {
|
|
17079
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17080
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17260
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17261
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17081
17262
|
};
|
|
17082
17263
|
};
|
|
17083
17264
|
/**
|
|
@@ -17086,7 +17267,7 @@ declare const styles: {
|
|
|
17086
17267
|
*/
|
|
17087
17268
|
padding: {
|
|
17088
17269
|
base: {
|
|
17089
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17270
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17090
17271
|
};
|
|
17091
17272
|
none: {
|
|
17092
17273
|
padding: number;
|
|
@@ -17096,7 +17277,7 @@ declare const styles: {
|
|
|
17096
17277
|
header: RuntimeFn<{
|
|
17097
17278
|
padding: {
|
|
17098
17279
|
base: {
|
|
17099
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17280
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17100
17281
|
};
|
|
17101
17282
|
none: {
|
|
17102
17283
|
padding: number;
|
|
@@ -17117,7 +17298,7 @@ declare const cardStyles: {
|
|
|
17117
17298
|
*/
|
|
17118
17299
|
padding: {
|
|
17119
17300
|
base: {
|
|
17120
|
-
padding: `var(--${string})` | `var(--${string}, ${string})
|
|
17301
|
+
padding: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17121
17302
|
};
|
|
17122
17303
|
none: {
|
|
17123
17304
|
padding: number;
|
|
@@ -17127,9 +17308,9 @@ declare const cardStyles: {
|
|
|
17127
17308
|
};
|
|
17128
17309
|
declare const cardBackgroundColorProperties: {
|
|
17129
17310
|
transparent: string;
|
|
17130
|
-
background: `var(--${string})` | `var(--${string}, ${string})
|
|
17131
|
-
primary: `var(--${string})` | `var(--${string}, ${string})
|
|
17132
|
-
secondary: `var(--${string})` | `var(--${string}, ${string})
|
|
17311
|
+
background: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17312
|
+
primary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17313
|
+
secondary: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17133
17314
|
};
|
|
17134
17315
|
|
|
17135
17316
|
type CardVariants = NonNullable<RecipeVariants<typeof cardStyles.card>>;
|
|
@@ -17192,8 +17373,8 @@ declare const stepperStyles: {
|
|
|
17192
17373
|
*/
|
|
17193
17374
|
active: {
|
|
17194
17375
|
true: {
|
|
17195
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17196
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17376
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17377
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17197
17378
|
};
|
|
17198
17379
|
};
|
|
17199
17380
|
/**
|
|
@@ -17202,8 +17383,8 @@ declare const stepperStyles: {
|
|
|
17202
17383
|
*/
|
|
17203
17384
|
done: {
|
|
17204
17385
|
true: {
|
|
17205
|
-
backgroundColor: `var(--${string})` | `var(--${string}, ${string})
|
|
17206
|
-
color: `var(--${string})` | `var(--${string}, ${string})
|
|
17386
|
+
backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17387
|
+
color: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17207
17388
|
};
|
|
17208
17389
|
};
|
|
17209
17390
|
}>;
|
|
@@ -17215,14 +17396,14 @@ declare const stepperStyles: {
|
|
|
17215
17396
|
*/
|
|
17216
17397
|
horizontal: {
|
|
17217
17398
|
height: "1px";
|
|
17218
|
-
marginLeft: `var(--${string})` | `var(--${string}, ${string})
|
|
17219
|
-
marginRight: `var(--${string})` | `var(--${string}, ${string})
|
|
17399
|
+
marginLeft: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17400
|
+
marginRight: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17220
17401
|
marginTop: "20px";
|
|
17221
17402
|
};
|
|
17222
17403
|
vertical: {
|
|
17223
17404
|
width: "1px";
|
|
17224
|
-
marginTop: `var(--${string})` | `var(--${string}, ${string})
|
|
17225
|
-
marginBottom: `var(--${string})` | `var(--${string}, ${string})
|
|
17405
|
+
marginTop: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17406
|
+
marginBottom: `var(--${string})` | `var(--${string}, ${string})`;
|
|
17226
17407
|
marginLeft: "18px";
|
|
17227
17408
|
};
|
|
17228
17409
|
};
|
|
@@ -17274,6 +17455,14 @@ interface TextProps extends TextSprinkle {
|
|
|
17274
17455
|
lineClamp?: number;
|
|
17275
17456
|
}
|
|
17276
17457
|
|
|
17458
|
+
interface LabelTyping {
|
|
17459
|
+
/**
|
|
17460
|
+
* The for attribute specifies which form element a label is bound to.
|
|
17461
|
+
*/
|
|
17462
|
+
htmlFor?: string;
|
|
17463
|
+
}
|
|
17464
|
+
type LabelProps = LabelTyping & LabelVariants;
|
|
17465
|
+
|
|
17277
17466
|
interface TooltipTyping {
|
|
17278
17467
|
/**
|
|
17279
17468
|
* Conditional for displaying the popover arrow.
|
|
@@ -17413,6 +17602,39 @@ interface TextareaProps extends TextareaVariants {
|
|
|
17413
17602
|
lines?: number;
|
|
17414
17603
|
}
|
|
17415
17604
|
|
|
17605
|
+
interface ToggleTyping {
|
|
17606
|
+
/**
|
|
17607
|
+
* The name of the input element.
|
|
17608
|
+
*/
|
|
17609
|
+
name: string;
|
|
17610
|
+
/**
|
|
17611
|
+
* Sets toggle state to activated or deactivated.
|
|
17612
|
+
*/
|
|
17613
|
+
selected?: boolean;
|
|
17614
|
+
/**
|
|
17615
|
+
* Text to be rendered inside the component
|
|
17616
|
+
*/
|
|
17617
|
+
label?: string;
|
|
17618
|
+
}
|
|
17619
|
+
type ToggleProps = ToggleTyping & ToggleVariants;
|
|
17620
|
+
|
|
17621
|
+
interface BannerTyping {
|
|
17622
|
+
/**
|
|
17623
|
+
* A function to be called when the user closes the banner. This function is typically used to handle the closing action.
|
|
17624
|
+
* @TJS-type () => void;
|
|
17625
|
+
*/
|
|
17626
|
+
onClose?: () => void;
|
|
17627
|
+
/**
|
|
17628
|
+
* The appearance of the banner. This can be used to set the color of the banner.
|
|
17629
|
+
*/
|
|
17630
|
+
appearance?: "brand" | "error" | "info" | "warning" | "neutral" | "inverted";
|
|
17631
|
+
/**
|
|
17632
|
+
* 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.
|
|
17633
|
+
*/
|
|
17634
|
+
floating?: boolean;
|
|
17635
|
+
}
|
|
17636
|
+
type BannerProps = BannerTyping & BannerVariants;
|
|
17637
|
+
|
|
17416
17638
|
type CardProps = CardVariants & CardSprinkle;
|
|
17417
17639
|
|
|
17418
17640
|
interface CardHeaderProps {
|
|
@@ -17531,6 +17753,27 @@ declare class RaruiIcon extends LitElement {
|
|
|
17531
17753
|
render(): TemplateResult<1> | null;
|
|
17532
17754
|
}
|
|
17533
17755
|
|
|
17756
|
+
declare global {
|
|
17757
|
+
interface HTMLElementTagNameMap {
|
|
17758
|
+
"rarui-label": RaruiLabel;
|
|
17759
|
+
}
|
|
17760
|
+
}
|
|
17761
|
+
/**
|
|
17762
|
+
* ## Rarui Label
|
|
17763
|
+
* ---
|
|
17764
|
+
* The label component allows us to name elements within a form.
|
|
17765
|
+
*
|
|
17766
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/label) for more details.
|
|
17767
|
+
*/
|
|
17768
|
+
type LabelProperties = Partial<LabelProps>;
|
|
17769
|
+
|
|
17770
|
+
declare class RaruiLabel extends LitElement {
|
|
17771
|
+
htmlFor: LabelProperties["htmlFor"];
|
|
17772
|
+
hidden: boolean;
|
|
17773
|
+
static styles: CSSResult;
|
|
17774
|
+
render(): TemplateResult<1>;
|
|
17775
|
+
}
|
|
17776
|
+
|
|
17534
17777
|
declare global {
|
|
17535
17778
|
interface HTMLElementTagNameMap {
|
|
17536
17779
|
"rarui-stepper-step": RaruiStepperStep;
|
|
@@ -17955,6 +18198,44 @@ declare class RaruiTextarea extends LitElement {
|
|
|
17955
18198
|
private _onChange;
|
|
17956
18199
|
}
|
|
17957
18200
|
|
|
18201
|
+
declare global {
|
|
18202
|
+
interface HTMLElementTagNameMap {
|
|
18203
|
+
"rarui-toggle": RaruiToggle;
|
|
18204
|
+
}
|
|
18205
|
+
}
|
|
18206
|
+
/**
|
|
18207
|
+
* ## Rarui Toggle
|
|
18208
|
+
* ---
|
|
18209
|
+
* Toggle switches activate or deactivate the state of a single item.
|
|
18210
|
+
*
|
|
18211
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/input/toggle) for more details.
|
|
18212
|
+
*/
|
|
18213
|
+
type ToggleProperties = Partial<ToggleProps> & {
|
|
18214
|
+
/**
|
|
18215
|
+
* Defines if Toggle is disabled.
|
|
18216
|
+
* When `true`, the component cannot be interacted.
|
|
18217
|
+
* @default false
|
|
18218
|
+
*/
|
|
18219
|
+
disabled?: boolean;
|
|
18220
|
+
/**
|
|
18221
|
+
* Single ID associated with Toggle Input.If not provided,
|
|
18222
|
+
* The name will be used as Fallback to `id`.
|
|
18223
|
+
*/
|
|
18224
|
+
id?: string;
|
|
18225
|
+
};
|
|
18226
|
+
|
|
18227
|
+
declare class RaruiToggle extends LitElement {
|
|
18228
|
+
name: ToggleProperties["name"];
|
|
18229
|
+
label: ToggleProperties["label"];
|
|
18230
|
+
size?: ToggleProperties["size"];
|
|
18231
|
+
error: ToggleProperties["error"];
|
|
18232
|
+
selected?: ToggleProperties["selected"];
|
|
18233
|
+
disabled?: ToggleProperties["disabled"];
|
|
18234
|
+
static styles: CSSResult;
|
|
18235
|
+
private handleChange;
|
|
18236
|
+
render(): TemplateResult<1>;
|
|
18237
|
+
}
|
|
18238
|
+
|
|
17958
18239
|
declare global {
|
|
17959
18240
|
interface HTMLElementTagNameMap {
|
|
17960
18241
|
"rarui-link": RaruiLink;
|
|
@@ -18007,6 +18288,37 @@ declare class RaruiLink extends LitElement {
|
|
|
18007
18288
|
render(): TemplateResult<1>;
|
|
18008
18289
|
}
|
|
18009
18290
|
|
|
18291
|
+
declare global {
|
|
18292
|
+
interface HTMLElementTagNameMap {
|
|
18293
|
+
"rarui-banner": RaruiBanner;
|
|
18294
|
+
}
|
|
18295
|
+
}
|
|
18296
|
+
/**
|
|
18297
|
+
* ## Rarui Banner
|
|
18298
|
+
* ---
|
|
18299
|
+
* Banner messages are displayed to the user at the top of the window/screen.
|
|
18300
|
+
*
|
|
18301
|
+
* See [a complete document](https://rarui.rarolabs.com.br/docs/components/surface/banner) for more details.
|
|
18302
|
+
*/
|
|
18303
|
+
type BannerProperties = Partial<Pick<BannerProps, "appearance" | "floating">> & {
|
|
18304
|
+
/**
|
|
18305
|
+
* If `true`, display the closing button in the upper right corner of the banner.
|
|
18306
|
+
* When clicked, it fires the `close` event that can be listened to externally.
|
|
18307
|
+
*
|
|
18308
|
+
* @default false
|
|
18309
|
+
*/
|
|
18310
|
+
closable?: boolean;
|
|
18311
|
+
};
|
|
18312
|
+
|
|
18313
|
+
declare class RaruiBanner extends LitElement {
|
|
18314
|
+
appearance?: BannerProperties["appearance"];
|
|
18315
|
+
floating: BannerProperties["floating"];
|
|
18316
|
+
closable: BannerProperties["closable"];
|
|
18317
|
+
static styles: CSSResult;
|
|
18318
|
+
private handleClose;
|
|
18319
|
+
render(): TemplateResult<1>;
|
|
18320
|
+
}
|
|
18321
|
+
|
|
18010
18322
|
declare global {
|
|
18011
18323
|
interface HTMLElementTagNameMap {
|
|
18012
18324
|
"rarui-card-header": RaruiCardHeader;
|