@m3ui-vue/m3ui-vue 0.1.10 → 0.2.0

package/src/components/MMultiSelect.vue

@@ -6,13 +6,13 @@ import { useFieldBg } from '../composables/useFieldBg'
 
 export interface MultiSelectOption {
   label: string
-  value: string | number
+  value: unknown
   disabled?: boolean
 }
 
 const props = withDefaults(
   defineProps<{
-    modelValue: (string | number)[]
+    modelValue: unknown[]
     options: MultiSelectOption[]
     label?: string
     placeholder?: string
@@ -25,6 +25,7 @@ const props = withDefaults(
     fieldBg?: string
     searchable?: boolean
     maxChips?: number
+    clearable?: boolean
   }>(),
   {
     modelValue: () => [],
@@ -33,10 +34,11 @@ const props = withDefaults(
     required: false,
     searchable: true,
     maxChips: 3,
+    clearable: false,
   },
 )
 
-const emit = defineEmits<{ 'update:modelValue': [(string | number)[]] }>()
+const emit = defineEmits<{ 'update:modelValue': [unknown[]] }>()
 
 const id = useId()
 const open = ref(false)
@@ -47,6 +49,16 @@ const dropdownEl = ref<HTMLElement | null>(null)
 const searchInput = ref<HTMLInputElement | null>(null)
 const dropPos = ref({ top: '0px', left: '0px', width: '0px' })
 
+function eq(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null) return false
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+function includes(arr: unknown[], val: unknown): boolean {
+  return arr.some((v) => eq(v, val))
+}
+
 const hasValue = computed(() => props.modelValue.length > 0)
 
 const filteredOptions = computed(() => {
@@ -58,24 +70,24 @@ const filteredOptions = computed(() => {
 const visibleChips = computed(() =>
   props.modelValue.slice(0, props.maxChips).map((v) => ({
     value: v,
-    label: props.options.find((o) => o.value === v)?.label ?? String(v),
+    label: props.options.find((o) => eq(o.value, v))?.label ?? String(v),
   })),
 )
 
 const overflowCount = computed(() => Math.max(0, props.modelValue.length - props.maxChips))
 
-function toggle(value: string | number) {
+function toggle(value: unknown) {
   const current = props.modelValue
-  if (current.includes(value)) {
-    emit('update:modelValue', current.filter((v) => v !== value))
+  if (includes(current, value)) {
+    emit('update:modelValue', current.filter((v) => !eq(v, value)))
   } else {
     emit('update:modelValue', [...current, value])
   }
 }
 
-function removeChip(value: string | number, e: Event) {
+function removeChip(value: unknown, e: Event) {
   e.stopPropagation()
-  emit('update:modelValue', props.modelValue.filter((v) => v !== value))
+  emit('update:modelValue', props.modelValue.filter((v) => !eq(v, value)))
 }
 
 function computeDropPos() {
@@ -164,7 +176,9 @@ const labelClasses = computed(() => {
     ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
     : 'top-2 translate-y-0 text-label-small'
 
-  const unFloated = 'top-1/2 -translate-y-1/2 text-body-large'
+  const unFloated = props.variant === 'filled'
+    ? 'top-[53%] -translate-y-1/2 text-body-large'
+    : 'top-1/2 -translate-y-1/2 text-body-large'
   const active = open.value || hasValue.value
 
   return [
@@ -188,7 +202,8 @@ const labelClasses = computed(() => {
     >
       <div
         v-if="leadingIcon"
-        class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant"
+        class="pointer-events-none absolute left-3.5 text-on-surface-variant"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
       >
         <MIcon :name="leadingIcon" :size="20" />
       </div>
@@ -208,8 +223,8 @@ const labelClasses = computed(() => {
       >
         <template v-if="hasValue">
           <span
-            v-for="chip in visibleChips"
-            :key="chip.value"
+            v-for="(chip, i) in visibleChips"
+            :key="i"
             class="inline-flex items-center gap-1 rounded-full bg-secondary-container px-2 py-0.5 text-label-small text-on-secondary-container"
           >
             {{ chip.label }}
@@ -237,7 +252,17 @@ const labelClasses = computed(() => {
         {{ label }}<span v-if="required" class="text-error">&nbsp;*</span>
       </label>
 
-      <div class="pointer-events-none absolute right-2 top-7 -translate-y-1/2">
+      <button
+        v-if="clearable && hasValue && !disabled"
+        type="button"
+        class="absolute right-9 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-colors hover:bg-on-surface/8 hover:text-on-surface"
+        :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'"
+        @click.stop="emit('update:modelValue', []); close()"
+      >
+        <MIcon name="close" :size="18" />
+      </button>
+
+      <div class="pointer-events-none absolute right-2" :class="variant === 'filled' ? 'top-[57%] -translate-y-1/2' : 'top-[55%] -translate-y-1/2'">
         <MIcon
           :name="open ? 'arrow_drop_up' : 'arrow_drop_down'"
           :size="24"
@@ -282,13 +307,13 @@ const labelClasses = computed(() => {
 
         <div class="flex flex-col py-1">
           <label
-            v-for="opt in filteredOptions"
-            :key="opt.value"
+            v-for="(opt, i) in filteredOptions"
+            :key="i"
             class="flex cursor-pointer items-center gap-3 px-4 py-2 hover:bg-on-surface/8"
             :class="opt.disabled ? 'cursor-not-allowed opacity-38' : ''"
           >
             <MCheckbox
-              :model-value="modelValue.includes(opt.value)"
+              :model-value="includes(modelValue, opt.value)"
               :disabled="opt.disabled"
               @update:model-value="!opt.disabled && toggle(opt.value)"
             />

package/src/components/MNavigationDrawer.vue

@@ -1,66 +1,125 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import MIcon from './MIcon.vue'
+import { ref, reactive, watch, provide, computed } from "vue";
+import MIcon from "./MIcon.vue";
+import MDrawerItemList from "./_MDrawerItemList.vue";
 
 export interface DrawerItem {
-  value: string | number
-  label: string
-  icon?: string
-  badge?: string | number
-  disabled?: boolean
-  to?: string | Record<string, any>
+  value: string | number;
+  label: string;
+  icon?: string;
+  badge?: string | number;
+  disabled?: boolean;
+  to?: string | Record<string, any>;
+  children?: DrawerItem[];
+  iconSize?: number;
+  labelClass?: string;
+  py?: string;
 }
 
 export interface DrawerSection {
-  title?: string
-  icon?: string
-  items: DrawerItem[]
-  collapsible?: boolean
+  title?: string;
+  icon?: string;
+  items: DrawerItem[];
+  collapsible?: boolean;
 }
 
-const props = withDefaults(defineProps<{
-  modelValue: boolean
-  selected?: string | number
-  sections: DrawerSection[]
-  title?: string
-  modal?: boolean
-  collapsed?: boolean
-}>(), { modal: true })
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    selected?: string | number;
+    sections: DrawerSection[];
+    title?: string;
+    modal?: boolean;
+    collapsed?: boolean;
+  }>(),
+  { modal: true },
+);
 
 const emit = defineEmits<{
-  'update:modelValue': [boolean]
-  select: [string | number]
-}>()
+  "update:modelValue": [boolean];
+  select: [string | number];
+}>();
 
-const openSections = ref<Record<string, boolean>>({})
+const openSections = ref<Record<string, boolean>>({});
+const openItems = reactive<Record<string | number, boolean>>({});
 
 function isSectionOpen(section: DrawerSection, index: number) {
-  const key = section.title ?? `__${index}`
-  return openSections.value[key] !== false
+  const key = section.title ?? `__${index}`;
+  return openSections.value[key] !== false;
 }
 
 function toggleSection(section: DrawerSection, index: number) {
-  const key = section.title ?? `__${index}`
-  openSections.value[key] = !isSectionOpen(section, index)
+  const key = section.title ?? `__${index}`;
+  openSections.value[key] = !isSectionOpen(section, index);
 }
 
-function close() { emit('update:modelValue', false) }
+function isItemOpen(item: DrawerItem) {
+  return openItems[item.value] === true;
+}
+
+function toggleItem(item: DrawerItem) {
+  openItems[item.value] = !openItems[item.value];
+}
+
+function close() {
+  emit("update:modelValue", false);
+}
 function select(item: DrawerItem) {
-  if (item.disabled) return
-  emit('select', item.value)
-  if (props.modal) close()
+  if (item.disabled) return;
+  if (item.children?.length) toggleItem(item);
+  emit("select", item.value);
+  if (props.modal && !item.children?.length) close();
 }
 
-function itemTag(item: DrawerItem) {
-  return item.to && !item.disabled ? 'RouterLink' : 'button'
+function onChildSelect(item: DrawerItem) {
+  if (item.disabled) return;
+  emit("select", item.value);
+  if (props.modal && !item.children?.length) close();
+}
+
+function onChildToggle(item: DrawerItem) {
+  openItems[item.value] = !openItems[item.value];
+}
+
+function subEnter(el: Element, done: () => void) {
+  const e = el as HTMLElement
+  e.style.overflow = 'hidden'
+  const h = e.scrollHeight
+  e.animate(
+    [{ height: '0px' }, { height: h + 'px' }],
+    { duration: 250, easing: 'cubic-bezier(0.2, 0, 0, 1)' },
+  ).onfinish = () => { e.style.overflow = ''; done() }
+}
+function subLeave(el: Element, done: () => void) {
+  const e = el as HTMLElement
+  e.style.overflow = 'hidden'
+  const h = e.scrollHeight
+  e.animate(
+    [{ height: h + 'px' }, { height: '0px' }],
+    { duration: 200, easing: 'cubic-bezier(0.4, 0, 1, 1)' },
+  ).onfinish = done
 }
 
+const collapsedRef = computed(() => props.collapsed ?? false)
+provide("nd-open-items", openItems);
+provide("nd-toggle-item", onChildToggle);
+provide("nd-select-item", onChildSelect);
+provide("nd-collapsed", collapsedRef);
+
+defineExpose({ openItems })
 
-watch(() => props.modelValue, (open) => {
-  if (props.modal) {
-    document.body.style.overflow = open ? 'hidden' : ''
-  }
-})
+function itemTag(item: DrawerItem) {
+  return item.to && !item.disabled ? "RouterLink" : "button";
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (props.modal) {
+      document.body.style.overflow = open ? "hidden" : "";
+    }
+  },
+);
 </script>
 
 <template>
@@ -70,11 +129,16 @@ watch(() => props.modelValue, (open) => {
       <div v-if="modelValue" class="fixed inset-0 z-100 flex">
         <div class="nd-scrim absolute inset-0 bg-black/40" @click="close" />
 
-        <nav class="nd-panel relative flex h-full w-72 max-w-[85vw] flex-col bg-surface-container shadow-elevation-3">
-          <div v-if="title || $slots.header" class="shrink-0 px-5 pt-6 pb-2">
-            <slot name="header">
-              <h2 class="text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
-            </slot>
+        <nav
+          class="nd-panel relative flex h-full w-72 max-w-[85vw] flex-col bg-surface-container shadow-elevation-3"
+        >
+          <div v-if="$slots.header" class="shrink-0">
+            <slot name="header" />
+          </div>
+          <div v-else-if="title" class="shrink-0 px-5 pt-6 pb-2">
+            <h2 class="text-title-small font-medium text-on-surface-variant">
+              {{ title }}
+            </h2>
           </div>
 
           <div class="flex-1 overflow-y-auto px-3 py-2">
@@ -87,48 +151,88 @@ watch(() => props.modelValue, (open) => {
                 class="mt-1 flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2.5 text-on-surface-variant transition-colors hover:bg-on-surface/8"
                 @click="toggleSection(section, si)"
               >
-                <MIcon v-if="section.icon" :name="section.icon" :size="24" class="shrink-0" />
-                <span class="flex-1 text-left text-title-small font-medium">{{ section.title }}</span>
                 <MIcon
-                  :name="isSectionOpen(section, si) ? 'expand_less' : 'expand_more'"
+                  v-if="section.icon"
+                  :name="section.icon"
+                  :size="24"
+                  class="shrink-0"
+                />
+                <span class="flex-1 text-left text-title-small font-medium">{{
+                  section.title
+                }}</span>
+                <MIcon
+                  :name="
+                    isSectionOpen(section, si) ? 'expand_less' : 'expand_more'
+                  "
                   :size="18"
                   class="shrink-0"
                 />
               </button>
-              <p v-else-if="section.title" class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+              <p
+                v-else-if="section.title"
+                class="px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant"
+              >
                 {{ section.title }}
               </p>
 
               <Transition name="nd-section">
-                <div v-if="!section.collapsible || isSectionOpen(section, si)" class="nd-section-grid">
+                <div
+                  v-if="!section.collapsible || isSectionOpen(section, si)"
+                  class="nd-section-grid"
+                >
                   <div class="nd-section-body">
-                    <component
-                      :is="itemTag(item)"
-                      v-for="item in section.items"
-                      :key="item.value"
-                      :to="item.to && !item.disabled ? item.to : undefined"
-                      :type="item.to ? undefined : 'button'"
-                      class="flex w-full items-center gap-3 rounded-full py-2.5 text-left transition-colors focus-visible:outline-none"
-                      :class="[
-                        section.collapsible ? 'pl-8 pr-3' : 'px-4',
-                        item.disabled
-                          ? 'cursor-not-allowed opacity-[0.38]'
-                          : item.value === selected
-                            ? 'bg-secondary-container text-on-secondary-container'
-                            : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
-                      ]"
-                      :disabled="item.disabled && !item.to"
-                      @click="select(item)"
-                    >
-                      <MIcon v-if="item.icon" :name="item.icon" :size="24" />
-                      <span class="flex-1 text-label-large font-medium">{{ item.label }}</span>
-                      <span
-                        v-if="item.badge != null"
-                        class="text-label-medium text-on-surface-variant"
+                    <template v-for="item in section.items" :key="item.value">
+                      <component
+                        :is="itemTag(item)"
+                        :to="item.to && !item.disabled ? item.to : undefined"
+                        :type="item.to ? undefined : 'button'"
+                        class="flex w-full items-center gap-3 rounded-full py-2.5 text-left transition-colors focus-visible:outline-none"
+                        :class="[
+                          section.collapsible ? 'pl-8 pr-3' : 'px-4',
+                          item.disabled
+                            ? 'cursor-not-allowed opacity-[0.38]'
+                            : item.value === selected
+                              ? 'bg-secondary-container text-on-secondary-container'
+                              : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+                        ]"
+                        :disabled="item.disabled && !item.to"
+                        @click="select(item)"
+                      >
+                        <MIcon v-if="item.icon" :name="item.icon" :size="item.iconSize ?? 24" />
+                        <span class="flex-1 font-medium" :class="item.labelClass ?? 'text-label-large'">{{
+                          item.label
+                        }}</span>
+                        <MIcon
+                          v-if="item.children?.length"
+                          :name="
+                            isItemOpen(item) ? 'expand_less' : 'expand_more'
+                          "
+                          :size="18"
+                          class="shrink-0 text-on-surface-variant"
+                        />
+                        <span
+                          v-else-if="item.badge != null"
+                          class="text-label-medium text-on-surface-variant"
+                        >
+                          {{ item.badge }}
+                        </span>
+                      </component>
+                      <Transition
+                        name="nd-sub"
+                        :css="false"
+                        @enter="subEnter"
+                        @leave="subLeave"
                       >
-                        {{ item.badge }}
-                      </span>
-                    </component>
+                        <div
+                          v-if="item.children?.length && isItemOpen(item)"
+                        >
+                          <MDrawerItemList
+                            :items="item.children"
+                            :selected="selected"
+                          />
+                        </div>
+                      </Transition>
+                    </template>
                   </div>
                 </div>
               </Transition>
@@ -144,7 +248,11 @@ watch(() => props.modelValue, (open) => {
     <nav
       class="nd-inline flex h-full shrink-0 flex-col border-r border-outline-variant bg-surface"
       :class="[
-        !modelValue ? 'nd-hidden w-0 border-r-0' : collapsed ? 'nd-collapsed w-[72px]' : 'w-72',
+        !modelValue
+          ? 'nd-hidden w-0 border-r-0'
+          : collapsed
+            ? 'nd-collapsed w-[72px]'
+            : 'w-72',
       ]"
     >
       <div v-if="$slots.header" class="shrink-0">
@@ -152,11 +260,17 @@ watch(() => props.modelValue, (open) => {
       </div>
       <div v-else-if="title" class="nd-collapse-h shrink-0 overflow-hidden">
         <div class="px-5 pt-6 pb-2">
-          <h2 class="whitespace-nowrap text-title-small font-medium text-on-surface-variant">{{ title }}</h2>
+          <h2
+            class="whitespace-nowrap text-title-small font-medium text-on-surface-variant"
+          >
+            {{ title }}
+          </h2>
         </div>
       </div>
 
-      <div class="flex flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2">
+      <div
+        class="flex flex-col gap-1 overflow-y-auto overflow-x-hidden px-3 py-2"
+      >
         <template v-for="(section, si) in sections" :key="si">
           <div v-if="si > 0" class="my-1 border-t border-outline-variant" />
 
@@ -168,8 +282,16 @@ watch(() => props.modelValue, (open) => {
             :title="collapsed ? section.title : undefined"
             @click="toggleSection(section, si)"
           >
-            <MIcon v-if="section.icon" :name="section.icon" :size="24" class="shrink-0" />
-            <span class="nd-label min-w-0 flex-1 text-left text-title-small font-medium">{{ section.title }}</span>
+            <MIcon
+              v-if="section.icon"
+              :name="section.icon"
+              :size="24"
+              class="shrink-0"
+            />
+            <span
+              class="nd-label min-w-0 flex-1 text-left text-title-small font-medium"
+              >{{ section.title }}</span
+            >
             <MIcon
               :name="isSectionOpen(section, si) ? 'expand_less' : 'expand_more'"
               :size="18"
@@ -179,46 +301,84 @@ watch(() => props.modelValue, (open) => {
 
           <!-- Static section title -->
           <div v-else-if="section.title" class="nd-collapse-h overflow-hidden">
-            <p class="whitespace-nowrap px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant">
+            <p
+              class="whitespace-nowrap px-4 pt-4 pb-2 text-title-small font-medium text-on-surface-variant"
+            >
               {{ section.title }}
             </p>
           </div>
 
           <Transition name="nd-section">
-            <div v-if="!section.collapsible || isSectionOpen(section, si)" class="nd-section-grid">
+            <div
+              v-if="!section.collapsible || isSectionOpen(section, si)"
+              class="nd-section-grid"
+            >
               <div class="nd-section-body">
-                <component
-                  :is="itemTag(item)"
-                  v-for="item in section.items"
-                  :key="item.value"
-                  :to="item.to && !item.disabled ? item.to : undefined"
-                  :type="item.to ? undefined : 'button'"
-                  :title="collapsed ? item.label : undefined"
-                  class="flex w-full shrink-0 items-center gap-3 overflow-hidden whitespace-nowrap rounded-full py-2.5 text-left focus-visible:outline-none"
-                  :class="[
-                    section.collapsible && !collapsed ? 'pl-8 pr-3' : 'px-3',
-                    item.disabled
-                      ? 'cursor-not-allowed opacity-[0.38]'
-                      : item.value === selected
-                        ? 'bg-secondary-container text-on-secondary-container'
-                        : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
-                  ]"
-                  :disabled="item.disabled && !item.to"
-                  @click="select(item)"
-                >
-                  <MIcon v-if="item.icon" :name="item.icon" :size="24" class="shrink-0" />
-                  <span class="nd-label min-w-0 flex-1 text-label-large font-medium">{{ item.label }}</span>
-                  <span v-if="item.badge != null" class="nd-label text-label-medium text-on-surface-variant">
-                    {{ item.badge }}
-                  </span>
-                </component>
+                <template v-for="item in section.items" :key="item.value">
+                  <component
+                    :is="itemTag(item)"
+                    :to="item.to && !item.disabled ? item.to : undefined"
+                    :type="item.to ? undefined : 'button'"
+                    :title="collapsed ? item.label : undefined"
+                    class="flex w-full shrink-0 items-center gap-3 overflow-hidden whitespace-nowrap rounded-full py-2.5 text-left focus-visible:outline-none"
+                    :class="[
+                      section.collapsible && !collapsed ? 'pl-8 pr-3' : 'px-3',
+                      item.disabled
+                        ? 'cursor-not-allowed opacity-[0.38]'
+                        : item.value === selected
+                          ? 'bg-secondary-container text-on-secondary-container'
+                          : 'cursor-pointer text-on-surface-variant hover:bg-on-surface/8',
+                    ]"
+                    :disabled="item.disabled && !item.to"
+                    @click="select(item)"
+                  >
+                    <MIcon
+                      v-if="item.icon"
+                      :name="item.icon"
+                      :size="item.iconSize ?? 24"
+                      class="shrink-0"
+                    />
+                    <span
+                      class="nd-label min-w-0 flex-1 font-medium"
+                      :class="item.labelClass ?? 'text-label-large'"
+                      >{{ item.label }}</span
+                    >
+                    <MIcon
+                      v-if="item.children?.length"
+                      :name="isItemOpen(item) ? 'expand_less' : 'expand_more'"
+                      :size="18"
+                      class="nd-label shrink-0 text-on-surface-variant"
+                    />
+                    <span
+                      v-else-if="item.badge != null"
+                      class="nd-label text-label-medium text-on-surface-variant"
+                    >
+                      {{ item.badge }}
+                    </span>
+                  </component>
+                  <div v-if="item.children?.length && isItemOpen(item)" class="nd-children-divider" />
+                  <Transition
+                    :css="false"
+                    @enter="subEnter"
+                    @leave="subLeave"
+                  >
+                    <div
+                      v-if="item.children?.length && isItemOpen(item)"
+                    >
+                      <MDrawerItemList
+                        :items="item.children"
+                        :selected="selected"
+                      />
+                    </div>
+                  </Transition>
+                  <div v-if="item.children?.length && isItemOpen(item)" class="nd-children-divider" />
+                </template>
               </div>
             </div>
           </Transition>
         </template>
       </div>
     </nav>
-
   </template>
 </template>
 
@@ -295,7 +455,8 @@ watch(() => props.modelValue, (open) => {
 .nd-label {
   transition: opacity 200ms 80ms cubic-bezier(0.2, 0, 0, 1);
 }
-.nd-inline.nd-collapsed .nd-label {
+.nd-inline.nd-collapsed .nd-label,
+.nd-inline.nd-collapsed :deep(.nd-label) {
   opacity: 0;
   transition: opacity 100ms cubic-bezier(0.2, 0, 0, 1);
 }
@@ -309,7 +470,22 @@ watch(() => props.modelValue, (open) => {
   max-height: 0;
 }
 
-.nd-inline .nd-section-body > * {
+.nd-inline .nd-section-body > *,
+.nd-inline :deep(.nd-section-body) > * {
   transition: padding 300ms cubic-bezier(0.2, 0, 0, 1);
 }
+
+/* Dividers between children groups — only visible in collapsed mode */
+.nd-children-divider {
+  height: 0;
+  margin: 0 0.75rem;
+  border-top: 1px solid transparent;
+  transition: border-color 100ms, margin 100ms;
+}
+.nd-inline.nd-collapsed .nd-children-divider {
+  border-top-color: var(--color-outline-variant);
+  margin: 0.25rem 0.75rem;
+  transition: border-color 200ms 300ms, margin 200ms 300ms;
+}
+
 </style>