{
  "element": "nve-internal-patterns",
  "entrypoint": "@nvidia-elements/themes/index.examples.json",
  "items": [
    {
      "id": "themes-layers",
      "name": "Layers",
      "template": "<style>\n  body {\n    padding: 0 !important;\n  }\n</style>\n<div nve-theme=\"light root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh\">\n  <nve-card style=\"width: 500px; height: 300px\">\n    <nve-card-header>\n      <div slot=\"title\">Card</div>\n      <div slot=\"subtitle\">Sub Title</div>\n    </nve-card-header>\n    <nve-card-content>\n      <nve-input>\n        <label>label</label>\n        <input type=\"text\" value=\"input\" />\n        <nve-control-message>message</nve-control-message>\n      </nve-input>\n    </nve-card-content>\n    <nve-card-footer>\n      <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n    </nve-card-footer>\n  </nve-card>\n  <div nve-layout=\"column gap:md\">\n    <nve-input>\n      <label>label</label>\n      <input type=\"text\" value=\"input\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n    <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n  </div>\n  <nve-dialog size=\"sm\" closable position=\"top\" alignment=\"end\" style=\"--min-width: 400px\">\n    <h3 nve-text=\"heading\">Dialog</h3>\n    <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n    <nve-button id=\"dropdown-btn\">button</nve-button>\n    <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n      <nve-search rounded>\n        <label>dropdown content</label>\n        <nve-icon-button\n          id=\"tooltip-btn-1\"\n          icon-name=\"information-circle-stroke\"\n          container=\"flat\"\n          aria-label=\"more details\"\n          slot=\"label\"\n        ></nve-icon-button>\n        <input type=\"search\" placeholder=\"search\" />\n      </nve-search>\n      <nve-tooltip anchor=\"tooltip-btn-1\" position=\"top\">tooltip</nve-tooltip>\n    </nve-dropdown>\n  </nve-dialog>\n</div>\n<div nve-theme=\"dark root\" nve-layout=\"column gap:lg pad:lg\" style=\"height: 50vh; position: relative\">\n  <nve-card style=\"width: 500px; height: 300px\">\n    <nve-card-header>\n      <div slot=\"title\">Card</div>\n      <div slot=\"subtitle\">Sub Title</div>\n    </nve-card-header>\n    <nve-card-content>\n      <nve-input>\n        <label>label</label>\n        <input type=\"text\" value=\"input\" />\n        <nve-control-message>message</nve-control-message>\n      </nve-input>\n    </nve-card-content>\n    <nve-card-footer>\n      <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n    </nve-card-footer>\n  </nve-card>\n  <div nve-layout=\"column gap:md\">\n    <nve-input>\n      <label>label</label>\n      <input type=\"text\" value=\"input\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n    <nve-button>button <nve-icon name=\"arrow\" direction=\"right\"></nve-icon></nve-button>\n  </div>\n  <div id=\"dark\" style=\"position: absolute; right: 48px; top: 0\"></div>\n  <nve-dialog size=\"sm\" closable position=\"bottom\" alignment=\"end\" anchor=\"dark\" style=\"--min-width: 400px\">\n    <h3 nve-text=\"heading\">Dialog</h3>\n    <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n    <nve-button id=\"dropdown-btn\">button</nve-button>\n    <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n      <nve-search rounded>\n        <label>dropdown content</label>\n        <nve-icon-button\n          id=\"tooltip-btn-2\"\n          icon-name=\"information-circle-stroke\"\n          container=\"flat\"\n          aria-label=\"more details\"\n          slot=\"label\"\n        ></nve-icon-button>\n        <input type=\"search\" placeholder=\"search\" />\n      </nve-search>\n      <nve-tooltip anchor=\"tooltip-btn-2\" position=\"top\">tooltip</nve-tooltip>\n    </nve-dropdown>\n  </nve-dialog>\n</div>\n",
      "summary": "Theme layer stacking (canvas, container, overlay, popover) in light and dark modes.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "themes-objects",
      "name": "Objects",
      "template": "<style>\n  .layer-demo {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 48px;\n    padding: 24px;\n    background: var(--nve-sys-layer-canvas-background);\n  }\n  .layer-demo h2,\n  .layer-demo ul {\n    margin: 0 0 12px 0;\n    font-weight: normal;\n  }\n  .canvas {\n    background: var(--nve-sys-layer-canvas-background);\n    color: var(--nve-sys-layer-canvas-color);\n    padding: var(--nve-ref-size-600);\n  }\n  .container {\n    background: var(--nve-sys-layer-container-background);\n    color: var(--nve-sys-layer-container-color);\n    padding: var(--nve-ref-size-500);\n    box-shadow: var(--nve-ref-shadow-100);\n    border-radius: var(--nve-ref-border-radius-lg);\n    width: 400px;\n    height: 300px;\n  }\n  .overlay {\n    background: var(--nve-sys-layer-overlay-background);\n    color: var(--nve-sys-layer-overlay-color);\n    padding: var(--nve-ref-size-600);\n    box-shadow: var(--nve-ref-shadow-200);\n    border-radius: var(--nve-ref-border-radius-lg);\n    width: 400px;\n    height: 300px;\n  }\n  .backdrop {\n    background: var(--nve-sys-layer-backdrop-background);\n    padding: 24px;\n    width: 400px;\n    height: 300px;\n    display: flex;\n    place-content: center;\n    place-items: center;\n  }\n  .backdrop .overlay {\n    width: 300px;\n    height: 200px;\n  }\n  .popover {\n    background: var(--nve-sys-layer-popover-background);\n    color: var(--nve-sys-layer-popover-color);\n    padding: var(--nve-ref-size-400);\n    box-shadow: var(--nve-ref-shadow-300);\n    border-radius: var(--nve-ref-border-radius-md);\n    width: 400px;\n    height: 130px;\n  }\n</style>\n<section class=\"layer-demo\">\n  <div class=\"canvas\">\n    <h2>canvas</h2>\n    <ul>\n      <li>document</li>\n      <li>body</li>\n    </ul>\n  </div>\n  <div class=\"container\">\n    <h2>container</h2>\n    <ul>\n      <li>cards</li>\n      <li>steps</li>\n      <li>tabs</li>\n    </ul>\n  </div>\n  <div class=\"backdrop\">\n    <div class=\"overlay\">\n      <h2>overlay/backdrop</h2>\n      <ul>\n        <li>modals</li>\n        <li>drawers</li>\n        <li>dropdown menus</li>\n      </ul>\n    </div>\n  </div>\n  <div class=\"popover\">\n    <h2>popover</h2>\n    <ul>\n      <li>tooltips</li>\n      <li>toasts</li>\n      <li>notifications</li>\n    </ul>\n  </div>\n</section>\n",
      "summary": "Theme layer object reference showing semantic backgrounds for canvas, container, overlay, and popover.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "themes-reduced-motion",
      "name": "ReducedMotion",
      "template": "<style>\n  @keyframes slide-demo {\n    0% {\n      left: 0;\n    }\n    50% {\n      left: calc(100% - 25px);\n    }\n    100% {\n      left: 0;\n    }\n  }\n  .animation,\n  .animation[nve-theme] {\n    width: 150px;\n    height: 50px;\n    border: 1px solid #ccc;\n    position: relative;\n    padding: 0;\n  }\n  .animation div {\n    width: 20px;\n    height: 50px;\n    background-color: #ccc;\n    animation: slide-demo var(--nve-ref-animation-duration-400);\n    animation-timing-function: var(--nve-ref-animation-easing-100);\n    animation-iteration-count: infinite;\n    animation-delay: 500ms;\n    width: 25px;\n    height: 50px;\n    position: absolute;\n    left: 0;\n  }\n</style>\n<div nve-layout=\"row gap:md\">\n  <section nve-layout=\"column gap:sm\">\n    <code>nve-theme</code>\n    <div class=\"animation\" nve-theme>\n      <div></div>\n    </div>\n  </section>\n  <section nve-layout=\"column gap:sm\">\n    <code>nve-theme=\"reduced-motion\"</code>\n    <div class=\"animation\" nve-theme=\"reduced-motion\">\n      <div></div>\n    </div>\n  </section>\n</div>\n",
      "summary": "Reduced-motion theme setting that disables animations for accessibility.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "themes-button-interactions",
      "name": "ButtonInteractions",
      "template": "<style>\n  button {\n    background: color-mix(\n      in oklab,\n      var(--nve-sys-interaction-state-base) 100%,\n      var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio, 0%)\n    );\n    color: var(--nve-sys-interaction-color);\n    border: 0;\n    padding: 12px;\n    cursor: pointer;\n    margin-bottom: 6px;\n    width: 100px;\n  }\n  button:hover,\n  button[hover] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n  button:active,\n  button[active] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n  }\n  button:disabled,\n  button[disabled] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n  }\n  button[selected] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n</style>\n<section>\n  <button>button</button>\n  <button hover>hover</button>\n  <button active>active</button>\n  <button selected>selected</button>\n  <button disabled>disabled</button>\n</section>\n<section style=\"--nve-sys-interaction-state-base: var(--nve-sys-interaction-emphasis-background)\">\n  <button>button</button>\n  <button hover>hover</button>\n  <button active>active</button>\n  <button selected>selected</button>\n  <button disabled>disabled</button>\n</section>\n",
      "summary": "Theme interaction state system for buttons showing hover, active, selected, and disabled states.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "themes-interactions",
      "name": "Interactions",
      "template": "<style>\n  .menu {\n    display: flex;\n    flex-direction: column;\n    max-width: 200px;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n  .menu-item {\n    width: 100%;\n    display: block;\n    border: 0;\n    cursor: pointer;\n    text-align: left;\n    padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n    color: var(--nve-sys-interaction-color);\n    font-size: var(--nve-ref-font-size-300);\n    border-radius: var(--nve-ref-border-radius-xs);\n    background-image: linear-gradient(\n      color-mix(\n          in oklab,\n          var(--nve-sys-interaction-state-base) 100%,\n          var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n        )\n        0 0\n    ) !important;\n  }\n  .menu-item:hover,\n  .menu-item[hover] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n  .menu-item:active,\n  .menu-item[active] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n  }\n  .menu-item[selected] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n  .menu-item[disabled] {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n    cursor: not-allowed;\n  }\n  .menu-item[readonly] {\n    --nve-sys-interaction-state-ratio: 0;\n  }\n  .menu-item:focus,\n  .menu-item[focused] {\n    outline-offset: -3px;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline: Highlight solid 2px;\n  }\n</style>\n<div nve-layout=\"grid gap:md\">\n  <section nve-theme=\"root light\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\">default</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" hover>hover</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" active>active</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" selected>selected</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" disabled>disabled</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" focused>focused</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n  </section>\n  <section nve-theme=\"root dark\" nve-layout=\"span:12 row gap:sm pad:md align:stretch\">\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\">default</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" hover>hover</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" active>active</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" selected>selected</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" disabled>disabled</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n    <div class=\"menu\">\n      <div class=\"menu-item\">item</div>\n      <div class=\"menu-item\" focused>focused</div>\n      <div class=\"menu-item\">item</div>\n    </div>\n  </section>\n  <section nve-theme=\"root light\" nve-layout=\"span:6 pad:md align:stretch\">\n    <nve-card>\n      <nve-card-content nve-layout=\"grid gap:md\">\n        <div nve-layout=\"span:5 column gap:xs\">\n          <div class=\"menu-item\">default</div>\n          <div class=\"menu-item\" hover>hover</div>\n          <div class=\"menu-item\" active>active</div>\n          <div class=\"menu-item\" selected>selected</div>\n          <div class=\"menu-item\" disabled>disabled</div>\n          <div class=\"menu-item\" focused>focused</div>\n        </div>\n        <div nve-layout=\"span:7\">container</div>\n      </nve-card-content>\n    </nve-card>\n  </section>\n  <section nve-theme=\"root dark\" nve-layout=\"span:6 pad:md align:stretch\">\n    <nve-card>\n      <nve-card-content nve-layout=\"grid gap:md\">\n        <div nve-layout=\"span:5 column gap:xs\">\n          <div class=\"menu-item\">default</div>\n          <div class=\"menu-item\" hover>hover</div>\n          <div class=\"menu-item\" active>active</div>\n          <div class=\"menu-item\" selected>selected</div>\n          <div class=\"menu-item\" disabled>disabled</div>\n          <div class=\"menu-item\" focused>focused</div>\n        </div>\n        <div nve-layout=\"span:7\">container</div>\n      </nve-card-content>\n    </nve-card>\n  </section>\n</div>\n",
      "summary": "Theme interaction state system for menu items with all interactive states in both themes.",
      "description": "",
      "composition": false,
      "tags": []
    }
  ]
}