@fusion.dev/helix 0.192.0 → 0.194.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/api.json +1 -1
- package/custom-elements.json +126 -28
- package/dist/accordion/root/accordion-root.d.ts +2 -0
- package/dist/blockquote/root/blockquote-root.d.ts +2 -0
- package/dist/button/root/button-root.d.ts +2 -0
- package/dist/checkbox/root/checkbox-root.d.ts +2 -0
- package/dist/code/root/code-root.d.ts +2 -0
- package/dist/code-block/root/code-block-root.d.ts +2 -0
- package/dist/color-input/root/color-input-root.d.ts +2 -0
- package/dist/date-input/root/date-input-root.d.ts +2 -0
- package/dist/dialog/root/dialog-root.d.ts +2 -0
- package/dist/divider/root/divider-root.d.ts +2 -0
- package/dist/file-input/root/file-input-root.d.ts +2 -0
- package/dist/image/root/image-root.d.ts +2 -0
- package/dist/input/root/input-root.d.ts +2 -0
- package/dist/kbd/root/kbd-root.d.ts +2 -0
- package/dist/list/root/list-root.d.ts +2 -0
- package/dist/meter/root/meter-root.d.ts +2 -0
- package/dist/notifications/root/notifications-root.css.js +1 -1
- package/dist/number-input/root/number-input-root.d.ts +2 -0
- package/dist/progress/root/progress-root.d.ts +2 -0
- package/dist/quote/root/quote-root.d.ts +2 -0
- package/dist/radio/root/radio-root.d.ts +2 -0
- package/dist/select/root/select-root.d.ts +2 -0
- package/dist/slider/root/slider-root.d.ts +2 -0
- package/dist/table/root/table-root.d.ts +2 -0
- package/dist/text/root/text-root.d.ts +2 -0
- package/dist/textarea/root/textarea-root.d.ts +2 -0
- package/dist/time-input/root/time-input-root.d.ts +2 -0
- package/dist/video/root/video-root.d.ts +2 -0
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +58 -296
package/custom-elements.json
CHANGED
|
@@ -1667,7 +1667,10 @@
|
|
|
1667
1667
|
"slug": "single"
|
|
1668
1668
|
}
|
|
1669
1669
|
],
|
|
1670
|
-
"source": "helix/styled/src/accordion"
|
|
1670
|
+
"source": "helix/styled/src/accordion",
|
|
1671
|
+
"replaces": [
|
|
1672
|
+
"details"
|
|
1673
|
+
]
|
|
1671
1674
|
},
|
|
1672
1675
|
"tagName": "helix-accordion",
|
|
1673
1676
|
"customElement": true,
|
|
@@ -13057,7 +13060,10 @@
|
|
|
13057
13060
|
"slug": "pull-quote"
|
|
13058
13061
|
}
|
|
13059
13062
|
],
|
|
13060
|
-
"source": "helix/styled/src/blockquote"
|
|
13063
|
+
"source": "helix/styled/src/blockquote",
|
|
13064
|
+
"replaces": [
|
|
13065
|
+
"blockquote"
|
|
13066
|
+
]
|
|
13061
13067
|
},
|
|
13062
13068
|
"tagName": "helix-blockquote",
|
|
13063
13069
|
"customElement": true,
|
|
@@ -17551,7 +17557,13 @@
|
|
|
17551
17557
|
"slug": "with-slots"
|
|
17552
17558
|
}
|
|
17553
17559
|
],
|
|
17554
|
-
"source": "helix/styled/src/button"
|
|
17560
|
+
"source": "helix/styled/src/button",
|
|
17561
|
+
"replaces": [
|
|
17562
|
+
"button",
|
|
17563
|
+
"input[type=submit]",
|
|
17564
|
+
"input[type=button]",
|
|
17565
|
+
"input[type=reset]"
|
|
17566
|
+
]
|
|
17555
17567
|
},
|
|
17556
17568
|
"tagName": "helix-button",
|
|
17557
17569
|
"customElement": true,
|
|
@@ -39303,7 +39315,10 @@
|
|
|
39303
39315
|
"slug": "required"
|
|
39304
39316
|
}
|
|
39305
39317
|
],
|
|
39306
|
-
"source": "helix/styled/src/checkbox"
|
|
39318
|
+
"source": "helix/styled/src/checkbox",
|
|
39319
|
+
"replaces": [
|
|
39320
|
+
"input[type=checkbox]"
|
|
39321
|
+
]
|
|
39307
39322
|
},
|
|
39308
39323
|
"tagName": "helix-checkbox",
|
|
39309
39324
|
"customElement": true,
|
|
@@ -41265,7 +41280,10 @@
|
|
|
41265
41280
|
"slug": "split"
|
|
41266
41281
|
}
|
|
41267
41282
|
],
|
|
41268
|
-
"source": "helix/styled/src/code-block"
|
|
41283
|
+
"source": "helix/styled/src/code-block",
|
|
41284
|
+
"replaces": [
|
|
41285
|
+
"pre"
|
|
41286
|
+
]
|
|
41269
41287
|
},
|
|
41270
41288
|
"tagName": "helix-code-block",
|
|
41271
41289
|
"customElement": true,
|
|
@@ -42567,7 +42585,10 @@
|
|
|
42567
42585
|
"slug": "preview"
|
|
42568
42586
|
}
|
|
42569
42587
|
],
|
|
42570
|
-
"source": "helix/styled/src/code"
|
|
42588
|
+
"source": "helix/styled/src/code",
|
|
42589
|
+
"replaces": [
|
|
42590
|
+
"code"
|
|
42591
|
+
]
|
|
42571
42592
|
},
|
|
42572
42593
|
"tagName": "helix-code",
|
|
42573
42594
|
"customElement": true,
|
|
@@ -44928,7 +44949,10 @@
|
|
|
44928
44949
|
"slug": "swatches"
|
|
44929
44950
|
}
|
|
44930
44951
|
],
|
|
44931
|
-
"source": "helix/styled/src/color-input"
|
|
44952
|
+
"source": "helix/styled/src/color-input",
|
|
44953
|
+
"replaces": [
|
|
44954
|
+
"input[type=color]"
|
|
44955
|
+
]
|
|
44932
44956
|
},
|
|
44933
44957
|
"tagName": "helix-color-input",
|
|
44934
44958
|
"customElement": true,
|
|
@@ -66910,7 +66934,10 @@
|
|
|
66910
66934
|
"slug": "segmented"
|
|
66911
66935
|
}
|
|
66912
66936
|
],
|
|
66913
|
-
"source": "helix/styled/src/date-input"
|
|
66937
|
+
"source": "helix/styled/src/date-input",
|
|
66938
|
+
"replaces": [
|
|
66939
|
+
"input[type=date]"
|
|
66940
|
+
]
|
|
66914
66941
|
},
|
|
66915
66942
|
"tagName": "helix-date-input",
|
|
66916
66943
|
"customElement": true,
|
|
@@ -74586,7 +74613,10 @@
|
|
|
74586
74613
|
"slug": "small"
|
|
74587
74614
|
}
|
|
74588
74615
|
],
|
|
74589
|
-
"source": "helix/styled/src/dialog"
|
|
74616
|
+
"source": "helix/styled/src/dialog",
|
|
74617
|
+
"replaces": [
|
|
74618
|
+
"dialog"
|
|
74619
|
+
]
|
|
74590
74620
|
},
|
|
74591
74621
|
"tagName": "helix-dialog",
|
|
74592
74622
|
"customElement": true,
|
|
@@ -75426,7 +75456,10 @@
|
|
|
75426
75456
|
"slug": "with-content"
|
|
75427
75457
|
}
|
|
75428
75458
|
],
|
|
75429
|
-
"source": "helix/styled/src/divider"
|
|
75459
|
+
"source": "helix/styled/src/divider",
|
|
75460
|
+
"replaces": [
|
|
75461
|
+
"hr"
|
|
75462
|
+
]
|
|
75430
75463
|
},
|
|
75431
75464
|
"tagName": "helix-divider",
|
|
75432
75465
|
"customElement": true,
|
|
@@ -84039,7 +84072,10 @@
|
|
|
84039
84072
|
"slug": "single"
|
|
84040
84073
|
}
|
|
84041
84074
|
],
|
|
84042
|
-
"source": "helix/styled/src/file-input"
|
|
84075
|
+
"source": "helix/styled/src/file-input",
|
|
84076
|
+
"replaces": [
|
|
84077
|
+
"input[type=file]"
|
|
84078
|
+
]
|
|
84043
84079
|
},
|
|
84044
84080
|
"tagName": "helix-file-input",
|
|
84045
84081
|
"customElement": true,
|
|
@@ -104345,7 +104381,11 @@
|
|
|
104345
104381
|
"slug": "responsive"
|
|
104346
104382
|
}
|
|
104347
104383
|
],
|
|
104348
|
-
"source": "helix/styled/src/image"
|
|
104384
|
+
"source": "helix/styled/src/image",
|
|
104385
|
+
"replaces": [
|
|
104386
|
+
"img",
|
|
104387
|
+
"picture"
|
|
104388
|
+
]
|
|
104349
104389
|
},
|
|
104350
104390
|
"tagName": "helix-image",
|
|
104351
104391
|
"customElement": true,
|
|
@@ -107538,7 +107578,16 @@
|
|
|
107538
107578
|
"slug": "reveal"
|
|
107539
107579
|
}
|
|
107540
107580
|
],
|
|
107541
|
-
"source": "helix/styled/src/input"
|
|
107581
|
+
"source": "helix/styled/src/input",
|
|
107582
|
+
"replaces": [
|
|
107583
|
+
"input",
|
|
107584
|
+
"input[type=text]",
|
|
107585
|
+
"input[type=email]",
|
|
107586
|
+
"input[type=password]",
|
|
107587
|
+
"input[type=search]",
|
|
107588
|
+
"input[type=tel]",
|
|
107589
|
+
"input[type=url]"
|
|
107590
|
+
]
|
|
107542
107591
|
},
|
|
107543
107592
|
"tagName": "helix-input",
|
|
107544
107593
|
"customElement": true,
|
|
@@ -108824,7 +108873,10 @@
|
|
|
108824
108873
|
"slug": "shortcut"
|
|
108825
108874
|
}
|
|
108826
108875
|
],
|
|
108827
|
-
"source": "helix/styled/src/kbd"
|
|
108876
|
+
"source": "helix/styled/src/kbd",
|
|
108877
|
+
"replaces": [
|
|
108878
|
+
"kbd"
|
|
108879
|
+
]
|
|
108828
108880
|
},
|
|
108829
108881
|
"tagName": "helix-kbd",
|
|
108830
108882
|
"customElement": true,
|
|
@@ -117958,7 +118010,11 @@
|
|
|
117958
118010
|
"slug": "selectable"
|
|
117959
118011
|
}
|
|
117960
118012
|
],
|
|
117961
|
-
"source": "helix/styled/src/list"
|
|
118013
|
+
"source": "helix/styled/src/list",
|
|
118014
|
+
"replaces": [
|
|
118015
|
+
"ul",
|
|
118016
|
+
"ol"
|
|
118017
|
+
]
|
|
117962
118018
|
},
|
|
117963
118019
|
"tagName": "helix-list",
|
|
117964
118020
|
"customElement": true,
|
|
@@ -141448,7 +141504,10 @@
|
|
|
141448
141504
|
"slug": "value-text"
|
|
141449
141505
|
}
|
|
141450
141506
|
],
|
|
141451
|
-
"source": "helix/styled/src/meter"
|
|
141507
|
+
"source": "helix/styled/src/meter",
|
|
141508
|
+
"replaces": [
|
|
141509
|
+
"meter"
|
|
141510
|
+
]
|
|
141452
141511
|
},
|
|
141453
141512
|
"tagName": "helix-meter",
|
|
141454
141513
|
"customElement": true,
|
|
@@ -148890,7 +148949,10 @@
|
|
|
148890
148949
|
"slug": "units"
|
|
148891
148950
|
}
|
|
148892
148951
|
],
|
|
148893
|
-
"source": "helix/styled/src/number-input"
|
|
148952
|
+
"source": "helix/styled/src/number-input",
|
|
148953
|
+
"replaces": [
|
|
148954
|
+
"input[type=number]"
|
|
148955
|
+
]
|
|
148894
148956
|
},
|
|
148895
148957
|
"tagName": "helix-number-input",
|
|
148896
148958
|
"customElement": true,
|
|
@@ -165264,7 +165326,10 @@
|
|
|
165264
165326
|
"slug": "value-text"
|
|
165265
165327
|
}
|
|
165266
165328
|
],
|
|
165267
|
-
"source": "helix/styled/src/progress"
|
|
165329
|
+
"source": "helix/styled/src/progress",
|
|
165330
|
+
"replaces": [
|
|
165331
|
+
"progress"
|
|
165332
|
+
]
|
|
165268
165333
|
},
|
|
165269
165334
|
"tagName": "helix-progress",
|
|
165270
165335
|
"customElement": true,
|
|
@@ -166886,7 +166951,10 @@
|
|
|
166886
166951
|
"slug": "no-marks"
|
|
166887
166952
|
}
|
|
166888
166953
|
],
|
|
166889
|
-
"source": "helix/styled/src/quote"
|
|
166954
|
+
"source": "helix/styled/src/quote",
|
|
166955
|
+
"replaces": [
|
|
166956
|
+
"q"
|
|
166957
|
+
]
|
|
166890
166958
|
},
|
|
166891
166959
|
"tagName": "helix-quote",
|
|
166892
166960
|
"customElement": true,
|
|
@@ -169684,7 +169752,10 @@
|
|
|
169684
169752
|
"slug": "required"
|
|
169685
169753
|
}
|
|
169686
169754
|
],
|
|
169687
|
-
"source": "helix/styled/src/radio"
|
|
169755
|
+
"source": "helix/styled/src/radio",
|
|
169756
|
+
"replaces": [
|
|
169757
|
+
"input[type=radio]"
|
|
169758
|
+
]
|
|
169688
169759
|
},
|
|
169689
169760
|
"tagName": "helix-radio",
|
|
169690
169761
|
"customElement": true,
|
|
@@ -184218,7 +184289,10 @@
|
|
|
184218
184289
|
"slug": "required"
|
|
184219
184290
|
}
|
|
184220
184291
|
],
|
|
184221
|
-
"source": "helix/styled/src/select"
|
|
184292
|
+
"source": "helix/styled/src/select",
|
|
184293
|
+
"replaces": [
|
|
184294
|
+
"select"
|
|
184295
|
+
]
|
|
184222
184296
|
},
|
|
184223
184297
|
"tagName": "helix-select",
|
|
184224
184298
|
"customElement": true,
|
|
@@ -188890,7 +188964,10 @@
|
|
|
188890
188964
|
"slug": "vertical"
|
|
188891
188965
|
}
|
|
188892
188966
|
],
|
|
188893
|
-
"source": "helix/styled/src/slider"
|
|
188967
|
+
"source": "helix/styled/src/slider",
|
|
188968
|
+
"replaces": [
|
|
188969
|
+
"input[type=range]"
|
|
188970
|
+
]
|
|
188894
188971
|
},
|
|
188895
188972
|
"tagName": "helix-slider",
|
|
188896
188973
|
"customElement": true,
|
|
@@ -214808,7 +214885,10 @@
|
|
|
214808
214885
|
"slug": "windowed"
|
|
214809
214886
|
}
|
|
214810
214887
|
],
|
|
214811
|
-
"source": "helix/styled/src/table"
|
|
214888
|
+
"source": "helix/styled/src/table",
|
|
214889
|
+
"replaces": [
|
|
214890
|
+
"table"
|
|
214891
|
+
]
|
|
214812
214892
|
},
|
|
214813
214893
|
"tagName": "helix-table",
|
|
214814
214894
|
"customElement": true,
|
|
@@ -222296,7 +222376,16 @@
|
|
|
222296
222376
|
"slug": "tones"
|
|
222297
222377
|
}
|
|
222298
222378
|
],
|
|
222299
|
-
"source": "helix/styled/src/text"
|
|
222379
|
+
"source": "helix/styled/src/text",
|
|
222380
|
+
"replaces": [
|
|
222381
|
+
"h1",
|
|
222382
|
+
"h2",
|
|
222383
|
+
"h3",
|
|
222384
|
+
"h4",
|
|
222385
|
+
"h5",
|
|
222386
|
+
"h6",
|
|
222387
|
+
"p"
|
|
222388
|
+
]
|
|
222300
222389
|
},
|
|
222301
222390
|
"tagName": "helix-text",
|
|
222302
222391
|
"customElement": true,
|
|
@@ -224378,7 +224467,10 @@
|
|
|
224378
224467
|
"slug": "rows-and-length"
|
|
224379
224468
|
}
|
|
224380
224469
|
],
|
|
224381
|
-
"source": "helix/styled/src/textarea"
|
|
224470
|
+
"source": "helix/styled/src/textarea",
|
|
224471
|
+
"replaces": [
|
|
224472
|
+
"textarea"
|
|
224473
|
+
]
|
|
224382
224474
|
},
|
|
224383
224475
|
"tagName": "helix-textarea",
|
|
224384
224476
|
"customElement": true,
|
|
@@ -228516,7 +228608,10 @@
|
|
|
228516
228608
|
"slug": "wheels"
|
|
228517
228609
|
}
|
|
228518
228610
|
],
|
|
228519
|
-
"source": "helix/styled/src/time-input"
|
|
228611
|
+
"source": "helix/styled/src/time-input",
|
|
228612
|
+
"replaces": [
|
|
228613
|
+
"input[type=time]"
|
|
228614
|
+
]
|
|
228520
228615
|
},
|
|
228521
228616
|
"tagName": "helix-time-input",
|
|
228522
228617
|
"customElement": true,
|
|
@@ -256913,7 +257008,10 @@
|
|
|
256913
257008
|
"slug": "unavailable"
|
|
256914
257009
|
}
|
|
256915
257010
|
],
|
|
256916
|
-
"source": "helix/styled/src/video"
|
|
257011
|
+
"source": "helix/styled/src/video",
|
|
257012
|
+
"replaces": [
|
|
257013
|
+
"video"
|
|
257014
|
+
]
|
|
256917
257015
|
},
|
|
256918
257016
|
"tagName": "helix-video",
|
|
256919
257017
|
"customElement": true,
|
|
@@ -260558,6 +260656,6 @@
|
|
|
260558
260656
|
],
|
|
260559
260657
|
"helix": {
|
|
260560
260658
|
"package": "@fusion.dev/helix",
|
|
260561
|
-
"version": "0.
|
|
260659
|
+
"version": "0.194.0"
|
|
260562
260660
|
}
|
|
260563
260661
|
}
|
|
@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
18
18
|
* @cssproperty --accordion-border-color - The color of the lines between items, and of each item's border when outlined.
|
|
19
19
|
* @cssproperty --accordion-gap - The space between items when outlined. Otherwise items share an edge.
|
|
20
20
|
* @cssproperty --accordion-radius - The corner radius of each item when outlined.
|
|
21
|
+
*
|
|
22
|
+
* @replaces details
|
|
21
23
|
*/
|
|
22
24
|
export declare class HelixAccordion extends HelixHeadlessAccordion {
|
|
23
25
|
/**
|
|
@@ -33,6 +33,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
33
33
|
* @cssproperty --blockquote-mark-color - The color of the mark `marks` draws, the subtle foreground by default.
|
|
34
34
|
* @cssproperty --blockquote-mark-size - The font size of the mark `marks` draws.
|
|
35
35
|
* @cssproperty --blockquote-size - The font size of the quoted passage.
|
|
36
|
+
*
|
|
37
|
+
* @replaces blockquote
|
|
36
38
|
*/
|
|
37
39
|
export declare class HelixBlockquote extends HelixHeadlessBlockquote {
|
|
38
40
|
/**
|
|
@@ -50,6 +50,8 @@ declare const HelixButton_base: (new (...args: any[]) => import("../../shared/mi
|
|
|
50
50
|
*
|
|
51
51
|
* @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden words.
|
|
52
52
|
* @cssstate pressed - A Button Group in a selection mode has this button pressed.
|
|
53
|
+
*
|
|
54
|
+
* @replaces button, input[type=submit], input[type=button], input[type=reset]
|
|
53
55
|
*/
|
|
54
56
|
export declare class HelixButton extends HelixButton_base {
|
|
55
57
|
/**
|
|
@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
27
27
|
* @cssproperty --checkbox-icon-size - The width and height of an icon slotted into `check` or `dash`. It fills the box by default.
|
|
28
28
|
* @cssproperty --checkbox-mark-color - The color of the check mark and the dash, and of an icon slotted into `check` or `dash`.
|
|
29
29
|
* @cssproperty --checkbox-size - The width and height of the box.
|
|
30
|
+
*
|
|
31
|
+
* @replaces input[type=checkbox]
|
|
30
32
|
*/
|
|
31
33
|
export declare class HelixCheckbox extends HelixHeadlessCheckbox {
|
|
32
34
|
static styles: CSSResultGroup;
|
|
@@ -23,6 +23,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
23
23
|
* `space-2xs`, so a bracket next to the fragment sits close to it.
|
|
24
24
|
* @cssproperty --code-radius - Corner radius of the wash. Defaults to `radii-sm`.
|
|
25
25
|
* @cssproperty --code-size - The fragment's size. Defaults to `text-sm`.
|
|
26
|
+
*
|
|
27
|
+
* @replaces code
|
|
26
28
|
*/
|
|
27
29
|
export declare class HelixCode extends HelixHeadlessCode {
|
|
28
30
|
static styles: CSSResultGroup;
|
|
@@ -44,6 +44,8 @@ import '../../copy-button/index.js';
|
|
|
44
44
|
* @cssproperty --code-block-max-block-size - The tallest the code grows before it scrolls, or until `expandable`'s button shows every line. The default is no limit.
|
|
45
45
|
* @cssproperty --code-block-radius - The corner radius of the header's top and the block's bottom, which form one shape.
|
|
46
46
|
* @cssproperty --code-block-removed-color - The color a diff's removed lines are tinted in and their `-` is drawn in. The danger color by default.
|
|
47
|
+
*
|
|
48
|
+
* @replaces pre
|
|
47
49
|
*/
|
|
48
50
|
export declare class HelixCodeBlock extends HelixHeadlessCodeBlock {
|
|
49
51
|
static tier: string;
|
|
@@ -33,6 +33,8 @@ import '../../color-picker/index.js';
|
|
|
33
33
|
* keeps a lift by default.
|
|
34
34
|
* @cssproperty --color-input-swatch-radius - Corner radius of the swatch in `variant="swatch"`.
|
|
35
35
|
* @cssproperty --color-input-swatch-size - Edge length of the swatch in `variant="swatch"`.
|
|
36
|
+
*
|
|
37
|
+
* @replaces input[type=color]
|
|
36
38
|
*/
|
|
37
39
|
export declare class HelixColorInput extends HelixHeadlessColorInput {
|
|
38
40
|
static tier: string;
|
|
@@ -38,6 +38,8 @@ import '../../tag/root/index.js';
|
|
|
38
38
|
* @cssproperty --date-input-shadow - The shadow under the panel. It follows
|
|
39
39
|
* `--helix-shadow-floating`. The panel can sit over any content, so it has a
|
|
40
40
|
* shadow by default.
|
|
41
|
+
*
|
|
42
|
+
* @replaces input[type=date]
|
|
41
43
|
*/
|
|
42
44
|
export declare class HelixDateInput extends HelixHeadlessDateInput {
|
|
43
45
|
static tier: string;
|
|
@@ -29,6 +29,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
29
29
|
* @cssproperty --dialog-scrim - The tint over the page behind the dialog. Set it on the host, because a `var()` written inside `::backdrop` cannot read a token.
|
|
30
30
|
* @cssproperty --dialog-shadow - Shadow under the panel. Follows `--helix-shadow-floating`. A
|
|
31
31
|
* floating surface can sit over any content, so it has a shadow by default.
|
|
32
|
+
*
|
|
33
|
+
* @replaces dialog
|
|
32
34
|
*/
|
|
33
35
|
export declare class HelixDialog extends HelixHeadlessDialog {
|
|
34
36
|
/**
|
|
@@ -33,6 +33,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
33
33
|
* @cssproperty --divider-padding-end - The space removed from the end of the line only.
|
|
34
34
|
* @cssproperty --divider-padding-start - The space removed from the start of the line only.
|
|
35
35
|
* @cssproperty --divider-thickness - The thickness of the line.
|
|
36
|
+
*
|
|
37
|
+
* @replaces hr
|
|
36
38
|
*/
|
|
37
39
|
export declare class HelixDivider extends HelixHeadlessDivider {
|
|
38
40
|
/**
|
|
@@ -38,6 +38,8 @@ import '../../tag/root/index.js';
|
|
|
38
38
|
* @cssproperty --file-input-remove-color-hover - The remove button's icon under the pointer.
|
|
39
39
|
* @cssproperty --file-input-status-color - The words beside a file's upload bar.
|
|
40
40
|
* @cssproperty --file-input-status-color-error - The words beside a file whose upload failed.
|
|
41
|
+
*
|
|
42
|
+
* @replaces input[type=file]
|
|
41
43
|
*/
|
|
42
44
|
export declare class HelixFileInput extends HelixHeadlessFileInput {
|
|
43
45
|
static tier: string;
|
|
@@ -22,6 +22,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
22
22
|
* @cssproperty --image-placeholder-color - The background behind the placeholder and the fallback.
|
|
23
23
|
* @cssproperty --image-position - Which part of the image stays in view when it is cropped, as an `object-position` value.
|
|
24
24
|
* @cssproperty --image-radius - The corner radius when `shape` is `rounded`.
|
|
25
|
+
*
|
|
26
|
+
* @replaces img, picture
|
|
25
27
|
*/
|
|
26
28
|
export declare class HelixImage extends HelixHeadlessImage {
|
|
27
29
|
static styles: CSSResultGroup;
|
|
@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
27
27
|
* @cssproperty --input-padding-inline - Space between the edge of the field and what is inside it.
|
|
28
28
|
* @cssproperty --input-radius - Corner radius of the field.
|
|
29
29
|
* @cssproperty --input-size - Height of the field.
|
|
30
|
+
*
|
|
31
|
+
* @replaces input, input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=url]
|
|
30
32
|
*/
|
|
31
33
|
export declare class HelixInput extends HelixHeadlessInput {
|
|
32
34
|
static styles: CSSResultGroup;
|
|
@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
27
27
|
* @cssproperty --kbd-padding-inline - The space either side of the key's label.
|
|
28
28
|
* @cssproperty --kbd-radius - How far the key's corners are rounded.
|
|
29
29
|
* @cssproperty --kbd-separator-color - The color of the `+` between two keys of a chord under `caps`.
|
|
30
|
+
*
|
|
31
|
+
* @replaces kbd
|
|
30
32
|
*/
|
|
31
33
|
export declare class HelixKbd extends HelixHeadlessKbd {
|
|
32
34
|
static styles: CSSResultGroup;
|
|
@@ -27,6 +27,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
27
27
|
* @cssproperty --list-marker-gutter - The space that the markers of ordered and unordered lists sit in.
|
|
28
28
|
* @cssproperty --list-rail-inline-size - The width of the rail's track.
|
|
29
29
|
* @cssproperty --list-rail-style - The counter style of the rail's numbers. Takes any `list-style-type`.
|
|
30
|
+
*
|
|
31
|
+
* @replaces ul, ol
|
|
30
32
|
*/
|
|
31
33
|
export declare class HelixList extends HelixHeadlessList {
|
|
32
34
|
/**
|
|
@@ -54,6 +54,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
54
54
|
* @cssproperty --meter-value-color - The color of the reading shown under `show-value`.
|
|
55
55
|
* @cssproperty --meter-value-gap - The space between the bar and the reading under `show-value`.
|
|
56
56
|
* @cssproperty --meter-value-size - The type size of the reading shown under `show-value`.
|
|
57
|
+
*
|
|
58
|
+
* @replaces meter
|
|
57
59
|
*/
|
|
58
60
|
export declare class HelixMeter extends HelixHeadlessMeter {
|
|
59
61
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none)}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm))}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}[part="header"][data-empty], [part="footer"][data-empty] {display: none}[part="list"] {overflow-y: auto}:host([separation="filled"]) [part="header"], :host([separation="outlined"]) [part="header"] {border-block-end: none}:host([separation="filled"]) [part="list"], :host([separation="outlined"]) [part="list"] {padding-block-start: var(--notifications-item-gap, var(--helix-space-xs))}[part="footer"] {border-block-start: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="mark-all"]:hover {color: var(--helix-color-foreground)}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="more"]:hover {color: var(--helix-color-foreground)}[part="more"][aria-disabled="true"], [part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}[part="error"] {color: var(--notifications-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);padding-inline: var(--helix-space-md);text-align: center}@media print {:host {max-block-size: none}[part="list"] {overflow-y: visible}[part="mark-all"], [part="more"] {display: none}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-avatar: var(--helix-size-avatar-sm);display: grid;grid-template-rows: auto minmax(0, 1fr) auto;max-block-size: var(--notifications-max-block-size, none)}:host(:state(media)) {--notifications-media-column: calc(var(--helix-size-avatar) + var(--helix-space-sm))}[part="header"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));display: flex;gap: var(--helix-space-sm);justify-content: space-between;padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}[part="header"][data-empty], [part="footer"][data-empty] {display: none}[part="list"] {overflow-y: auto}:host([separation="filled"]) [part="header"], :host([separation="outlined"]) [part="header"] {border-block-end: none}:host([separation="filled"]) [part="list"], :host([separation="outlined"]) [part="list"] {padding-block-start: var(--notifications-item-gap, var(--helix-space-xs))}[part="footer"] {border-block-start: var(--helix-border-thin) solid var(--notifications-rule, var(--helix-color-border));padding-block: var(--helix-space-sm);padding-inline: var(--notifications-padding-inline, var(--helix-space-lg))}::slotted(helix-notification:last-of-type) {--notifications-rule: transparent}[part="mark-all"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;flex: none;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);transition: color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="mark-all"]:hover {color: var(--helix-color-foreground)}[part="more"] {background: none;border: 0;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;padding-block: var(--helix-space-sm);transition: color var(--helix-duration-fast) var(--helix-easing-standard)}[part="more"]:hover {color: var(--helix-color-foreground)}[part="more"][aria-disabled="true"], [part="more"][aria-disabled="true"]:hover {color: var(--helix-color-foreground-subtle);cursor: default}[part="more"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}[part="error"] {color: var(--notifications-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-lg);padding-inline: var(--helix-space-md);text-align: center}@media print {:host {max-block-size: none}[part="list"] {overflow-y: visible}[part="mark-all"], [part="more"] {display: none}}`);
|
|
@@ -46,6 +46,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
46
46
|
* @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
|
|
47
47
|
* @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons, drawn or slotted.
|
|
48
48
|
* @cssproperty --number-input-stepper-size - Width of each stepper button.
|
|
49
|
+
*
|
|
50
|
+
* @replaces input[type=number]
|
|
49
51
|
*/
|
|
50
52
|
export declare class HelixNumberInput extends HelixHeadlessNumberInput {
|
|
51
53
|
static styles: CSSResultGroup;
|
|
@@ -37,6 +37,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
37
37
|
* @cssproperty --progress-value-color - The color of the value shown under `show-value`.
|
|
38
38
|
* @cssproperty --progress-value-gap - The space between the bar and the value under `show-value`.
|
|
39
39
|
* @cssproperty --progress-value-size - The type size of the value shown under `show-value`.
|
|
40
|
+
*
|
|
41
|
+
* @replaces progress
|
|
40
42
|
*/
|
|
41
43
|
export declare class HelixProgress extends HelixHeadlessProgress {
|
|
42
44
|
/**
|
|
@@ -17,6 +17,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
17
17
|
* @cssproperty --quote-font-family - The typeface of the quoted text, the paragraph's own by default.
|
|
18
18
|
* @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
|
|
19
19
|
* @cssproperty --quote-font-weight - The weight of the quoted text, the paragraph's own by default.
|
|
20
|
+
*
|
|
21
|
+
* @replaces q
|
|
20
22
|
*/
|
|
21
23
|
export declare class HelixQuote extends HelixHeadlessQuote {
|
|
22
24
|
static styles: CSSResultGroup;
|
|
@@ -26,6 +26,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
26
26
|
* @cssproperty --radio-indicator-size - The width and height of an icon slotted into `indicator`. Three quarters of the circle by default.
|
|
27
27
|
* @cssproperty --radio-mark-color - The color of the dot, or of an icon slotted into `indicator`.
|
|
28
28
|
* @cssproperty --radio-size - The diameter of the circle.
|
|
29
|
+
*
|
|
30
|
+
* @replaces input[type=radio]
|
|
29
31
|
*/
|
|
30
32
|
export declare class HelixRadio extends HelixHeadlessRadio {
|
|
31
33
|
static styles: CSSResultGroup;
|
|
@@ -25,6 +25,8 @@ import '../../listbox/index.js';
|
|
|
25
25
|
* @cssproperty --select-shadow - Shadow under the panel. Defaults to
|
|
26
26
|
* `--helix-shadow-floating`, because the panel can sit over any content.
|
|
27
27
|
* @cssproperty --select-surface-max-block-size - Maximum height of the panel.
|
|
28
|
+
*
|
|
29
|
+
* @replaces select
|
|
28
30
|
*/
|
|
29
31
|
export declare class HelixSelect extends HelixHeadlessSelect {
|
|
30
32
|
static tier: string;
|
|
@@ -32,6 +32,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
32
32
|
* @cssproperty --slider-track-color - The color of the unfilled part of the track.
|
|
33
33
|
* @cssproperty --slider-track-image - An image for the whole track, such as a gradient for a slider whose value is a color.
|
|
34
34
|
* @cssproperty --slider-track-size - The thickness of the track. It matches the progress bar's size by default.
|
|
35
|
+
*
|
|
36
|
+
* @replaces input[type=range]
|
|
35
37
|
*/
|
|
36
38
|
export declare class HelixSlider extends HelixHeadlessSlider {
|
|
37
39
|
static styles: CSSResultGroup;
|
|
@@ -39,6 +39,8 @@ import '../../checkbox/index.js';
|
|
|
39
39
|
* @cssproperty --table-title-color - The color of the words in the `heading` slot.
|
|
40
40
|
* @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
|
|
41
41
|
* @cssproperty --table-title-text - The font size of the words in the `heading` slot.
|
|
42
|
+
*
|
|
43
|
+
* @replaces table
|
|
42
44
|
*/
|
|
43
45
|
export declare class HelixTable extends HelixHeadlessTable {
|
|
44
46
|
static tier: string;
|
|
@@ -48,6 +48,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
|
|
|
48
48
|
* @cssproperty --text-font-weight - The weight. Overrides the ramp's.
|
|
49
49
|
* @cssproperty --text-letter-spacing - The tracking. Overrides the ramp's.
|
|
50
50
|
* @cssproperty --text-line-height - The leading. Overrides the ramp's.
|
|
51
|
+
*
|
|
52
|
+
* @replaces h1, h2, h3, h4, h5, h6, p
|
|
51
53
|
*/
|
|
52
54
|
export declare class HelixText extends HelixElement {
|
|
53
55
|
/**
|
|
@@ -19,6 +19,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
19
19
|
* @cssproperty --textarea-padding - Space between the edge of the field and the text.
|
|
20
20
|
* @cssproperty --textarea-radius - Corner radius of the field.
|
|
21
21
|
* @cssproperty --textarea-resize - Which way a reader can drag the field: `vertical` by default, `none`, `both` or `horizontal`. A field under `auto-grow` has nothing to drag.
|
|
22
|
+
*
|
|
23
|
+
* @replaces textarea
|
|
22
24
|
*/
|
|
23
25
|
export declare class HelixTextarea extends HelixHeadlessTextarea {
|
|
24
26
|
static styles: CSSResultGroup;
|
|
@@ -35,6 +35,8 @@ import '../../time-picker/index.js';
|
|
|
35
35
|
* with nothing in it, in `segmented`. It matches the text field's placeholder.
|
|
36
36
|
* @cssproperty --time-input-shadow - Shadow under the panel. Defaults to
|
|
37
37
|
* `--helix-shadow-floating`, because the panel can sit over any content.
|
|
38
|
+
*
|
|
39
|
+
* @replaces input[type=time]
|
|
38
40
|
*/
|
|
39
41
|
export declare class HelixTimeInput extends HelixHeadlessTimeInput {
|
|
40
42
|
static tier: string;
|
|
@@ -32,6 +32,8 @@ import '../../menu/index.js';
|
|
|
32
32
|
* does not shift when the number changes.
|
|
33
33
|
* @cssproperty --video-start-size - Width of the large play button.
|
|
34
34
|
* @cssproperty --video-well-color - Color behind the picture and in the letterbox bars.
|
|
35
|
+
*
|
|
36
|
+
* @replaces video
|
|
35
37
|
*/
|
|
36
38
|
export declare class HelixVideo extends HelixHeadlessVideo {
|
|
37
39
|
/**
|