upstream changes for button

Author: jellydeck

app/components/Button/Base.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    'disabled'?: boolean
-    'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary'
-    'size'?: 'small' | 'medium'
-    'keyshortcut'?: string
-
-    /**
-     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-     */
-    'aria-keyshortcuts'?: never
-
-    'classicon'?: string
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    classicon?: string
+    ariaKeyshortcuts?: string
+    block?: boolean
   }>(),
   {
     type: 'button',
@@ -32,7 +27,16 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="rounded-md outline-none group"
+    class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
+    :class="{
+      'inline-flex': !block,
+      'flex': block,
+      'text-sm px-4 py-2': size === 'medium',
+      'text-xs px-2 py-0.5': size === 'small',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,
+    }"
     :type="props.type"
     :disabled="
       /**
@@ -43,31 +47,20 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
-      :class="{
-        'text-sm px-4 py-2': size === 'medium',
-        'text-xs px-2 py-0.5': size === 'small',
-        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
-        'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
-        'opacity-40 cursor-not-allowed border-transparent': disabled,
-      }"
+      v-if="classicon"
+      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
+      aria-hidden="true"
+    />
+    <slot />
+    <kbd
+      v-if="ariaKeyshortcuts"
+      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      aria-hidden="true"
     >
-      <span
-        v-if="classicon"
-        :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-        aria-hidden="true"
-      />
-      <slot />
-      <kbd
-        v-if="keyshortcut"
-        class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
-        aria-hidden="true"
-      >
-        {{ keyshortcut }}
-      </kbd>
-    </span>
+      {{ ariaKeyshortcuts }}
+    </kbd>
   </button>
 </template>