@xy-planning-network/trees 0.2.62 → 0.3.3

package/src/index.css

@@ -0,0 +1,147 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    @apply antialiased;
+  }
+
+  /* general body copy */
+  body {
+    @apply text-base leading-normal text-gray-900;
+  }
+
+  /* Headers */
+  h1 {
+    @apply text-3xl leading-9 font-semibold;
+  }
+
+  h2 {
+    @apply text-2xl leading-7 font-semibold;
+  }
+
+  h3 {
+    @apply text-lg leading-6 font-semibold;
+  }
+
+  h4 {
+    @apply text-base leading-5 font-semibold;
+  }
+
+  h5 {
+    @apply text-sm leading-5 font-semibold;
+  }
+
+  h6 {
+    @apply text-xs leading-4 font-semibold;
+  }
+
+  /* Forms: here for backward compatibility.  Use <BaseInput> instead. */
+  [type="text"],
+  [type="email"],
+  [type="password"],
+  [type="number"],
+  [type="search"],
+  [type="tel"],
+  textarea {
+    @apply mt-1 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-600 rounded-md;
+  }
+}
+
+@layer components {
+  /* Badge classes - TODO: handle anchor tag class cases and generic wrapper cases */
+  .xy-badge {
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-800;
+  }
+
+  .xy-badge-blue {
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-blue-100 text-blue-800;
+  }
+
+  .xy-badge-yellow {
+    @apply inline-flex justify-center items-center px-2 py-0.5 rounded text-xs font-semibold bg-yellow-100 text-yellow-800;
+  }
+
+  /* Button classes */
+  .xy-btn {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md shadow-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .xy-btn-secondary {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md shadow-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .xy-btn-green {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md shadow-md text-white bg-xy-green hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .xy-btn-red {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-transparent text-xs md:text-sm font-semibold rounded-md shadow-md text-red-700 bg-red-100 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-300 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .xy-btn-white {
+    @apply inline-flex justify-center items-center px-4 py-2 border border-xy-blue shadow-md text-sm font-semibold rounded-md text-xy-blue bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  /* Header classes */
+  .h1 {
+    @apply text-3xl leading-9 font-semibold;
+  }
+
+  .h2 {
+    @apply text-2xl leading-7 font-semibold;
+  }
+
+  .h3 {
+    @apply text-lg leading-6 font-semibold;
+  }
+
+  .h4 {
+    @apply text-base leading-5 font-semibold;
+  }
+
+  .h5 {
+    @apply text-sm leading-5 font-semibold;
+  }
+
+  .h6 {
+    @apply text-xs leading-4 font-semibold;
+  }
+
+  .xy-h1-extra-flair {
+    @apply text-3xl font-bold leading-9 tracking-tight sm:text-4xl sm:leading-10;
+  }
+
+  .xy-h1-responsive {
+    @apply text-2xl leading-7 font-semibold lg:text-3xl lg:leading-9;
+  }
+
+  .xy-h2-responsive {
+    @apply text-lg leading-6 font-semibold lg:text-2xl lg:leading-7;
+  }
+
+  .xy-h3-responsive {
+    @apply text-base leading-5 font-semibold lg:text-lg lg:leading-6;
+  }
+
+  /* Link classes */
+  .xy-link {
+    @apply font-semibold underline text-xy-blue hover:text-blue-700;
+  }
+}
+
+@layer utilities {
+  .max-h-screen-1\/4 {
+    max-height: 25vh;
+  }
+
+  .max-h-screen-1\/2 {
+    max-height: 50vh;
+  }
+
+  /* Forms */
+  .xy-input-error {
+    @apply focus:ring-red-700 focus:border-red-700 text-red-900 placeholder-red-700 placeholder-opacity-75 border-red-700;
+  }
+}

package/src/lib-components/forms/BaseInput.vue

@@ -16,7 +16,7 @@
             'shadow-sm',
             'focus:ring-blue-500',
             'focus:border-blue-500',
-            'border-gray-300',
+            'border-gray-600',
             'rounded-md',
             'w-full',
           ]

package/src/lib-components/forms/Checkbox.vue

@@ -4,7 +4,7 @@
       <input
         :aria-labelledby="label ? `${uuid}-label` : undefined"
         :checked="modelValue"
-        class="focus:ring-blue-500 h-4 w-4 text-xy-blue border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+        class="focus:ring-blue-500 h-4 w-4 text-blue-500 border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
         :id="uuid"
         type="checkbox"
         v-bind="{
@@ -15,13 +15,8 @@
         }"
       />
     </div>
-    <div class="ml-3 text-sm leading-5">
-      <label
-        :id="`${uuid}-label`"
-        :for="uuid"
-        :class="{ 'font-semibold': emphasis }"
-        v-text="label"
-      ></label>
+    <div class="ml-3 text-sm font-semibold leading-snug text-gray-900">
+      <label :id="`${uuid}-label`" :for="uuid" v-text="label"></label>
     </div>
   </div>
 </template>
@@ -32,6 +27,7 @@ import { Options, Prop, Vue } from "vue-property-decorator";
 
 @Options({ name: "Checkbox" })
 export default class Checkbox extends Vue {
+  // TODO: checkbox should support the help text prop like base input, and label should use the label component or possible support a legend prop
   @Prop({ type: Boolean, required: false }) emphasis?: boolean;
   @Prop({ type: String, required: false }) label?: string;
   @Prop({ type: Boolean, required: true }) modelValue!: boolean;

package/src/lib-components/forms/InputHelp.vue

@@ -4,7 +4,7 @@
     v-if="text"
     v-bind="{
       ...$attrs,
-      class: 'my-2 text-sm leading-snug font-normal text-gray-500',
+      class: 'mt-2 text-sm leading-snug font-semibold text-gray-700',
     }"
   >
     {{ text }}

package/src/lib-components/forms/InputLabel.vue

@@ -4,7 +4,7 @@
     v-if="label"
     v-bind="{
       ...$attrs,
-      class: 'block my-2 text-sm font-semibold leading-snug text-gray-900',
+      class: 'block my-1 text-sm font-semibold leading-snug text-gray-900',
     }"
     >{{ label }}</component
   >

package/src/lib-components/forms/MultiCheckboxes.vue

@@ -6,14 +6,14 @@
         <div class="flex items-center h-5">
           <input
             type="checkbox"
-            class="focus:ring-blue-500 h-4 w-4 text-xy-blue border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+            class="focus:ring-blue-500 h-4 w-4 text-xy-blue border-gray-600 rounded disabled:opacity-50 disabled:cursor-not-allowed"
             :id="`${uuid}-${index}`"
             :value="option.value"
             v-model="model"
             v-bind="$attrs"
           />
         </div>
-        <div class="ml-3 text-sm leading-5">
+        <div class="ml-3 text-sm font-semibold leading-snug text-gray-900">
           <label :for="`${uuid}-${index}`" v-text="option.label"></label>
         </div>
       </div>

package/src/lib-components/forms/Radio.vue

@@ -9,7 +9,7 @@
       >
         <input
           :checked="modelValue === option.value"
-          class="w-4 h-4 border-gray-300 focus:ring-blue-500 text-xy-blue"
+          class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
           :id="`${uuid}-${index}`"
           :name="uuid"
           type="radio"
@@ -21,7 +21,7 @@
             },
           }"
         />
-        <span class="block ml-2 text-sm font-medium leading-5">
+        <span class="block ml-2 text-sm font-semibold text-gray-900">
           {{ option.label }}
         </span>
       </label>

package/src/lib-components/forms/Select.vue

@@ -45,11 +45,14 @@ export default class Select extends Vue {
   @Prop({ type: String, required: false }) help?: string;
   @Prop({ type: Array, required: true }) options!: Array<{
     label: string;
-    value: string;
+    value: string | number;
   }>;
   @Prop({ type: String, required: false, default: "Select an option" })
   placeholder?: string;
-  @Prop({ type: String, required: true }) modelValue!: string | undefined;
+  @Prop({ type: [String, Number], required: true }) modelValue!:
+    | string
+    | number
+    | undefined;
 
   uuid = (this.$attrs.id as string) || Uniques.CreateIdAttribute();
 
@@ -57,11 +60,11 @@ export default class Select extends Vue {
     const design = this.design ? this.design : "undefined";
     return ({
       undefined:
-        "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
+        "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
       standard:
-        "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
+        "mt-1 block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
       compressed:
-        "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm",
+        "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-600 text-gray-900 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm",
     } as any)[design];
   }
 }

package/src/lib-components/forms/TextArea.vue

@@ -15,7 +15,7 @@
       'shadow-sm',
       'focus:ring-blue-500',
       'focus:border-blue-500',
-      'border-gray-300',
+      'border-gray-600',
       'rounded-md',
       'w-full',
     ]"

package/src/lib-components/forms/YesOrNoRadio.vue

@@ -8,7 +8,7 @@
     >
       <input
         type="radio"
-        class="w-4 h-4 border-gray-300 focus:ring-blue-500 text-xy-blue"
+        class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
         :id="`${hasNameAttr ? name : uuid}-true`"
         :name="hasNameAttr ? name : uuid"
         :value="true"
@@ -20,9 +20,7 @@
           },
         }"
       />
-      <span class="block ml-2 text-sm font-medium text-gray-900 leading-5"
-        >Yes</span
-      >
+      <span class="block ml-2 text-sm font-semibold text-gray-900">Yes</span>
     </label>
     <label
       class="inline-flex items-center ml-6"
@@ -31,7 +29,7 @@
     >
       <input
         type="radio"
-        class="w-4 h-4 border-gray-300 focus:ring-blue-500 text-xy-blue"
+        class="w-4 h-4 border-gray-600 focus:ring-blue-500 text-xy-blue"
         :id="`${hasNameAttr ? name : uuid}-false`"
         :name="hasNameAttr ? name : uuid"
         :value="false"
@@ -43,7 +41,7 @@
           },
         }"
       />
-      <span class="block ml-2 text-sm font-medium text-gray-900 leading-5">No</span>
+      <span class="block ml-2 text-sm font-semibold text-gray-900">No</span>
     </label>
   </fieldset>
 </template>

package/src/lib-components/layout/DateFilter.vue

@@ -10,7 +10,7 @@
     <div class="mt-4 flex md:mt-0 md:ml-4">
       <select
         @change="sortDirChanged($event.target.value)"
-        class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+        class="block w-full border border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
       >
         <option value="DESC">Newest-Oldest</option>
         <option value="ASC">Oldest-Newest</option>
@@ -31,6 +31,7 @@ import DateRangePicker from "../forms/DateRangePicker.vue";
 
 @Options({ components: { DateRangePicker }, name: "DateFilter" })
 export default class DateFilter extends Vue {
+  // TODO: sort select should use built in select component
   @Prop({ type: Object, required: true }) dateRange!: {
     minDate: number;
     maxDate: number;

package/src/lib-components/layout/SidebarLayout.vue

@@ -62,7 +62,7 @@
                   :class="[
                     isActive(item.url)
                       ? 'bg-gray-100 text-gray-900'
-                      : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+                      : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900',
                     'group flex items-center px-2 py-2 text-base font-medium rounded-md',
                   ]"
                   :target="item.openInTab ? '_blank' : '_self'"
@@ -71,8 +71,8 @@
                     :is="item.icon"
                     :class="[
                       isActive(item.url)
-                        ? 'text-gray-500'
-                        : 'text-gray-400 group-hover:text-gray-500',
+                        ? 'text-gray-600'
+                        : 'text-gray-500 group-hover:text-gray-600',
                       'mr-4 h-6 w-6',
                     ]"
                     aria-hidden="true"
@@ -108,7 +108,7 @@
                 :class="[
                   isActive(item.url)
                     ? 'bg-gray-100 text-gray-900'
-                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
+                    : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
                   'group flex items-center px-2 py-2 text-sm font-medium rounded-md',
                 ]"
                 :target="item.openInTab ? '_blank' : '_self'"
@@ -117,8 +117,8 @@
                   :is="item.icon"
                   :class="[
                     isActive(item.url)
-                      ? 'text-gray-500'
-                      : 'text-gray-400 group-hover:text-gray-500',
+                      ? 'text-gray-600'
+                      : 'text-gray-500 group-hover:text-gray-600',
                     'mr-3 h-6 w-6',
                   ]"
                   aria-hidden="true"
@@ -176,7 +176,7 @@
                       :href="item.url"
                       :class="[
                         active ? 'bg-gray-100' : '',
-                        'block px-4 py-2 text-sm text-gray-700',
+                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
                       ]"
                       >{{ item.name }}</a
                     >

package/src/lib-components/layout/StackedLayout.vue

@@ -15,8 +15,8 @@
                 :class="[
                   isActive(item.url)
                     ? 'border-blue-500 text-gray-900'
-                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                  'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
+                    : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-blue-500',
+                  'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-semibold',
                 ]"
                 :aria-current="isActive(item.url) ? 'page' : undefined"
                 >{{ item.name }}</a
@@ -54,7 +54,7 @@
                       :href="item.url"
                       :class="[
                         active ? 'bg-gray-100' : '',
-                        'block px-4 py-2 text-sm text-gray-700',
+                        'block px-4 py-2 text-sm text-gray-700 font-semibold',
                       ]"
                       >{{ item.name }}</a
                     >
@@ -85,8 +85,8 @@
             :class="[
               isActive(item.url)
                 ? 'bg-blue-50 border-blue-500 text-blue-700'
-                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
-              'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
+                : 'border-transparent text-gray-700 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900',
+              'block pl-3 pr-4 py-2 border-l-4 text-base font-semibold',
             ]"
             :aria-current="isActive(item.url) ? 'page' : undefined"
             >{{ item.name }}</a
@@ -113,7 +113,7 @@
               v-for="item in userNavigation"
               :key="item.name"
               :href="item.url"
-              class="block px-4 py-2 text-base font-medium text-gray-500 hover:text-gray-800 hover:bg-gray-100"
+              class="block px-4 py-2 text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100"
               >{{ item.name }}</a
             >
           </div>

package/src/lib-components/lists/Cards.vue

@@ -15,7 +15,7 @@
             v-text="card.primary"
           ></dd>
           <dt
-            class="text-sm leading-5 font-medium text-gray-500 truncate"
+            class="text-sm leading-5 font-medium text-gray-700 truncate"
             v-text="card.secondary"
           ></dt>
         </dl>

package/src/lib-components/lists/StaticTable.vue

@@ -9,7 +9,7 @@
             <thead>
               <tr>
                 <th
-                  class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-50 leading-4"
+                  class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-900 uppercase bg-gray-50 leading-4"
                   v-for="(col, idx) in tableData.columns"
                   :key="idx"
                   v-text="col.display"
@@ -22,7 +22,7 @@
                 :key="item.id ? item.id : rowIdx"
               >
                 <td
-                  class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap leading-5"
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
                   v-for="(col, colIdx) in tableData.columns"
                   :key="rowIdx + '-' + colIdx"
                 >
@@ -40,7 +40,7 @@
               <tr v-if="tableData.items.length == 0">
                 <td
                   :colspan="tableData.columns.length"
-                  class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap leading-5"
+                  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
                 >
                   No items were found!
                 </td>

package/src/lib-components/lists/Table.vue

@@ -45,7 +45,7 @@
         <thead>
           <tr>
             <th
-              class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50 leading-4"
+              class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-900 uppercase border-b border-gray-200 bg-gray-50 leading-4"
               v-for="(col, idx) in tableData.columns"
               :key="idx"
             >
@@ -109,7 +109,7 @@
             :class="{ 'cursor-pointer': clickable }"
           >
             <td
-              class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap border-b border-gray-200 leading-5"
+              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
               v-for="(col, colIdx) in tableData.columns"
               :key="rowIdx + '-' + colIdx"
               :class="col.class"
@@ -129,7 +129,7 @@
           <tr v-if="!hasContent">
             <td
               :colspan="tableData.columns.length"
-              class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap border-b border-gray-200 leading-5"
+              class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap border-b border-gray-200 leading-5"
             >
               No items were found!
             </td>

package/src/lib-components/navigation/ActionsDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <Menu as="div" class="relative flex justify-end items-center">
     <MenuButton
-      class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="!hasActionItems"
     >
       <span class="sr-only">Open options</span>
@@ -25,7 +25,7 @@
                 type="submit"
                 :class="[
                   active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                  'block w-full text-left px-4 py-2 text-sm',
+                  'block w-full text-left px-4 py-2 text-sm font-semibold',
                 ]"
                 v-text="item.label"
                 @click="emitEvent(item.event)"

package/src/lib-components/navigation/Paginator.vue

@@ -7,8 +7,8 @@
         @click.prevent="changePage(modelValue.page - 1)"
         :class="
           modelValue.page == 1
-            ? 'text-gray-300 cursor-not-allowed pointer-events-none'
-            : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            ? 'text-gray-500 cursor-not-allowed pointer-events-none'
+            : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
       >
         <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
@@ -32,7 +32,7 @@
         :class="
           modelValue.page === i
             ? 'border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700'
-            : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400'
+            : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400'
         "
         @click.prevent="changePage(i)"
       ></a>
@@ -45,8 +45,8 @@
         @click.prevent="changePage(modelValue.page + 1)"
         :class="
           modelValue.page >= modelValue.totalPages
-            ? 'text-gray-300 cursor-not-allowed pointer-events-none'
-            : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'
+            ? 'text-gray-500 cursor-not-allowed pointer-events-none'
+            : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
       >
         Next

package/src/lib-components/navigation/Tabs.vue

@@ -49,7 +49,7 @@ export default class Tabs extends Vue {
 
     if (this.pillDesign) {
       c =
-        "px-12 py-2 font-medium text-md leading-5 rounded-t-md focus:outline-none ";
+        "px-12 py-2 font-semibold text-md leading-5 rounded-t-md focus:outline-none ";
 
       if (this.modelValue === currentTab) {
         c =
@@ -58,14 +58,14 @@ export default class Tabs extends Vue {
       } else {
         c =
           c +
-          "text-gray-500 hover:text-gray-700 focus:text-gray-700 focus:bg-gray-100 border border-gray-200";
+          "text-gray-700 hover:text-gray-900 focus:text-gray-900 focus:bg-gray-100 border border-gray-200";
       }
 
       return c;
     }
 
     c =
-      "px-1 py-4 text-sm font-medium border-b-2 whitespace-nowrap leading-5 focus:outline-none ";
+      "px-1 py-4 text-sm font-semibold border-b-2 whitespace-nowrap leading-5 focus:outline-none ";
     if (this.modelValue === currentTab) {
       c =
         c +
@@ -73,7 +73,7 @@ export default class Tabs extends Vue {
     } else {
       c =
         c +
-        "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300";
+        "border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:text-gray-900 focus:border-gray-300";
     }
 
     if (pastFirstTab) c = c + " ml-8";

package/src/lib-components/overlays/Slideover.vue

@@ -83,9 +83,10 @@ export default class Slideover extends Vue {
   @Prop({ type: String, required: true }) description!: string;
   @Prop({ type: Boolean, required: true }) modelValue!: boolean;
 
-  @Emit()
-  close(): void {
-    return;
+  @Emit("close")
+  @Emit("update:modelValue")
+  close(): boolean {
+    return false;
   }
 }
 </script>