@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",
@@ -37,23 +37,15 @@
     "./global": {
       "types": "./lib/global.d.ts"
     },
-    "./style.css": "./lib/style.css",
-    "./*": {
-      "import": {
-        "types": "./lib/*.d.ts",
-        "default": "./lib/*.js"
-      },
-      "require": {
-        "types": "./lib/*.d.cts",
-        "default": "./lib/*.cjs"
-      }
-    }
+    "./style.css": "./lib/style.css"
   },
   "scripts": {
     "build": "vite build",
     "yarn:dedupe": "npx yarn-deduplicate --strategy highest yarn.lock",
     "install:dev": "rm -rf lib dest && find node_modules -mindepth 1 -delete && yarn install",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "tsc": "vue-tsc --noEmit -p tsconfig.json",
+    "lint": "eslint . && stylelint \"src/**/*.vue\" \"src/**/*.css\"",
+    "lint:fix": "eslint --fix . && stylelint --fix \"**/*.vue\" \"**/*.css\"",
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
@@ -69,7 +61,7 @@
     "components",
     "ui"
   ],
-  "author": "satoshi kotaki",
+  "author": "Digital Wallet Corporation",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -85,23 +77,57 @@
   ],
   "peerDependencies": {
     "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
+    "@nuxt/kit": "^3.17.5",
     "vue": "^3.5.29"
   },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
     "@nuxt/kit": "^3.17.5",
+    "@stylistic/eslint-plugin": "5.10.0",
+    "@stylistic/stylelint-plugin": "5.3.1",
     "@types/node": "24.13.6",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/coverage-v8": "3.2.4",
+    "@vue/compiler-core": "3.5.43",
     "@vue/test-utils": "2.4.6",
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "globals": "17.13.0",
     "happy-dom": "20.14.5",
     "nuxt": "^3.17.5",
+    "postcss-html": "2.0.0",
+    "stylelint": "17.16.0",
+    "stylelint-config-recommended-vue": "2.0.0",
+    "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",
+    "typescript-eslint": "8.71.0",
     "vite": "^7.0.0",
     "vite-plugin-dts": "5.1.0",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "3.2.4",
     "vue": "^3.5.29",
+    "vue-eslint-parser": "10.4.1",
     "vue-tsc": "3.1.5"
+  },
+  "resolutions": {
+    "eslint": "10.11.0",
+    "eslint-plugin-vue": "10.11.1",
+    "typescript-eslint": "8.71.0",
+    "@stylistic/eslint-plugin": "5.10.0",
+    "globals": "17.13.0",
+    "vue-eslint-parser": "10.4.1",
+    "stylelint": "17.16.0",
+    "@stylistic/stylelint-plugin": "5.3.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-config-recommended-vue": "2.0.0",
+    "stylelint-config-recommended": "18.0.0",
+    "stylelint-config-html": "2.0.0",
+    "postcss-html": "2.0.0",
+    "postcss": "8.5.28"
   }
 }

package/src/accordion-fieldset.vue

@@ -10,10 +10,10 @@
       <button
         type="button"
         class="dwui-accordion-toggle"
-        :aria-expanded="pageContext.expanded"
+        :aria-expanded="expanded"
         @click="onClickToggle"
       >
-        <SvgTriangleButton :direction="pageContext.expanded ? 'up' : 'down'" />
+        <SvgTriangleButton :direction="expanded ? 'up' : 'down'" />
         <LabelIcon v-if="props.legend != null || slots.legend != null || slots.icon != null">
           <!-- 渡されたスロットだけを中継する。空のラベルを渡すとアイコンの後ろに間隔が空くため -->
           <template
@@ -33,7 +33,7 @@
     </legend>
     <div
       ref="refContents"
-      :class="[ 'dwui-accordion-contents', shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
+      :class="[ 'dwui-accordion-contents', shrinkable ? expanded ? 'dwui-expanded' : 'dwui-shrunk' : '' ]"
     >
       <slot />
     </div>
@@ -41,22 +41,22 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
 import { useShrinkable } from '@/internal/use-shrinkable';
 
-interface Props {
+export interface Props {
   /** 凡例の文字。HTMLを含める場合は#legendスロットを使う */
   legend?: string;
   /** trueの場合、fieldsetを無効にする */
   disabled?: boolean;
-  /** trueの場合、開いた状態で表示する デフォルト false */
+  /** trueの場合、開いた状態で表示する デフォルト false。v-model:expanded で束縛しないときの初期値 */
   initialExpand?: boolean;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** 凡例の文字の前に表示するアイコン */
   icon?(): unknown;
   /** 凡例。legendより優先する */
@@ -66,18 +66,23 @@ interface Slots {
 const slots = defineSlots<Slots>();
 
 const refContents = ref<HTMLElement>();
-const pageContext = reactive({
-  expanded: true
+// 真偽値の prop は未指定だと false に変換されるため、未指定を undefined のまま受けるよう既定値を明示する
+/** 親が v-model:expanded で束縛したときの開閉状態。束縛しなければ undefined */
+const model = defineModel<boolean | undefined>('expanded', { default: undefined });
+/** 束縛しないときの開閉状態 */
+const localExpanded = ref(!!props.initialExpand);
+const expanded = computed({
+  get: (): boolean => model.value ?? localExpanded.value,
+  set: (value: boolean): void => {
+    localExpanded.value = value;
+    model.value = value;
+  }
 });
 const shrinkable = useShrinkable(refContents);
 
 const onClickToggle = () => {
-  pageContext.expanded = !pageContext.expanded;
+  expanded.value = !expanded.value;
 };
-
-onMounted(() => {
-  pageContext.expanded = !!props.initialExpand;
-});
 </script>
 
 <style>
@@ -89,8 +94,8 @@ onMounted(() => {
 :where(.dwui-accordion-toggle) {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  margin-left: 4px;
+  gap: 0.33em;
+  margin-left: 0.33em;
   padding: 0;
   border: none;
   background: none;
@@ -104,14 +109,14 @@ onMounted(() => {
 }
 
 :where(.dwui-accordion-toggle:focus-visible) {
-  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-accordion-contents) {
   position: relative;
   width: fit-content;
-  padding: 2px;
+  padding: 0.17em;
   overflow: hidden;
   opacity: 1;
 }

package/src/accordion-section.vue

@@ -7,7 +7,7 @@
       ref="refContents"
       class="dwui-accordion-section-contents"
       :class="[
-        shrinkable ? pageContext.expanded ? 'dwui-expanded' : 'dwui-shrunk' : '',
+        shrinkable ? expanded ? 'dwui-expanded' : 'dwui-shrunk' : '',
         { 'dwui-no-gradient': props.noGradient }
       ]"
     >
@@ -21,7 +21,7 @@
         type="button"
         class="dwui-accordion-section-toggle"
         :disabled="props.disabled"
-        :aria-expanded="pageContext.expanded"
+        :aria-expanded="expanded"
         @click.stop="onClickToggle"
       >
         <LabelIcon v-if="toggleIcon() != null || toggleLabel != null">
@@ -43,7 +43,7 @@
         </LabelIcon>
         <SvgTriangleButton
           v-else
-          :direction="pageContext.expanded ? 'up' : 'down'"
+          :direction="expanded ? 'up' : 'down'"
         />
       </button>
     </div>
@@ -51,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import type { Component, Slot } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
@@ -60,40 +60,49 @@ import type { LabelPreset } from '@/types/label-preset';
 
 // 開閉ボタンのアイコンとラベルは別々に決める。どちらも、スロット/ラベルの指定 > プリセット の順で使う
 // 何も指定が無い場合だけ、既定の三角を表示する
-interface Props {
+export interface Props {
   /** trueの場合、開閉ボタンを無効にする */
   disabled?: boolean;
-  /** trueの場合、開いた状態で表示する デフォルト false */
+  /** trueの場合、開いた状態で表示する デフォルト false。v-model:expanded で束縛しないときの初期値 */
   initialExpand?: boolean;
   /** trueの場合、縮めたときに中身の下側をぼかさない */
   noGradient?: boolean;
   /** 縮めているときの開閉ボタン(開く)のラベル */
-  openLabel?: string;
+  expandLabel?: string;
   /** 開いているときの開閉ボタン(閉じる)のラベル */
-  closeLabel?: string;
+  collapseLabel?: string;
   /** 縮めているときの開閉ボタン(開く)のアイコンとラベル */
-  openPreset?: LabelPreset;
+  expandPreset?: LabelPreset;
   /** 開いているときの開閉ボタン(閉じる)のアイコンとラベル */
-  closePreset?: LabelPreset;
+  collapsePreset?: LabelPreset;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** 縮めているときの開閉ボタン(開く)のアイコン */
-  'open-icon'?(): unknown;
+  'expand-icon'?(): unknown;
   /** 開いているときの開閉ボタン(閉じる)のアイコン */
-  'close-icon'?(): unknown;
+  'collapse-icon'?(): unknown;
   default?(): unknown;
 }
 const slots = defineSlots<Slots>();
 
 const refContents = ref<HTMLElement>();
-const pageContext = reactive({
-  expanded: true
+// 真偽値の prop は未指定だと false に変換されるため、未指定を undefined のまま受けるよう既定値を明示する
+/** 親が v-model:expanded で束縛したときの開閉状態。束縛しなければ undefined */
+const model = defineModel<boolean | undefined>('expanded', { default: undefined });
+/** 束縛しないときの開閉状態 */
+const localExpanded = ref(!!props.initialExpand);
+const expanded = computed({
+  get: (): boolean => model.value ?? localExpanded.value,
+  set: (value: boolean): void => {
+    localExpanded.value = value;
+    model.value = value;
+  }
 });
 const shrinkable = useShrinkable(refContents);
 
-const togglePreset = computed((): LabelPreset | undefined => pageContext.expanded ? props.closePreset : props.openPreset);
+const togglePreset = computed((): LabelPreset | undefined => expanded.value ? props.collapsePreset : props.expandPreset);
 
 /**
  * 開閉ボタンに表示するアイコン。スロットは関数のままコンポーネントとして描画する
@@ -102,7 +111,7 @@ const togglePreset = computed((): LabelPreset | undefined => pageContext.expande
  * @returns {Slot | Component | undefined}
  */
 const toggleIcon = (): Slot | Component | undefined => {
-  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  const slot = expanded.value ? slots['collapse-icon'] : slots['expand-icon'];
   return (slot as Slot | undefined) ?? togglePreset.value?.icon;
 };
 
@@ -112,12 +121,12 @@ const toggleIcon = (): Slot | Component | undefined => {
  * @returns {Record<string, unknown> | undefined}
  */
 const toggleIconProps = (): Record<string, unknown> | undefined => {
-  const slot = pageContext.expanded ? slots['close-icon'] : slots['open-icon'];
+  const slot = expanded.value ? slots['collapse-icon'] : slots['expand-icon'];
   return slot == null ? togglePreset.value?.iconProps : undefined;
 };
 
 const toggleLabel = computed((): string | undefined => {
-  const label = pageContext.expanded ? props.closeLabel : props.openLabel;
+  const label = expanded.value ? props.collapseLabel : props.expandLabel;
   if (label != null) {
     return label;
   }
@@ -126,12 +135,8 @@ const toggleLabel = computed((): string | undefined => {
 });
 
 const onClickToggle = () => {
-  pageContext.expanded = !pageContext.expanded;
+  expanded.value = !expanded.value;
 };
-
-onMounted(() => {
-  pageContext.expanded = !!props.initialExpand;
-});
 </script>
 
 <style>
@@ -189,16 +194,16 @@ onMounted(() => {
 }
 
 :where(.dwui-accordion-section-toggle:focus-visible) {
-  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-accordion-section-toggle[aria-expanded='true']) {
-  margin-top: 8px;
+  margin-top: 0.67em;
 }
 
 /* 縮めたときはボタンを中身のぼかしに少し重ね、中身とボタンの間を詰める */
 :where(.dwui-accordion-section-toggle[aria-expanded='false']) {
-  margin-top: -10px;
+  margin-top: -0.83em;
 }
 </style>

package/src/components.ts

@@ -1,10 +1,20 @@
 // 公開するコンポーネントをここに列挙する。index/register/nuxtはここから読む
 export { default as AccordionFieldset } from '@/accordion-fieldset.vue';
 export { default as AccordionSection } from '@/accordion-section.vue';
+export { default as CopyButton } from '@/copy-button.vue';
+export { default as DarkModeSelector } from '@/dark-mode-selector.vue';
+export { default as DataTable } from '@/data-table.vue';
+export { default as HelpButton } from '@/help-button.vue';
+export { default as HelpPopper } from '@/help-popper.vue';
 export { default as HourglassLoading } from '@/hourglass-loading.vue';
+export { default as IntersectionLazyComponent } from '@/intersection-lazy-component.vue';
 export { default as LabelButton } from '@/label-button.vue';
 export { default as LabelIcon } from '@/label-icon.vue';
+export { default as ModalDialog } from '@/modal-dialog.vue';
+export { default as OverlayBox } from '@/overlay-box.vue';
 export { default as PageSection } from '@/page-section.vue';
 export { default as PageTitle } from '@/page-title.vue';
+export { default as ScreenLoading } from '@/screen-loading.vue';
 export { default as TabContent } from '@/tab-content.vue';
 export { default as TabGroup } from '@/tab-group.vue';
+export { default as WarningPopper } from '@/warning-popper.vue';

package/src/copy-button.vue

@@ -0,0 +1,89 @@
+<!--
+値をクリップボードにコピーするボタン
+-->
+<template>
+  <button
+    type="button"
+    class="dwui-copy-button"
+    :aria-label="slots.default ? undefined : props.label"
+    @click="onClickCopy"
+  >
+    <slot>
+      <SvgMemo />
+    </slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { SvgMemo } from '@digitalwalletcorp/vue-svg-icons';
+
+export interface Props {
+  /** コピーする値。関数を渡すとクリック時に呼び出して値を得る */
+  value: string | number | (() => string | number);
+  /** ボタンの読み上げ名。スロットで文字を渡したときは使わない */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Copy'
+});
+
+export interface Emits {
+  /** コピーに成功したときに、コピーした文字列を発行する */
+  (e: 'emit:copy', value: string): void;
+  /** コピーに失敗したときに、原因のエラーを発行する */
+  (e: 'emit:error', error: unknown): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** ボタンの中身。未指定ならメモのアイコン */
+  default?(): unknown;
+}
+const slots = defineSlots<Slots>();
+
+const onClickCopy = async () => {
+  const value = String(typeof props.value === 'function' ? props.value() : props.value);
+  try {
+    await navigator.clipboard.writeText(value);
+  } catch (error) {
+    emit('emit:error', error);
+    return;
+  }
+  emit('emit:copy', value);
+};
+</script>
+
+<style>
+:where(.dwui-copy-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.17em;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  background-image: none;
+  color: inherit;
+  font: inherit;
+  line-height: 0;
+  cursor: pointer;
+}
+
+:where(.dwui-copy-button:not(:disabled):hover) {
+  background: var(--dwui-background-copy-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+}
+
+:where(.dwui-copy-button:not(:disabled):active) {
+  transform: translate(1px, 1px);
+}
+
+:where(.dwui-copy-button:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(.dwui-copy-button:focus-visible) {
+  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);
+}
+</style>

package/src/dark-mode-selector.vue

@@ -0,0 +1,212 @@
+<!--
+ライトモードとダークモードを切り替えるスイッチ
+選んだモードを <html> の class(light / dark)に反映し、localStorage に保存する。
+保存値が無ければ OS の設定に従う。OS の設定が変わったとき、およびモードを切り替えたときは同一サイトのすべてのタブ、ウィンドウが追随する。
+SSRではライトの状態で描画されるため、一瞬ちらつきが発生することがある。
+これを回避するには dark-mode-selector.md に記載されている回避ロジックを実装する。
+-->
+<template>
+  <button
+    type="button"
+    role="switch"
+    class="dwui-dark-mode-selector"
+    :aria-label="props.label"
+    :aria-checked="isDark"
+    @click="onClickToggle"
+  >
+    <span class="dwui-dark-mode-selector-track">
+      <span class="dwui-dark-mode-selector-icon-light"><slot name="icon-light"><SvgHighBrightness /></slot></span>
+      <span class="dwui-dark-mode-selector-icon-dark"><slot name="icon-dark"><SvgMoonPhases :moon-age="3.85" /></slot></span>
+    </span>
+    <span class="dwui-dark-mode-selector-handle" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { SvgHighBrightness, SvgMoonPhases } from '@digitalwalletcorp/vue-svg-icons';
+
+type ColorScheme = 'light' | 'dark';
+
+export interface Props {
+  /** 選んだモードを保存する localStorage のキー */
+  storageKey?: string;
+  /** スイッチの読み上げ名 */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  storageKey: 'dwui-color-scheme',
+  label: 'Dark mode'
+});
+
+export interface Emits {
+  /** マウント時に決まったモードと、その後モードが変わるたびに、新しいモードを発行する */
+  (e: 'emit:change', value: ColorScheme): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  'icon-light'?(): unknown;
+  'icon-dark'?(): unknown;
+}
+defineSlots<Slots>();
+
+const isDark = ref<boolean>(false);
+
+let applied: ColorScheme | null = null;
+let mediaQuery: MediaQueryList | null = null;
+
+const isColorScheme = (value: unknown): value is ColorScheme => value === 'light' || value === 'dark';
+
+/** OS の設定から得られるモード */
+const osScheme = (): ColorScheme => mediaQuery?.matches ? 'dark' : 'light';
+
+/** 保存されているモード。無い場合や localStorage が使えない場合は null */
+const storedScheme = (): ColorScheme | null => {
+  try {
+    const value = localStorage.getItem(props.storageKey);
+    return isColorScheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+};
+
+/** モードを <html> の class に反映する。変わったときだけ change を発行する */
+const applyScheme = (scheme: ColorScheme): void => {
+  const classList = document.documentElement.classList;
+  classList.remove(scheme === 'dark' ? 'light' : 'dark');
+  classList.add(scheme);
+  isDark.value = scheme === 'dark';
+  if (applied !== scheme) {
+    applied = scheme;
+    emit('emit:change', scheme);
+  }
+};
+
+/** モードを保存して反映する */
+const selectScheme = (scheme: ColorScheme): void => {
+  try {
+    localStorage.setItem(props.storageKey, scheme);
+  } catch {
+    // 保存できなくても表示の切り替えは行う
+  }
+  applyScheme(scheme);
+};
+
+const onClickToggle = (): void => {
+  selectScheme(isDark.value ? 'light' : 'dark');
+};
+
+const onChangeOsScheme = (event: MediaQueryListEvent): void => {
+  selectScheme(event.matches ? 'dark' : 'light');
+};
+
+// 別のタブで切り替えたとき。保存値が消されたときは OS の設定に戻る
+const onStorage = (event: StorageEvent): void => {
+  if (event.key !== props.storageKey) {
+    return;
+  }
+  applyScheme(isColorScheme(event.newValue) ? event.newValue : osScheme());
+};
+
+onMounted(() => {
+  mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  applyScheme(storedScheme() ?? osScheme());
+  mediaQuery.addEventListener('change', onChangeOsScheme);
+  window.addEventListener('storage', onStorage);
+});
+
+onBeforeUnmount(() => {
+  mediaQuery?.removeEventListener('change', onChangeOsScheme);
+  window.removeEventListener('storage', onStorage);
+});
+</script>
+
+<style>
+:where(.dwui-dark-mode-selector) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: 3.85em;
+  height: 1.65em;
+  padding: 0;
+  border: none;
+  border-radius: 0.85em;
+  background-color: transparent;
+  background-image: none;
+  color: inherit;
+  font: inherit;
+  line-height: 0;
+  cursor: pointer;
+}
+
+:where(.dwui-dark-mode-selector-track) {
+  position: relative;
+  display: block;
+  height: inherit;
+  border-radius: inherit;
+  background: var(--dwui-background-dark-mode-selector, azure);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+  font-size: 0.85em;
+  transition: background 0.15s ease-out;
+}
+
+:where(.dwui-dark-mode-selector[aria-checked='true'] > .dwui-dark-mode-selector-track) {
+  background: var(--dwui-background-dark-mode-selector-checked, darkslategray);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+}
+
+:where(.dwui-dark-mode-selector-icon-light, .dwui-dark-mode-selector-icon-dark) {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  transition: opacity 0.15s ease-out;
+}
+
+:where(.dwui-dark-mode-selector-icon-light) {
+  right: 0.6em;
+}
+
+:where(.dwui-dark-mode-selector-icon-dark) {
+  left: 0.6em;
+  opacity: 0;
+}
+
+:where(.dwui-dark-mode-selector[aria-checked='true'] .dwui-dark-mode-selector-icon-light) {
+  opacity: 0;
+}
+
+:where(.dwui-dark-mode-selector[aria-checked='true'] .dwui-dark-mode-selector-icon-dark) {
+  opacity: 1;
+}
+
+:where(.dwui-dark-mode-selector-handle) {
+  position: absolute;
+  top: 0.075em;
+  left: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 0.75em;
+  background: var(--dwui-background-dark-mode-selector-handle, linear-gradient(0.25turn, #888484 0%, #b4abab 50%, #888484 100%));
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  transition: left 0.15s ease-out;
+}
+
+:where(.dwui-dark-mode-selector[aria-checked='true'] > .dwui-dark-mode-selector-handle) {
+  left: calc(3.85em - 1.5em - 0.075em);
+  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+}
+
+:where(.dwui-dark-mode-selector:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:where(.dwui-dark-mode-selector:focus-visible) {
+  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);
+}
+</style>