@nvidia-elements/core 2.17.1 → 2.18.1
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 +24 -0
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.d.ts +33 -1
- package/dist/bundles/index.js +8 -8
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements-jsx.d.ts +25 -1
- package/dist/custom-elements-vue.d.ts +25 -1
- package/dist/custom-elements.json +177 -1
- package/dist/data.html.json +12 -1
- package/dist/data.snippets.json +27 -27
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot2.js +1 -1
- package/dist/drag-handle/drag-handle2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file2.js +1 -1
- package/dist/format-bytes/format-bytes2.js +1 -1
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-number/format-number2.js +1 -1
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/format-truncate/format-truncate2.js +1 -1
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/gauge/gauge2.js +1 -1
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/iframe/iframe2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/keynav-list.controller.d.ts +2 -0
- package/dist/internal/controllers/keynav-list.controller.js +8 -0
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/type-native-popover.controller.js +16 -11
- package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-group2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-dot/progress-dot2.js +1 -1
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search2.js +1 -1
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline2.js +1 -1
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/define.d.ts +2 -1
- package/dist/tabs/define.js +2 -1
- package/dist/tabs/define.js.map +1 -1
- package/dist/tabs/index.d.ts +1 -0
- package/dist/tabs/index.js +2 -1
- package/dist/tabs/tabs-group2.js +19 -18
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs-item-group.d.ts +29 -0
- package/dist/tabs/tabs-item-group.js +6 -0
- package/dist/tabs/tabs-item-group.js.map +1 -0
- package/dist/tabs/tabs-item-group2.js +34 -0
- package/dist/tabs/tabs-item-group2.js.map +1 -0
- package/dist/tabs/tabs-item.js +1 -1
- package/dist/tabs/tabs-item.js.map +1 -1
- package/dist/tabs/tabs.d.ts +5 -1
- package/dist/tabs/tabs.examples.js.map +1 -1
- package/dist/tabs/tabs.examples.json +24 -6
- package/dist/tabs/tabs.global.js +1 -1
- package/dist/tabs/tabs.global.js.map +1 -1
- package/dist/tabs/tabs.js +1 -1
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/tabs/tabs2.js +76 -34
- package/dist/tabs/tabs2.js.map +1 -1
- package/dist/tabs/utils.d.ts +4 -0
- package/dist/tabs/utils.js +18 -0
- package/dist/tabs/utils.js.map +1 -0
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week2.js +1 -1
- package/package.json +5 -5
package/dist/button/button2.js
CHANGED
package/dist/card/card2.js
CHANGED
|
@@ -16,7 +16,7 @@ var d = class extends c {
|
|
|
16
16
|
static {
|
|
17
17
|
this.metadata = {
|
|
18
18
|
tag: "nve-card",
|
|
19
|
-
version: "2.
|
|
19
|
+
version: "2.18.1"
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
@@ -37,7 +37,7 @@ var f = class extends c {
|
|
|
37
37
|
static {
|
|
38
38
|
this.metadata = {
|
|
39
39
|
tag: "nve-card-header",
|
|
40
|
-
version: "2.
|
|
40
|
+
version: "2.18.1",
|
|
41
41
|
parents: ["nve-card"]
|
|
42
42
|
};
|
|
43
43
|
}
|
|
@@ -53,7 +53,7 @@ var p = class extends c {
|
|
|
53
53
|
static {
|
|
54
54
|
this.metadata = {
|
|
55
55
|
tag: "nve-card-content",
|
|
56
|
-
version: "2.
|
|
56
|
+
version: "2.18.1",
|
|
57
57
|
parents: ["nve-card"]
|
|
58
58
|
};
|
|
59
59
|
}
|
|
@@ -72,7 +72,7 @@ var m = class extends c {
|
|
|
72
72
|
static {
|
|
73
73
|
this.metadata = {
|
|
74
74
|
tag: "nve-card-footer",
|
|
75
|
-
version: "2.
|
|
75
|
+
version: "2.18.1",
|
|
76
76
|
parents: ["nve-card"]
|
|
77
77
|
};
|
|
78
78
|
}
|
package/dist/color/color2.js
CHANGED
|
@@ -3640,6 +3640,8 @@ inline-start (`start`) or inline-end (`end`) beside the panel region. */
|
|
|
3640
3640
|
onselect?: (e: CustomEvent<CustomEvent>) => void;
|
|
3641
3641
|
};
|
|
3642
3642
|
|
|
3643
|
+
export type TabsItemGroupProps = {};
|
|
3644
|
+
|
|
3643
3645
|
export type TabsItemProps = {
|
|
3644
3646
|
/** Indicates whether the element is a noninteractive visual treatment instead of a button.
|
|
3645
3647
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly */
|
|
@@ -6477,6 +6479,25 @@ export type CustomElements = {
|
|
|
6477
6479
|
*/
|
|
6478
6480
|
"nve-tabs-group": Partial<TabsGroupProps & BaseProps & BaseEvents>;
|
|
6479
6481
|
|
|
6482
|
+
/**
|
|
6483
|
+
* Groups a tab item with application-owned accessory controls.
|
|
6484
|
+
* ---
|
|
6485
|
+
*
|
|
6486
|
+
*
|
|
6487
|
+
* ### **Slots:**
|
|
6488
|
+
* - _default_ - A single nve-tabs-item.
|
|
6489
|
+
* - **prefix** - Controls before the tab item.
|
|
6490
|
+
* - **suffix** - Controls after the tab item.
|
|
6491
|
+
*
|
|
6492
|
+
* ### **CSS Properties:**
|
|
6493
|
+
* - **--gap** - Spacing between the tab item and accessories. _(default: undefined)_
|
|
6494
|
+
* - **--height** - undefined _(default: undefined)_
|
|
6495
|
+
* - **--padding** - undefined _(default: undefined)_
|
|
6496
|
+
* - **--width** - undefined _(default: undefined)_
|
|
6497
|
+
* - **--border-radius** - undefined _(default: undefined)_
|
|
6498
|
+
*/
|
|
6499
|
+
"nve-tabs-item-group": Partial<TabsItemGroupProps & BaseProps & BaseEvents>;
|
|
6500
|
+
|
|
6480
6501
|
/**
|
|
6481
6502
|
* Represents an individual tab within a tablist, providing a selectable button for switching between content views.
|
|
6482
6503
|
* ---
|
|
@@ -6484,9 +6505,12 @@ export type CustomElements = {
|
|
|
6484
6505
|
*
|
|
6485
6506
|
* ### **Slots:**
|
|
6486
6507
|
* - _default_ - The label displayed for the tab.
|
|
6508
|
+
* - **prefix** - Decoration before the label.
|
|
6509
|
+
* - **suffix** - Supporting content after the label.
|
|
6487
6510
|
*
|
|
6488
6511
|
* ### **CSS Properties:**
|
|
6489
|
-
* - **--
|
|
6512
|
+
* - **--gap** - Spacing between the label and decoration. _(default: undefined)_
|
|
6513
|
+
* - **--font-size** - undefined _(default: undefined)_
|
|
6490
6514
|
* - **--width** - undefined _(default: undefined)_
|
|
6491
6515
|
* - **--padding** - undefined _(default: undefined)_
|
|
6492
6516
|
* - **--font-size** - undefined _(default: undefined)_
|
|
@@ -3426,6 +3426,8 @@ inline-start (`start`) or inline-end (`end`) beside the panel region. */
|
|
|
3426
3426
|
onselect?: (e: CustomEvent<CustomEvent>) => void;
|
|
3427
3427
|
};
|
|
3428
3428
|
|
|
3429
|
+
type TabsItemGroupProps = {};
|
|
3430
|
+
|
|
3429
3431
|
type TabsItemProps = {
|
|
3430
3432
|
/** Establishes a relationship between a popover and its invoker button.
|
|
3431
3433
|
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement */
|
|
@@ -6230,6 +6232,25 @@ export type CustomElements = {
|
|
|
6230
6232
|
*/
|
|
6231
6233
|
"nve-tabs-group": DefineComponent<TabsGroupProps>;
|
|
6232
6234
|
|
|
6235
|
+
/**
|
|
6236
|
+
* Groups a tab item with application-owned accessory controls.
|
|
6237
|
+
* ---
|
|
6238
|
+
*
|
|
6239
|
+
*
|
|
6240
|
+
* ### **Slots:**
|
|
6241
|
+
* - _default_ - A single nve-tabs-item.
|
|
6242
|
+
* - **prefix** - Controls before the tab item.
|
|
6243
|
+
* - **suffix** - Controls after the tab item.
|
|
6244
|
+
*
|
|
6245
|
+
* ### **CSS Properties:**
|
|
6246
|
+
* - **--gap** - Spacing between the tab item and accessories. _(default: undefined)_
|
|
6247
|
+
* - **--height** - undefined _(default: undefined)_
|
|
6248
|
+
* - **--padding** - undefined _(default: undefined)_
|
|
6249
|
+
* - **--width** - undefined _(default: undefined)_
|
|
6250
|
+
* - **--border-radius** - undefined _(default: undefined)_
|
|
6251
|
+
*/
|
|
6252
|
+
"nve-tabs-item-group": DefineComponent<TabsItemGroupProps>;
|
|
6253
|
+
|
|
6233
6254
|
/**
|
|
6234
6255
|
* Represents an individual tab within a tablist, providing a selectable button for switching between content views.
|
|
6235
6256
|
* ---
|
|
@@ -6237,9 +6258,12 @@ export type CustomElements = {
|
|
|
6237
6258
|
*
|
|
6238
6259
|
* ### **Slots:**
|
|
6239
6260
|
* - _default_ - The label displayed for the tab.
|
|
6261
|
+
* - **prefix** - Decoration before the label.
|
|
6262
|
+
* - **suffix** - Supporting content after the label.
|
|
6240
6263
|
*
|
|
6241
6264
|
* ### **CSS Properties:**
|
|
6242
|
-
* - **--
|
|
6265
|
+
* - **--gap** - Spacing between the label and decoration. _(default: undefined)_
|
|
6266
|
+
* - **--font-size** - undefined _(default: undefined)_
|
|
6243
6267
|
* - **--width** - undefined _(default: undefined)_
|
|
6244
6268
|
* - **--padding** - undefined _(default: undefined)_
|
|
6245
6269
|
* - **--font-size** - undefined _(default: undefined)_
|
|
@@ -26895,6 +26895,19 @@
|
|
|
26895
26895
|
"kind": "method",
|
|
26896
26896
|
"name": "hostDisconnected"
|
|
26897
26897
|
},
|
|
26898
|
+
{
|
|
26899
|
+
"kind": "method",
|
|
26900
|
+
"name": "refreshItems",
|
|
26901
|
+
"parameters": [
|
|
26902
|
+
{
|
|
26903
|
+
"name": "previousItems",
|
|
26904
|
+
"type": {
|
|
26905
|
+
"text": "readonly HTMLElement[]"
|
|
26906
|
+
}
|
|
26907
|
+
}
|
|
26908
|
+
],
|
|
26909
|
+
"description": "Updates the focus order after configured items change without moving focus."
|
|
26910
|
+
},
|
|
26898
26911
|
{
|
|
26899
26912
|
"kind": "method",
|
|
26900
26913
|
"name": "#initializeTabIndex",
|
|
@@ -46685,6 +46698,14 @@
|
|
|
46685
46698
|
"name": "*",
|
|
46686
46699
|
"module": "home/runner/work/elements/elements/projects/core/src/tabs/tabs-group.js"
|
|
46687
46700
|
}
|
|
46701
|
+
},
|
|
46702
|
+
{
|
|
46703
|
+
"kind": "js",
|
|
46704
|
+
"name": "*",
|
|
46705
|
+
"declaration": {
|
|
46706
|
+
"name": "*",
|
|
46707
|
+
"module": "home/runner/work/elements/elements/projects/core/src/tabs/tabs-item-group.js"
|
|
46708
|
+
}
|
|
46688
46709
|
}
|
|
46689
46710
|
]
|
|
46690
46711
|
},
|
|
@@ -46826,6 +46847,88 @@
|
|
|
46826
46847
|
}
|
|
46827
46848
|
]
|
|
46828
46849
|
},
|
|
46850
|
+
{
|
|
46851
|
+
"kind": "javascript-module",
|
|
46852
|
+
"path": "/src/tabs/tabs-item-group.js",
|
|
46853
|
+
"declarations": [
|
|
46854
|
+
{
|
|
46855
|
+
"kind": "class",
|
|
46856
|
+
"description": "Groups a tab item with application-owned accessory controls.",
|
|
46857
|
+
"name": "TabsItemGroup",
|
|
46858
|
+
"cssProperties": [
|
|
46859
|
+
{
|
|
46860
|
+
"description": "Spacing between the tab item and accessories. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)",
|
|
46861
|
+
"name": "--gap"
|
|
46862
|
+
},
|
|
46863
|
+
{
|
|
46864
|
+
"name": "--height",
|
|
46865
|
+
"description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height)"
|
|
46866
|
+
},
|
|
46867
|
+
{
|
|
46868
|
+
"name": "--padding",
|
|
46869
|
+
"description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)"
|
|
46870
|
+
},
|
|
46871
|
+
{
|
|
46872
|
+
"name": "--width",
|
|
46873
|
+
"description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width)"
|
|
46874
|
+
},
|
|
46875
|
+
{
|
|
46876
|
+
"name": "--border-radius",
|
|
46877
|
+
"description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)"
|
|
46878
|
+
}
|
|
46879
|
+
],
|
|
46880
|
+
"slots": [
|
|
46881
|
+
{
|
|
46882
|
+
"description": "A single nve-tabs-item.",
|
|
46883
|
+
"name": ""
|
|
46884
|
+
},
|
|
46885
|
+
{
|
|
46886
|
+
"description": "Controls before the tab item.",
|
|
46887
|
+
"name": "prefix"
|
|
46888
|
+
},
|
|
46889
|
+
{
|
|
46890
|
+
"description": "Controls after the tab item.",
|
|
46891
|
+
"name": "suffix"
|
|
46892
|
+
}
|
|
46893
|
+
],
|
|
46894
|
+
"members": [],
|
|
46895
|
+
"superclass": {
|
|
46896
|
+
"name": "LitElement",
|
|
46897
|
+
"package": "lit"
|
|
46898
|
+
},
|
|
46899
|
+
"tagName": "nve-tabs-item-group",
|
|
46900
|
+
"customElement": true,
|
|
46901
|
+
"metadata": {
|
|
46902
|
+
"unitTests": true,
|
|
46903
|
+
"apiReview": true,
|
|
46904
|
+
"performance": true,
|
|
46905
|
+
"stable": true,
|
|
46906
|
+
"vqa": true,
|
|
46907
|
+
"responsive": true,
|
|
46908
|
+
"themes": true,
|
|
46909
|
+
"aria": "#",
|
|
46910
|
+
"entrypoint": "@nvidia-elements/core/tabs",
|
|
46911
|
+
"example": "",
|
|
46912
|
+
"package": true,
|
|
46913
|
+
"documentation": "https://nvidia.github.io/elements/docs/elements/tabs/",
|
|
46914
|
+
"since": "0.0.0",
|
|
46915
|
+
"status": "beta",
|
|
46916
|
+
"behavior": "content",
|
|
46917
|
+
"markdown": "## nve-tabs-item-group\n\nGroups a tab item with application-owned accessory controls.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | A single nve-tabs-item. |\n| prefix | `string` | Controls before the tab item. |\n| suffix | `string` | Controls after the tab item. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --gap | `string` | Spacing between the tab item and accessories. [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
|
|
46918
|
+
}
|
|
46919
|
+
}
|
|
46920
|
+
],
|
|
46921
|
+
"exports": [
|
|
46922
|
+
{
|
|
46923
|
+
"kind": "js",
|
|
46924
|
+
"name": "TabsItemGroup",
|
|
46925
|
+
"declaration": {
|
|
46926
|
+
"name": "TabsItemGroup",
|
|
46927
|
+
"module": "/src/tabs/tabs-item-group.js"
|
|
46928
|
+
}
|
|
46929
|
+
}
|
|
46930
|
+
]
|
|
46931
|
+
},
|
|
46829
46932
|
{
|
|
46830
46933
|
"kind": "javascript-module",
|
|
46831
46934
|
"path": "/src/tabs/tabs.js",
|
|
@@ -46835,6 +46938,10 @@
|
|
|
46835
46938
|
"description": "Represents an individual tab within a tablist, providing a selectable button for switching between content views.",
|
|
46836
46939
|
"name": "TabsItem",
|
|
46837
46940
|
"cssProperties": [
|
|
46941
|
+
{
|
|
46942
|
+
"description": "Spacing between the label and decoration. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)",
|
|
46943
|
+
"name": "--gap"
|
|
46944
|
+
},
|
|
46838
46945
|
{
|
|
46839
46946
|
"name": "--font-size",
|
|
46840
46947
|
"description": "[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)"
|
|
@@ -46880,6 +46987,14 @@
|
|
|
46880
46987
|
{
|
|
46881
46988
|
"description": "The label displayed for the tab.",
|
|
46882
46989
|
"name": ""
|
|
46990
|
+
},
|
|
46991
|
+
{
|
|
46992
|
+
"description": "Decoration before the label.",
|
|
46993
|
+
"name": "prefix"
|
|
46994
|
+
},
|
|
46995
|
+
{
|
|
46996
|
+
"description": "Supporting content after the label.",
|
|
46997
|
+
"name": "suffix"
|
|
46883
46998
|
}
|
|
46884
46999
|
],
|
|
46885
47000
|
"members": [
|
|
@@ -47547,7 +47662,7 @@
|
|
|
47547
47662
|
"since": "0.10.0",
|
|
47548
47663
|
"status": "stable",
|
|
47549
47664
|
"behavior": "button",
|
|
47550
|
-
"markdown": "## nve-tabs-item\n\nRepresents an individual tab within a tablist, providing a selectable button for switching between content views.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n <nve-tabs>\n <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n </nve-tabs>\n <div slot=\"overview\">overview content</div>\n <div slot=\"details\">details content</div>\n <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The label displayed for the tab. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| commandForElement (commandfor) | property: `HTMLElement \\| null`; attribute: `string` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| form | property: `string \\| HTMLFormElement \\| null`; attribute: `string` | Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://mdn.dev/ElementInternals/form |\n| interestForElement (interestfor) | property: `HTMLElement \\| null`; attribute: `string` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| popoverTargetElement (popovertarget) | property: `HTMLElement \\| null`; attribute: `string` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| readOnly (readonly) | `boolean` | Indicates whether the element is a noninteractive visual treatment instead of a button. https://mdn.dev/HTML/Attributes/readonly |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within a form element. https://mdn.dev/HTML/Element/button#attr-type |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
|
|
47665
|
+
"markdown": "## nve-tabs-item\n\nRepresents an individual tab within a tablist, providing a selectable button for switching between content views.\n\n### Example\n\n```html\n<nve-tabs-group id=\"tab-group-default\">\n <nve-tabs>\n <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n </nve-tabs>\n <div slot=\"overview\">overview content</div>\n <div slot=\"details\">details content</div>\n <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/tabs/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The label displayed for the tab. |\n| prefix | `string` | Decoration before the label. |\n| suffix | `string` | Supporting content after the label. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| commandForElement (commandfor) | property: `HTMLElement \\| null`; attribute: `string` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| form | property: `string \\| HTMLFormElement \\| null`; attribute: `string` | Associates the button with a form. Set the property to a form element or its ID. The HTML attribute accepts only the form ID. Reading the property returns the associated form element or `null`. https://mdn.dev/ElementInternals/form |\n| interestForElement (interestfor) | property: `HTMLElement \\| null`; attribute: `string` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| name | `string` | The name of the button, submitted as a pair with the button value as part of the form data. https://mdn.dev/HTML/Element/button#attr-name |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| popoverTargetElement (popovertarget) | property: `HTMLElement \\| null`; attribute: `string` | Establishes a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| readOnly (readonly) | `boolean` | Indicates whether the element is a noninteractive visual treatment instead of a button. https://mdn.dev/HTML/Attributes/readonly |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within a form element. https://mdn.dev/HTML/Element/button#attr-type |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --gap | `string` | Spacing between the label and decoration. [MDN](https://mdn.dev/CSS/gap) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |"
|
|
47551
47666
|
}
|
|
47552
47667
|
},
|
|
47553
47668
|
{
|
|
@@ -47756,6 +47871,67 @@
|
|
|
47756
47871
|
}
|
|
47757
47872
|
]
|
|
47758
47873
|
},
|
|
47874
|
+
{
|
|
47875
|
+
"kind": "javascript-module",
|
|
47876
|
+
"path": "/src/tabs/utils.js",
|
|
47877
|
+
"declarations": [
|
|
47878
|
+
{
|
|
47879
|
+
"kind": "function",
|
|
47880
|
+
"name": "getTabItems",
|
|
47881
|
+
"return": {
|
|
47882
|
+
"type": {
|
|
47883
|
+
"text": "TabsItem[]"
|
|
47884
|
+
}
|
|
47885
|
+
},
|
|
47886
|
+
"parameters": [
|
|
47887
|
+
{
|
|
47888
|
+
"name": "entries",
|
|
47889
|
+
"type": {
|
|
47890
|
+
"text": "readonly Element[]",
|
|
47891
|
+
"_sourceAliases": []
|
|
47892
|
+
}
|
|
47893
|
+
}
|
|
47894
|
+
],
|
|
47895
|
+
"description": "Resolves the tab controls owned by the tab strip, in visual order."
|
|
47896
|
+
},
|
|
47897
|
+
{
|
|
47898
|
+
"kind": "function",
|
|
47899
|
+
"name": "isTabItemTabbable",
|
|
47900
|
+
"return": {
|
|
47901
|
+
"type": {
|
|
47902
|
+
"text": "boolean"
|
|
47903
|
+
}
|
|
47904
|
+
},
|
|
47905
|
+
"parameters": [
|
|
47906
|
+
{
|
|
47907
|
+
"name": "item",
|
|
47908
|
+
"type": {
|
|
47909
|
+
"text": "TabsItem",
|
|
47910
|
+
"_sourceAliases": []
|
|
47911
|
+
}
|
|
47912
|
+
}
|
|
47913
|
+
]
|
|
47914
|
+
}
|
|
47915
|
+
],
|
|
47916
|
+
"exports": [
|
|
47917
|
+
{
|
|
47918
|
+
"kind": "js",
|
|
47919
|
+
"name": "getTabItems",
|
|
47920
|
+
"declaration": {
|
|
47921
|
+
"name": "getTabItems",
|
|
47922
|
+
"module": "/src/tabs/utils.js"
|
|
47923
|
+
}
|
|
47924
|
+
},
|
|
47925
|
+
{
|
|
47926
|
+
"kind": "js",
|
|
47927
|
+
"name": "isTabItemTabbable",
|
|
47928
|
+
"declaration": {
|
|
47929
|
+
"name": "isTabItemTabbable",
|
|
47930
|
+
"module": "/src/tabs/utils.js"
|
|
47931
|
+
}
|
|
47932
|
+
}
|
|
47933
|
+
]
|
|
47934
|
+
},
|
|
47759
47935
|
{
|
|
47760
47936
|
"kind": "javascript-module",
|
|
47761
47937
|
"path": "/src/tag/define.js",
|
package/dist/data.html.json
CHANGED
|
@@ -5181,9 +5181,20 @@
|
|
|
5181
5181
|
}
|
|
5182
5182
|
]
|
|
5183
5183
|
},
|
|
5184
|
+
{
|
|
5185
|
+
"name": "nve-tabs-item-group",
|
|
5186
|
+
"description": "Groups a tab item with application-owned accessory controls.\n---\n\n\n### **Slots:**\n - _default_ - A single nve-tabs-item.\n- **prefix** - Controls before the tab item.\n- **suffix** - Controls after the tab item.\n\n### **CSS Properties:**\n - **--gap** - Spacing between the tab item and accessories. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_",
|
|
5187
|
+
"attributes": [],
|
|
5188
|
+
"references": [
|
|
5189
|
+
{
|
|
5190
|
+
"name": "Documentation",
|
|
5191
|
+
"url": "https://nvidia.github.io/elements/docs/elements/tabs/"
|
|
5192
|
+
}
|
|
5193
|
+
]
|
|
5194
|
+
},
|
|
5184
5195
|
{
|
|
5185
5196
|
"name": "nve-tabs-item",
|
|
5186
|
-
"description": "Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n---\n\n\n### **Slots:**\n - _default_ - The label displayed for the tab.\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_",
|
|
5197
|
+
"description": "Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n---\n\n\n### **Slots:**\n - _default_ - The label displayed for the tab.\n- **prefix** - Decoration before the label.\n- **suffix** - Supporting content after the label.\n\n### **CSS Properties:**\n - **--gap** - Spacing between the label and decoration. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_",
|
|
5187
5198
|
"attributes": [
|
|
5188
5199
|
{
|
|
5189
5200
|
"name": "selected",
|
package/dist/data.snippets.json
CHANGED
|
@@ -188,33 +188,6 @@
|
|
|
188
188
|
"description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
|
|
189
189
|
"body": "<nve-dialog size=\"${6:md}\" closable>\n <nve-dialog-header>\n <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n </nve-dialog-header>\n <p nve-text=\"body\">${2:Content}</p>\n <nve-dialog-footer>\n <nve-button>${3:Cancel}</nve-button>\n <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n </nve-dialog-footer>\n</nve-dialog>\n$0\n"
|
|
190
190
|
},
|
|
191
|
-
"Card": {
|
|
192
|
-
"srcFile": "card.snippets.html",
|
|
193
|
-
"prefix": [
|
|
194
|
-
"card"
|
|
195
|
-
],
|
|
196
|
-
"type": "pattern",
|
|
197
|
-
"description": "Basic Card with header and footer",
|
|
198
|
-
"body": "<nve-card>\n <nve-card-header>\n <div>\n <h2>${1:Title}</h2>\n <p>${2:Sub Title}</p>\n </div>\n </nve-card-header>\n <nve-card-content>\n ${3:\n <p>card content</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <nve-button style=\"margin-left: auto\">Action</nve-button>\n </nve-card-footer>\n</nve-card>\n"
|
|
199
|
-
},
|
|
200
|
-
"Media Card": {
|
|
201
|
-
"srcFile": "card.snippets.html",
|
|
202
|
-
"prefix": [
|
|
203
|
-
"media-card"
|
|
204
|
-
],
|
|
205
|
-
"type": "pattern",
|
|
206
|
-
"description": "Basic media Card with card content and card footer",
|
|
207
|
-
"body": "<nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${1:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n</nve-card>\n"
|
|
208
|
-
},
|
|
209
|
-
"Media Card Grid": {
|
|
210
|
-
"srcFile": "card.snippets.html",
|
|
211
|
-
"prefix": [
|
|
212
|
-
"media-card-grid"
|
|
213
|
-
],
|
|
214
|
-
"type": "pattern",
|
|
215
|
-
"description": "Grid layout with 3 media cards",
|
|
216
|
-
"body": "<section nve-layout=\"grid span-items:4 gap:md\">\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${1:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${4:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${7:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n</section>\n"
|
|
217
|
-
},
|
|
218
191
|
"Button Group": {
|
|
219
192
|
"srcFile": "button-group.snippets.html",
|
|
220
193
|
"prefix": [
|
|
@@ -251,6 +224,33 @@
|
|
|
251
224
|
"description": "Simple vertical button group with three icon buttons.",
|
|
252
225
|
"body": "<nve-button-group orientation=\"vertical\">\n <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
|
|
253
226
|
},
|
|
227
|
+
"Card": {
|
|
228
|
+
"srcFile": "card.snippets.html",
|
|
229
|
+
"prefix": [
|
|
230
|
+
"card"
|
|
231
|
+
],
|
|
232
|
+
"type": "pattern",
|
|
233
|
+
"description": "Basic Card with header and footer",
|
|
234
|
+
"body": "<nve-card>\n <nve-card-header>\n <div>\n <h2>${1:Title}</h2>\n <p>${2:Sub Title}</p>\n </div>\n </nve-card-header>\n <nve-card-content>\n ${3:\n <p>card content</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <nve-button style=\"margin-left: auto\">Action</nve-button>\n </nve-card-footer>\n</nve-card>\n"
|
|
235
|
+
},
|
|
236
|
+
"Media Card": {
|
|
237
|
+
"srcFile": "card.snippets.html",
|
|
238
|
+
"prefix": [
|
|
239
|
+
"media-card"
|
|
240
|
+
],
|
|
241
|
+
"type": "pattern",
|
|
242
|
+
"description": "Basic media Card with card content and card footer",
|
|
243
|
+
"body": "<nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${1:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n</nve-card>\n"
|
|
244
|
+
},
|
|
245
|
+
"Media Card Grid": {
|
|
246
|
+
"srcFile": "card.snippets.html",
|
|
247
|
+
"prefix": [
|
|
248
|
+
"media-card-grid"
|
|
249
|
+
],
|
|
250
|
+
"type": "pattern",
|
|
251
|
+
"description": "Grid layout with 3 media cards",
|
|
252
|
+
"body": "<section nve-layout=\"grid span-items:4 gap:md\">\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${1:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${4:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n\n <nve-card style=\"height: 100%; width: 100%;\">\n <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n <nve-card-content>\n ${7:\n <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n }\n </nve-card-content>\n <nve-card-footer>\n <div nve-layout=\"grid span-items:6 gap:xs\">\n <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n </div>\n </nve-card-footer>\n </nve-card>\n</section>\n"
|
|
253
|
+
},
|
|
254
254
|
"Alert Group": {
|
|
255
255
|
"srcFile": "alert.snippets.html",
|
|
256
256
|
"prefix": [
|
package/dist/date/date2.js
CHANGED
package/dist/dialog/dialog2.js
CHANGED
package/dist/divider/divider2.js
CHANGED
package/dist/dot/dot2.js
CHANGED