@nvidia-elements/core 0.0.0 → 0.0.1

package/dist/data.snippets.json

@@ -1,299 +0,0 @@
-{
-  "Toolbar with Progressive Filter Chip": {
-    "srcFile": "toolbar.snippets.html",
-    "prefix": [
-      "toolbar-with-progressive-filter-chip"
-    ],
-    "type": "pattern",
-    "description": "Toolbar with progressive-filter-chip",
-    "body": "<div style=\"width: 100%;\">\n  <nve-toolbar container=\"flat\" style=\"width: 100%;\">\n    <nve-icon-button readonly icon-name=\"filter\" container=\"flat\" slot=\"prefix\"></nve-icon-button>\n    <nve-progressive-filter-chip closable>\n      <select aria-label=\"dataset\">\n        <option selected>${1:status}</option>\n        <option>${2:workload}</option>\n      </select>\n      <select aria-label=\"condition\">\n        <option selected>${3:filter by}</option>\n        <option>${4:sort by}</option>\n      </select>\n      <select multiple aria-label=\"filter\">\n        <option selected>${5:progress}</option>\n        <option>${6:pending}</option>\n        <option>${7:success}</option>\n        <option>${8:failed}</option>\n      </select>\n    </nve-progressive-filter-chip>\n    <nve-combobox container=\"flat\" style=\"flex-grow: 1; min-width: 150px;\">\n      <input type=\"search\" placeholder=\"${9:Add Filter}\">\n      <datalist>\n        <option value=\"${10:Status}\"></option>\n        <option value=\"${11:Priority}\"></option>\n        <option value=\"${12:Date}\"></option>\n        <option value=\"${13:Session}\"></option>\n        <option value=\"${14:Configuration}\"></option>\n        <option value=\"${15:Contains}\"></option>\n      </datalist>\n    </nve-combobox>\n    <nve-icon-button container=\"flat\" aria-label=\"clear filters\" icon-name=\"cancel\" slot=\"suffix\"></nve-icon-button>\n    <nve-button slot=\"suffix\">${16:Save Filters}</nve-button>\n  </nve-toolbar>\n</div>\n"
-  },
-  "Tabs": {
-    "srcFile": "tabs.snippets.html",
-    "prefix": [
-      "tabs"
-    ],
-    "type": "pattern",
-    "description": "Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.",
-    "body": "<nve-tabs>\n  <nve-tabs-item selected>${1:Tab 1}</nve-tabs-item>\n  <nve-tabs-item>${2:Tab 2}</nve-tabs-item>\n  <nve-tabs-item>${3:Tab 3}</nve-tabs-item>\n  <nve-tabs-item>${4:Tab 4}</nve-tabs-item>\n  <nve-tabs-item disabled>disabled</nve-tabs-item>\n</nve-tabs>\n$0\n"
-  },
-  "Vertical Tabs": {
-    "srcFile": "tabs.snippets.html",
-    "prefix": [
-      "vertical-tabs"
-    ],
-    "type": "pattern",
-    "description": "Tabs can be used as the foundation for a side menu by enabling vertical mode.",
-    "body": "<nve-tabs>\n  <nve-tabs-item selected>${1:Tab 1}</nve-tabs-item>\n  <nve-tabs-item>${2:Tab 2}</nve-tabs-item>\n  <nve-tabs-item>${3:Tab 3}</nve-tabs-item>\n  <nve-tabs-item>${4:Tab 4}</nve-tabs-item>\n  <nve-tabs-item disabled>disabled</nve-tabs-item>\n</nve-tabs>\n$0\n"
-  },
-  "Tabs with Dot": {
-    "srcFile": "tabs.snippets.html",
-    "prefix": [
-      "tabs-with-dot"
-    ],
-    "type": "pattern",
-    "description": "Dots and icons to tabs by slotting content.",
-    "body": "<nve-tabs>\n  <nve-tabs-item selected>${1:Tab 1}</nve-tabs-item>\n  <nve-tabs-item>${2:Tab 2}</nve-tabs-item>\n  <nve-tabs-item>${3:Tab 3}</nve-tabs-item>\n  <nve-tabs-item selected>\n    ${4:Tab 4}\n    <nve-dot aria-label=\"${5:10} notifications\">${5:10}</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item disabled>disabled</nve-tabs-item>\n</nve-tabs>\n$0\n"
-  },
-  "Steps": {
-    "srcFile": "steps.snippets.html",
-    "prefix": [
-      "steps"
-    ],
-    "type": "pattern",
-    "description": "Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.",
-    "body": "<nve-steps behavior-select container=\"${1:condensed}\">\n  <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n  <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n  <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n  <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
-  },
-  "vertical-Steps": {
-    "srcFile": "steps.snippets.html",
-    "prefix": [
-      "vertical-steps"
-    ],
-    "type": "pattern",
-    "description": "Steps can be used as the foundation for a side menu by enabling vertical mode.",
-    "body": "<nve-steps behavior-select vertical container=\"${1:condensed}\">\n  <nve-steps-item status=\"success\">${2:Step 1}</nve-steps-item>\n  <nve-steps-item status=\"danger\">${3:Step 2}</nve-steps-item>\n  <nve-steps-item selected>${4:Step 3}</nve-steps-item>\n  <nve-steps-item status=\"pending\">${5:Step 4}</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n$0\n"
-  },
-  "Search": {
-    "srcFile": "search.snippets.html",
-    "prefix": [
-      "search-inline"
-    ],
-    "type": "pattern",
-    "description": "Basic inline search",
-    "body": "<nve-search>\n  <input type=\"search\" aria-label=\"${2:search}\" placeholder=\"${3:search}\">\n</nve-search>\n"
-  },
-  "Page Header": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
-  },
-  "Page Header with Links": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header-with-links"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout with links.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
-  },
-  "Page": {
-    "srcFile": "page.snippets.html",
-    "prefix": [
-      "page"
-    ],
-    "type": "pattern",
-    "description": "Basic page layout.",
-    "body": "<nve-page style=\"--padding: var(--nve-ref-space-lg)\"> $0 </nve-page>\n"
-  },
-  "Page Panel": {
-    "srcFile": "page.snippets.html",
-    "prefix": [
-      "page-panel"
-    ],
-    "type": "pattern",
-    "description": "Basic page panel layout.",
-    "body": "<nve-page-panel slot=\"${1|left,right,bottom|}\">\n  <nve-page-panel-header>\n    <h3 nve-text=\"heading medium sm\">${2:Panel Header}</h3>\n  </nve-page-panel-header>\n  <nve-page-panel-content>\n    ${3:\n    <p nve-text=\"body\">Panel Content</p>\n    }\n  </nve-page-panel-content>\n</nve-page-panel>\n"
-  },
-  "Page Aside": {
-    "srcFile": "page.snippets.html",
-    "prefix": [
-      "page-aside"
-    ],
-    "type": "pattern",
-    "description": "Basic page aside using toolbar.",
-    "body": "<nve-toolbar slot=\"${1|left-aside,right-aside|}\" orientation=\"vertical\"> $2 </nve-toolbar>\n"
-  },
-  "Page Footer": {
-    "srcFile": "page.snippets.html",
-    "prefix": [
-      "page-footer"
-    ],
-    "type": "pattern",
-    "description": "Basic page footer using toolbar.",
-    "body": "<nve-toolbar slot=\"${1|footer,sub-footer|}\">\n  <a href=\"#\" nve-text=\"link sm\">link</a>\n  <a href=\"#\" nve-text=\"link sm\">link</a>\n  <a href=\"#\" nve-text=\"link sm\">link</a>\n</nve-toolbar>\n"
-  },
-  "Page Subheader": {
-    "srcFile": "page.snippets.html",
-    "prefix": [
-      "page-subheader"
-    ],
-    "type": "pattern",
-    "description": "Basic page subheader using toolbar.",
-    "body": "<nve-toolbar slot=\"subheader\">\n  <h2 nve-text=\"emphasis heading sm\">${1:Subheader}</h2>\n</nve-toolbar>\n"
-  },
-  "Input Group": {
-    "srcFile": "input.snippets.html",
-    "prefix": [
-      "input-group"
-    ],
-    "type": "pattern",
-    "description": "Combining form elements with input group.",
-    "body": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\">\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n$0\n"
-  },
-  "Range Group": {
-    "srcFile": "input.snippets.html",
-    "prefix": [
-      "range-group"
-    ],
-    "type": "pattern",
-    "description": "Multiple date inputs in an input group.",
-    "body": "<div nve-layout=\"row align:vertical-center\">\n  <nve-input-group>\n    <nve-select style=\"width:150px\">\n      <select aria-label=\"date type\">\n        <option value=\"1\">recording date</option>\n        <option value=\"2\">process date</option>\n      </select>\n    </nve-select>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly>start</nve-button>\n      <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\">\n    </nve-date>\n    <nve-date style=\"width:220px\">\n      <nve-button container=\"flat\" readonly>end</nve-button>\n      <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\">\n    </nve-date>\n    <nve-icon-button aria-label=\"remove filter\" icon-name=\"cancel\"></nve-icon-button>\n  </nve-input-group>\n</div>\n$0\n"
-  },
-  "Dropdown": {
-    "srcFile": "dropdown.snippets.html",
-    "prefix": [
-      "dropdown"
-    ],
-    "type": "pattern",
-    "description": "Generic dropdown element for rendering a variety of different content within a dropdown container.",
-    "body": "<nve-button id=\"btn\">${4:Trigger}</nve-button>\n\n<nve-dropdown anchor=\"btn\" closable>\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">${1:Title}</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">${3:Footer Text}</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n$0\n"
-  },
-  "Dropdown with Radio": {
-    "srcFile": "dropdown.snippets.html",
-    "prefix": [
-      "dropdown-radio"
-    ],
-    "type": "pattern",
-    "description": "Dropdown with radio select pattern",
-    "body": "<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n\n<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>${1:Sort By}</label>\n\n    <nve-radio>\n      <label>${2:Completed}</label>\n      <input type=\"radio\" checked>\n      <nve-control-message>${3:latest completed tasks}</nve-control-message>\n    </nve-radio>\n\n    <nve-radio>\n      <label>${4:Failing}</label>\n      <input type=\"radio\">\n      <nve-control-message>${5:latest failing tasks}</nve-control-message>\n    </nve-radio>\n\n    <nve-radio>\n      <label>${6:Status}</label>\n      <input type=\"radio\">\n      <nve-control-message>${7:task status priority}</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n$0\n"
-  },
-  "Dropdown with Checkbox": {
-    "srcFile": "dropdown.snippets.html",
-    "prefix": [
-      "dropdown-checkbox"
-    ],
-    "type": "pattern",
-    "description": "Dropdown with checkbox select pattern",
-    "body": "<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n\n<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>${1:Test Suites}</label>\n\n    <nve-checkbox>\n      <label>${2:Local}</label>\n      <input type=\"checkbox\">\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>${3:Nightly}</label>\n      <input type=\"checkbox\" checked>\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>${4:Remote}</label>\n      <input type=\"checkbox\">\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n$0\n"
-  },
-  "Dialog": {
-    "srcFile": "dialog.snippets.html",
-    "prefix": [
-      "dialog"
-    ],
-    "type": "pattern",
-    "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
-    "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"
-  },
-  "Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "card"
-    ],
-    "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div slot=\"title\">${1:Title}</div>\n    <div slot=\"subtitle\">${2:Sub Title}</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"
-  },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card"
-    ],
-    "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "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"
-  },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card-grid"
-    ],
-    "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "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"
-  },
-  "Button Group": {
-    "srcFile": "button-group.snippets.html",
-    "prefix": [
-      "button-group"
-    ],
-    "type": "pattern",
-    "description": "Simple button group with three icons.",
-    "body": "<nve-button-group>\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$0\n"
-  },
-  "Button Group Rounded": {
-    "srcFile": "button-group.snippets.html",
-    "prefix": [
-      "button-group-rounded"
-    ],
-    "type": "pattern",
-    "description": "Rounded button group with three icons.",
-    "body": "<nve-button-group container=\"rounded\">\n  <nve-icon-button selected icon-name=\"${1:image}\"></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"
-  },
-  "Split Button": {
-    "srcFile": "button-group.snippets.html",
-    "prefix": [
-      "split-button"
-    ],
-    "type": "pattern",
-    "description": "Divided button with primary and secondary actions.",
-    "body": "<nve-button-group>\n  <nve-button>${1:Button Text}</nve-button>\n  <nve-divider orientation=\"vertical\"></nve-divider>\n  <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n</nve-button-group>\n$0\n"
-  },
-  "Button Group Vertical": {
-    "srcFile": "button-group.snippets.html",
-    "prefix": [
-      "button-group-vertical"
-    ],
-    "type": "pattern",
-    "description": "Simple vertical button group with three icon buttons.",
-    "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"
-  },
-  "Alert Group": {
-    "srcFile": "alert.snippets.html",
-    "prefix": [
-      "alert-group"
-    ],
-    "type": "pattern",
-    "description": "Alert group with two alerts.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert closable>${3:Alert Text}</nve-alert>\n  <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Alert with Action": {
-    "srcFile": "alert.snippets.html",
-    "prefix": [
-      "alert-action"
-    ],
-    "type": "pattern",
-    "description": "Alert with action button.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Multiline Alert ": {
-    "srcFile": "alert.snippets.html",
-    "prefix": [
-      "multiline-alert"
-    ],
-    "type": "pattern",
-    "description": "Alert text and preformatted code output.",
-    "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Accordion": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion"
-    ],
-    "type": "pattern",
-    "description": "Basic accordion with title and content slot.",
-    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div slot=\"title\">${2:Title}</div>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${3:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
-  },
-  "Accordion with Actions": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion-actions"
-    ],
-    "type": "pattern",
-    "description": "Accordion with action buttons in header.",
-    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div slot=\"title\">${2:Title}</div>\n\n    <nve-icon-button container=\"flat\" icon-name=\"${3:add}\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"${4:delete}\" size=\"sm\" slot=\"actions\"></nve-icon-button>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${5:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
-  },
-  "Accorion Group": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion-group"
-    ],
-    "type": "pattern",
-    "description": "Accordion group with two accordion children.",
-    "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${2:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${3:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${4:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${5:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${6:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${7:Content} </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n$0\n"
-  }
-}

package/dist/date/date.d.ts

@@ -1,40 +0,0 @@
-import { ContainerElement } from '../internal';
-import { Control } from '../forms';
-import { IconButton } from '../icon-button';
-/**
- * @element nve-date
- * @description A date picker is a control that enables users to choose a date value.
- * @since 0.3.0
- * @entrypoint \@nvidia-elements/core/date
- * @cssprop --padding
- * @cssprop --font-size
- * @cssprop --height
- * @cssprop --background
- * @cssprop --color
- * @cssprop --border-radius
- * @cssprop --border
- * @cssprop --border-bottom
- * @cssprop --cursor
- * @cssprop --font-weight
- * @cssprop --width
- * @cssprop --max-width
- * @cssprop --min-width
- * @csspart icon-button - The calendar icon button element
- * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
- */
-export declare class Date extends Control implements ContainerElement {
-    /**
-     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
-     * Use when embedding within another container such as a toolbar.
-     */
-    container?: 'flat';
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-    };
-    static elementDefinitions: {
-        [IconButton.metadata.tag]: typeof IconButton;
-    };
-    protected get suffixContent(): import('lit-html').TemplateResult<1>;
-}

package/dist/date/date.examples.js

@@ -1,6 +0,0 @@
-//#region src/date/date.examples.ts
-var e = "";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=date.examples.js.map

package/dist/date/date.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date.examples.js","names":[],"sources":["../../src/date/date.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/datetime/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/month/define.js';\nimport '@nvidia-elements/core/week/define.js';\nimport '@nvidia-elements/core/time/define.js';\n\nexport default {\n  title: 'Elements/Date',\n  component: 'nve-date',\n};\n\n/**\n * @summary Basic date picker input with label and message for selecting calendar dates.\n */\nexport const Default = {\n  render: () => html`\n<nve-date>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n`\n};\n\n/**\n * @summary Date picker with datalist providing suggested date options for quick selection from predefined dates.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-date>\n  <label>label</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-07-22\"></option>\n    <option value=\"2018-01-01\"></option>\n    <option value=\"2018-12-31\"></option>\n  </datalist>\n</nve-date>\n  `\n}\n\n/**\n * @summary Date pickers with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>`\n};\n\n/**\n * @summary Date pickers with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>`\n};\n\n/**\n * @summary Date range input with start and end date pickers for selecting time periods and date intervals.\n */\nexport const Range = {\n  render: () => html`\n<nve-input-group>\n  <label>date range</label>\n  <nve-date>\n    <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n  </nve-date>\n  <nve-date>\n    <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n  </nve-date>\n  <nve-control-message>message</nve-control-message>\n</nve-input-group>\n`\n};\n\n/**\n * @summary Collection of temporal input types including date, datetime, month, week, time, and date range pickers.\n */\nexport const Types = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n`\n}\n\n/**\n * @summary Date picker with fit-text styling that adjusts width to match the selected date value for compact displays.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<nve-date fit-text>\n  <label>date</label>\n  <input type=\"date\" value=\"2017-06-01\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/date/date.examples.json

@@ -1,75 +0,0 @@
-{
-  "element": "nve-date",
-  "entrypoint": "@nvidia-elements/core/date/date.examples.json",
-  "items": [
-    {
-      "id": "core-date_default",
-      "name": "Default",
-      "template": "<nve-date>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
-      "summary": "Basic date picker input with label and message for selecting calendar dates.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-date_datalist",
-      "name": "Datalist",
-      "template": "<nve-date>\n  <label>label</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-07-22\"></option>\n    <option value=\"2018-01-01\"></option>\n    <option value=\"2018-12-31\"></option>\n  </datalist>\n</nve-date>\n",
-      "summary": "Date picker with datalist providing suggested date options for quick selection from predefined dates.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-date_vertical",
-      "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date>\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date>\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
-      "summary": "Date pickers with vertical layout including validation states for disabled, success, and error.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-date_horizontal",
-      "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"date\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-date>\n  <nve-date layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"date\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-date>\n</div>\n",
-      "summary": "Date pickers with horizontal layout showing validation states for inline forms and compact layouts.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-date_range",
-      "name": "Range",
-      "template": "<nve-input-group>\n  <label>date range</label>\n  <nve-date>\n    <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n  </nve-date>\n  <nve-date>\n    <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n  </nve-date>\n  <nve-control-message>message</nve-control-message>\n</nve-input-group>\n",
-      "summary": "Date range input with start and end date pickers for selecting time periods and date intervals.",
-      "description": "",
-      "composition": true,
-      "tags": []
-    },
-    {
-      "id": "core-date_types",
-      "name": "Types",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-date layout=\"horizontal\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"horizontal\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"horizontal\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"horizontal\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"horizontal\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-input-group layout=\"horizontal\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n</div>\n",
-      "summary": "Collection of temporal input types including date, datetime, month, week, time, and date range pickers.",
-      "description": "",
-      "composition": true,
-      "tags": []
-    },
-    {
-      "id": "core-date_fit-text",
-      "name": "FitText",
-      "template": "<nve-date fit-text>\n  <label>date</label>\n  <input type=\"date\" value=\"2017-06-01\" />\n  <nve-control-message>message</nve-control-message>\n</nve-date>\n",
-      "summary": "Date picker with fit-text styling that adjusts width to match the selected date value for compact displays.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    }
-  ]
-}

package/dist/date/date.js

@@ -1,6 +0,0 @@
-//#region src/date/date.css?inline
-var e = ":host{--width: 100%;width:var(--width)}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=date.js.map

package/dist/date/date.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date.js","names":[],"sources":["../../src/date/date.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --width: 100%;\n  width: var(--width);\n}\n"],"mappings":""}

package/dist/date/date2.js

@@ -1,39 +0,0 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
-import { useStyles as n } from "../internal/styles/index.js";
-import { Control as r } from "../forms/control/control2.js";
-import { IconButton as i } from "../icon-button/icon-button2.js";
-import { inputStyles as a } from "../input/input2.js";
-import o from "./date.js";
-import { html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
-//#region src/date/date.ts
-var l = class extends r {
-	static {
-		this.styles = n([
-			...r.styles,
-			a,
-			o
-		]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-date",
-			version: "0.0.0"
-		};
-	}
-	static {
-		this.elementDefinitions = { [i.metadata.tag]: i };
-	}
-	get suffixContent() {
-		return s`<nve-icon-button part="icon-button" .ariaLabel="${this.i18n.expand}" icon-name="calendar" container="inline" @click="${this.showPicker}"></nve-icon-button>`;
-	}
-};
-e([c({
-	type: String,
-	reflect: !0
-})], l.prototype, "container", void 0), l = e([t()], l);
-//#endregion
-export { l as Date };
-
-//# sourceMappingURL=date2.js.map

package/dist/date/date2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date2.js","names":[],"sources":["../../src/date/date.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './date.css?inline';\n\n/**\n * @element nve-date\n * @description A date picker is a control that enables users to choose a date value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/date\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --min-width\n * @csspart icon-button - The calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date\n */\n@scopedRegistry()\nexport class Date extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-date',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAkCO,IAAA,IAAA,cAAmB,EAAoC;;gBAO5C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;GAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,IAAc,gBAAgB;AAC5B,SAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;;;GAdjJ,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAN3C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/date/define.d.ts

@@ -1,6 +0,0 @@
-import { Date } from '.';
-declare global {
-    interface HTMLElementTagNameMap {
-        'nve-date': Date;
-    }
-}

package/dist/date/define.js

@@ -1,7 +0,0 @@
-import { define as e } from "../internal/utils/dom.js";
-import { Date as t } from "./date2.js";
-//#region src/date/define.ts
-e(t);
-//#endregion
-
-//# sourceMappingURL=define.js.map

package/dist/date/define.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/date/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Date } from '@nvidia-elements/core/date';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Date);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-date': Date;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAK"}

package/dist/date/index.d.ts

@@ -1 +0,0 @@
-export * from './date.js';

package/dist/date/index.js

@@ -1,2 +0,0 @@
-import { Date as e } from "./date2.js";
-export { e as Date };

package/dist/datetime/datetime.d.ts

@@ -1,40 +0,0 @@
-import { ContainerElement } from '../internal';
-import { Control } from '../forms';
-import { IconButton } from '../icon-button';
-/**
- * @element nve-datetime
- * @description A datetime picker is a control that enables users to choose a datetime value.
- * @since 0.3.0
- * @entrypoint \@nvidia-elements/core/datetime
- * @cssprop --padding
- * @cssprop --font-size
- * @cssprop --height
- * @cssprop --background
- * @cssprop --color
- * @cssprop --border-radius
- * @cssprop --border
- * @cssprop --border-bottom
- * @cssprop --cursor
- * @cssprop --font-weight
- * @cssprop --width
- * @cssprop --max-width
- * @cssprop --min-width
- * @csspart icon-button - The calendar icon button element
- * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
- */
-export declare class Datetime extends Control implements ContainerElement {
-    /**
-     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
-     * Use when embedding within another container such as a toolbar.
-     */
-    container?: 'flat';
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-    };
-    static elementDefinitions: {
-        [IconButton.metadata.tag]: typeof IconButton;
-    };
-    protected get suffixContent(): import('lit-html').TemplateResult<1>;
-}

package/dist/datetime/datetime.examples.js

@@ -1,6 +0,0 @@
-//#region src/datetime/datetime.examples.ts
-var e = "";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=datetime.examples.js.map

package/dist/datetime/datetime.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"datetime.examples.js","names":[],"sources":["../../src/datetime/datetime.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/month/define.js';\nimport '@nvidia-elements/core/datetime/define.js';\n\nexport default {\n  title: 'Elements/Datetime',\n  component: 'nve-datetime',\n};\n\n/**\n * @summary Basic datetime picker input with label and message for selecting both date and time values.\n */\nexport const Default = {\n  render: () => html`\n<nve-datetime>\n  <label>date</label>\n  <input type=\"datetime-local\" />\n  <nve-control-message>message</nve-control-message>\n</nve-datetime>\n`\n};\n\n/**\n * @summary Datetime picker with datalist providing suggested datetime options for quick selection from predefined values.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-datetime>\n  <label>label</label>\n  <input type=\"datetime-local\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-06-07T00:00\"></option>\n    <option value=\"2018-06-12T19:30\"></option>\n    <option value=\"2018-06-14T00:00\"></option>\n  </datalist>\n</nve-datetime>\n  `\n}\n\n/**\n * @summary Datetime pickers with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime>\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime>\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>`\n};\n\n/**\n * @summary Datetime pickers with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-datetime layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"datetime-local\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-datetime>\n\n  <nve-datetime layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-datetime>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}