@visa/nova-styles/api.json

Visa Product Design System Nova HTML+CSS library

{"library":{"name":"@visa/nova-styles","version":"1.6.5"},"components":[{"name":"action-primary","version":"0.0.1","description":"Disabled alternate action","category":"abstracts","libraryId":null,"exampleSections":[{"name":"examples","order":0,"description":""}],"examples":[{"name":"Alternate Disabled","description":"Disabled alternate action","snippets":{"html":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action\" disabled=\"\" type=\"button\">\n    Alternate\n  </button>\n</div>\n"},"url":{"iframe":"abstracts/action-primary/example/alternate-disabled","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate-disabled.md"},"tags":["alternate"],"order":4,"section":"examples","componentId":null,"libraryId":null},{"name":"Alternate Stateless","description":"Primary Stateless Alternate action.","snippets":{"html":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-10);\">\n  <div class=\"v-action-stateless\">\n    Alternate\n  </div>\n  <br/>\n  <span class=\"v-action-stateless\">\n    Alternate\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/action-primary/example/alternate-stateless","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate-stateless.md"},"tags":["alternate"],"order":5,"section":"examples","componentId":null,"libraryId":null},{"name":"Alternate","description":"Alternate action.","snippets":{"html":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action\">\n    Alternate\n  </button>\n</div>\n"},"url":{"iframe":"abstracts/action-primary/example/alternate","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate.md"},"tags":["alternate"],"order":3,"section":"examples","componentId":null,"libraryId":null},{"name":"Default","description":"Primary action class.","snippets":{"html":"\n<button class=\"v-action\">\n  Primary action\n</button>\n"},"url":{"iframe":"abstracts/action-primary/example/default","github":"workspaces/styles/src/abstracts/action-primary/examples/default.md"},"tags":[],"order":0,"section":"examples","componentId":null,"libraryId":null},{"name":"Disabled","description":"Default disabled action.","snippets":{"html":"\n<button class=\"v-action\" disabled=\"\" type=\"button\">\n  Primary action\n</button>\n"},"url":{"iframe":"abstracts/action-primary/example/disabled","github":"workspaces/styles/src/abstracts/action-primary/examples/disabled.md"},"tags":[],"order":1,"section":"examples","componentId":null,"libraryId":null},{"name":"Stateless","description":"Primary stateless action class.","snippets":{"html":"\n<div class=\"v-action-stateless\">\n  Primary\n</div>\n<br/>\n<span class=\"v-action-stateless\">\n  Primary\n</span>\n"},"url":{"iframe":"abstracts/action-primary/example/stateless","github":"workspaces/styles/src/abstracts/action-primary/examples/stateless.md"},"tags":[],"order":2,"section":"examples","componentId":null,"libraryId":null}],"propertySections":[{"name":"classes","order":0,"description":""},{"name":"variables","order":1,"description":""}],"properties":[{"name":".v-alternate","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-alternate"}},{"name":"v-alternate","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":"v-alternate"}},{"name":".v-action","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action"}},{"name":".v-action[disabled]","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action[disabled]"}},{"name":".v-action-stateless","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action-stateless"}},{"name":"--v-action-primary-block-size","type":"variable","default":"var(--size-scalable-38)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-block-size","value":"var(--size-scalable-38)"}},{"name":"--v-action-primary-font-size","type":"variable","default":"var(--typography-label-font-size)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-font-size","value":"var(--typography-label-font-size)"}},{"name":"--v-action-primary-font-weight","type":"variable","default":"600","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-font-weight","value":"600"}},{"name":"--v-action-primary-letter-spacing","type":"variable","default":"0.25px","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-letter-spacing","value":"0.25px"}},{"name":"--v-action-primary-line-height","type":"variable","default":"var(--typography-label-line-height)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-line-height","value":"var(--typography-label-line-height)"}},{"name":"--v-action-primary-padding-block","type":"variable","default":"calc(var(--size-scalable-10) - var(--v-action-primary-border-size))","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-padding-block","value":"calc(var(--size-scalable-10) - var(--v-action-primary-border-size))"}},{"name":"--v-action-primary-padding-inline","type":"variable","default":"calc(var(--size-scalable-14) - var(--v-action-primary-border-size))","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-padding-inline","value":"calc(var(--size-scalable-14) - var(--v-action-primary-border-size))"}},{"name":"--v-action-primary-background","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-background","value":"var(--palette-default-active)"}},{"name":"--v-action-primary-border-color","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-border-color","value":"var(--palette-default-active)"}},{"name":"--v-action-primary-border-radius","type":"variable","default":"var(--size-rounded-medium)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-border-radius","value":"var(--size-rounded-medium)"}},{"name":"--v-action-primary-border-size","type":"variable","default":"var(--theme-border-size)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-border-size","value":"var(--theme-border-size)"}},{"name":"--v-action-primary-border-style","type":"variable","default":"solid","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-border-style","value":"solid"}},{"name":"--v-action-primary-foreground","type":"variable","default":"var(--palette-default-text-on-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-foreground","value":"var(--palette-default-text-on-active)"}},{"name":"--v-action-primary-hover-background","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-hover-background","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-primary-hover-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-hover-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-primary-hover-foreground","type":"variable","default":"var(--palette-default-text-on-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-hover-foreground","value":"var(--palette-default-text-on-active)"}},{"name":"--v-action-primary-focus-background","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-focus-background","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-primary-focus-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-focus-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-primary-focus-foreground","type":"variable","default":"var(--palette-default-text-on-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-focus-foreground","value":"var(--palette-default-text-on-active)"}},{"name":"--v-action-primary-active-background","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-active-background","value":"var(--palette-default-active-pressed)"}},{"name":"--v-action-primary-active-border-color","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-active-border-color","value":"var(--palette-default-active-pressed)"}},{"name":"--v-action-primary-active-foreground","type":"variable","default":"var(--palette-default-text-on-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-active-foreground","value":"var(--palette-default-text-on-active)"}},{"name":"--v-action-primary-disabled-background","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-disabled-background","value":"var(--palette-default-disabled)"}},{"name":"--v-action-primary-disabled-border-color","type":"variable","default":"var(--palette-default-transparent)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-disabled-border-color","value":"var(--palette-default-transparent)"}},{"name":"--v-action-primary-disabled-foreground","type":"variable","default":"var(--palette-default-text-on-active)\n","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-primary-disabled-foreground","value":"var(--palette-default-text-on-active)\n"}}]},{"name":"action-secondary","version":"0.0.1","description":"Checkbox within action secondary abstract class.","category":"abstracts","libraryId":null,"exampleSections":[{"name":"examples","order":0,"description":""}],"examples":[{"name":"Action Secondary Panel","description":"Checkbox within action secondary abstract class.","snippets":{"html":"\n<div class=\"v-action v-action-secondary v-flex-col v-align-items-start\">\n  <div class=\"v-flex v-align-items-center\" style=\"inline-size: 100%\">\n    <input class=\"v-checkbox v-flex-shrink-0\" id=\"checkbox-panel-1\" type=\"checkbox\"/>\n    <label class=\"v-label\" for=\"checkbox-panel-1\">\n      Label\n    </label>\n  </div>\n</div>\n"},"url":{"iframe":"abstracts/action-secondary/example/action-secondary-panel","github":"workspaces/styles/src/abstracts/action-secondary/examples/action-secondary-panel.md"},"tags":["docs"],"order":3,"section":"examples","componentId":null,"libraryId":null},{"name":"Alternate Disabled","description":"Disabled alternate action","snippets":{"html":"\n<div class=\"v-surface v-surface-secondary v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action v-action-secondary\" disabled=\"\" type=\"button\">\n    Alternate\n  </button>\n</div>\n"},"url":{"iframe":"abstracts/action-secondary/example/alternate-disabled","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate-disabled.md"},"tags":["alternate"],"order":5,"section":"examples","componentId":null,"libraryId":null},{"name":"Alternate Stateless","description":"Secondary Stateless Alternate action.","snippets":{"html":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-10);\">\n  <div class=\"v-action-stateless v-action-secondary\">\n    Alternate\n  </div>\n  <br/>\n  <span class=\"v-action-stateless v-action-secondary\">\n    Alternate\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/action-secondary/example/alternate-stateless","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate-stateless.md"},"tags":["alternate"],"order":6,"section":"examples","componentId":null,"libraryId":null},{"name":"Alternate","description":"Alternate action.","snippets":{"html":"\n<div class=\"v-surface v-alternate\" style=\"padding: var(--size-responsive-16); \">\n  <button class=\"v-action v-action-secondary\">\n    Alternate\n  </button>\n</div>\n"},"url":{"iframe":"abstracts/action-secondary/example/alternate","github":"workspaces/styles/src/abstracts/action-primary/examples/alternate.md"},"tags":["alternate"],"order":4,"section":"examples","componentId":null,"libraryId":null},{"name":"Default","description":"Secondary action class.","snippets":{"html":"\n<button class=\"v-action v-action-secondary\">\n  Secondary action\n</button>\n"},"url":{"iframe":"abstracts/action-secondary/example/default","github":"workspaces/styles/src/abstracts/action-primary/examples/default.md"},"tags":[],"order":0,"section":"examples","componentId":null,"libraryId":null},{"name":"Disabled","description":"Default disabled action.","snippets":{"html":"\n<button class=\"v-action v-action-secondary\" disabled=\"\" type=\"button\">\n  Secondary action\n</button>\n"},"url":{"iframe":"abstracts/action-secondary/example/disabled","github":"workspaces/styles/src/abstracts/action-primary/examples/disabled.md"},"tags":[],"order":1,"section":"examples","componentId":null,"libraryId":null},{"name":"Stateless","description":"Secondary stateless action class.","snippets":{"html":"\n<div class=\"v-action-stateless v-action-secondary\">\n  Secondary\n</div>\n<br/>\n<span class=\"v-action-stateless v-action-secondary\">\n  Secondary\n</span>\n"},"url":{"iframe":"abstracts/action-secondary/example/stateless","github":"workspaces/styles/src/abstracts/action-primary/examples/stateless.md"},"tags":[],"order":2,"section":"examples","componentId":null,"libraryId":null}],"propertySections":[{"name":"classes","order":0,"description":""},{"name":"variables","order":1,"description":""}],"properties":[{"name":".v-action","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action"}},{"name":".v-action-secondary","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action-secondary"}},{"name":".v-checkbox","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-checkbox"}},{"name":".v-alternate","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-alternate"}},{"name":".v-action[disabled]","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action[disabled]"}},{"name":".v-action-stateless","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-action-stateless"}},{"name":"--v-action-secondary-block-size","type":"variable","default":"var(--size-scalable-38)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-block-size","value":"var(--size-scalable-38)"}},{"name":"--v-action-secondary-font-size","type":"variable","default":"var(--typography-label-font-size)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-font-size","value":"var(--typography-label-font-size)"}},{"name":"--v-action-secondary-font-weight","type":"variable","default":"600","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-font-weight","value":"600"}},{"name":"--v-action-secondary-gap","type":"variable","default":"var(--size-scalable-2)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-gap","value":"var(--size-scalable-2)"}},{"name":"--v-action-secondary-letter-spacing","type":"variable","default":"0.5px","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-letter-spacing","value":"0.5px"}},{"name":"--v-action-secondary-line-height","type":"variable","default":"var(--typography-label-line-height)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-line-height","value":"var(--typography-label-line-height)"}},{"name":"--v-action-secondary-padding-block","type":"variable","default":"calc(var(--size-scalable-10) - var(--v-action-secondary-border-size))","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-padding-block","value":"calc(var(--size-scalable-10) - var(--v-action-secondary-border-size))"}},{"name":"--v-action-secondary-padding-inline","type":"variable","default":"calc(var(--size-scalable-14) - var(--v-action-secondary-border-size))","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-padding-inline","value":"calc(var(--size-scalable-14) - var(--v-action-secondary-border-size))"}},{"name":"--v-action-secondary-background","type":"variable","default":"var(--palette-default-surface-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-background","value":"var(--palette-default-surface-1)"}},{"name":"--v-action-secondary-border-color","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-border-color","value":"var(--palette-default-active)"}},{"name":"--v-action-secondary-border-radius","type":"variable","default":"var(--size-rounded-medium)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-border-radius","value":"var(--size-rounded-medium)"}},{"name":"--v-action-secondary-border-size","type":"variable","default":"calc(var(--theme-border-size) / 2)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-border-size","value":"calc(var(--theme-border-size) / 2)"}},{"name":"--v-action-secondary-border-style","type":"variable","default":"solid","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-border-style","value":"solid"}},{"name":"--v-action-secondary-foreground","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-foreground","value":"var(--palette-default-active)"}},{"name":"--v-action-secondary-hover-background","type":"variable","default":"var(--palette-default-surface-highlight)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-hover-background","value":"var(--palette-default-surface-highlight)"}},{"name":"--v-action-secondary-hover-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-hover-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-secondary-hover-foreground","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-hover-foreground","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-secondary-focus-background","type":"variable","default":"var(--palette-default-surface-highlight)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-focus-background","value":"var(--palette-default-surface-highlight)"}},{"name":"--v-action-secondary-focus-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-focus-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-secondary-focus-foreground","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-focus-foreground","value":"var(--palette-default-active-hover)"}},{"name":"--v-action-secondary-active-background","type":"variable","default":"var(--palette-default-surface-lowlight)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-active-background","value":"var(--palette-default-surface-lowlight)"}},{"name":"--v-action-secondary-active-border-color","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-active-border-color","value":"var(--palette-default-active-pressed)"}},{"name":"--v-action-secondary-active-foreground","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-active-foreground","value":"var(--palette-default-active-pressed)"}},{"name":"--v-action-secondary-disabled-background","type":"variable","default":"var(--palette-default-surface-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-disabled-background","value":"var(--palette-default-surface-1)"}},{"name":"--v-action-secondary-disabled-border-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-disabled-border-color","value":"var(--palette-default-disabled)"}},{"name":"--v-action-secondary-disabled-foreground","type":"variable","default":"var(--palette-default-disabled)\n","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-action-secondary-disabled-foreground","value":"var(--palette-default-disabled)\n"}}]},{"name":"input","version":"0.0.1","description":"Example with a label inside the input container.","category":"abstracts","libraryId":null,"exampleSections":[{"name":"examples","order":0,"description":""}],"examples":[{"name":"Contained Label","description":"Example with a label inside the input container.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <div class=\"v-input-container v-surface v-flex-col v-align-items-start\">\n    <label class=\"v-label\" for=\"input-test-13\">\n      Label (required)\n    </label>\n    <input aria-describedby=\"input-message-test-13\" class=\"v-input\" id=\"input-test-13\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-13\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/contained-label","github":"workspaces/styles/src/abstracts/input/examples/contained-label.md"},"tags":["custom"],"order":13,"section":"examples","componentId":null,"libraryId":null},{"name":"Container","description":"Container class. Contains input field, affixes, and other action elements in the context of the input field.","snippets":{"html":"\n<div class=\"v-input-container v-surface v-flex-row\">\n</div>\n"},"url":{"iframe":"abstracts/input/example/container","github":"workspaces/styles/src/abstracts/input/examples/container.md"},"tags":[],"order":2,"section":"examples","componentId":null,"libraryId":null},{"name":"Default","description":"Default input.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-1\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-1\" class=\"v-input\" id=\"input-test-1\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-1\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/default","github":"workspaces/styles/src/abstracts/action-primary/examples/default.md"},"tags":[],"order":3,"section":"examples","componentId":null,"libraryId":null},{"name":"Disabled","description":"Disabled input example.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-6\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-6\" class=\"v-input\" disabled=\"\" id=\"input-test-6\" name=\"text-input-field\" type=\"text\" value=\"Disabled example text.\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-6\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/disabled","github":"workspaces/styles/src/abstracts/action-primary/examples/disabled.md"},"tags":["docs"],"order":5,"section":"examples","componentId":null,"libraryId":null},{"name":"Error","description":"Error input requires a class at the top level.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-7\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-7\" aria-invalid=\"true\" class=\"v-input\" id=\"input-test-7\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-7\">\n    <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n      <use href=\"#visa-error-tiny\">\n      </use>\n    </svg>\n    This is required text that describes the error in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/error","github":"workspaces/styles/src/abstracts/input/examples/error.md"},"tags":[],"order":6,"section":"examples","componentId":null,"libraryId":null},{"name":"Input Field","description":"Input field class. This is the actual input html element.","snippets":{"html":"\n<input aria-labelledby=\"input-message-test-0\" class=\"v-input\" id=\"input-test-00\" name=\"text-input-field\" style=\"--v-input-border-color: var(--palette-default-border)\" type=\"text\"/>\n"},"url":{"iframe":"abstracts/input/example/input-field","github":"workspaces/styles/src/abstracts/input/examples/input-field.md"},"tags":[],"order":0,"section":"examples","componentId":null,"libraryId":null},{"name":"Message","description":"Message class. This is the element that provides more description for the field, below the input container.","snippets":{"html":"\n<span class=\"v-input-message\" id=\"input-message-test-0\">\n  Inline message, use as needed\n</span>\n"},"url":{"iframe":"abstracts/input/example/message","github":"workspaces/styles/src/abstracts/input/examples/message.md"},"tags":[],"order":1,"section":"examples","componentId":null,"libraryId":null},{"name":"Read-only","description":"Read-only input requires a class at the top level.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-4\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-4\" class=\"v-input\" id=\"input-test-4\" name=\"text-input-field\" readonly=\"\" type=\"text\" value=\"Read-only example text.\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-4\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/read-only","github":"workspaces/styles/src/abstracts/input/examples/read-only.md"},"tags":[],"order":4,"section":"examples","componentId":null,"libraryId":null},{"name":"Underlined","description":"Example with an custom underlined override of the input container.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-14\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-col\" style=\"--v-surface-border-size: 0px; --v-input-indicator-size: 2px; --v-surface-border-radius: 0px;\">\n    <input aria-describedby=\"input-message-test-14\" class=\"v-input\" id=\"input-test-14\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-14\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/underlined","github":"workspaces/styles/src/abstracts/input/examples/underlined.md"},"tags":["custom"],"order":14,"section":"examples","componentId":null,"libraryId":null},{"name":"With Button Outside","description":"Example with a button outside the input container.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-12\">\n    Label (required)\n  </label>\n  <div class=\"v-flex v-flex-row v-align-items-center\">\n    <div class=\"v-input-container v-surface v-flex-row\">\n      <input aria-describedby=\"input-message-test-12\" class=\"v-input\" id=\"input-test-12\" name=\"text-input-field\" type=\"text\"/>\n    </div>\n    <button aria-label=\"clear\" class=\"v-button v-button-icon v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-password-hide-tiny\">\n        </use>\n      </svg>\n    </button>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-12\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-button-outside","github":"workspaces/styles/src/abstracts/input/examples/with-button-outside.md"},"tags":["custom"],"order":12,"section":"examples","componentId":null,"libraryId":null},{"name":"With Button","description":"Example with a button input.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-11\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-11\" class=\"v-input\" id=\"input-test-11\" name=\"text-input-field\" type=\"text\"/>\n    <button aria-label=\"clear\" class=\"v-button v-button-icon v-button-subtle v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-clear-alt-tiny\">\n        </use>\n      </svg>\n    </button>\n    <button aria-label=\"show password\" class=\"v-button v-button-icon v-button-tertiary v-button-small\" type=\"button\">\n      <svg aria-hidden=\"true\" class=\"v-icon v-icon-visa v-icon-tiny\" focusable=\"false\" viewbox=\"0 0 16 16\">\n        <use href=\"#visa-password-hide-tiny\">\n        </use>\n      </svg>\n    </button>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-11\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-button","github":"workspaces/styles/src/abstracts/input/examples/with-button.md"},"tags":[],"order":9,"section":"examples","componentId":null,"libraryId":null},{"name":"With Inline Label and Message","description":"Example with a button input.","snippets":{"html":"\n<div class=\"v-flex v-flex-row v-gap-4\">\n  <label class=\"v-label v-align-self-start\" for=\"input-test-16\" style=\"line-height: var(--v-input-container-block-size)\">\n    Label (required)\n  </label>\n  <div class=\"v-flex v-flex-col v-flex-grow v-gap-4\">\n    <div class=\"v-input-container v-surface v-flex-row\">\n      <input aria-describedby=\"input-message-test-16\" class=\"v-input\" id=\"input-test-16\" name=\"text-input-field\" type=\"text\"/>\n    </div>\n    <span class=\"v-input-message\" id=\"input-message-test-16\">\n      This is optional text that describes the label in more detail.\n    </span>\n  </div>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-inline-label-and-message","github":"workspaces/styles/src/abstracts/input/examples/with-inline-label-and-message.md"},"tags":["custom"],"order":11,"section":"examples","componentId":null,"libraryId":null},{"name":"With Inline Label","description":"Example with a button input.","snippets":{"html":"\n<div class=\"v-flex v-flex-row v-align-items-center v-gap-4\">\n  <label class=\"v-label v-flex-shrink-0\" for=\"input-test-15\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input class=\"v-input\" id=\"input-test-15\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-inline-label","github":"workspaces/styles/src/abstracts/input/examples/with-inline-label.md"},"tags":["custom"],"order":10,"section":"examples","componentId":null,"libraryId":null},{"name":"With Prefix","description":"Use of an element before the input container, but after input field.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-9\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <span class=\"v-flex v-align-items-center v-typography-body-2-bold\">\n      $\n    </span>\n    <input aria-describedby=\"input-message-test-9\" class=\"v-input\" id=\"input-test-9\" name=\"text-input-field\" type=\"text\"/>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-9\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-prefix","github":"workspaces/styles/src/abstracts/input/examples/with-prefix.md"},"tags":[],"order":7,"section":"examples","componentId":null,"libraryId":null},{"name":"With Suffix","description":"Use of an element within the input container, but after input field.","snippets":{"html":"\n<div class=\"v-flex v-flex-col v-gap-4\">\n  <label class=\"v-label\" for=\"input-test-10\">\n    Label (required)\n  </label>\n  <div class=\"v-input-container v-surface v-flex-row\">\n    <input aria-describedby=\"input-message-test-10\" class=\"v-input\" id=\"input-test-10\" name=\"text-input-field\" type=\"text\"/>\n    <span class=\"v-flex v-align-items-center v-typography-body-2-bold\">\n      %\n    </span>\n  </div>\n  <span class=\"v-input-message\" id=\"input-message-test-10\">\n    This is optional text that describes the label in more detail.\n  </span>\n</div>\n"},"url":{"iframe":"abstracts/input/example/with-suffix","github":"workspaces/styles/src/abstracts/input/examples/with-suffix.md"},"tags":[],"order":8,"section":"examples","componentId":null,"libraryId":null}],"propertySections":[{"name":"classes","order":0,"description":""},{"name":"variables","order":1,"description":""}],"properties":[{"name":".v-input-container","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-input-container"}},{"name":".v-input","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-input"}},{"name":".v-input-error","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-input-error"}},{"name":".v-input[aria-invalid=\"true\"]","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-input[aria-invalid=\"true\"]"}},{"name":".v-input-message","description":"","type":"class","section":"classes","componentId":null,"libraryId":null,"data":{"name":".v-input-message"}},{"name":"--v-input-background","type":"variable","default":"var(--palette-default-transparent)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-background","value":"var(--palette-default-transparent)"}},{"name":"--v-input-border-color","type":"variable","default":"var(--palette-default-transparent)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-border-color","value":"var(--palette-default-transparent)"}},{"name":"--v-input-border-radius","type":"variable","default":"var(--size-rounded-none)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-border-radius","value":"var(--size-rounded-none)"}},{"name":"--v-input-border-size","type":"variable","default":"0px","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-border-size","value":"0px"}},{"name":"--v-input-border-style","type":"variable","default":"solid","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-border-style","value":"solid"}},{"name":"--v-input-color","type":"variable","default":"var(--palette-default-text)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-color","value":"var(--palette-default-text)"}},{"name":"--v-input-font-size","type":"variable","default":"var(--theme-font-size)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-font-size","value":"var(--theme-font-size)"}},{"name":"--v-input-inline-size","type":"variable","default":"auto","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-inline-size","value":"auto"}},{"name":"--v-input-padding-block","type":"variable","default":"var(--size-scalable-0)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-padding-block","value":"var(--size-scalable-0)"}},{"name":"--v-input-padding-inline","type":"variable","default":"var(--size-scalable-0)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-padding-inline","value":"var(--size-scalable-0)"}},{"name":"--v-input-container-background","type":"variable","default":"var(--palette-default-surface-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-background","value":"var(--palette-default-surface-1)"}},{"name":"--v-input-container-block-size","type":"variable","default":"var(--size-scalable-38)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-block-size","value":"var(--size-scalable-38)"}},{"name":"--v-input-container-border-color","type":"variable","default":"var(--palette-default-active-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-border-color","value":"var(--palette-default-active-subtle)"}},{"name":"--v-input-container-border-radius","type":"variable","default":"var(--size-rounded-medium)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-border-radius","value":"var(--size-rounded-medium)"}},{"name":"--v-input-container-border-style","type":"variable","default":"solid","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-border-style","value":"solid"}},{"name":"--v-input-container-border-width","type":"variable","default":"calc(var(--theme-border-size) / 2)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-border-width","value":"calc(var(--theme-border-size) / 2)"}},{"name":"--v-input-container-display","type":"variable","default":"flex","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-display","value":"flex"}},{"name":"--v-input-container-gap","type":"variable","default":"var(--size-scalable-6)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-gap","value":"var(--size-scalable-6)"}},{"name":"--v-input-container-checkbox-gap","type":"variable","default":"var(--size-scalable-2)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-checkbox-gap","value":"var(--size-scalable-2)"}},{"name":"--v-input-container-padding-block","type":"variable","default":"var(--size-scalable-3)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-padding-block","value":"var(--size-scalable-3)"}},{"name":"--v-input-container-padding-inline","type":"variable","default":"var(--size-scalable-6)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-container-padding-inline","value":"var(--size-scalable-6)"}},{"name":"--v-input-indicator-color","type":"variable","default":"var(--palette-default-active-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-indicator-color","value":"var(--palette-default-active-subtle)"}},{"name":"--v-input-indicator-size","type":"variable","default":"var(--size-responsive-0)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-indicator-size","value":"var(--size-responsive-0)"}},{"name":"--v-input-label-color","type":"variable","default":"var(--palette-default-text-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-label-color","value":"var(--palette-default-text-subtle)"}},{"name":"--v-input-message-color","type":"variable","default":"var(--palette-default-text-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-message-color","value":"var(--palette-default-text-subtle)"}},{"name":"--v-input-message-display","type":"variable","default":"flex","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-message-display","value":"flex"}},{"name":"--v-input-message-gap","type":"variable","default":"var(--size-scalable-4)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-message-gap","value":"var(--size-scalable-4)"}},{"name":"--v-input-message-size","type":"variable","default":"var(--typography-label-font-size)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-message-size","value":"var(--typography-label-font-size)"}},{"name":"--v-input-icon-color-primary","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-icon-color-primary","value":"var(--palette-default-active)"}},{"name":"--v-input-icon-color-secondary","type":"variable","default":"var(--palette-default-active)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-icon-color-secondary","value":"var(--palette-default-active)"}},{"name":"--v-input-hover-container-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-hover-container-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-input-hover-indicator-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-hover-indicator-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-input-hover-indicator-size","type":"variable","default":"var(--size-responsive-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-hover-indicator-size","value":"var(--size-responsive-1)"}},{"name":"--v-input-active-container-border-color","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-active-container-border-color","value":"var(--palette-default-active-pressed)"}},{"name":"--v-input-active-indicator-color","type":"variable","default":"var(--palette-default-active-pressed)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-active-indicator-color","value":"var(--palette-default-active-pressed)"}},{"name":"--v-input-active-indicator-size","type":"variable","default":"var(--size-responsive-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-active-indicator-size","value":"var(--size-responsive-1)"}},{"name":"--v-input-active-label-color","type":"variable","default":"var(--palette-default-text-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-active-label-color","value":"var(--palette-default-text-subtle)"}},{"name":"--v-input-focus-container-border-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-focus-container-border-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-input-focus-indicator-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-focus-indicator-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-input-focus-indicator-size","type":"variable","default":"var(--size-responsive-1)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-focus-indicator-size","value":"var(--size-responsive-1)"}},{"name":"--v-input-focus-label-color","type":"variable","default":"var(--palette-default-active-hover)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-focus-label-color","value":"var(--palette-default-active-hover)"}},{"name":"--v-input-readonly-container-border-style","type":"variable","default":"dashed","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-readonly-container-border-style","value":"dashed"}},{"name":"--v-input-readonly-container-border-color","type":"variable","default":"var(--palette-default-active-subtle)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-readonly-container-border-color","value":"var(--palette-default-active-subtle)"}},{"name":"--v-input-readonly-indicator-size","type":"variable","default":"var(--size-responsive-0)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-readonly-indicator-size","value":"var(--size-responsive-0)"}},{"name":"--v-input-disabled-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-color","value":"var(--palette-default-disabled)"}},{"name":"--v-input-disabled-container-border-style","type":"variable","default":"dashed","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-container-border-style","value":"dashed"}},{"name":"--v-input-disabled-container-border-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-container-border-color","value":"var(--palette-default-disabled)"}},{"name":"--v-input-disabled-indicator-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-indicator-color","value":"var(--palette-default-disabled)"}},{"name":"--v-input-disabled-label-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-label-color","value":"var(--palette-default-disabled)"}},{"name":"--v-input-disabled-message-color","type":"variable","default":"var(--palette-default-disabled)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-disabled-message-color","value":"var(--palette-default-disabled)"}},{"name":"--v-input-error-container-border-color","type":"variable","default":"var(--palette-messaging-graphics-negative)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-error-container-border-color","value":"var(--palette-messaging-graphics-negative)"}},{"name":"--v-input-error-indicator-color","type":"variable","default":"var(--palette-messaging-graphics-negative)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-error-indicator-color","value":"var(--palette-messaging-graphics-negative)"}},{"name":"--v-input-error-label-color","type":"variable","default":"var(--palette-messaging-text-negative)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-error-label-color","value":"var(--palette-messaging-text-negative)"}},{"name":"--v-input-error-message-color","type":"variable","default":"var(--palette-messaging-text-negative)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-error-message-color","value":"var(--palette-messaging-text-negative)"}},{"name":"--v-input-error-hover-container-border-color","type":"variable","default":"var(--palette-messaging-graphics-negative)","section":"variables","componentId":null,"libraryId":null,"data":{"variable":"--v-input-error-hover-container-border-color","value":"var(--pale