@nvidia-elements/core 0.1.2 → 0.1.4

package/dist/button/button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.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/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\ndeclare const __ELEMENTS_REPO_BASE_URL__: string;\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px;\" />\n    <section>\n      <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const logo = document.getElementById('logo');\n      logo.addEventListener('command', (event) => {\n        if (event.command == '--rotate-left') {\n          logo.style.rotate = '-90deg';\n        } else if (event.command == '--rotate-right') {\n          logo.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.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/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <nve-icon\n      id=\"rotation-target\"\n      name=\"sparkles\"\n      aria-label=\"sparkles icon\"\n      style=\"inline-size: 100px; block-size: 100px;\"\n    ></nve-icon>\n    <section>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const target = document.getElementById('rotation-target');\n      target.addEventListener('command', (event) => {\n        if (event.command === '--rotate-left') {\n          target.style.rotate = '-90deg';\n        } else if (event.command === '--rotate-right') {\n          target.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/button/button.examples.json

@@ -79,10 +79,10 @@
     {
       "id": "button-invoker-command",
       "name": "InvokerCommand",
-      "template": "<img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px\" />\n<section>\n  <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"logo\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const logo = document.getElementById(\"logo\");\n  logo.addEventListener(\"command\", (event) => {\n    if (event.command == \"--rotate-left\") {\n      logo.style.rotate = \"-90deg\";\n    } else if (event.command == \"--rotate-right\") {\n      logo.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
+      "template": "<nve-icon\n  id=\"rotation-target\"\n  name=\"sparkles\"\n  aria-label=\"sparkles icon\"\n  style=\"inline-size: 100px; block-size: 100px\"\n></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
       "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
       "description": "",
-      "composition": false,
+      "composition": true,
       "tags": []
     },
     {

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var o = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	render() {

package/dist/button-group/button-group2.js

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "0.1.2",
+			version: "0.1.4",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "0.1.2",
+			version: "0.1.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "0.1.2",
+			version: "0.1.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "0.1.2",
+			version: "0.1.4",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message2.js

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "0.1.2",
+			version: "0.1.4",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "0.1.2",
+			version: "0.1.4",
 			children: [
 				"label",
 				"input",

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	static {

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	static {

package/dist/copy-button/copy-button2.js

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "0.1.2"
+			version: "0.1.4"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -440,10 +440,7 @@ export type ButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -495,6 +492,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type CardProps = {
@@ -740,10 +739,7 @@ export type CopyButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -793,6 +789,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type DateProps = {
@@ -1778,10 +1776,7 @@ Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -1833,6 +1828,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type IconProps = {
@@ -2251,10 +2248,7 @@ export type MenuItemProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -2306,6 +2300,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type MenuProps = {
@@ -2969,10 +2965,7 @@ export type SortButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3024,7 +3017,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
-
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
   /** Dispatched on sort button click, returns the current sort value and the next sort value. */
   onsort?: (e: CustomEvent<never>) => void;
 };
@@ -3195,10 +3189,7 @@ Demonstrates different container styles to accommodate visual weight and context
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3245,6 +3236,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type StepsProps = {
@@ -3349,10 +3342,7 @@ export type TabsItemProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3399,6 +3389,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type TabsProps = {
@@ -3463,10 +3455,7 @@ export type TagProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3518,6 +3507,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 export type TextareaProps = {

package/dist/custom-elements-vue.d.ts

@@ -367,10 +367,7 @@ type ButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -422,6 +419,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type CardProps = {
@@ -667,10 +666,7 @@ type CopyButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -720,6 +716,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type DateProps = {
@@ -1705,10 +1703,7 @@ Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -1760,6 +1755,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type IconProps = {
@@ -2178,10 +2175,7 @@ type MenuItemProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -2233,6 +2227,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type MenuProps = {
@@ -2896,10 +2892,7 @@ type SortButtonProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -2951,7 +2944,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
-
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
   /** Dispatched on sort button click, returns the current sort value and the next sort value. */
   onsort?: (e: CustomEvent<never>) => void;
 };
@@ -3122,10 +3116,7 @@ Demonstrates different container styles to accommodate visual weight and context
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3172,6 +3163,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type StepsProps = {
@@ -3276,10 +3269,7 @@ type TabsItemProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3326,6 +3316,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type TabsProps = {
@@ -3390,10 +3382,7 @@ type TagProps = {
 
 - `false` The associated content collapses and hides from the user. */
   expanded?: boolean;
-  /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
-- `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it.
-
-- `false` The element allows editing and the user can change its value through interaction. */
+  /**  */
   readonly?: boolean;
   /** Like input form, sets a button to submit a form outside its parent form.
 Returns a reference to the form element if available.
@@ -3445,6 +3434,8 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForEl
   /** The idref of the element that receives the interest.
 https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/interestForElement */
   interestfor?: string | null;
+  /** @deprecated Use `readOnly`. The `readonly` attribute remains supported. */
+  readonly?: boolean;
 };
 
 type TextareaProps = {