@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/src/overlay-box.vue

@@ -0,0 +1,218 @@
+<!--
+オーバーレイボックス
+画面全体に暗幕を掛け、その上に見出しと閉じるボタンの付いたウィンドウを表示する。
+閉じるボタン・Esc・暗幕のクリック(closeOnBackdrop)で閉じる。ウィンドウはドラッグで移動でき、右下のつまみでリサイズできる。
+中に置いた要素が body 直下に描画するツールチップやドロップダウンを隠さないよう、<dialog> の最前面表示ではなく z-index で前面に出す。
+FloatingComponent とは開いた順に重なり、後から開いたものが前面に出る。
+-->
+<template>
+  <Transition
+    name="dwui-overlay-box-fade"
+    @after-leave="onAfterLeaveOverlayBox"
+  >
+    <div
+      v-if="open"
+      class="dwui-overlay-box"
+      :style="{ '--dwui-order-window': order }"
+    >
+      <div
+        class="dwui-overlay-box-backdrop"
+        @click="onClickBackdrop"
+      />
+      <MovableWindow
+        ref="refWindow"
+        class="dwui-overlay-box-container"
+        name="dwui-overlay-box"
+        tabindex="-1"
+        :drag-mode="props.dragMode"
+        :loading="props.loading"
+        :close-label="props.closeLabel"
+        clamp-bottom
+        @keydown="onKeydownWindow"
+        @emit:close="onCloseWindow"
+      >
+        <template #title>
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </template>
+        <slot />
+      </MovableWindow>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import MovableWindow from '@/internal/movable-window.vue';
+import { openedOverlayBoxes } from '@/internal/opened-overlay-boxes';
+import { nextWindowOrder } from '@/internal/window-order';
+import type { MovableWindowDragMode } from '@/types/movable-window';
+
+export interface Props {
+  /** 見出し。title スロットで差し替えられる */
+  title?: string;
+  /** ドラッグで移動するときに掴む範囲。body はウィンドウ全体、header は見出しだけ。未指定なら移動できない */
+  dragMode?: MovableWindowDragMode;
+  /** 暗幕のクリックで閉じる */
+  closeOnBackdrop?: boolean;
+  /** ウィンドウに暗幕とスピナーを重ね、中身を操作できなくする */
+  loading?: boolean;
+  /** 閉じるボタンの読み上げ名 */
+  closeLabel?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  dragMode: undefined,
+  closeOnBackdrop: false,
+  loading: false,
+  closeLabel: 'Close'
+});
+
+export interface Emits {
+  /** 閉じるアニメーションが終わり、ボックスが取り除かれた */
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** 見出し */
+  title?(): unknown;
+  /** ウィンドウに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+/** 表示するか。閉じる操作で false になる */
+const open = defineModel<boolean>('open', { default: false });
+
+const refWindow = ref<InstanceType<typeof MovableWindow>>();
+const order = ref(0);
+
+const boxKey = Symbol('dwui-overlay-box');
+let previousFocus: HTMLElement | null = null;
+
+const onClickBackdrop = (): void => {
+  if (props.closeOnBackdrop) {
+    open.value = false;
+  }
+};
+
+const onCloseWindow = (): void => {
+  open.value = false;
+};
+
+/**
+ * ウィンドウにフォーカスがある間、Esc で閉じる。
+ * 中に置いた要素が dispatchEvent で発行した Escape、IME の変換を取り消す Esc、
+ * 中に置いた <dialog> に向けた Esc では閉じない
+ */
+const onKeydownWindow = (event: KeyboardEvent): void => {
+  if (event.key !== 'Escape' || !event.isTrusted || event.isComposing) {
+    return;
+  }
+  if (event.target instanceof Element && event.target.closest('dialog')) {
+    return;
+  }
+  // テンプレートで box の中に置いた box の Esc は外側にもバブルするため、最後に開いた box だけが閉じる
+  if (openedOverlayBoxes.at(-1) === boxKey) {
+    open.value = false;
+  }
+};
+
+const onAfterLeaveOverlayBox = (): void => {
+  emit('emit:close');
+};
+
+const removeFromOpenedBoxes = (): void => {
+  const index = openedOverlayBoxes.indexOf(boxKey);
+  if (0 <= index) {
+    openedOverlayBoxes.splice(index, 1);
+  }
+};
+
+const activate = (): void => {
+  order.value = nextWindowOrder();
+  const movable = refWindow.value;
+  const rect = movable?.element?.getBoundingClientRect();
+  if (movable) {
+    movable.position.x = (window.innerWidth - (rect?.width || 0)) / 2;
+    // 画面より高いときに見出しが上に隠れて掴めなくならないよう、上端は画面内に収める
+    movable.position.y = Math.max(0, (window.innerHeight - (rect?.height || 0)) / 2);
+  }
+  previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  movable?.element?.focus();
+  openedOverlayBoxes.push(boxKey);
+};
+
+const deactivate = (): void => {
+  refWindow.value?.teardown();
+  removeFromOpenedBoxes();
+  if (previousFocus?.isConnected) {
+    previousFocus.focus();
+  }
+  previousFocus = null;
+};
+
+onMounted(() => {
+  if (open.value) {
+    activate();
+  }
+});
+
+onBeforeUnmount(() => {
+  removeFromOpenedBoxes();
+});
+
+watch(open, (newValue) => {
+  if (newValue) {
+    activate();
+  } else {
+    deactivate();
+  }
+}, { flush: 'post' });
+</script>
+
+<style>
+:where(html:has(.dwui-overlay-box), html:has(.dwui-overlay-box) > body) {
+  overflow: hidden;
+}
+
+:where(.dwui-overlay-box) {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--dwui-z-index-overlay-box, 5000) + var(--dwui-order-window, 0));
+}
+
+:where(.dwui-overlay-box-backdrop) {
+  position: absolute;
+  inset: 0;
+  background: var(--dwui-background-overlay-box-backdrop, light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)));
+}
+
+:where(.dwui-overlay-box-container) {
+  --dwui-border-color-movable-window: var(--dwui-border-color-overlay-box, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-movable-window: var(--dwui-radius-overlay-box, 4px);
+  --dwui-background-movable-window: var(--dwui-background-overlay-box, Canvas);
+  --dwui-color-text-movable-window: var(--dwui-color-text-overlay-box, CanvasText);
+  --dwui-box-shadow-movable-window: var(--dwui-box-shadow-overlay-box, 0 2px 8px rgba(0, 0, 0, 0.33));
+  --dwui-padding-movable-window-header: var(--dwui-padding-overlay-box-header, 0.17em 0.33em);
+  --dwui-background-movable-window-header: var(--dwui-background-overlay-box-header, transparent);
+  --dwui-color-text-movable-window-header: var(--dwui-color-text-overlay-box-header, inherit);
+  --dwui-background-movable-window-close-button-hover: var(--dwui-background-overlay-box-close-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+  --dwui-padding-movable-window-body: var(--dwui-padding-overlay-box-body, 0.4em);
+  --dwui-color-text-movable-window-resizer: var(--dwui-color-text-overlay-box-resizer, GrayText);
+  --dwui-background-movable-window-loading: var(--dwui-background-overlay-box-loading, light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)));
+  --dwui-size-movable-window-spinner: var(--dwui-size-overlay-box-spinner, 48px);
+  --dwui-border-color-movable-window-spinner: var(--dwui-border-color-overlay-box-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
+  --dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-overlay-box-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+}
+
+:where(.dwui-overlay-box-fade-enter-active, .dwui-overlay-box-fade-leave-active) {
+  transition: opacity 0.25s ease;
+}
+
+:where(.dwui-overlay-box-fade-enter-from, .dwui-overlay-box-fade-leave-to) {
+  opacity: 0;
+}
+</style>

package/src/page-section.vue

@@ -36,7 +36,7 @@ import LabelIcon from '@/label-icon.vue';
 /** 見出しのアイコンとして選べるもの */
 type PageSectionIcon = 'diamond' | 'circle' | 'square' | 'pushpin' | 'round-pushpin';
 
-interface Props {
+export interface Props {
   /** 見出しの文字。未指定なら見出しを表示しない */
   title?: string;
   /** 見出しのアイコン。これ以外のアイコンは#iconスロットで渡す デフォルト 'diamond' */
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   icon: 'diamond'
 });
 
-interface Slots {
+export interface Slots {
   /** 見出しの文字の前に表示するアイコン。iconより優先する */
   icon?(): unknown;
   default?(): unknown;
@@ -85,19 +85,19 @@ const presetIcon = computed((): { component: Component; props: Record<string, un
 <style>
 :where(.dwui-page-section) {
   display: block;
-  margin: 4px 0 8px;
-  padding-top: 2px;
-  font-size: var(--dwui-font-size-page-section, 12px);
+  margin: 0.33em 0 0.67em;
+  padding-top: 0.17em;
+  font-size: var(--dwui-font-size-page-section, inherit);
   font-weight: 500;
 }
 
 :where(.dwui-page-section-title) {
   display: flex;
   align-items: center;
-  font-size: var(--dwui-font-size-page-section-title, 14px);
+  font-size: var(--dwui-font-size-page-section-title, 1.17em);
 }
 
 :where(.dwui-page-section-content) {
-  margin: 8px 0 8px 16px;
+  margin: 0.67em 0 0.67em 1.33em;
 }
 </style>

package/src/page-title.vue

@@ -25,13 +25,13 @@
 <script setup lang="ts">
 import LabelIcon from '@/label-icon.vue';
 
-interface Props {
+export interface Props {
   /** タイトルの文字 */
   title: string;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** タイトルの文字の前に表示するアイコン */
   icon?(): unknown;
   /** タイトルバーの右側に表示する内容 */
@@ -46,11 +46,11 @@ const slots = defineSlots<Slots>();
   align-items: center;
   justify-content: space-between;
   width: var(--dwui-width-page-title, auto);
-  padding: 4px;
+  padding: 0.33em;
   border-radius: 4px;
   background: var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));
   color: var(--dwui-color-text-page-title, rgb(220, 220, 220));
-  font-size: var(--dwui-font-size-page-title, 14px);
+  font-size: var(--dwui-font-size-page-title, 1.17em);
   font-weight: var(--dwui-font-weight-page-title, normal);
 }
 </style>

package/src/screen-loading.vue

@@ -0,0 +1,90 @@
+<!--
+画面全体を覆うローディング。
+loading が true の間は <dialog> をモーダルで開き、暗幕とスピナーを表示して画面の操作を受け付けなくする。
+Esc キーでは閉じない。
+-->
+<template>
+  <dialog
+    ref="refDialog"
+    class="dwui-screen-loading"
+    closedby="none"
+    @cancel.prevent
+  >
+    <div class="dwui-screen-loading-spinner" />
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+export interface Props {
+  /** 読み込み中か */
+  loading: boolean;
+}
+const props = defineProps<Props>();
+
+const refDialog = ref<HTMLDialogElement | null>(null);
+
+const open = () => {
+  const dialog = refDialog.value;
+  if (dialog && !dialog.open) {
+    dialog.showModal();
+  }
+};
+
+const close = () => {
+  const dialog = refDialog.value;
+  if (dialog?.open) {
+    dialog.close();
+  }
+};
+
+onMounted(() => {
+  if (props.loading) {
+    open();
+  }
+});
+
+onBeforeUnmount(() => {
+  close();
+});
+
+watch(() => props.loading, (newValue) => {
+  if (newValue) {
+    open();
+  } else {
+    close();
+  }
+}, { flush: 'post' });
+</script>
+
+<style>
+:where(.dwui-screen-loading) {
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  background-image: none;
+  overflow: visible;
+}
+
+:where(.dwui-screen-loading::backdrop) {
+  background: var(--dwui-background-screen-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)));
+}
+
+:where(.dwui-screen-loading-spinner) {
+  box-sizing: border-box;
+  width: var(--dwui-size-screen-loading-spinner, 100px);
+  height: var(--dwui-size-screen-loading-spinner, 100px);
+  border: 8px solid var(--dwui-border-color-screen-loading-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
+  border-left-color: var(--dwui-border-color-screen-loading-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+  border-radius: 50%;
+  animation: dwui-screen-loading-spin 1.1s linear infinite;
+}
+
+@keyframes dwui-screen-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/tab-content.vue

@@ -4,12 +4,13 @@ TabGroupの中に置くタブ1つ分の中身
 <template>
   <div
     v-if="!props.disabled"
+    :id="context ? `${context.groupName}-${props.tabId}-panel` : undefined"
     class="dwui-tab-content"
-    :aria-label="props.labelId"
-    :aria-checked="selected ? 'true' : 'false'"
-    :aria-description="props.description"
+    role="tabpanel"
+    :aria-labelledby="context ? `${context.groupName}-${props.tabId}` : undefined"
     :aria-busy="loading ? 'true' : undefined"
-    :data-test-tab-content="props.labelId"
+    :hidden="!selected"
+    :data-test-tab-content="props.tabId"
   >
     <slot
       :activated="activated"
@@ -38,12 +39,12 @@ import type { ClassValue, Slot, StyleValue } from 'vue';
 import { tabGroupContextKey } from '@/internal/tab-group-context';
 import type { TabContentStatus } from '@/internal/tab-group-context';
 
-// labelId・description・header*・status・#iconは、TabGroupが見出しを描画するために読む
-interface Props {
-  /** タブを識別するID。TabGroupのselectedTabLabelIdに渡す値 */
-  labelId: string;
+// tabId・label・header*・status・#iconは、TabGroupが見出しを描画するために読む
+export interface Props {
+  /** タブを識別するID。TabGroupのselectedTabIdに渡す値 */
+  tabId: string;
   /** タブの見出しの文字 */
-  description: string;
+  label: string;
   /** trueの場合、タブを選べなくし、中身も描画しない */
   disabled?: boolean;
   /** タブの見出しの状態。見出しの色が変わる */
@@ -55,7 +56,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** タブの見出しの文字の前に表示するアイコン */
   icon?(): unknown;
   /**
@@ -80,7 +81,7 @@ const loading = ref(false);
 const loadingSlot = (): Slot | undefined => context?.loadingSlot();
 
 // 表示の切り替えは初期描画から効かせるため、マウントを待たない
-const selected = computed((): boolean => context?.activeLabelId.value === props.labelId);
+const selected = computed((): boolean => context?.activeTabId.value === props.tabId);
 
 const activated = computed((): boolean => !!context?.mounted.value && selected.value);
 
@@ -95,7 +96,7 @@ const setLoading = (value: boolean) => {
 </script>
 
 <style>
-:where(.dwui-tab-content[aria-checked='false']) {
+:where(.dwui-tab-content[hidden]) {
   display: none;
 }
 
@@ -103,7 +104,7 @@ const setLoading = (value: boolean) => {
   display: block;
   /* 読み込み中の覆いを中身の範囲に重ねる基準にする */
   position: relative;
-  padding: 4px 8px;
+  padding: 0.33em 0.67em;
   overflow: hidden;
   /* 全幅を横断すると速度が出てカクつくため、既定は固定の移動量とease-outとフェードでスライドインする */
   animation: dwui-tab-slide-in var(--dwui-duration-tab-slide, 0.35s) var(--dwui-easing-tab-slide, cubic-bezier(0.22, 1, 0.36, 1));
@@ -122,8 +123,8 @@ const setLoading = (value: boolean) => {
 :where(.dwui-tab-loading-spinner) {
   width: var(--dwui-size-loading-spinner, 40px);
   height: var(--dwui-size-loading-spinner, 40px);
-  border: 4px solid var(--dwui-border-color-loading-spinner-track, rgba(255, 255, 255, 0.4));
-  border-top-color: var(--dwui-border-color-loading-spinner, #ffffff);
+  border: 4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, 0.4));
+  border-top-color: var(--dwui-border-color-loading-spinner-accent, #ffffff);
   border-radius: 50%;
   animation: dwui-tab-loading-spin 0.8s linear infinite;
 }

package/src/tab-group.vue

@@ -10,28 +10,32 @@ TabContentを並べてタブで切り替える
     >
       <div
         class="dwui-tab-headers"
+        role="tablist"
         :class="props.headerClass"
         :style="props.headerStyle"
       >
         <template
           v-for="tab in tabs"
-          :key="tab.labelId"
+          :key="tab.tabId"
         >
           <input
-            :id="`${groupName}-${tab.labelId}`"
+            :id="`${groupName}-${tab.tabId}`"
             type="radio"
             class="dwui-tab-radio"
+            role="tab"
             :name="groupName"
             :disabled="tab.disabled"
-            :checked="tab.labelId === activeLabelId"
-            @change="onChangeTab(tab.labelId)"
+            :checked="tab.tabId === activeTabId"
+            :aria-selected="tab.tabId === activeTabId ? 'true' : 'false'"
+            :aria-controls="`${groupName}-${tab.tabId}-panel`"
+            @change="onChangeTab(tab.tabId)"
           >
           <label
-            :for="`${groupName}-${tab.labelId}`"
+            :for="`${groupName}-${tab.tabId}`"
             class="dwui-tab-item"
             :class="[tab.status != null ? `dwui-tab-${tab.status}` : undefined, tab.headerClass]"
             :style="tab.headerStyle"
-            :data-test-tab-content-control="tab.labelId"
+            :data-test-tab-content-control="tab.tabId"
           >
             <LabelIcon>
               <template
@@ -40,7 +44,7 @@ TabContentを並べてタブで切り替える
               >
                 <component :is="tab.icon" />
               </template>
-              {{ tab.description }}
+              {{ tab.label }}
             </LabelIcon>
           </label>
         </template>
@@ -60,10 +64,10 @@ import TabContent from '@/tab-content.vue';
 import { tabGroupContextKey } from '@/internal/tab-group-context';
 import type { TabContentStatus } from '@/internal/tab-group-context';
 
-interface Props {
+export interface Props {
   /** ラジオボタンのname。未指定なら自動で採番する */
   tabGroupName?: string;
-  /** selectedTabLabelIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
+  /** selectedTabIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
   selectFirstEnabled?: boolean;
   /** タブの見出しを並べる部分に付けるclass */
   headerClass?: ClassValue;
@@ -74,18 +78,13 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Emits {
-  (e: 'emit:changeSelectedTab', labelId: string): void;
-}
-const emit = defineEmits<Emits>();
-
 /**
  * 選択するタブのlabelId。未指定なら先頭のタブ
- * 親がいつ代入しても選び直せるよう、v-model:selected-tab-label-idで同期する前提とする
+ * 親がいつ代入しても選び直せるよう、v-model:selected-tab-idで同期する前提とする
  */
-const selectedLabelId = defineModel<string>('selectedTabLabelId');
+const selectedTabId = defineModel<string>('selectedTabId');
 
-interface Slots {
+export interface Slots {
   default?(): VNode[];
   /** 読み込み中のTabContentに重ねて表示する内容。未指定なら既定の読み込み中表示 */
   loading?(): VNode[];
@@ -94,8 +93,8 @@ const slots = defineSlots<Slots>();
 
 /** タブの見出しの描画に使う、TabContentの指定 */
 interface TabHeader {
-  labelId: string;
-  description: string;
+  tabId: string;
+  label: string;
   disabled: boolean;
   status?: TabContentStatus;
   headerClass?: ClassValue;
@@ -107,7 +106,7 @@ const groupName = props.tabGroupName ?? useId();
 
 /**
  * TabContentのVNodeから見出しの指定を取り出す
- * propsのキーはテンプレートの書き方(label-id / labelId)のまま入っているため、両方を見る
+ * propsのキーはテンプレートの書き方(tab-id / tabId)のまま入っているため、両方を見る
  *
  * @param {VNode} vnode
  * @returns {TabHeader | undefined}
@@ -120,8 +119,8 @@ const toTabHeader = (vnode: VNode): TabHeader | undefined => {
   const vnodeProps = vnode.props ?? {};
   const disabled = vnodeProps.disabled;
   return {
-    labelId: String(vnodeProps['label-id'] ?? vnodeProps.labelId),
-    description: vnodeProps.description,
+    tabId: String(vnodeProps['tab-id'] ?? vnodeProps.tabId),
+    label: vnodeProps.label,
     // 属性だけを書いた場合(<TabContent disabled>)は空文字になる
     disabled: disabled === '' || !!disabled,
     status: vnodeProps.status,
@@ -148,30 +147,29 @@ const tabs = computed((): TabHeader[] => {
 });
 
 // 選ばれるまでは先頭のタブを選択中とする。スロットは描画中に読む必要があるため、setupの時点では先頭を確定しない
-const activeLabelId = computed((): string | undefined => {
-  if (selectedLabelId.value != null) {
-    return selectedLabelId.value;
+const activeTabId = computed((): string | undefined => {
+  if (selectedTabId.value != null) {
+    return selectedTabId.value;
   }
   const first = props.selectFirstEnabled ? tabs.value.find(tab => !tab.disabled) : tabs.value[0];
-  return first?.labelId;
+  return first?.tabId;
 });
 // タブの中身はactivatedを契機にAPIを呼ぶため、親の画面のonMountedで検索条件が整う前に通知しないよう、マウント後に通知を始める
 const mounted = ref(false);
-provide(tabGroupContextKey, { activeLabelId, mounted, loadingSlot: () => slots.loading });
+provide(tabGroupContextKey, { groupName, activeTabId, mounted, loadingSlot: () => slots.loading });
 
 onMounted(() => {
   mounted.value = true;
 });
 
-const onChangeTab = (labelId: string) => {
-  selectedLabelId.value = labelId;
-  emit('emit:changeSelectedTab', labelId);
+const onChangeTab = (tabId: string) => {
+  selectedTabId.value = tabId;
 };
 </script>
 
 <style>
 :where(.dwui-tab-group) {
-  margin-bottom: 8px;
+  margin-bottom: 0.67em;
 }
 
 :where(.dwui-tab-headers) {
@@ -179,8 +177,8 @@ const onChangeTab = (labelId: string) => {
   flex-direction: row;
   flex-wrap: wrap;
   position: relative;
-  margin-top: 5px;
-  padding-bottom: 4px;
+  margin-top: 0.4em;
+  padding-bottom: 0.33em;
 }
 
 :where(.dwui-tab-radio) {
@@ -195,7 +193,7 @@ const onChangeTab = (labelId: string) => {
 :where(.dwui-tab-item) {
   display: block;
   min-width: 100px;
-  padding: 0 4px;
+  padding: 0 0.33em;
   border: 1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));
   border-bottom: 1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);
   background: var(--dwui-background-tab-header, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(navy, #141c4d)));
@@ -244,8 +242,8 @@ const onChangeTab = (labelId: string) => {
 }
 
 :where(.dwui-tab-radio:focus-visible + .dwui-tab-item) {
-  outline: var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
-  outline-offset: var(--dwui-offset-focus-ring, 2px);
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
 }
 
 :where(.dwui-tab-items) {