mgv-backoffice 1.38.0 → 1.41.0

package/src/components/BaseToggle.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseToggle from './BaseToggle.vue'
+
+describe('BaseToggle', () => {
+  it('reflects the value in aria-checked and the track colour', () => {
+    const off = mount(BaseToggle, { props: { modelValue: false } })
+    expect(off.find('[role=switch]').attributes('aria-checked')).toBe('false')
+    expect(off.find('[role=switch]').classes()).toContain('bg-slate-200')
+
+    const on = mount(BaseToggle, { props: { modelValue: true, color: 'red' } })
+    expect(on.find('[role=switch]').attributes('aria-checked')).toBe('true')
+    expect(on.find('[role=switch]').classes()).toContain('bg-red-600')
+  })
+
+  it('uses the red off track with offTone="red"', () => {
+    const w = mount(BaseToggle, { props: { modelValue: false, offTone: 'red' } })
+    expect(w.find('[role=switch]').classes()).toContain('bg-red-200')
+  })
+
+  it('emits update:modelValue and change with the flipped value', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: false } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toEqual([[true]])
+    expect(w.emitted('change')).toEqual([[true]])
+  })
+
+  it('does nothing while disabled', async () => {
+    const w = mount(BaseToggle, { props: { modelValue: true, disabled: true } })
+    await w.find('[role=switch]').trigger('click')
+    expect(w.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('renders the label, or uses ariaLabel when there is none', () => {
+    expect(mount(BaseToggle, { props: { label: 'Crawler' } }).text()).toBe('Crawler')
+    const w = mount(BaseToggle, { props: { ariaLabel: 'Alive' } })
+    expect(w.find('[role=switch]').attributes('aria-label')).toBe('Alive')
+  })
+})

package/src/components/BaseToggle.vue

@@ -0,0 +1,73 @@
+<template>
+  <label
+    class="inline-flex items-center gap-3 select-none"
+    :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+  >
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="modelValue"
+      :aria-label="label ? undefined : ariaLabel || undefined"
+      :disabled="disabled"
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900 disabled:cursor-not-allowed"
+      :class="modelValue ? ON[color] : offTone === 'red' ? 'bg-red-200 dark:bg-red-900/50' : 'bg-slate-200 dark:bg-slate-700'"
+      @click="toggle"
+    >
+      <span
+        class="inline-block h-5 w-5 rounded-full bg-white shadow ring-1 ring-black/5 transition-transform"
+        :class="modelValue ? 'translate-x-[22px]' : 'translate-x-0.5'"
+        aria-hidden="true"
+      />
+    </button>
+    <span v-if="label" class="text-sm font-medium text-slate-700 dark:text-slate-200">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+/**
+ * On/off switch (role="switch"). `v-model` is the boolean; `change` fires
+ * after every user toggle with the new value, so callers can persist it.
+ * `color` tints the on state; `offTone="red"` shows a red track while off
+ * (e.g. "account is down" states).
+ */
+type Color = 'emerald' | 'red' | 'sky' | 'amber'
+
+interface Props {
+  modelValue?: boolean
+  /** Visible label beside the switch (also its accessible name). */
+  label?: string
+  /** Accessible name when there is no visible label. */
+  ariaLabel?: string
+  color?: Color
+  offTone?: 'slate' | 'red'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  ariaLabel: '',
+  color: 'emerald',
+  offTone: 'slate',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
+
+const ON: Record<Color, string> = {
+  emerald: 'bg-emerald-500',
+  red: 'bg-red-600',
+  sky: 'bg-sky-500',
+  amber: 'bg-amber-500',
+}
+
+function toggle() {
+  if (props.disabled) return
+  const next = !props.modelValue
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>

package/src/components/Pagination.test.ts

@@ -1,85 +1,93 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Pagination from './Pagination.vue'
-
-/** Visible cell labels in DOM order ('…' for the ellipsis span). */
-function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
-  return wrapper.findAll('li').map(li => li.text().trim())
-}
-
-async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
-  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
-  expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
-  await link!.trigger('click')
-}
-
-describe('Pagination', () => {
-  it('renders every page without an ellipsis when totalPages <= 5', () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 100, itemsPerPage: 20 },
-    })
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5'])
-  })
-
-  it('renders a window with a trailing ellipsis on the first page', () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '...', '10'])
-  })
-
-  it('keeps cells in ascending order around a middle page', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '...', '10'])
-
-    await clickPage(wrapper, 5)
-    expect(cellLabels(wrapper)).toEqual(['1', '...', '3', '4', '5', '6', '7', '...', '10'])
-
-    expect(wrapper.emitted('page-changed')).toEqual([[3], [5]])
-  })
-
-  it('omits the ellipsis when no pages are hidden next to the edges', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 4)
-    // window is 2..6, so only page 1 precedes it — no gap, no ellipsis
-    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '...', '10'])
-  })
-
-  it('renders the trailing window on the last page', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 5)
-    await clickPage(wrapper, 7)
-    await clickPage(wrapper, 9)
-    await clickPage(wrapper, 10)
-    expect(cellLabels(wrapper)).toEqual(['1', '...', '8', '9', '10'])
-  })
-
-  it('does not emit when the active page is clicked again', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 1)
-    expect(wrapper.emitted('page-changed')).toBeUndefined()
-  })
-
-  it('clamps the current page when the item count shrinks', async () => {
-    const wrapper = mount(Pagination, {
-      props: { totalItems: 200, itemsPerPage: 20 },
-    })
-    await clickPage(wrapper, 3)
-    await clickPage(wrapper, 5)
-    await clickPage(wrapper, 7)
-    await wrapper.setProps({ totalItems: 40 })
-    expect(cellLabels(wrapper)).toEqual(['1', '2'])
-    expect(wrapper.find('button.active').text()).toBe('2')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pagination from './Pagination.vue'
+
+/** Visible cell labels in DOM order ('…' for the ellipsis span). */
+function cellLabels(wrapper: ReturnType<typeof mount>): string[] {
+  return wrapper.findAll('li').map(li => li.text().trim())
+}
+
+async function clickPage(wrapper: ReturnType<typeof mount>, page: number) {
+  const link = wrapper.findAll('button').find(b => b.text().trim() === String(page))
+  expect(link, `expected a visible cell for page ${page}`).toBeTruthy()
+  await link!.trigger('click')
+}
+
+describe('Pagination', () => {
+  it('renders every page without an ellipsis when totalPages <= 5', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 100, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5'])
+  })
+
+  it('renders a window with a trailing ellipsis on the first page', () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '...', '10'])
+  })
+
+  it('keeps cells in ascending order around a middle page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '...', '10'])
+
+    await clickPage(wrapper, 5)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '3', '4', '5', '6', '7', '...', '10'])
+
+    expect(wrapper.emitted('page-changed')).toEqual([[3], [5]])
+  })
+
+  it('omits the ellipsis when no pages are hidden next to the edges', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 4)
+    // window is 2..6, so only page 1 precedes it — no gap, no ellipsis
+    expect(cellLabels(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '...', '10'])
+  })
+
+  it('renders the trailing window on the last page', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await clickPage(wrapper, 9)
+    await clickPage(wrapper, 10)
+    expect(cellLabels(wrapper)).toEqual(['1', '...', '8', '9', '10'])
+  })
+
+  it('does not emit when the active page is clicked again', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 1)
+    expect(wrapper.emitted('page-changed')).toBeUndefined()
+  })
+
+  it('clamps the current page when the item count shrinks', async () => {
+    const wrapper = mount(Pagination, {
+      props: { totalItems: 200, itemsPerPage: 20 },
+    })
+    await clickPage(wrapper, 3)
+    await clickPage(wrapper, 5)
+    await clickPage(wrapper, 7)
+    await wrapper.setProps({ totalItems: 40 })
+    expect(cellLabels(wrapper)).toEqual(['1', '2'])
+    expect(wrapper.find('button.active').text()).toBe('2')
+  })
+
+  it('falls back to 20 per page when itemsPerPage is null or 0 (no "Infinity")', () => {
+    for (const itemsPerPage of [null, 0]) {
+      const wrapper = mount(Pagination, { props: { totalItems: 16, itemsPerPage: itemsPerPage as unknown as number } })
+      expect(wrapper.text()).not.toContain('Infinity')
+      expect(wrapper.findAll('button').map((b) => b.text()).filter((t) => /^\d+$/.test(t))).toEqual(['1'])
+    }
+  })
+})

package/src/components/Pagination.vue

@@ -1,82 +1,87 @@
-<template>
-  <nav aria-label="Pagination">
-    <ul class="flex list-none p-0 m-0">
-      <li v-for="(cell, index) in cells" :key="index" class="mr-1">
-        <button
-          v-if="cell !== 0"
-          type="button"
-          :aria-current="cell === currentPage ? 'page' : undefined"
-          :aria-label="`Go to page ${cell}`"
-          @click="changePage(cell)"
-          class="inline-block min-w-[44px] border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-          :class="{ 'active font-bold bg-gray-200 dark:bg-gray-700': cell === currentPage }"
-        >{{ cell }}</button>
-        <span v-else aria-hidden="true" class="inline-block border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-not-allowed">...</span>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-
-const props = defineProps({
-  totalItems: {
-    type: Number,
-    required: true
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 20
-  }
-})
-
-const currentPage = ref(1);
-const totalPages = ref(0);
-const cells = ref([] as number[]);
-const emit = defineEmits(['page-changed']);
-
-// Rebuild the visible cells around `page`. A cell value of 0 renders as
-// an ellipsis. The window is the current page ± 2 neighbours, plus the
-// first/last page with an ellipsis only when pages are actually hidden.
-function buildCells(page: number) {
-  if (totalPages.value <= 5) {
-    cells.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
-    return;
-  }
-
-  const out: number[] = [];
-  const start = Math.max(1, page - 2);
-  const end = Math.min(totalPages.value, page + 2);
-
-  if (start > 1) {
-    out.push(1);
-    if (start > 2) out.push(0);
-  }
-  for (let i = start; i <= end; i++) {
-    out.push(i);
-  }
-  if (end < totalPages.value) {
-    if (end < totalPages.value - 1) out.push(0);
-    out.push(totalPages.value);
-  }
-  cells.value = out;
-}
-
-function changePage(pageNumber: number) {
-  if (pageNumber === currentPage.value || pageNumber < 1 || pageNumber > totalPages.value) {
-    return;
-  }
-  currentPage.value = pageNumber;
-  buildCells(pageNumber);
-  emit('page-changed', pageNumber);
-}
-
-watch(() => [props.totalItems, props.itemsPerPage], () => {
-  totalPages.value = Math.ceil(props.totalItems / props.itemsPerPage);
-  if (currentPage.value > totalPages.value) {
-    currentPage.value = Math.max(1, totalPages.value);
-  }
-  buildCells(currentPage.value);
-}, { immediate: true })
-</script>
+<template>
+  <nav aria-label="Pagination">
+    <ul class="flex list-none p-0 m-0">
+      <li v-for="(cell, index) in cells" :key="index" class="mr-1">
+        <button
+          v-if="cell !== 0"
+          type="button"
+          :aria-current="cell === currentPage ? 'page' : undefined"
+          :aria-label="`Go to page ${cell}`"
+          @click="changePage(cell)"
+          class="inline-block min-w-[44px] border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-pointer transition-colors hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+          :class="{ 'active font-bold bg-gray-200 dark:bg-gray-700': cell === currentPage }"
+        >{{ cell }}</button>
+        <span v-else aria-hidden="true" class="inline-block border border-gray-300 dark:border-gray-600 rounded-lg p-3 text-black dark:text-gray-200 cursor-not-allowed">...</span>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  totalItems: {
+    type: Number,
+    required: true
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 20
+  }
+})
+
+const currentPage = ref(1);
+const totalPages = ref(0);
+const cells = ref([] as number[]);
+const emit = defineEmits(['page-changed']);
+
+// Rebuild the visible cells around `page`. A cell value of 0 renders as
+// an ellipsis. The window is the current page ± 2 neighbours, plus the
+// first/last page with an ellipsis only when pages are actually hidden.
+function buildCells(page: number) {
+  if (totalPages.value <= 5) {
+    cells.value = Array.from({ length: totalPages.value }, (_, i) => i + 1);
+    return;
+  }
+
+  const out: number[] = [];
+  const start = Math.max(1, page - 2);
+  const end = Math.min(totalPages.value, page + 2);
+
+  if (start > 1) {
+    out.push(1);
+    if (start > 2) out.push(0);
+  }
+  for (let i = start; i <= end; i++) {
+    out.push(i);
+  }
+  if (end < totalPages.value) {
+    if (end < totalPages.value - 1) out.push(0);
+    out.push(totalPages.value);
+  }
+  cells.value = out;
+}
+
+function changePage(pageNumber: number) {
+  if (pageNumber === currentPage.value || pageNumber < 1 || pageNumber > totalPages.value) {
+    return;
+  }
+  currentPage.value = pageNumber;
+  buildCells(pageNumber);
+  emit('page-changed', pageNumber);
+}
+
+watch(() => [props.totalItems, props.itemsPerPage], () => {
+  // Guard against a missing/zero page size or total (e.g. a reset form that
+  // nulled them): fall back to 20 per page / 0 items instead of rendering
+  // "Infinity" or "NaN" pages.
+  const perPage = Number(props.itemsPerPage) > 0 ? Number(props.itemsPerPage) : 20;
+  const total = Number(props.totalItems) > 0 ? Number(props.totalItems) : 0;
+  totalPages.value = Math.ceil(total / perPage);
+  if (currentPage.value > totalPages.value) {
+    currentPage.value = Math.max(1, totalPages.value);
+  }
+  buildCells(currentPage.value);
+}, { immediate: true })
+</script>

package/src/index.ts

@@ -60,6 +60,13 @@ export { default as BaseSearchSelect } from './components/BaseSearchSelect.vue'
 export { default as BaseCard } from './components/BaseCard.vue'
 export { default as BaseField } from './components/BaseField.vue'
 export { default as BaseStatCard } from './components/BaseStatCard.vue'
+export { default as BaseToggle } from './components/BaseToggle.vue'
+export { default as BaseCheckbox } from './components/BaseCheckbox.vue'
+export { default as BaseSidebarUser } from './components/BaseSidebarUser.vue'
+export { default as BaseAuthLayout } from './components/BaseAuthLayout.vue'
+export { default as BaseBooleanBadge } from './components/BaseBooleanBadge.vue'
+export { default as BaseDetailList } from './components/BaseDetailList.vue'
+export type { DetailItem } from './types/detail'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'

package/src/style.css

@@ -30,61 +30,61 @@
 body {
   font-family: var(--font-sans);
 }
-
-/* BaseDateTimePicker skin: re-point @vuepic/vue-datepicker's CSS variables at
-   the lib palette (emerald accent, slate surfaces — same as BaseInput). The
-   picker is third-party markup, so its variables are the only styling hook;
-   Tailwind utilities can't reach inside it. `html` prefix out-specifies the
-   package's own `.dp--theme-*` blocks regardless of stylesheet order. */
-html .dp--theme-light,
-html .dp--theme-dark {
-  --dp-font-family: var(--font-sans);
-  --dp-font-size: 0.875rem;
-  --dp-border-radius: 0.25rem;
-  --dp-cell-border-radius: 0.25rem;
-  --dp-input-padding: 8px 30px 8px 12px;
-  --dp-primary-text-color: #fff;
-}
-html .dp--theme-light {
-  --dp-background-color: #f8fafc;   /* slate-50  */
-  --dp-text-color: #0f172a;         /* slate-900 */
-  --dp-hover-color: #f1f5f9;        /* slate-100 */
-  --dp-hover-text-color: #0f172a;
-  --dp-hover-icon-color: #64748b;   /* slate-500 */
-  --dp-icon-color: #94a3b8;         /* slate-400 */
-  --dp-primary-color: #059669;      /* emerald-600 */
-  --dp-primary-disabled-color: #6ee7b7; /* emerald-300 */
-  --dp-secondary-color: #94a3b8;
-  --dp-border-color: #cbd5e1;       /* slate-300 */
-  --dp-menu-border-color: #cbd5e1;
-  --dp-border-color-hover: #94a3b8;
-  --dp-border-color-focus: #10b981; /* emerald-500 */
-  --dp-highlight-color: rgb(16 185 129 / 0.12);
-  --dp-success-color: #10b981;
-  --dp-danger-color: #ef4444;       /* red-500 */
-  --dp-marker-color: #ef4444;
-}
-html .dp--theme-dark {
-  --dp-background-color: #0f172a;   /* slate-900 */
-  --dp-text-color: #f1f5f9;         /* slate-100 */
-  --dp-hover-color: #1e293b;        /* slate-800 */
-  --dp-hover-text-color: #f1f5f9;
-  --dp-hover-icon-color: #cbd5e1;   /* slate-300 */
-  --dp-icon-color: #64748b;         /* slate-500 */
-  --dp-primary-color: #059669;      /* emerald-600 */
-  --dp-primary-disabled-color: #065f46; /* emerald-800 */
-  --dp-secondary-color: #64748b;
-  --dp-border-color: #475569;       /* slate-600 */
-  --dp-menu-border-color: #334155;  /* slate-700 */
-  --dp-border-color-hover: #64748b;
-  --dp-border-color-focus: #10b981; /* emerald-500 */
-  --dp-highlight-color: rgb(16 185 129 / 0.2);
-  --dp-disabled-color: #1e293b;
-  --dp-disabled-color-text: #64748b;
-  --dp-scroll-bar-background: #0f172a;
-  --dp-scroll-bar-color: #334155;
-  --dp-success-color: #10b981;
-  --dp-danger-color: #ef4444;
-  --dp-marker-color: #ef4444;
-  --dp-tooltip-color: #1e293b;
-}
+
+/* BaseDateTimePicker skin: re-point @vuepic/vue-datepicker's CSS variables at
+   the lib palette (emerald accent, slate surfaces — same as BaseInput). The
+   picker is third-party markup, so its variables are the only styling hook;
+   Tailwind utilities can't reach inside it. `html` prefix out-specifies the
+   package's own `.dp--theme-*` blocks regardless of stylesheet order. */
+html .dp--theme-light,
+html .dp--theme-dark {
+  --dp-font-family: var(--font-sans);
+  --dp-font-size: 0.875rem;
+  --dp-border-radius: 0.5rem;        /* rounded-lg, like BaseInput */
+  --dp-cell-border-radius: 0.25rem;
+  --dp-input-padding: 8px 30px 8px 12px;
+  --dp-primary-text-color: #fff;
+}
+html .dp--theme-light {
+  --dp-background-color: #fff;      /* white, like BaseInput */
+  --dp-text-color: #0f172a;         /* slate-900 */
+  --dp-hover-color: #f1f5f9;        /* slate-100 */
+  --dp-hover-text-color: #0f172a;
+  --dp-hover-icon-color: #64748b;   /* slate-500 */
+  --dp-icon-color: #94a3b8;         /* slate-400 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #6ee7b7; /* emerald-300 */
+  --dp-secondary-color: #94a3b8;
+  --dp-border-color: #cbd5e1;       /* slate-300 */
+  --dp-menu-border-color: #cbd5e1;
+  --dp-border-color-hover: #94a3b8;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.12);
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;       /* red-500 */
+  --dp-marker-color: #ef4444;
+}
+html .dp--theme-dark {
+  --dp-background-color: #0f172a;   /* slate-900 */
+  --dp-text-color: #f1f5f9;         /* slate-100 */
+  --dp-hover-color: #1e293b;        /* slate-800 */
+  --dp-hover-text-color: #f1f5f9;
+  --dp-hover-icon-color: #cbd5e1;   /* slate-300 */
+  --dp-icon-color: #64748b;         /* slate-500 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #065f46; /* emerald-800 */
+  --dp-secondary-color: #64748b;
+  --dp-border-color: #475569;       /* slate-600 */
+  --dp-menu-border-color: #334155;  /* slate-700 */
+  --dp-border-color-hover: #64748b;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.2);
+  --dp-disabled-color: #1e293b;
+  --dp-disabled-color-text: #64748b;
+  --dp-scroll-bar-background: #0f172a;
+  --dp-scroll-bar-color: #334155;
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;
+  --dp-marker-color: #ef4444;
+  --dp-tooltip-color: #1e293b;
+}

package/src/types/detail.ts

@@ -0,0 +1,10 @@
+/**
+ * One row of a BaseDetailList. `href` renders the value as an external link;
+ * `mono` sets it in the monospace face.
+ */
+export interface DetailItem {
+  label: string
+  value?: string | number | boolean | null
+  href?: string
+  mono?: boolean
+}