@aquera/nile-elements 0.1.8 → 0.1.9
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/README.md +4 -0
- package/demo/index.html +0 -10
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.esm.js +54 -23
- package/dist/nile-accordion/nile-accordion.esm.js +9 -8
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js.map +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +11 -1
- package/dist/nile-code-editor/nile-code-editor.css.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.css.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.css.esm.js +3 -3
- package/dist/src/nile-accordion/nile-accordian.test.js +24 -29
- package/dist/src/nile-accordion/nile-accordian.test.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.css.js +53 -22
- package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.d.ts +31 -16
- package/dist/src/nile-accordion/nile-accordion.js +68 -34
- package/dist/src/nile-accordion/nile-accordion.js.map +1 -1
- package/dist/src/nile-avatar/nile-avatar.test.d.ts +1 -0
- package/dist/src/nile-avatar/nile-avatar.test.js +64 -30
- package/dist/src/nile-avatar/nile-avatar.test.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.css.js +3 -3
- package/dist/src/nile-code-editor/nile-code-editor.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-accordion/nile-accordian.test.ts +30 -57
- package/src/nile-accordion/nile-accordion.css.ts +53 -22
- package/src/nile-accordion/nile-accordion.ts +61 -33
- package/src/nile-avatar/nile-avatar.test.ts +84 -33
- package/src/nile-code-editor/nile-code-editor.css.ts +3 -3
- package/vscode-html-custom-data.json +82 -43
|
@@ -47,13 +47,13 @@ export const styles = css`
|
|
|
47
47
|
|
|
48
48
|
.code-editor__icon__container {
|
|
49
49
|
display: none;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
align-self: start;
|
|
52
|
+
padding: 5px 5px 0px 0px;
|
|
50
53
|
}
|
|
51
54
|
|
|
52
55
|
.code-mirror:hover > .code-editor__icon__container {
|
|
53
|
-
cursor: pointer;
|
|
54
56
|
display: flex;
|
|
55
|
-
align-self: start;
|
|
56
|
-
padding: 5px 5px 0px 0px;
|
|
57
57
|
}
|
|
58
58
|
`;
|
|
59
59
|
|
|
@@ -3,20 +3,59 @@
|
|
|
3
3
|
"tags": [
|
|
4
4
|
{
|
|
5
5
|
"name": "nile-accordion",
|
|
6
|
-
"description": "Nile detail component.\n\nAttributes:\n\n * `open` {`boolean`} - Indicates whether or not the
|
|
6
|
+
"description": "Nile detail component.\n\nAttributes:\n\n * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperties:\n\n * `styles` - \n\n * `accordian` {`HTMLElement`} - \n\n * `header` {`HTMLElement`} - \n\n * `body` {`HTMLElement`} - \n\n * `expandIconSlot` {`HTMLSlotElement`} - \n\n * `open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\n * `variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\n * `expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\n * `size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\n * `summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\n * `disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
7
7
|
"attributes": [
|
|
8
8
|
{
|
|
9
9
|
"name": "open",
|
|
10
|
-
"description": "`open` {`boolean`} - Indicates whether or not the
|
|
10
|
+
"description": "`open` {`boolean`} - Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n\nProperty: open\n\nDefault: false",
|
|
11
11
|
"valueSet": "v"
|
|
12
12
|
},
|
|
13
|
+
{
|
|
14
|
+
"name": "variant",
|
|
15
|
+
"description": "`variant` {`\"dark\" | \"light\"`} - Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\nDefaults to `'light'`.\n\nProperty: variant\n\nDefault: light",
|
|
16
|
+
"values": [
|
|
17
|
+
{
|
|
18
|
+
"name": "dark"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
"name": "light"
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "expandIconPlacement",
|
|
27
|
+
"description": "`expandIconPlacement` {`\"left\" | \"right\"`} - Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\nDefaults to `'right'`.\n\nProperty: expandIconPlacement\n\nDefault: right",
|
|
28
|
+
"values": [
|
|
29
|
+
{
|
|
30
|
+
"name": "left"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "right"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "size",
|
|
39
|
+
"description": "`size` {`\"sm\" | \"md\" | \"lg\"`} - Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\nDefaults to `'md'`.\n\nProperty: size\n\nDefault: md",
|
|
40
|
+
"values": [
|
|
41
|
+
{
|
|
42
|
+
"name": "sm"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "md"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "lg"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
},
|
|
13
52
|
{
|
|
14
53
|
"name": "summary",
|
|
15
54
|
"description": "`summary` {`string`} - The summary to show in the header. If you need to display HTML, use the `summary` slot instead.\n\nProperty: summary"
|
|
16
55
|
},
|
|
17
56
|
{
|
|
18
57
|
"name": "disabled",
|
|
19
|
-
"description": "`disabled` {`boolean`} - Disables the
|
|
58
|
+
"description": "`disabled` {`boolean`} - Disables the accordian so it can't be toggled.\n\nProperty: disabled\n\nDefault: false",
|
|
20
59
|
"valueSet": "v"
|
|
21
60
|
}
|
|
22
61
|
]
|
|
@@ -1100,7 +1139,7 @@
|
|
|
1100
1139
|
},
|
|
1101
1140
|
{
|
|
1102
1141
|
"name": "nile-dropdown",
|
|
1103
|
-
"description": "Nile icon component.\n\nEvents:\n\n * `nile-show` {} - Emitted when the dropdown opens.\n\n * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the dropdown closes.\n\n * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n * ` ` {} - The dropdown's main content.\n\n * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n * `placement` {`\"
|
|
1142
|
+
"description": "Nile icon component.\n\nEvents:\n\n * `nile-show` {} - Emitted when the dropdown opens.\n\n * `nile-after-show` {} - Emitted after the dropdown opens and all animations are complete.\n\n * `nile-hide` {} - Emitted when the dropdown closes.\n\n * `nile-after-hide` {} - Emitted after the dropdown closes and all animations are complete.\n\nSlots:\n\n * ` ` {} - The dropdown's main content.\n\n * `trigger` {} - The dropdown's trigger, usually a `<nile-button>` element.\n\nAttributes:\n\n * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n * `stay-open-on-select` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n * `noOpenOnClick` {`boolean`} - \n\n * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\nProperties:\n\n * `styles` - \n\n * `popup` - \n\n * `trigger` {`HTMLSlotElement`} - \n\n * `panel` {`HTMLSlotElement`} - \n\n * `open` {`boolean`} - Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\n * `disabled` {`boolean`} - Disables the dropdown so the panel will not open.\n\n * `stayOpenOnSelect` {`boolean`} - By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.\n\n * `containingElement` {`HTMLElement | undefined`} - The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.\n\n * `distance` {`number`} - The distance in pixels from which to offset the panel away from its trigger.\n\n * `noOpenOnClick` {`boolean`} - \n\n * `skidding` {`number`} - The distance in pixels from which to offset the panel along its trigger.\n\n * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
1104
1143
|
"attributes": [
|
|
1105
1144
|
{
|
|
1106
1145
|
"name": "open",
|
|
@@ -1109,8 +1148,14 @@
|
|
|
1109
1148
|
},
|
|
1110
1149
|
{
|
|
1111
1150
|
"name": "placement",
|
|
1112
|
-
"description": "`placement` {`\"
|
|
1151
|
+
"description": "`placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.\n\nProperty: placement\n\nDefault: bottom-start",
|
|
1113
1152
|
"values": [
|
|
1153
|
+
{
|
|
1154
|
+
"name": "left"
|
|
1155
|
+
},
|
|
1156
|
+
{
|
|
1157
|
+
"name": "right"
|
|
1158
|
+
},
|
|
1114
1159
|
{
|
|
1115
1160
|
"name": "top"
|
|
1116
1161
|
},
|
|
@@ -1129,18 +1174,12 @@
|
|
|
1129
1174
|
{
|
|
1130
1175
|
"name": "bottom-end"
|
|
1131
1176
|
},
|
|
1132
|
-
{
|
|
1133
|
-
"name": "right"
|
|
1134
|
-
},
|
|
1135
1177
|
{
|
|
1136
1178
|
"name": "right-start"
|
|
1137
1179
|
},
|
|
1138
1180
|
{
|
|
1139
1181
|
"name": "right-end"
|
|
1140
1182
|
},
|
|
1141
|
-
{
|
|
1142
|
-
"name": "left"
|
|
1143
|
-
},
|
|
1144
1183
|
{
|
|
1145
1184
|
"name": "left-start"
|
|
1146
1185
|
},
|
|
@@ -2242,12 +2281,18 @@
|
|
|
2242
2281
|
},
|
|
2243
2282
|
{
|
|
2244
2283
|
"name": "nile-popover",
|
|
2245
|
-
"description": "Nile icon component.\n\nAttributes:\n\n * `placement` {`\"
|
|
2284
|
+
"description": "Nile icon component.\n\nAttributes:\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n * `distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\n * `preventOverlayClose` {`boolean`} - \n\n * `arrow` {`boolean`} - \n\n * `title` {`string`} - Gives the title to the popover\n\n * `open` {`boolean`} - \n\n * `arrow-placement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - \n\n * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `flip` {`boolean`} - \n\nProperties:\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n * `distance` {`number`} - The distance in pixels from which to offset the popover away from its target.\n\n * `preventOverlayClose` {`boolean`} - \n\n * `arrow` {`boolean`} - \n\n * `title` {`string`} - Gives the title to the popover\n\n * `open` {`boolean`} - \n\n * `isShow` {`boolean`} - \n\n * `arrowPlacement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - \n\n * `hoist` {`boolean`} - Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n\n * `flip` {`boolean`} - \n\n * `handleClick` - \n\n * `handleDocumentClick` - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
2246
2285
|
"attributes": [
|
|
2247
2286
|
{
|
|
2248
2287
|
"name": "placement",
|
|
2249
|
-
"description": "`placement` {`\"
|
|
2288
|
+
"description": "`placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popover. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\nProperty: placement\n\nDefault: top",
|
|
2250
2289
|
"values": [
|
|
2290
|
+
{
|
|
2291
|
+
"name": "left"
|
|
2292
|
+
},
|
|
2293
|
+
{
|
|
2294
|
+
"name": "right"
|
|
2295
|
+
},
|
|
2251
2296
|
{
|
|
2252
2297
|
"name": "top"
|
|
2253
2298
|
},
|
|
@@ -2266,18 +2311,12 @@
|
|
|
2266
2311
|
{
|
|
2267
2312
|
"name": "bottom-end"
|
|
2268
2313
|
},
|
|
2269
|
-
{
|
|
2270
|
-
"name": "right"
|
|
2271
|
-
},
|
|
2272
2314
|
{
|
|
2273
2315
|
"name": "right-start"
|
|
2274
2316
|
},
|
|
2275
2317
|
{
|
|
2276
2318
|
"name": "right-end"
|
|
2277
2319
|
},
|
|
2278
|
-
{
|
|
2279
|
-
"name": "left"
|
|
2280
|
-
},
|
|
2281
2320
|
{
|
|
2282
2321
|
"name": "left-start"
|
|
2283
2322
|
},
|
|
@@ -2341,7 +2380,7 @@
|
|
|
2341
2380
|
},
|
|
2342
2381
|
{
|
|
2343
2382
|
"name": "nile-popup",
|
|
2344
|
-
"description": "Nile icon component.\n\nAttributes:\n\n * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n * `placement` {`\"
|
|
2383
|
+
"description": "Nile icon component.\n\nAttributes:\n\n * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n * `arrow-placement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n * `arrow-padding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n * `flip-fallback-placements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n * `flip-fallback-strategy` {`\"best-fit\" | \"initial\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `flip-padding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `shift-padding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n * `auto-size` {`\"both\" | \"horizontal\" | \"vertical\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `auto-size-padding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\nProperties:\n\n * `styles` - \n\n * `anchorEl` {`Element | null`} - \n\n * `cleanup` {`(() => void) | undefined`} - \n\n * `popup` {`HTMLElement`} - A reference to the internal popup container. Useful for animating and styling the popup with JavaScript.\n\n * `arrowEl` {`HTMLElement`} - \n\n * `anchor` {`string | Element`} - The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide its `id` or a\nreference to it here. If the anchor lives inside the popup, use the `anchor` slot instead.\n\n * `active` {`boolean`} - Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn\ndown and the popup will be hidden.\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\n * `strategy` {`\"absolute\" | \"fixed\"`} - Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is\nclipped, using a `fixed` position strategy can often workaround it.\n\n * `distance` {`number`} - The distance in pixels from which to offset the panel away from its anchor.\n\n * `skidding` {`number`} - The distance in pixels from which to offset the panel along its anchor.\n\n * `arrow` {`boolean`} - Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and\n`--arrow-color` custom properties. For additional customizations, you can also target the arrow using\n`::part(arrow)` in your stylesheet.\n\n * `arrowPlacement` {`\"end\" | \"start\" | \"center\" | \"anchor\"`} - The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the\nanchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will\nalign the arrow to the start, end, or center of the popover instead.\n\n * `arrowPadding` {`number`} - The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,\nthis will prevent it from overflowing the corners.\n\n * `flip` {`boolean`} - When set, placement of the popup will flip to the opposite site to keep it in view. You can use\n`flipFallbackPlacements` to further configure how the fallback placement is determined.\n\n * `flipFallbackPlacements` {`string`} - If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a\nstring of any number of placements separated by a space, e.g. \"top bottom left\". If no placement fits, the flip\nfallback strategy will be used instead.\n\n * `flipFallbackStrategy` {`\"best-fit\" | \"initial\"`} - When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether\nthe popup should be positioned using the best available fit based on available space or as it was initially\npreferred.\n\n * `flipBoundary` {`Element | Element[]`} - The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `flipPadding` {`number`} - The amount of padding, in pixels, to exceed before the flip behavior will occur.\n\n * `shift` {`boolean`} - Moves the popup along the axis to keep it in view when clipped.\n\n * `shiftBoundary` {`Element | Element[]`} - The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `shiftPadding` {`number`} - The amount of padding, in pixels, to exceed before the shift behavior will occur.\n\n * `autoSize` {`\"both\" | \"horizontal\" | \"vertical\"`} - When set, this will cause the popup to automatically resize itself to prevent it from overflowing.\n\n * `sync` {`\"width\" | \"height\" | \"both\"`} - Syncs the popup's width or height to that of the anchor element.\n\n * `autoSizeBoundary` {`Element | Element[]`} - The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By\ndefault, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can\nchange the boundary by passing a reference to one or more elements to this property.\n\n * `autoSizePadding` {`number`} - The amount of padding, in pixels, to exceed before the auto-size behavior will occur.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
2345
2384
|
"attributes": [
|
|
2346
2385
|
{
|
|
2347
2386
|
"name": "anchor",
|
|
@@ -2355,8 +2394,14 @@
|
|
|
2355
2394
|
},
|
|
2356
2395
|
{
|
|
2357
2396
|
"name": "placement",
|
|
2358
|
-
"description": "`placement` {`\"
|
|
2397
|
+
"description": "`placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the popup. Note that the actual placement will vary as configured to keep the\npanel inside of the viewport.\n\nProperty: placement\n\nDefault: top",
|
|
2359
2398
|
"values": [
|
|
2399
|
+
{
|
|
2400
|
+
"name": "left"
|
|
2401
|
+
},
|
|
2402
|
+
{
|
|
2403
|
+
"name": "right"
|
|
2404
|
+
},
|
|
2360
2405
|
{
|
|
2361
2406
|
"name": "top"
|
|
2362
2407
|
},
|
|
@@ -2375,18 +2420,12 @@
|
|
|
2375
2420
|
{
|
|
2376
2421
|
"name": "bottom-end"
|
|
2377
2422
|
},
|
|
2378
|
-
{
|
|
2379
|
-
"name": "right"
|
|
2380
|
-
},
|
|
2381
2423
|
{
|
|
2382
2424
|
"name": "right-start"
|
|
2383
2425
|
},
|
|
2384
2426
|
{
|
|
2385
2427
|
"name": "right-end"
|
|
2386
2428
|
},
|
|
2387
|
-
{
|
|
2388
|
-
"name": "left"
|
|
2389
|
-
},
|
|
2390
2429
|
{
|
|
2391
2430
|
"name": "left-start"
|
|
2392
2431
|
},
|
|
@@ -2915,7 +2954,7 @@
|
|
|
2915
2954
|
},
|
|
2916
2955
|
{
|
|
2917
2956
|
"name": "nile-sidebar-wrapper",
|
|
2918
|
-
"description": "Nile sidebar-wrapper component.\n\nAttributes:\n\n * `overlaysidebar` {`boolean`} - \n\n * `placement` {`\"
|
|
2957
|
+
"description": "Nile sidebar-wrapper component.\n\nAttributes:\n\n * `overlaysidebar` {`boolean`} - \n\n * `placement` {`\"left\" | \"right\"`} - \n\n * `isopen` {`boolean`} - \n\nProperties:\n\n * `overlaysidebar` {`boolean`} - \n\n * `placement` {`\"left\" | \"right\"`} - \n\n * `isopen` {`boolean`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
2919
2958
|
"attributes": [
|
|
2920
2959
|
{
|
|
2921
2960
|
"name": "overlaysidebar",
|
|
@@ -2924,13 +2963,13 @@
|
|
|
2924
2963
|
},
|
|
2925
2964
|
{
|
|
2926
2965
|
"name": "placement",
|
|
2927
|
-
"description": "`placement` {`\"
|
|
2966
|
+
"description": "`placement` {`\"left\" | \"right\"`} - \n\nProperty: placement\n\nDefault: left",
|
|
2928
2967
|
"values": [
|
|
2929
2968
|
{
|
|
2930
|
-
"name": "
|
|
2969
|
+
"name": "left"
|
|
2931
2970
|
},
|
|
2932
2971
|
{
|
|
2933
|
-
"name": "
|
|
2972
|
+
"name": "right"
|
|
2934
2973
|
}
|
|
2935
2974
|
]
|
|
2936
2975
|
},
|
|
@@ -2962,7 +3001,7 @@
|
|
|
2962
3001
|
},
|
|
2963
3002
|
{
|
|
2964
3003
|
"name": "nile-slide-toggle",
|
|
2965
|
-
"description": "Attributes:\n\n * `label` {`string`} - \n\n * `sublabel` {`string`} - \n\n * `textPosition` {`\"
|
|
3004
|
+
"description": "Attributes:\n\n * `label` {`string`} - \n\n * `sublabel` {`string`} - \n\n * `textPosition` {`\"left\" | \"right\"`} - \n\n * `isChecked` {`boolean`} - \n\n * `fullWidth` {`boolean`} - \n\n * `disabled` {`boolean`} - \n\n * `help-text` {`string`} - \n\n * `error-message` {`string`} - \n\nProperties:\n\n * `styles` - \n\n * `label` {`string`} - \n\n * `sublabel` {`string`} - \n\n * `textPosition` {`\"left\" | \"right\"`} - \n\n * `isChecked` {`boolean`} - \n\n * `fullWidth` {`boolean`} - \n\n * `disabled` {`boolean`} - \n\n * `helpText` {`string`} - \n\n * `errorMessage` {`string`} - \n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
2966
3005
|
"attributes": [
|
|
2967
3006
|
{
|
|
2968
3007
|
"name": "label",
|
|
@@ -2974,13 +3013,13 @@
|
|
|
2974
3013
|
},
|
|
2975
3014
|
{
|
|
2976
3015
|
"name": "textPosition",
|
|
2977
|
-
"description": "`textPosition` {`\"
|
|
3016
|
+
"description": "`textPosition` {`\"left\" | \"right\"`} - \n\nProperty: textPosition\n\nDefault: right",
|
|
2978
3017
|
"values": [
|
|
2979
3018
|
{
|
|
2980
|
-
"name": "
|
|
3019
|
+
"name": "left"
|
|
2981
3020
|
},
|
|
2982
3021
|
{
|
|
2983
|
-
"name": "
|
|
3022
|
+
"name": "right"
|
|
2984
3023
|
}
|
|
2985
3024
|
]
|
|
2986
3025
|
},
|
|
@@ -3694,7 +3733,7 @@
|
|
|
3694
3733
|
},
|
|
3695
3734
|
{
|
|
3696
3735
|
"name": "nile-tooltip",
|
|
3697
|
-
"description": "Nile icon component.\n\nAttributes:\n\n * `content` {`string`} - The tooltip's content. If you need to display HTML, use the `content` slot instead.\n\n * `size` {`\"small\" | \"large\"`} - Size Property to decide the tool tip size\n\n * `placement` {`\"
|
|
3736
|
+
"description": "Nile icon component.\n\nAttributes:\n\n * `content` {`string`} - The tooltip's content. If you need to display HTML, use the `content` slot instead.\n\n * `size` {`\"small\" | \"large\"`} - Size Property to decide the tool tip size\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n * `disabled` {`boolean`} - Disables the tooltip so it won't show when triggered.\n\n * `distance` {`number`} - The distance in pixels from which to offset the tooltip away from its target.\n\n * `open` {`boolean`} - Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.\n\n * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n * `hoist` {`boolean`} - Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.\n\nProperties:\n\n * `hoverTimeout` {`number`} - \n\n * `defaultSlot` {`HTMLSlotElement`} - \n\n * `body` {`HTMLElement`} - \n\n * `popup` - \n\n * `content` {`string`} - The tooltip's content. If you need to display HTML, use the `content` slot instead.\n\n * `size` {`\"small\" | \"large\"`} - Size Property to decide the tool tip size\n\n * `placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\n * `disabled` {`boolean`} - Disables the tooltip so it won't show when triggered.\n\n * `distance` {`number`} - The distance in pixels from which to offset the tooltip away from its target.\n\n * `open` {`boolean`} - Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.\n\n * `skidding` {`number`} - The distance in pixels from which to offset the tooltip along its target.\n\n * `trigger` {`string`} - Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.\n\n * `hoist` {`boolean`} - Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.\n\n * `BUBBLES` {`boolean`} - \n\n * `COMPOSED` {`boolean`} - \n\n * `CANCELABLE` {`boolean`} - ",
|
|
3698
3737
|
"attributes": [
|
|
3699
3738
|
{
|
|
3700
3739
|
"name": "content",
|
|
@@ -3714,8 +3753,14 @@
|
|
|
3714
3753
|
},
|
|
3715
3754
|
{
|
|
3716
3755
|
"name": "placement",
|
|
3717
|
-
"description": "`placement` {`\"
|
|
3756
|
+
"description": "`placement` {`\"left\" | \"right\" | \"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\"`} - The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.\n\nProperty: placement\n\nDefault: top",
|
|
3718
3757
|
"values": [
|
|
3758
|
+
{
|
|
3759
|
+
"name": "left"
|
|
3760
|
+
},
|
|
3761
|
+
{
|
|
3762
|
+
"name": "right"
|
|
3763
|
+
},
|
|
3719
3764
|
{
|
|
3720
3765
|
"name": "top"
|
|
3721
3766
|
},
|
|
@@ -3734,18 +3779,12 @@
|
|
|
3734
3779
|
{
|
|
3735
3780
|
"name": "bottom-end"
|
|
3736
3781
|
},
|
|
3737
|
-
{
|
|
3738
|
-
"name": "right"
|
|
3739
|
-
},
|
|
3740
3782
|
{
|
|
3741
3783
|
"name": "right-start"
|
|
3742
3784
|
},
|
|
3743
3785
|
{
|
|
3744
3786
|
"name": "right-end"
|
|
3745
3787
|
},
|
|
3746
|
-
{
|
|
3747
|
-
"name": "left"
|
|
3748
|
-
},
|
|
3749
3788
|
{
|
|
3750
3789
|
"name": "left-start"
|
|
3751
3790
|
},
|