@vmz/ui 0.1.15 → 0.1.17

package/src/components/Dialog.vmz

@@ -2,40 +2,40 @@
   <div
       class="vmz-ui-dialog-root"
       data-vmz-ui="dialog"
-      data-vmz-overlay-open={open}
+      :data-vmz-overlay-open="open"
     >
       <div
-        if={open}
+        v-if="open"
         class="vmz-ui-dialog"
         data-vmz-overlay="dialog"
         data-vmz-overlay-owner="dialog"
-        data-vmz-overlay-stack={stackLevel}
+        :data-vmz-overlay-stack="stackLevel"
       >
         <button
           type="button"
           class="vmz-ui-dialog__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss dialog"
-          onClick={dismiss}
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-dialog__panel"
           role="dialog"
           aria-modal="true"
-          aria-labelledby={titleId}
+          :aria-labelledby="titleId"
           tabindex="-1"
           data-vmz-overlay-layer="panel"
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          onKeyDown={onPanelKeyDown}
+          :onKeyDown="onPanelKeyDown"
         >
-          <h2 id={titleId} class="vmz-ui-dialog__title">{title}</h2>
+          <h2 :id="titleId" class="vmz-ui-dialog__title">{{ title }}</h2>
           <div class="vmz-ui-dialog__body">
             <slot />
           </div>
           <div class="vmz-ui-dialog__actions">
-            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" onClick={dismiss}>
+            <button type="button" class="vmz-ui-dialog__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/Divider.vmz

@@ -1,6 +1,6 @@
 <template>
-  <div class="vmz-ui-divider" data-vmz-ui="divider" data-direction={direction} role="separator">
-    <span if={label}>{label}</span>
+  <div class="vmz-ui-divider" data-vmz-ui="divider" :data-direction="direction" role="separator">
+    <span v-if="label">{{ label }}</span>
   </div>
 </template>
 <style>

package/src/components/Drawer.vmz

@@ -2,40 +2,40 @@
   <div
       class="vmz-ui-drawer-root"
       data-vmz-ui="drawer"
-      data-vmz-overlay-open={open}
+      :data-vmz-overlay-open="open"
     >
       <div
-        if={open}
+        v-if="open"
         class="vmz-ui-drawer"
         data-vmz-overlay="drawer"
         data-vmz-overlay-owner="drawer"
-        data-vmz-overlay-stack={stackLevel}
+        :data-vmz-overlay-stack="stackLevel"
       >
         <button
           type="button"
           class="vmz-ui-drawer__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss drawer"
-          onClick={dismiss}
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-drawer__panel"
           role="dialog"
           aria-modal="true"
-          aria-labelledby={titleId}
+          :aria-labelledby="titleId"
           tabindex="-1"
           data-vmz-overlay-layer="panel"
           data-vmz-focus="enter"
           data-vmz-motion="overlay-enter"
           data-vmz-motion-token="motion.overlay"
-          onKeyDown={onPanelKeyDown}
+          :onKeyDown="onPanelKeyDown"
         >
-          <h2 id={titleId} class="vmz-ui-drawer__title">{title}</h2>
+          <h2 :id="titleId" class="vmz-ui-drawer__title">{{ title }}</h2>
           <div class="vmz-ui-drawer__body">
             <slot />
           </div>
           <div class="vmz-ui-drawer__actions">
-            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" onClick={dismiss}>
+            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/Dropdown.vmz

@@ -1,8 +1,13 @@
 <template>
   <details class="vmz-ui-dropdown" data-vmz-ui="dropdown">
-    <summary>{label}</summary>
-    <div class="vmz-ui-dropdown__menu">
-      <a each={items} as="item" key={item.id} href={item.href}>{item.title}</a>
+    <summary data-vmz-dropdown-trigger="1">{{ label }}</summary>
+    <div class="vmz-ui-dropdown__menu" data-vmz-dropdown-menu="1">
+      <a
+        v-for="item in items"
+        :key="item.id"
+        :href="item.href"
+        :data-vmz-dropdown-item="item.id"
+      >{{ item.title }}</a>
     </div>
   </details>
 </template>

package/src/components/Empty.vmz

@@ -1,7 +1,7 @@
 <template>
   <div class="vmz-ui-empty" data-vmz-ui="empty">
-      <h2 class="vmz-ui-empty__title">{title}</h2>
-      <p if={description} class="vmz-ui-empty__description">{description}</p>
+      <h2 class="vmz-ui-empty__title">{{ title }}</h2>
+      <p v-if="description" class="vmz-ui-empty__description">{{ description }}</p>
       <div class="vmz-ui-empty__actions">
         <slot />
       </div>

package/src/components/Field.vmz

@@ -1,21 +1,21 @@
 <template>
-  <div class="vmz-ui-field" data-vmz-ui="field" data-invalid={invalidAttr}>
-      <label if={label} class="vmz-ui-field__label" for={controlId}>{label}</label>
+  <div class="vmz-ui-field" data-vmz-ui="field" :data-invalid="invalidAttr">
+      <label v-if="label" class="vmz-ui-field__label" :for="controlId">{{ label }}</label>
       <input
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-field__control"
-        type={type}
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        disabled={disabled}
-        aria-invalid={error ? 'true' : 'false'}
-        aria-describedby={describedBy}
-        onInput={onInput}
+        :type="type"
+        :value="value"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :aria-invalid="error ? 'true' : 'false'"
+        :aria-describedby="describedBy"
+        @input="onInput"
       />
-      <p if={description} id={descriptionId} class="vmz-ui-field__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-field__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-field__error" role="alert">{{ error }}</p>
     </div>
 </template>
 

package/src/components/FilterBar.vmz

@@ -1,5 +1,5 @@
 <template>
-  <section class="vmz-ui-filter-bar" data-vmz-ui="filter-bar" aria-label={label}>
+  <section class="vmz-ui-filter-bar" data-vmz-ui="filter-bar" :aria-label="label">
       <slot />
     </section>
 </template>

package/src/components/Flex.vmz

@@ -1,4 +1,4 @@
-<template><div class="vmz-ui-flex" data-vmz-ui="flex" data-vertical={vertical?'true':'false'} data-wrap={wrap?'true':'false'}><slot /></div></template>
+<template><div class="vmz-ui-flex" data-vmz-ui="flex" :data-vertical="vertical?'true':'false'" :data-wrap="wrap?'true':'false'"><slot /></div></template>
 <style>
 .vmz-ui-flex{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;min-width:0}
 .vmz-ui-flex[data-vertical='true']{flex-direction:column;align-items:stretch}

package/src/components/Form.vmz

@@ -2,15 +2,15 @@
   <form
       class="vmz-ui-form"
       data-vmz-ui="form"
-      data-disabled={disabledAttr}
+      :data-disabled="disabledAttr"
       data-novalidate="true"
-      aria-label={label}
-      aria-describedby={describedBy}
-      onSubmit={onSubmitGuard}
-      onReset={onResetGuard}
+      :aria-label="label"
+      :aria-describedby="describedBy"
+      @submit="onSubmitGuard"
+      :onReset="onResetGuard"
     >
-      <div if={errorSummary} id={summaryId} class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
-        {errorSummary}
+      <div v-if="errorSummary" :id="summaryId" class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
+        {{ errorSummary }}
       </div>
       <slot />
     </form>

package/src/components/FormItem.vmz

@@ -2,18 +2,18 @@
   <div
       class="vmz-ui-form-item"
       data-vmz-ui="form-item"
-      data-required={requiredAttr}
-      data-invalid={invalidAttr}
+      :data-required="requiredAttr"
+      :data-invalid="invalidAttr"
     >
-      <label if={label} class="vmz-ui-form-item__label" for={controlId}>
-        <span>{label}</span>
-        <span if={required} class="vmz-ui-form-item__required" aria-hidden="true">*</span>
+      <label v-if="label" class="vmz-ui-form-item__label" :for="controlId">
+        <span>{{ label }}</span>
+        <span v-if="required" class="vmz-ui-form-item__required" aria-hidden="true">*</span>
       </label>
       <div class="vmz-ui-form-item__control">
         <slot />
       </div>
-      <p if={description} id={descriptionId} class="vmz-ui-form-item__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-form-item__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-form-item__error" role="alert">{{ error }}</p>
     </div>
 </template>
 

package/src/components/Grid.vmz

@@ -1,4 +1,4 @@
-<template><div class="vmz-ui-grid" data-vmz-ui="grid" style={'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap}><slot /></div></template>
+<template><div class="vmz-ui-grid" data-vmz-ui="grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap"><slot /></div></template>
 <style>
 .vmz-ui-grid{display:grid;grid-template-columns:repeat(var(--ui-grid-columns,3),minmax(0,1fr));gap:var(--ui-grid-gap,1rem)}
 @media(max-width:900px){.vmz-ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

package/src/components/Icon.vmz

@@ -2,25 +2,25 @@
   <span
       class="vmz-ui-icon"
       data-vmz-ui="icon"
-      data-name={name}
-      data-size={size}
-      role={decorative ? 'presentation' : 'img'}
-      aria-hidden={decorative ? 'true' : 'false'}
-      aria-label={decorative ? '' : label}
+      :data-name="name"
+      :data-size="size"
+      :role="decorative ? 'presentation' : 'img'"
+      :aria-hidden="decorative ? 'true' : 'false'"
+      :aria-label="decorative ? '' : label"
     >
       <svg class="vmz-ui-icon__svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
-        <path if={isCheck} fill="currentColor" d="M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z" />
-        <path if={isClose} fill="currentColor" d="M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z" />
-        <path if={isSearch} fill="currentColor" d="M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" />
-        <path if={isChevronDown} fill="currentColor" d="M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z" />
-        <path if={isChevronRight} fill="currentColor" d="M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z" />
-        <path if={isInfo} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
-        <path if={isWarning} fill="currentColor" d="M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
-        <path if={isSuccess} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z" />
-        <path if={isDanger} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z" />
-        <path if={isMenu} fill="currentColor" d="M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z" />
-        <path if={isPlus} fill="currentColor" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" />
-        <path if={isFallback} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z" />
+        <path v-if="isCheck" fill="currentColor" d="M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z" />
+        <path v-if="isClose" fill="currentColor" d="M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z" />
+        <path v-if="isSearch" fill="currentColor" d="M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" />
+        <path v-if="isChevronDown" fill="currentColor" d="M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z" />
+        <path v-if="isChevronRight" fill="currentColor" d="M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z" />
+        <path v-if="isInfo" fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
+        <path v-if="isWarning" fill="currentColor" d="M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
+        <path v-if="isSuccess" fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z" />
+        <path v-if="isDanger" fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z" />
+        <path v-if="isMenu" fill="currentColor" d="M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z" />
+        <path v-if="isPlus" fill="currentColor" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" />
+        <path v-if="isFallback" fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z" />
       </svg>
     </span>
 </template>

package/src/components/Link.vmz

@@ -2,9 +2,9 @@
   <a
       class="vmz-ui-link"
       data-vmz-ui="link"
-      href={href}
-      target={target}
-      rel={rel}
+      :href="href"
+      :target="target"
+      :rel="rel"
     >
       <slot />
     </a>

package/src/components/List.vmz

@@ -1,26 +1,25 @@
 <template>
   <div class="vmz-ui-list" data-vmz-ui="list">
-      <p if={label} class="vmz-ui-list__label" id={labelId}>{label}</p>
+      <p v-if="label" class="vmz-ui-list__label" :id="labelId">{{ label }}</p>
       <ul
         class="vmz-ui-list__items"
         role="listbox"
-        aria-labelledby={labelId}
-        aria-label={label}
-        onClick={onListClick}
-        onKeyDown={onListKeyDown}
+        :aria-labelledby="labelId"
+        :aria-label="label"
+        @click="onListClick"
+        :onKeyDown="onListKeyDown"
       >
         <li
-          each={items}
-          as="item"
-          key={item.id}
+          v-for="item in items"
+          :key="item.id"
           class="vmz-ui-list__item"
           role="option"
-          id={item.id}
-          data-vmz-list-item={item.id}
-          aria-selected={selected === item.id ? 'true' : 'false'}
-          tabindex={selected === item.id ? 0 : -1}
+          :id="item.id"
+          :data-vmz-list-item="item.id"
+          :aria-selected="selected === item.id ? 'true' : 'false'"
+          :tabindex="selected === item.id ? 0 : -1"
         >
-          {item.title}
+          {{ item.title }}
         </li>
       </ul>
     </div>

package/src/components/Menu.vmz

@@ -1,39 +1,38 @@
 <template>
-  <div class="vmz-ui-menu" data-vmz-ui="menu" data-vmz-overlay-open={open}>
+  <div class="vmz-ui-menu" data-vmz-ui="menu" :data-vmz-overlay-open="open">
       <button
         type="button"
         class="vmz-ui-menu__trigger"
         data-vmz-menu="trigger"
         aria-haspopup="menu"
-        aria-expanded={open ? 'true' : 'false'}
-        aria-controls={menuId}
-        onClick={toggle}
-        onKeyDown={onTriggerKeyDown}
+        :aria-expanded="open ? 'true' : 'false'"
+        :aria-controls="menuId"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
-        {label}
+        {{ label }}
       </button>
       <div
-        if={open}
-        id={menuId}
+        v-if="open"
+        :id="menuId"
         class="vmz-ui-menu__panel"
         role="menu"
         data-vmz-overlay="menu"
         data-vmz-overlay-owner="menu"
         data-vmz-focus="enter"
         tabindex="-1"
-        onKeyDown={onMenuKeyDown}
+        :onKeyDown="onMenuKeyDown"
       >
         <button
-          each={items}
-          as="item"
-          key={item.id}
+          v-for="item in items"
+          :key="item.id"
           type="button"
           class="vmz-ui-menu__item"
           role="menuitem"
-          data-vmz-menu-item={item.id}
-          onClick={onItemClick}
+          :data-vmz-menu-item="item.id"
+          @click="onItemClick"
         >
-          {item.title}
+          {{ item.title }}
         </button>
       </div>
     </div>

package/src/components/Notification.vmz

@@ -2,11 +2,11 @@
   <div
       class="vmz-ui-notification"
       data-vmz-ui="notification"
-      data-tone={tone}
-      role={roleName}
+      :data-tone="tone"
+      :role="roleName"
     >
-      <p if={title} class="vmz-ui-notification__title">{title}</p>
-      <p if={description} class="vmz-ui-notification__description">{description}</p>
+      <p v-if="title" class="vmz-ui-notification__title">{{ title }}</p>
+      <p v-if="description" class="vmz-ui-notification__description">{{ description }}</p>
       <div class="vmz-ui-notification__actions">
         <slot />
       </div>

package/src/components/Pagination.vmz

@@ -1,19 +1,19 @@
 <template>
-  <nav class="vmz-ui-pagination" data-vmz-ui="pagination" aria-label={label}>
+  <nav class="vmz-ui-pagination" data-vmz-ui="pagination" :aria-label="label">
       <button
         type="button"
         class="vmz-ui-pagination__btn"
-        disabled={prevDisabled}
-        onClick={onPrevClick}
+        :disabled="prevDisabled"
+        @click="onPrevClick"
       >
         Previous
       </button>
-      <p class="vmz-ui-pagination__status" data-vmz-fixture="page-status">{status}</p>
+      <p class="vmz-ui-pagination__status" data-vmz-fixture="page-status">{{ status }}</p>
       <button
         type="button"
         class="vmz-ui-pagination__btn"
-        disabled={nextDisabled}
-        onClick={onNextClick}
+        :disabled="nextDisabled"
+        @click="onNextClick"
       >
         Next
       </button>

package/src/components/Popover.vmz

@@ -2,38 +2,38 @@
   <div
       class="vmz-ui-popover-root"
       data-vmz-ui="popover"
-      data-vmz-overlay-open={open}
+      :data-vmz-overlay-open="open"
     >
       <div
-        if={open}
+        v-if="open"
         class="vmz-ui-popover"
         data-vmz-overlay="popover"
         data-vmz-overlay-owner="popover"
-        data-vmz-overlay-stack={stackLevel}
+        :data-vmz-overlay-stack="stackLevel"
       >
         <button
           type="button"
           class="vmz-ui-popover__backdrop"
           data-vmz-overlay-layer="backdrop"
           aria-label="Dismiss popover"
-          onClick={dismiss}
+          @click="dismiss"
         ></button>
         <div
           class="vmz-ui-popover__panel"
           role="dialog"
           aria-modal="false"
-          aria-labelledby={titleId}
+          :aria-labelledby="titleId"
           tabindex="-1"
           data-vmz-overlay-layer="panel"
           data-vmz-focus="enter"
-          onKeyDown={onPanelKeyDown}
+          :onKeyDown="onPanelKeyDown"
         >
-          <h2 id={titleId} class="vmz-ui-popover__title">{title}</h2>
+          <h2 :id="titleId" class="vmz-ui-popover__title">{{ title }}</h2>
           <div class="vmz-ui-popover__body">
             <slot />
           </div>
           <div class="vmz-ui-popover__actions">
-            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" onClick={dismiss}>
+            <button type="button" class="vmz-ui-popover__close" data-vmz-focus="close" @click="dismiss">
               Close
             </button>
           </div>

package/src/components/Progress.vmz

@@ -1,7 +1,7 @@
 <template>
-  <div class="vmz-ui-progress" data-vmz-ui="progress" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={percent}>
-    <div class="vmz-ui-progress__track"><span style={'width:' + percent + '%'}></span></div>
-    <span if={showInfo} class="vmz-ui-progress__text">{percent}%</span>
+  <div class="vmz-ui-progress" data-vmz-ui="progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="100" :aria-valuenow="percent">
+    <div class="vmz-ui-progress__track"><span :style="'width:' + percent + '%'"></span></div>
+    <span v-if="showInfo" class="vmz-ui-progress__text">{{ percent }}%</span>
   </div>
 </template>
 <style>

package/src/components/QueryForm.vmz

@@ -3,8 +3,8 @@
       class="vmz-ui-query-form"
       data-vmz-ui="query-form"
       data-dense="true"
-      aria-label={label}
-      onSubmit={onSubmitGuard}
+      :aria-label="label"
+      @submit="onSubmitGuard"
     >
       <slot />
     </form>

package/src/components/RadioGroup.vmz

@@ -2,34 +2,33 @@
   <fieldset
       class="vmz-ui-radio-group"
       data-vmz-ui="radio-group"
-      data-invalid={invalidAttr}
-      aria-describedby={describedBy}
-      disabled={disabled}
+      :data-invalid="invalidAttr"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
     >
-      <legend class="vmz-ui-radio-group__legend">{label}</legend>
-      <div class="vmz-ui-radio-group__list" role="radiogroup" aria-label={label} onClick={onListClick}>
+      <legend class="vmz-ui-radio-group__legend">{{ label }}</legend>
+      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="onListClick">
         <label
-          each={items}
-          as="item"
-          key={item.value}
+          v-for="item in items"
+          :key="item.value"
           class="vmz-ui-radio-group__option"
-          for={item.id}
+          :for="item.id"
         >
           <input
-            id={item.id}
+            :id="item.id"
             class="vmz-ui-radio-group__input"
             type="radio"
-            name={name}
-            value={item.value}
-            checked={value === item.value}
-            disabled={disabled}
-            data-vmz-radio={item.value}
+            :name="name"
+            :value="item.value"
+            :checked="value === item.value"
+            :disabled="disabled"
+            :data-vmz-radio="item.value"
           />
-          <span class="vmz-ui-radio-group__text">{item.label}</span>
+          <span class="vmz-ui-radio-group__text">{{ item.label }}</span>
         </label>
       </div>
-      <p if={description} id={descriptionId} class="vmz-ui-radio-group__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-radio-group__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-radio-group__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-radio-group__error" role="alert">{{ error }}</p>
     </fieldset>
 </template>
 

package/src/components/Result.vmz

@@ -2,10 +2,10 @@
   <section
       class="vmz-ui-result"
       data-vmz-ui="result"
-      data-status={status}
+      :data-status="status"
     >
-      <p class="vmz-ui-result__title">{title}</p>
-      <p if={description} class="vmz-ui-result__description">{description}</p>
+      <p class="vmz-ui-result__title">{{ title }}</p>
+      <p v-if="description" class="vmz-ui-result__description">{{ description }}</p>
       <div class="vmz-ui-result__actions">
         <slot />
       </div>

package/src/components/Segmented.vmz

@@ -1,13 +1,13 @@
 <template>
-  <div class="vmz-ui-segmented" data-vmz-ui="segmented" role="group" aria-label={label}>
+  <div class="vmz-ui-segmented" data-vmz-ui="segmented" role="group" :aria-label="label">
     <button
-      each={options}
-      as="opt"
-      key={opt.value}
+      v-for="opt in options"
+      :key="opt.value"
       type="button"
-      aria-pressed={opt.value === value ? 'true' : 'false'}
-      onClick={() => onPick(opt.value)}
-    >{opt.label}</button>
+      :data-vmz-segment="opt.value"
+      :aria-pressed="opt.value === value ? 'true' : 'false'"
+      @click="() => this.onPick(opt.value)"
+    >{{ opt.label }}</button>
   </div>
 </template>
 <style>