@carbon/vue 2.34.1 → 2.35.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.34.1",
+  "version": "2.35.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -63,8 +63,8 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.10.2",
-    "carbon-components": "10.16.0",
+    "@carbon/icons-vue": "10.20.0",
+    "carbon-components": "10.23.1",
     "flatpickr": "4.6.3",
     "vue": "^2.6.12"
   },
@@ -73,5 +73,5 @@
     "eslint-plugin-prettier": "^3.1.1",
     "vue-template-compiler": "^2.6.12"
   },
-  "gitHead": "5dda51139702bbd900e288e818c948a8bc530729"
+  "gitHead": "08825d15ce4b9a73e30bc8809b0e2185e80fd2b8"
 }

package/src/components/cv-accordion/cv-accordion-item.vue

@@ -11,7 +11,9 @@
     class="cv-accordion-item"
     :class="[
       `${carbonPrefix}--accordion__item`,
+
       {
+        [`${carbonPrefix}--accordion__item--disabled`]: disabled,
         [`${carbonPrefix}--accordion__item--active`]: dataOpen,
         [`${carbonPrefix}--accordion__item--${this.animation}`]: animation,
       },
@@ -19,6 +21,7 @@
     @animationend="onAnimationEnd"
   >
     <button
+      :disabled="disabled"
       ref="button"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
@@ -45,6 +48,7 @@ export default {
   mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { ChevronRight16 },
   props: {
+    disabled: Boolean,
     open: { type: Boolean, default: false },
   },
   watch: {

package/src/components/cv-accordion/cv-accordion-skeleton.vue

@@ -1,5 +1,13 @@
 <template>
-  <ul :class="`${carbonPrefix}--accordion ${carbonPrefix}--skeleton`">
+  <ul
+    :class="[
+      `${carbonPrefix}--accordion ${carbonPrefix}--skeleton`,
+      {
+        [`${carbonPrefix}--accordion--${align}`]: align,
+        [`${carbonPrefix}--accordion--${size}`]: size,
+      },
+    ]"
+  >
     <cv-accordion-item-skeleton :open="true">
       <cv-skeleton-text width="90%"></cv-skeleton-text>
       <cv-skeleton-text width="80%"></cv-skeleton-text>
@@ -18,6 +26,14 @@ import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionSkeleton',
+  props: {
+    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
+    size: {
+      type: String,
+      default: '',
+      validator: val => ['sm', 'xl', ''].includes(val),
+    },
+  },
   mixins: [carbonPrefixMixin],
   components: {
     CvSkeletonText,

package/src/components/cv-accordion/cv-accordion.vue

@@ -1,5 +1,14 @@
 <template>
-  <ul data-accordion :class="`cv-accordion ${carbonPrefix}--accordion`">
+  <ul
+    data-accordion
+    :class="[
+      `cv-accordion ${carbonPrefix}--accordion`,
+      {
+        [`${carbonPrefix}--accordion--${align}`]: align,
+        [`${carbonPrefix}--accordion--${size}`]: size,
+      },
+    ]"
+  >
     <slot></slot>
   </ul>
 </template>
@@ -9,6 +18,14 @@ import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordion',
+  props: {
+    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
+    size: {
+      type: String,
+      default: '',
+      validator: val => ['sm', 'xl', ''].includes(val),
+    },
+  },
   mixins: [carbonPrefixMixin],
   created() {
     this.$on('cv:change', srcComponent => this.onCvChange(srcComponent));

package/src/components/cv-button/button-mixin.js

@@ -25,7 +25,7 @@ export default {
     kind: {
       type: String,
       default: 'primary',
-      validator: val => ['primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary'].includes(val),
+      validator: val => ['', 'primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary'].includes(val),
     },
     small: {
       type: Boolean,
@@ -37,7 +37,11 @@ export default {
         return true;
       },
     },
-    size: { type: String, default: undefined, validator: val => ['', 'field', 'small'].includes(val) },
+    size: {
+      type: String,
+      default: undefined,
+      validator: val => ['', 'default', 'field', 'small', 'sm', 'lg', 'xl'].includes(val),
+    },
   },
   computed: {
     // Bind listeners at the component level to the embedded input element and
@@ -64,14 +68,15 @@ export default {
           classes.push(`${carbonSettings.prefix}--btn--${this.kind.toLowerCase()}`);
         }
 
-        if (this.size === 'small' || (this.size === undefined && this.small)) {
-          classes.push(`${carbonSettings.prefix}--btn--sm`);
+        let size = this.size ? this.size : this.small && 'sm';
+        if (size === 'small') {
+          size = 'sm';
         }
-        if (this.size === 'field') {
-          classes.push(`${carbonSettings.prefix}--btn--field`);
+        if (size && !(size === '' || size === 'default')) {
+          classes.push(`${carbonSettings.prefix}--btn--${size}`);
         }
 
-        return classes.join(' ');
+        return classes;
       };
     },
   },

package/src/components/cv-button/cv-button-set.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cv-button-set" :class="`${carbonPrefix}--btn-set`">
+  <div class="cv-button-set" :class="[`${carbonPrefix}--btn-set`, { [`${carbonPrefix}--btn-set--stacked`]: stacked }]">
     <slot />
   </div>
 </template>
@@ -10,5 +10,8 @@ import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvButtonSet',
   mixins: [carbonPrefixMixin],
+  props: {
+    stacked: Boolean,
+  },
 };
 </script>

package/src/components/cv-button/cv-icon-button.vue

@@ -2,7 +2,7 @@
   <button
     class="cv-button"
     :class="[
-      buttonClassOpts({ iconOnly: true }),
+      ...buttonClassOpts({ iconOnly: true }),
       `${carbonPrefix}--tooltip__trigger`,
       `${carbonPrefix}--tooltip--a11y`,
       `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,

package/src/components/cv-code-snippet/_cv-code-snippet-inline.vue

@@ -1,11 +1,8 @@
 <template>
   <cv-feedback-button
+    v-if="!hideCopyButton"
     class="cv-code-snippet-inline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--inline`,
-      { [`${carbonPrefix}--snippet--light`]: theme === 'light' },
-    ]"
+    :class="classes"
     :feedback="copyFeedback"
     inline
     :aria-label="feedbackAriaLabel"
@@ -13,21 +10,30 @@
   >
     <slot></slot>
   </cv-feedback-button>
+  <span v-else :class="classes">
+    <slot></slot>
+  </span>
 </template>
 
 <script>
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
-import { themeMixin, carbonPrefixMixin } from '../../mixins';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetInline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvFeedbackButton,
   },
   props: {
     copyFeedback: String,
     feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
+  },
+  computed: {
+    classes() {
+      return [`${this.carbonPrefix}--snippet`, `${this.carbonPrefix}--snippet--inline`];
+    },
   },
 };
 </script>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue

@@ -4,16 +4,21 @@
     :class="[
       `${carbonPrefix}--snippet`,
       `${carbonPrefix}--snippet--multi`,
-      { [`${carbonPrefix}--snippet--expand`]: expanded, [`${carbonPrefix}--snippet--light`]: theme === 'light' },
+      { [`${carbonPrefix}--snippet--expand`]: expanded },
     ]"
     data-code-snippet
   >
-    <div :class="`${carbonPrefix}--snippet-container`">
+    <div :class="[`${carbonPrefix}--snippet-container`]">
       <pre>
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button :feedback="copyFeedback" :aria-label="feedbackAriaLabel" @click="$emit('copy-code')">
+    <cv-feedback-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :aria-label="feedbackAriaLabel"
+      @click="$emit('copy-code')"
+    >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
     </cv-feedback-button>
 
@@ -36,11 +41,11 @@ import CvButton from '../cv-button/cv-button';
 
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
-import { carbonPrefixMixin, themeMixin } from '../../mixins';
+import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippetMultiline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvButton,
     CvFeedbackButton,
@@ -48,10 +53,11 @@ export default {
     ChevronDown16,
   },
   props: {
+    copyFeedback: String,
+    feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
     lessText: { type: String, default: 'Show less' },
     moreText: { type: String, default: 'Show more' },
-    feedbackAriaLabel: String,
-    copyFeedback: String,
   },
   data() {
     return {

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue

@@ -1,31 +1,29 @@
 <template>
-  <div
-    class="cv-code-snippet-oneline"
-    :class="[
-      `${carbonPrefix}--snippet`,
-      `${carbonPrefix}--snippet--single`,
-      { [`${carbonPrefix}--snippet--light`]: theme === 'light' },
-    ]"
-  >
+  <div class="cv-code-snippet-oneline" :class="[`${carbonPrefix}--snippet`, `${carbonPrefix}--snippet--single`]">
     <div :class="`${carbonPrefix}--snippet-container`">
       <pre>
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button :feedback="copyFeedback" :aria-label="feedbackAriaLabel" @click="$emit('copy-code')">
+    <cv-feedback-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :aria-label="feedbackAriaLabel"
+      @click="$emit('copy-code')"
+    >
       <Copy16 :class="`${carbonPrefix}--snippet__icon`" />
     </cv-feedback-button>
   </div>
 </template>
 
 <script>
-import { themeMixin, carbonPrefixMixin } from '../../mixins';
+import { carbonPrefixMixin } from '../../mixins';
 import CvFeedbackButton from '../cv-feedback-button/_cv-feedback-button';
 import Copy16 from '@carbon/icons-vue/es/copy/16';
 
 export default {
   name: 'CvCodeSnippetOneline',
-  mixins: [themeMixin, carbonPrefixMixin],
+  mixins: [carbonPrefixMixin],
   components: {
     CvFeedbackButton,
     Copy16,
@@ -33,6 +31,7 @@ export default {
   props: {
     copyFeedback: String,
     feedbackAriaLabel: String,
+    hideCopyButton: Boolean,
   },
 };
 </script>

package/src/components/cv-code-snippet/cv-code-snippet.vue

@@ -1,11 +1,13 @@
 <template>
   <component
-    class="cv-code-snippet"
+    :class="classes"
     :is="theComponent"
     v-bind="$attrs"
     @copy-code="onCopyCode"
     :copy-feedback="copyFeedback"
     :feedback-aria-label="feedbackAriaLabel"
+    :hideCopyButton="hideCopyButton"
+    :wrap-text="wrapText"
   >
     <code ref="code">
       <slot></slot>
@@ -24,10 +26,12 @@
 import CvCodeSnippetInline from './_cv-code-snippet-inline';
 import CvCodeSnippetMultiline from './_cv-code-snippet-multiline';
 import CvCodeSnippetOneline from './_cv-code-snippet-oneline';
+import { carbonPrefixMixin, themeMixin } from '../../mixins';
 
 export default {
   name: 'CvCodeSnippet',
   inheritAttrs: false,
+  mixins: [carbonPrefixMixin, themeMixin],
   components: {
     CvCodeSnippetInline,
     CvCodeSnippetMultiline,
@@ -36,13 +40,25 @@ export default {
   props: {
     feedbackAriaLabel: { type: String, default: 'Copy code' },
     copyFeedback: { type: String, default: 'Copied!' },
+    hideCopyButton: Boolean,
     kind: {
       type: String,
       default: 'oneline',
       validator: value => ['inline', 'multiline', 'oneline'].includes(value),
     },
+    wrapText: Boolean,
   },
   computed: {
+    classes() {
+      return [
+        `cv-code-snippet`,
+        {
+          [`${this.carbonPrefix}--snippet--light`]: this.isLight,
+          [`${this.carbonPrefix}--snippet--no-copy`]: this.hideCopyButton,
+          [`${this.carbonPrefix}--snippet--wraptext`]: this.wrapText,
+        },
+      ];
+    },
     theComponent() {
       switch (this.kind) {
         case 'inline':

package/src/components/cv-combo-box/cv-combo-box.vue

@@ -14,7 +14,7 @@
       :class="[
         `${carbonPrefix}--combo-box ${carbonPrefix}--list-box`,
         {
-          [`${carbonPrefix}--list-box--light`]: theme === 'light',
+          [`${carbonPrefix}--list-box--light`]: isLight,
           [`${carbonPrefix}--combo-box--expanded`]: open,
           [`${carbonPrefix}--list-box--expanded`]: open,
           [`${carbonPrefix}--combo-box--disabled ${carbonPrefix}--list-box--disabled`]: disabled,

package/src/components/cv-content-switcher/cv-content-switcher.vue

@@ -1,12 +1,22 @@
 <template>
-  <div data-content-switcher :class="`cv-content-switcher ${carbonPrefix}--content-switcher`" role="tablist">
+  <div
+    data-content-switcher
+    :class="[
+      `cv-content-switcher ${carbonPrefix}--content-switcher`,
+      {
+        [`${carbonPrefix}--content-switcher--light`]: isLight,
+        [`${carbonPrefix}--content-switcher--${size}`]: size,
+      },
+    ]"
+    role="tablist"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script>
 import store from './cv-content-switcher-store';
-import { carbonPrefixMixin } from '../../mixins';
+import { carbonPrefixMixin, themeMixin } from '../../mixins';
 
 const toggleContent = (selector, on) => {
   // hide content
@@ -24,13 +34,20 @@ const toggleContent = (selector, on) => {
 
 export default {
   name: 'CvContentSwitcher',
-  mixins: [carbonPrefixMixin],
+  mixins: [carbonPrefixMixin, themeMixin],
   created() {
     // add these on created otherwise cv:mounted is too late.
     this.$on('cv:open', srcComponent => this.onCvOpen(srcComponent));
     this.$on('cv:mounted', srcComponent => this.onCvMount(srcComponent));
     this.$on('cv:beforeDestroy', srcComponent => this.onCvBeforeDestroy(srcComponent));
   },
+  props: {
+    size: {
+      type: String,
+      default: undefined,
+      validator: val => ['', 'sm', 'xl'].includes(val),
+    },
+  },
   data() {
     return {
       store: store,

package/src/components/cv-data-table/cv-data-table.vue

@@ -308,7 +308,7 @@ export default {
       return this.overflowMenu === true || (this.overflowMenu && this.overflowMenu.length > 0);
     },
     tableStyle() {
-      return this.autoWidth ? { width: 'initial' } : { width: '100%' };
+      return this.autoWidth ? { width: 'initial', display: 'inline-block' } : { width: '100%' };
     },
     internalPagination() {
       if (typeof this.pagination === 'object') {

package/src/components/cv-date-picker/cv-date-picker.vue

@@ -7,7 +7,7 @@
         `${this.carbonPrefix}--date-picker ${this.carbonPrefix}--date-picker--${this.kind}`,
         {
           [`${carbonPrefix}--date-picker--simple`]: this.kind === 'short',
-          [`${carbonPrefix}--date-picker--light`]: theme === 'light',
+          [`${carbonPrefix}--date-picker--light`]: isLight,
           'cv-date-pciker': !formItem,
         },
       ]"

package/src/components/cv-dropdown/cv-dropdown.vue

@@ -43,7 +43,7 @@
         :class="[
           `${carbonPrefix}--dropdown ${carbonPrefix}--list-box`,
           {
-            [`${carbonPrefix}--dropdown--light`]: theme === 'light',
+            [`${carbonPrefix}--dropdown--light`]: isLight,
             [`${carbonPrefix}--dropdown--up`]: up,
             [`${carbonPrefix}--dropdown--open`]: open,
             [`${carbonPrefix}--list-box--expanded`]: open,

package/src/components/cv-loading/cv-loading.vue

@@ -10,8 +10,11 @@
       }"
       ref="loading"
     >
+      <label :class="`${carbonPrefix}--visually-hidden`">
+        {{ description }}
+      </label>
       <svg :class="`${carbonPrefix}--loading__svg`" viewBox="-75 -75 150 150">
-        <title>Loading</title>
+        <title>{{ description }}</title>
         <circle v-if="small" :class="`${carbonPrefix}--loading__background`" cx="0" cy="0" :r="loadingRadius" />
         <circle :class="`${carbonPrefix}--loading__stroke`" cx="0" cy="0" :r="loadingRadius" />
       </svg>
@@ -29,6 +32,7 @@ export default {
   components: { CvWrapper },
   props: {
     active: { type: Boolean, default: true },
+    description: { type: String, default: 'Loading' },
     overlay: Boolean,
     small: Boolean,
   },

package/src/components/cv-modal/cv-modal.vue

@@ -18,6 +18,7 @@
         `${carbonPrefix}--modal-container`,
         { [`${carbonPrefix}--modal-container--${internalSize}`]: internalSize },
       ]"
+      v-bind="dialogAttrs"
       ref="modalDialog"
     >
       <div
@@ -92,6 +93,7 @@ export default {
     Close16,
   },
   props: {
+    alert: Boolean,
     closeAriaLabel: { type: String, default: 'Close modal' },
     kind: {
       type: String,
@@ -133,6 +135,20 @@ export default {
     },
   },
   computed: {
+    dialogAttrs() {
+      const passive = !(this.hasPrimary || this.hasSecondary);
+      const attrs = { role: 'dialog' };
+
+      if (this.alert) {
+        if (passive) {
+          attrs.role = 'alert';
+        } else {
+          attrs.role = 'alertdialog';
+          attrs['aria-describedBy'] = this.uid;
+        }
+      }
+      return attrs;
+    },
     primaryKind() {
       if (this.kind === 'danger') {
         return 'danger';
@@ -228,9 +244,16 @@ export default {
       //restore any previous scrollability
       document.body.classList.remove(`${this.carbonPrefix}--body--with-modal-open`);
 
+      if (this.dataVisible) {
+        this.$el.addEventListener('transitionend', this.afterHide, { once: true });
+      }
+
       this.dataVisible = false;
       this.$emit('modal-hidden');
     },
+    afterHide() {
+      this.$emit('after-modal-hidden');
+    },
     onPrimaryClick(ev) {
       this.$emit('primary-click');
       if (!this.$listeners['primary-click']) {
@@ -244,5 +267,10 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    if (this.dataVisible) {
+      this.$emit('after-modal-hidden');
+    }
+  },
 };
 </script>

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -18,20 +18,13 @@
       >{{ title }}</label
     >
 
-    <div
-      v-if="!inline && isHelper"
-      :class="[`${carbonPrefix}--form__helper-text`, { [`${carbonPrefix}--form__helper-text--disabled`]: disabled }]"
-    >
-      <slot name="helper-text">{{ helperText }}</slot>
-    </div>
-
     <div
       role="listbox"
       tabindex="-1"
       :class="[
         `${carbonPrefix}--multi-select ${carbonPrefix}--list-box`,
         {
-          [`${carbonPrefix}--list-box--light`]: theme === 'light',
+          [`${carbonPrefix}--list-box--light`]: isLight,
           [`${carbonPrefix}--list-box--expanded`]: open,
           [`${carbonPrefix}--multi-select--invalid`]: isInvalid,
           [`${carbonPrefix}--multi-select--disabled`]: disabled,
@@ -147,6 +140,12 @@
     <div v-if="isInvalid && !inline" :class="`${carbonPrefix}--form-requirement`">
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
+    <div
+      v-if="!inline && !isInvalid && isHelper"
+      :class="[`${carbonPrefix}--form__helper-text`, { [`${carbonPrefix}--form__helper-text--disabled`]: disabled }]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
   </div>
 </template>
 

package/src/components/cv-number-input/cv-number-input.vue

@@ -5,7 +5,7 @@
       :class="[
         `${carbonPrefix}--number`,
         {
-          [`${carbonPrefix}--number--light`]: theme === 'light',
+          [`${carbonPrefix}--number--light`]: isLight,
           [`${carbonPrefix}--number--helpertext`]: isHelper,
           [`cv-number-input`]: !formItem,
           [`${carbonPrefix}--number--mobile`]: mobile,

package/src/components/cv-search/cv-search.vue

@@ -4,7 +4,7 @@
       :class="[
         `${carbonPrefix}--search`,
         {
-          [`${carbonPrefix}--search--${theme}`]: theme.length,
+          [`${carbonPrefix}--search--light`]: isLight,
           [`${carbonPrefix}--search--${internalSize}`]: internalSize,
           [`${carbonPrefix}--toolbar-search`]: isToolbarKind,
           [`${carbonPrefix}--toolbar-search--active`]: toolbarActive,

package/src/components/cv-select/cv-select.vue

@@ -7,7 +7,7 @@
         {
           'cv-select': !formItem,
           [`${carbonPrefix}--select--inline`]: inline,
-          [`${carbonPrefix}--select--light`]: theme === 'light',
+          [`${carbonPrefix}--select--light`]: isLight,
           [`${carbonPrefix}--select--invalid`]: isInvalid,
           [`${carbonPrefix}--select--disabled`]: $attrs.disabled,
         },

package/src/components/cv-slider/cv-slider.vue

@@ -41,7 +41,7 @@
         type="number"
         :class="[
           `${carbonPrefix}--text-input ${carbonPrefix}--slider-text-input`,
-          { [`${carbonPrefix}--text-input--light`]: theme === 'light' },
+          { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
         v-model="internalValue"

package/src/components/cv-text-area/cv-text-area.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-area`,
           {
-            [`${carbonPrefix}--text-area--light`]: theme === 'light',
+            [`${carbonPrefix}--text-area--light`]: isLight,
             [`${carbonPrefix}--text-area--invalid`]: isInvalid,
           },
         ]"

package/src/components/cv-text-input/cv-text-input.vue

@@ -17,7 +17,7 @@
         :class="[
           `${carbonPrefix}--text-input`,
           {
-            [`${carbonPrefix}--text-input--light`]: theme === 'light',
+            [`${carbonPrefix}--text-input--light`]: isLight,
             [`${carbonPrefix}--text-input--invalid`]: isInvalid,
           },
         ]"
@@ -78,7 +78,6 @@ export default {
     passwordHideLabel: { type: String, default: 'Hide password' },
     passwordShowLabel: { type: String, default: 'Show password' },
     passwordVisible: Boolean,
-    theme: String,
     type: String,
     value: String,
   },