@vmz/ui 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",

package/src/components/Accordion.vmz

@@ -1,28 +1,28 @@
 <template>
-  <div class="vmz-ui-accordion" data-vmz-ui="accordion" aria-label={label}>
-      <div each={items} as="item" key={item.id} class="vmz-ui-accordion__item" data-vmz-accordion={item.id}>
+  <div class="vmz-ui-accordion" data-vmz-ui="accordion" :aria-label="label">
+      <div v-for="item in items" :key="item.id" class="vmz-ui-accordion__item" :data-vmz-accordion="item.id">
         <h3 class="vmz-ui-accordion__heading">
           <button
             type="button"
             class="vmz-ui-accordion__trigger"
-            id={item.triggerId}
-            data-vmz-accordion-trigger={item.id}
-            aria-expanded={openId === item.id ? 'true' : 'false'}
-            aria-controls={item.panelId}
-            onClick={() => this.toggle(item.id)}
+            :id="item.triggerId"
+            :data-vmz-accordion-trigger="item.id"
+            :aria-expanded="openId === item.id ? 'true' : 'false'"
+            :aria-controls="item.panelId"
+            @click="() => this.toggle(item.id)"
           >
-            {item.title}
+            {{ item.title }}
           </button>
         </h3>
         <div
-          if={openId === item.id}
-          id={item.panelId}
+          v-if="openId === item.id"
+          :id="item.panelId"
           class="vmz-ui-accordion__panel"
           role="region"
-          data-vmz-accordion-panel={item.id}
-          aria-labelledby={item.triggerId}
+          :data-vmz-accordion-panel="item.id"
+          :aria-labelledby="item.triggerId"
         >
-          {item.body}
+          {{ item.body }}
         </div>
       </div>
     </div>

package/src/components/Alert.vmz

@@ -2,11 +2,11 @@
   <div
       class="vmz-ui-alert"
       data-vmz-ui="alert"
-      data-tone={tone}
-      role={roleName}
+      :data-tone="tone"
+      :role="roleName"
     >
-      <p if={title} class="vmz-ui-alert__title">{title}</p>
-      <p if={description} class="vmz-ui-alert__description">{description}</p>
+      <p v-if="title" class="vmz-ui-alert__title">{{ title }}</p>
+      <p v-if="description" class="vmz-ui-alert__description">{{ description }}</p>
       <div class="vmz-ui-alert__actions">
         <slot />
       </div>

package/src/components/AppShell.vmz

@@ -1,10 +1,10 @@
 <template>
   <div class="vmz-ui-app-shell" data-vmz-ui="app-shell">
       <header class="vmz-ui-app-shell__header" data-vmz-shell="header"><div class="vmz-ui-app-shell__header-inner">
-        <a class="vmz-ui-app-shell__brand" href={homeHref}>{brand}</a>
-        <nav class="vmz-ui-app-shell__nav" aria-label={navLabel}>
-          <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
-            {item.title}
+        <a class="vmz-ui-app-shell__brand" :href="homeHref">{{ brand }}</a>
+        <nav class="vmz-ui-app-shell__nav" :aria-label="navLabel">
+          <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id">
+            {{ item.title }}
           </a>
         </nav>
       </div></header>

package/src/components/Autocomplete.vmz

@@ -2,49 +2,48 @@
   <div
       class="vmz-ui-autocomplete"
       data-vmz-ui="autocomplete"
-      data-invalid={invalidAttr}
-      data-open={openAttr}
+      :data-invalid="invalidAttr"
+      :data-open="openAttr"
     >
-      <label if={label} class="vmz-ui-autocomplete__label" for={controlId}>{label}</label>
+      <label v-if="label" class="vmz-ui-autocomplete__label" :for="controlId">{{ label }}</label>
       <input
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-autocomplete__control"
         type="text"
         role="combobox"
         autocomplete="off"
         aria-autocomplete="list"
-        aria-expanded={openAttr}
-        aria-controls={listId}
-        aria-invalid={error ? 'true' : 'false'}
-        aria-describedby={describedBy}
-        value={value}
-        disabled={disabled}
-        onInput={onInput}
-        onKeyDown={onKeyDown}
+        :aria-expanded="openAttr"
+        :aria-controls="listId"
+        :aria-invalid="error ? 'true' : 'false'"
+        :aria-describedby="describedBy"
+        :value="value"
+        :disabled="disabled"
+        @input="onInput"
+        :onKeyDown="onKeyDown"
       />
       <ul
-        if={listOpen}
-        id={listId}
+        v-if="listOpen"
+        :id="listId"
         class="vmz-ui-autocomplete__list"
         role="listbox"
         data-vmz-autocomplete="list"
-        onClick={onListClick}
+        @click="onListClick"
       >
         <li
-          each={options}
-          as="opt"
-          key={opt.value}
+          v-for="opt in options"
+          :key="opt.value"
           class="vmz-ui-autocomplete__option"
           role="option"
-          data-vmz-option={opt.value}
+          :data-vmz-option="opt.value"
           tabindex="-1"
         >
-          {opt.label}
+          {{ opt.label }}
         </li>
       </ul>
-      <p if={showEmpty} class="vmz-ui-autocomplete__empty" data-vmz-autocomplete="empty">{emptyText}</p>
-      <p if={description} id={descriptionId} class="vmz-ui-autocomplete__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-autocomplete__error" role="alert">{error}</p>
+      <p v-if="showEmpty" class="vmz-ui-autocomplete__empty" data-vmz-autocomplete="empty">{{ emptyText }}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-autocomplete__error" role="alert">{{ error }}</p>
     </div>
 </template>
 

package/src/components/Avatar.vmz

@@ -1,5 +1,5 @@
 <template>
-  <span class="vmz-ui-avatar" data-vmz-ui="avatar" data-size={size} aria-label={label}><img if={src} src={src} alt="" /><span if={!src}>{text}</span></span>
+  <span class="vmz-ui-avatar" data-vmz-ui="avatar" :data-size="size" :aria-label="label"><img v-if="src" :src="src" alt="" /><span v-if="!src">{{ text }}</span></span>
 </template>
 
 <style>

package/src/components/Badge.vmz

@@ -1,5 +1,5 @@
 <template>
-  <span class="vmz-ui-badge" data-vmz-ui="badge" data-tone={tone}>
+  <span class="vmz-ui-badge" data-vmz-ui="badge" :data-tone="tone">
       <slot />
     </span>
 </template>

package/src/components/Breadcrumb.vmz

@@ -1,9 +1,9 @@
 <template>
-  <nav class="vmz-ui-breadcrumb" data-vmz-ui="breadcrumb" aria-label={label}>
+  <nav class="vmz-ui-breadcrumb" data-vmz-ui="breadcrumb" :aria-label="label">
       <ol class="vmz-ui-breadcrumb__list">
-        <li each={items} as="item" key={item.id} class="vmz-ui-breadcrumb__item" data-vmz-crumb={item.id}>
-          <a if={item.href} class="vmz-ui-breadcrumb__link" href={item.href}>{item.title}</a>
-          <span if={!item.href} class="vmz-ui-breadcrumb__current" aria-current="page">{item.title}</span>
+        <li v-for="item in items" :key="item.id" class="vmz-ui-breadcrumb__item" :data-vmz-crumb="item.id">
+          <a v-if="item.href" class="vmz-ui-breadcrumb__link" :href="item.href">{{ item.title }}</a>
+          <span v-if="!item.href" class="vmz-ui-breadcrumb__current" aria-current="page">{{ item.title }}</span>
         </li>
       </ol>
     </nav>

package/src/components/BulkActions.vmz

@@ -1,12 +1,12 @@
 <template>
   <div
-      if={selectedCount}
+      v-if="selectedCount"
       class="vmz-ui-bulk-actions"
       data-vmz-ui="bulk-actions"
       role="region"
-      aria-label={label}
+      :aria-label="label"
     >
-      <p class="vmz-ui-bulk-actions__count" data-vmz-fixture="bulk-count">{countLabel}</p>
+      <p class="vmz-ui-bulk-actions__count" data-vmz-fixture="bulk-count">{{ countLabel }}</p>
       <div class="vmz-ui-bulk-actions__actions">
         <slot />
       </div>

package/src/components/Button.vmz

@@ -1,19 +1,19 @@
 <template>
   <button
-      type={type}
+      :type="type"
       class="vmz-ui-btn"
       data-vmz-ui="button"
       data-vmz-motion="control"
       data-vmz-motion-token="motion.control"
-      data-variant={variant}
-      data-size={size}
-      data-block={block ? 'true' : 'false'}
-      data-loading={loading ? 'true' : 'false'}
-      disabled={disabled}
-      aria-busy={loading ? 'true' : 'false'}
-      onClick={onClick}
+      :data-variant="variant"
+      :data-size="size"
+      :data-block="block ? 'true' : 'false'"
+      :data-loading="loading ? 'true' : 'false'"
+      :disabled="disabled"
+      :aria-busy="loading ? 'true' : 'false'"
+      @click="onClick"
     >
-      <span if={loading} class="vmz-ui-btn__spinner" aria-hidden="true"></span>
+      <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
       <slot />
     </button>
 </template>

package/src/components/Callout.vmz

@@ -2,11 +2,11 @@
   <aside
       class="vmz-ui-callout"
       data-vmz-ui="callout"
-      data-tone={tone}
-      role={roleName}
+      :data-tone="tone"
+      :role="roleName"
     >
-      <p if={title} class="vmz-ui-callout__title">{title}</p>
-      <p if={description} class="vmz-ui-callout__description">{description}</p>
+      <p v-if="title" class="vmz-ui-callout__title">{{ title }}</p>
+      <p v-if="description" class="vmz-ui-callout__description">{{ description }}</p>
       <div class="vmz-ui-callout__body">
         <slot />
       </div>

package/src/components/Card.vmz

@@ -1,8 +1,8 @@
 <template>
-  <section class="vmz-ui-card" data-vmz-ui="card" data-size={size} data-bordered={bordered ? 'true' : 'false'} data-hoverable={hoverable ? 'true' : 'false'}>
-      <header if={title} class="vmz-ui-card__header">
-        <h2 class="vmz-ui-card__title">{title}</h2>
-        <p if={description} class="vmz-ui-card__description">{description}</p>
+  <section class="vmz-ui-card" data-vmz-ui="card" :data-size="size" :data-bordered="bordered ? 'true' : 'false'" :data-hoverable="hoverable ? 'true' : 'false'">
+      <header v-if="title" class="vmz-ui-card__header">
+        <h2 class="vmz-ui-card__title">{{ title }}</h2>
+        <p v-if="description" class="vmz-ui-card__description">{{ description }}</p>
       </header>
       <div class="vmz-ui-card__body">
         <slot />

package/src/components/Checkbox.vmz

@@ -1,15 +1,15 @@
 <template>
-  <label class="vmz-ui-checkbox" data-vmz-ui="checkbox" for={controlId}>
+  <label class="vmz-ui-checkbox" data-vmz-ui="checkbox" :for="controlId">
       <input
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-checkbox__input"
         type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        aria-describedby={describedBy}
-        onClick={onToggle}
+        :checked="checked"
+        :disabled="disabled"
+        :aria-describedby="describedBy"
+        @click="onToggle"
       />
-      <span class="vmz-ui-checkbox__label">{label}</span>
+      <span class="vmz-ui-checkbox__label">{{ label }}</span>
     </label>
 </template>
 

package/src/components/CodeBlock.vmz

@@ -1,10 +1,10 @@
 <template>
   <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
       <div class="vmz-ui-code-block__bar">
-        <figcaption if={caption} class="vmz-ui-code-block__caption">{caption}</figcaption>
-        <Button type="button" variant="ghost" onClick={onCopy}>{copyLabel}</Button>
+        <figcaption v-if="caption" class="vmz-ui-code-block__caption">{{ caption }}</figcaption>
+        <Button type="button" variant="ghost" @click="onCopy">{{ copyLabel }}</Button>
       </div>
-      <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{code}</code></pre>
+      <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{{ code }}</code></pre>
     </figure>
 </template>
 

package/src/components/Collapse.vmz

@@ -1,8 +1,8 @@
 <template>
   <div class="vmz-ui-collapse" data-vmz-ui="collapse">
-    <details each={items} as="item" key={item.id}>
-      <summary>{item.title}</summary>
-      <div class="vmz-ui-collapse__body">{item.body}</div>
+    <details v-for="item in items" :key="item.id">
+      <summary>{{ item.title }}</summary>
+      <div class="vmz-ui-collapse__body">{{ item.body }}</div>
     </details>
   </div>
 </template>

package/src/components/ConsoleShell.vmz

@@ -1,22 +1,22 @@
 <template>
   <div class="vmz-ui-console-shell" data-vmz-ui="console-shell">
-      <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" aria-label={navLabel}>
-        <a class="vmz-ui-console-shell__brand" href={homeHref}>{brand}</a>
+      <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" :aria-label="navLabel">
+        <a class="vmz-ui-console-shell__brand" :href="homeHref">{{ brand }}</a>
         <nav class="vmz-ui-console-shell__nav">
-          <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
-            {item.title}
+          <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id">
+            {{ item.title }}
           </a>
         </nav>
       </aside>
       <div class="vmz-ui-console-shell__body">
         <header class="vmz-ui-console-shell__header" data-vmz-shell="header">
-          <h1 class="vmz-ui-console-shell__title">{title}</h1>
+          <h1 class="vmz-ui-console-shell__title">{{ title }}</h1>
         </header>
         <main class="vmz-ui-console-shell__main" data-vmz-shell="main">
           <slot />
         </main>
-        <footer if={footer} class="vmz-ui-console-shell__footer" data-vmz-shell="footer">
-          {footer}
+        <footer v-if="footer" class="vmz-ui-console-shell__footer" data-vmz-shell="footer">
+          {{ footer }}
         </footer>
       </div>
     </div>

package/src/components/DataTable.vmz

@@ -2,56 +2,55 @@
   <div
       class="vmz-ui-datatable-wrap"
       data-vmz-ui="data-table"
-      data-sort-key={sortKey}
-      data-sort-dir={sortDir}
-      data-selected-count={selectedCount}
+      :data-sort-key="sortKey"
+      :data-sort-dir="sortDir"
+      :data-selected-count="selectedCount"
     >
       <table class="vmz-ui-datatable">
-        <thead onClick={onHeadClick}>
+        <thead @click="onHeadClick">
           <tr>
             <th scope="col" class="vmz-ui-datatable__check">
               <input
                 type="checkbox"
                 class="vmz-ui-datatable__box"
                 data-vmz-select-all="true"
-                aria-label={selectAllLabel}
-                checked={allSelected}
+                :aria-label="selectAllLabel"
+                :checked="allSelected"
               />
             </th>
-            <th each={columns} as="col" key={col.id} scope="col" data-vmz-col={col.id}>
-              <button type="button" class="vmz-ui-datatable__sort" data-vmz-sort={col.id}>
-                {col.title}
+            <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
+              <button type="button" class="vmz-ui-datatable__sort" :data-vmz-sort="col.id">
+                {{ col.title }}
               </button>
             </th>
-            <th if={hasRowAction} scope="col">{actionTitle}</th>
+            <th v-if="hasRowAction" scope="col">{{ actionTitle }}</th>
           </tr>
         </thead>
-        <tbody onClick={onBodyClick}>
+        <tbody @click="onBodyClick">
           <tr
-            each={rows}
-            as="row"
-            key={row.id}
-            data-vmz-row={row.id}
-            data-selected={row.selectedAttr}
+            v-for="row in rows"
+            :key="row.id"
+            :data-vmz-row="row.id"
+            :data-selected="row.selectedAttr"
           >
             <td class="vmz-ui-datatable__check">
               <input
                 type="checkbox"
                 class="vmz-ui-datatable__box"
-                data-vmz-select={row.id}
-                aria-label={row.selectLabel}
-                checked={row.selected}
+                :data-vmz-select="row.id"
+                :aria-label="row.selectLabel"
+                :checked="row.selected"
               />
             </td>
-            <td each={row.cells} as="cell">{cell}</td>
-            <td if={hasRowAction}>
+            <td v-for="cell in row.cells">{{ cell }}</td>
+            <td v-if="hasRowAction">
               <button
                 type="button"
                 class="vmz-ui-datatable__row-action"
-                data-vmz-row-action={row.id}
-                disabled={rowActionDisabled}
+                :data-vmz-row-action="row.id"
+                :disabled="rowActionDisabled"
               >
-                {actionLabel}
+                {{ actionLabel }}
               </button>
             </td>
           </tr>

package/src/components/DatePicker.vmz

@@ -1,40 +1,40 @@
 <template>
   <div
-      class={'vmz-ui-date-picker' + (open ? ' is-opened' : '')}
+      :class="'vmz-ui-date-picker' + (open ? ' is-opened' : '')"
       data-vmz-ui="date-picker"
-      data-mode={mode}
-      data-invalid={invalidAttr}
+      :data-mode="mode"
+      :data-invalid="invalidAttr"
     >
-      <label if={label} class="vmz-ui-date-picker__label" for={controlId}>{label}</label>
+      <label v-if="label" class="vmz-ui-date-picker__label" :for="controlId">{{ label }}</label>
       <button
         type="button"
-        id={controlId}
+        :id="controlId"
         class="vmz-ui-date-picker__control"
-        disabled={disabled}
+        :disabled="disabled"
         aria-haspopup="dialog"
-        aria-expanded={open ? 'true' : 'false'}
-        aria-controls={panelId}
-        aria-invalid={error ? 'true' : 'false'}
-        aria-describedby={describedBy}
-        onClick={toggle}
-        onKeyDown={onTriggerKeyDown}
+        :aria-expanded="open ? 'true' : 'false'"
+        :aria-controls="panelId"
+        :aria-invalid="error ? 'true' : 'false'"
+        :aria-describedby="describedBy"
+        @click="toggle"
+        :onKeyDown="onTriggerKeyDown"
       >
-        <span class="vmz-ui-date-picker__value" data-vmz-date="value">{displayLabel}</span>
+        <span class="vmz-ui-date-picker__value" data-vmz-date="value">{{ displayLabel }}</span>
         <span class="vmz-ui-date-picker__chev" aria-hidden="true"></span>
       </button>
       <div
-        if={open}
-        id={panelId}
+        v-if="open"
+        :id="panelId"
         class="vmz-ui-date-picker__panel"
         role="dialog"
         aria-modal="false"
-        aria-label={panelLabel}
+        :aria-label="panelLabel"
         tabindex="-1"
         data-vmz-overlay="date-picker"
         data-vmz-overlay-owner="date-picker"
         data-vmz-focus="enter"
         data-vmz-date="panel"
-        onKeyDown={onPanelKeyDown}
+        :onKeyDown="onPanelKeyDown"
       >
         <div class="vmz-ui-date-picker__monthbar">
           <button
@@ -42,45 +42,42 @@
             class="vmz-ui-date-picker__nav"
             data-vmz-date="prev"
             aria-label="Previous month"
-            onClick={prevMonth}
+            @click="prevMonth"
           >‹</button>
-          <p class="vmz-ui-date-picker__month" data-vmz-date="month">{monthLabel}</p>
+          <p class="vmz-ui-date-picker__month" data-vmz-date="month">{{ monthLabel }}</p>
           <button
             type="button"
             class="vmz-ui-date-picker__nav"
             data-vmz-date="next"
             aria-label="Next month"
-            onClick={nextMonth}
+            @click="nextMonth"
           >›</button>
         </div>
         <div class="vmz-ui-date-picker__weekdays" aria-hidden="true">
           <span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span><span>Su</span>
         </div>
-        <div class="vmz-ui-date-picker__grid" role="grid" aria-labelledby={panelId}>
+        <div class="vmz-ui-date-picker__grid" role="grid" :aria-labelledby="panelId">
           <button
-            each={days}
-            as="day"
-            key={day.key}
+            v-for="day in days"
+            :key="day.key"
             type="button"
             role="gridcell"
-            class={
-              'vmz-ui-date-picker__day' +
+            :class="'vmz-ui-date-picker__day' +
               (day.inMonth ? '' : ' is-outside') +
               (day.selected ? ' is-on' : '') +
               (day.inRange ? ' is-in-range' : '') +
               (day.rangeEdge ? ' is-range-edge' : '') +
-              (day.disabled ? ' is-disabled' : '')
-            }
-            data-vmz-date-iso={day.iso}
-            aria-selected={day.selected ? 'true' : 'false'}
-            aria-disabled={day.disabled ? 'true' : 'false'}
-            disabled={day.disabled}
-            onClick={onDayClick}
-          >{day.label}</button>
+              (day.disabled ? ' is-disabled' : '')"
+            :data-vmz-date-iso="day.iso"
+            :aria-selected="day.selected ? 'true' : 'false'"
+            :aria-disabled="day.disabled ? 'true' : 'false'"
+            :disabled="day.disabled"
+            @click="onDayClick"
+          >{{ day.label }}</button>
         </div>
       </div>
-      <p if={description} id={descriptionId} class="vmz-ui-date-picker__description">{description}</p>
-      <p if={error} id={errorId} class="vmz-ui-date-picker__error" role="alert">{error}</p>
+      <p v-if="description" :id="descriptionId" class="vmz-ui-date-picker__description">{{ description }}</p>
+      <p v-if="error" :id="errorId" class="vmz-ui-date-picker__error" role="alert">{{ error }}</p>
     </div>
 </template>
 

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>