mikuru 1.0.37 → 1.0.39

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.0.39 - 2026-05-18
+
+- Added package-exported `MikuruPopover`, `MikuruAlertDialog`, `MikuruTable`, `MikuruPagination`, `MikuruDatePicker`, `MikuruMarkdownEditor`, and `MikuruWysiwygEditor` components with typed exports and dogfood coverage.
+- Added package-exported `MikuruCodeView` and render `MikuruMarkdownEditor` fenced code blocks through it.
+- Added package-exported `MikuruDrawer`, `MikuruBreadcrumb`, `MikuruSwitch`, `MikuruRadioGroup`, `MikuruFileUpload`, `MikuruEmptyState`, `MikuruSkeleton`, `MikuruBadge`, and `MikuruCommandPalette` components with typed exports and dogfood coverage.
+- Added package-exported `MikuruAvatar`, `MikuruAvatarGroup`, `MikuruContextMenu`, `MikuruStepper`, `MikuruSlider`, `MikuruRating`, `MikuruTimeline`, `MikuruStatCard`, and `MikuruKbd` components with typed exports and dogfood coverage.
+- Added package-exported `MikuruSearchInput`, `MikuruSegmentedControl`, `MikuruChip`, `MikuruTagInput`, `MikuruRangeSlider`, `MikuruColorPicker`, `MikuruTimePicker`, `MikuruCalendar`, `MikuruDataList`, and `MikuruTreeView` components with typed exports and dogfood coverage.
+
+## 1.0.38 - 2026-05-17
+
+- Fixed `MikuruVideoPlayer` speed and skip settings so option active states follow the selected value without reactive menu churn, preventing settings menu crashes in consuming apps while keeping speed highlights and skip actions in sync.
+
 ## 1.0.37 - 2026-05-17
 
 - Fixed `MikuruVideoPlayer` speed and skip settings so option records avoid `.value` template access, preventing crashes in consuming apps when selecting playback rate or keyboard skip seconds.

package/components/MikuruAlertDialog.mikuru

@@ -0,0 +1,183 @@
+<template>
+  <Teleport to="body">
+    <div
+      m-if="open"
+      class="alert-backdrop"
+      role="presentation"
+      @click="handleBackdrop"
+    >
+      <section
+        ref="dialogEl"
+        class="mikuru-alert-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        :aria-label="title"
+        tabindex="-1"
+        @click="stopEvent"
+      >
+        <header>
+          <h2>{{ title }}</h2>
+          <p>{{ description }}</p>
+        </header>
+
+        <div m-if="body" class="alert-body">
+          {{ body }}
+        </div>
+        <div m-else class="alert-body">
+          <slot></slot>
+        </div>
+
+        <footer>
+          <button class="secondary" type="button" @click="cancel">{{ cancelLabel }}</button>
+          <button class="primary" type="button" @click="confirm">{{ confirmLabel }}</button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { onMounted, onUnmounted, ref, watch } from "mikuru";
+
+const {
+  open = false,
+  title = "Confirm action",
+  description = "This action needs confirmation.",
+  body = "",
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  closeOnBackdrop = true,
+  closeOnEscape = true
+} = defineProps({
+  open: Boolean,
+  title: String,
+  description: String,
+  body: String,
+  confirmLabel: String,
+  cancelLabel: String,
+  closeOnBackdrop: Boolean,
+  closeOnEscape: Boolean
+});
+
+const emit = defineEmits(["confirm", "cancel", "close"]);
+const dialogEl = ref(null);
+
+onMounted(() => {
+  document.addEventListener("keydown", handleDocumentKeydown);
+  focusDialog();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
+
+watch(open, focusDialog);
+
+function focusDialog() {
+  requestAnimationFrame(() => {
+    if (open.value && dialogEl.value) {
+      dialogEl.value.focus();
+    }
+  });
+}
+
+function confirm() {
+  emit("confirm");
+  emit("close");
+}
+
+function cancel() {
+  emit("cancel");
+  emit("close");
+}
+
+function handleBackdrop() {
+  if (closeOnBackdrop.value) {
+    cancel();
+  }
+}
+
+function handleDocumentKeydown(event) {
+  if (!open.value || !closeOnEscape.value) return;
+  if (event.key === "Escape") {
+    cancel();
+  }
+}
+
+function stopEvent(event) {
+  event.stopPropagation();
+}
+</script>
+
+<style scoped>
+.alert-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgb(15 23 42 / 72%);
+}
+
+.mikuru-alert-dialog {
+  display: grid;
+  gap: 14px;
+  width: min(440px, 100%);
+  border-radius: 8px;
+  padding: 18px;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 34%);
+  outline: none;
+}
+
+header,
+.alert-body {
+  display: grid;
+  gap: 6px;
+}
+
+h2,
+p {
+  margin: 0;
+}
+
+h2 {
+  font-size: 1.08rem;
+}
+
+p,
+.alert-body {
+  color: #475569;
+}
+
+footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+button {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 9px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.secondary {
+  color: #111827;
+  background: #ffffff;
+}
+
+.primary {
+  border-color: #dc2626;
+  color: #ffffff;
+  background: #dc2626;
+}
+
+button:focus-visible {
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+</style>

package/components/MikuruAvatar.mikuru

@@ -0,0 +1,60 @@
+<template>
+  <span class="mikuru-avatar" :data-size="size" :aria-label="alt || name">
+    <img m-if="src" :src="src" :alt="alt || name" />
+    <span m-else>{{ initials }}</span>
+  </span>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  src = "",
+  name = "User",
+  alt = "",
+  size = "md"
+} = defineProps({
+  src: String,
+  name: String,
+  alt: String,
+  size: String
+});
+
+const initials = computed(() => {
+  const words = String(name.value || "User").trim().split(/\s+/).slice(0, 2);
+  return words.map((word) => word[0]?.toUpperCase() || "").join("") || "U";
+});
+</script>
+
+<style scoped>
+.mikuru-avatar {
+  --avatar-size: 40px;
+  display: inline-grid;
+  place-items: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  overflow: hidden;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  color: #1e3a8a;
+  background: #dbeafe;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.mikuru-avatar[data-size="sm"] {
+  --avatar-size: 28px;
+  font-size: 0.78rem;
+}
+
+.mikuru-avatar[data-size="lg"] {
+  --avatar-size: 56px;
+  font-size: 1.1rem;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

package/components/MikuruAvatarGroup.mikuru

@@ -0,0 +1,66 @@
+<template>
+  <div class="mikuru-avatar-group" :aria-label="label">
+    <MikuruAvatar
+      m-for="avatar in visibleAvatars"
+      :key="avatarKey(avatar)"
+      :src="avatar.src"
+      :name="avatar.name"
+      :alt="avatar.alt"
+      :size="size"
+    />
+    <span m-if="overflowCount > 0" class="avatar-overflow">+{{ overflowCount }}</span>
+  </div>
+</template>
+
+<script>
+import { computed } from "mikuru";
+import MikuruAvatar from "./MikuruAvatar.mikuru";
+
+const {
+  avatars = [],
+  max = 4,
+  size = "md",
+  label = "Avatar group"
+} = defineProps({
+  avatars: Array,
+  max: Number,
+  size: String,
+  label: String
+});
+
+const visibleAvatars = computed(() => avatars.value.slice(0, Math.max(0, max.value)));
+const overflowCount = computed(() => Math.max(0, avatars.value.length - max.value));
+
+function avatarKey(avatar) {
+  return avatar.id || avatar.src || avatar.name;
+}
+</script>
+
+<style scoped>
+.mikuru-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+:deep(.mikuru-avatar),
+.avatar-overflow {
+  box-shadow: 0 0 0 2px #ffffff;
+}
+
+:deep(.mikuru-avatar:not(:first-child)),
+.avatar-overflow {
+  margin-left: -8px;
+}
+
+.avatar-overflow {
+  display: inline-grid;
+  place-items: center;
+  min-width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  color: #334155;
+  background: #f1f5f9;
+  font-size: 0.82rem;
+  font-weight: 800;
+}
+</style>

package/components/MikuruBadge.mikuru

@@ -0,0 +1,62 @@
+<template>
+  <span class="mikuru-badge" :data-tone="tone" :data-variant="variant">
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script>
+const {
+  label = "Badge",
+  tone = "neutral",
+  variant = "soft"
+} = defineProps({
+  label: String,
+  tone: String,
+  variant: String
+});
+</script>
+
+<style scoped>
+.mikuru-badge {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  min-height: 22px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mikuru-badge[data-tone="neutral"] {
+  color: #334155;
+  background: #f1f5f9;
+}
+
+.mikuru-badge[data-tone="success"] {
+  color: #166534;
+  background: #dcfce7;
+}
+
+.mikuru-badge[data-tone="warning"] {
+  color: #92400e;
+  background: #fef3c7;
+}
+
+.mikuru-badge[data-tone="danger"] {
+  color: #991b1b;
+  background: #fee2e2;
+}
+
+.mikuru-badge[data-tone="info"] {
+  color: #1e40af;
+  background: #dbeafe;
+}
+
+.mikuru-badge[data-variant="outline"] {
+  background: transparent;
+  border-color: currentColor;
+}
+</style>

package/components/MikuruBreadcrumb.mikuru

@@ -0,0 +1,86 @@
+<template>
+  <nav class="mikuru-breadcrumb" aria-label="Breadcrumb">
+    <ol>
+      <li m-for="item in items" :key="itemKey(item)">
+        <a
+          m-if="item.href && !item.current"
+          :href="item.href"
+          @click="selectItem(item, $event)"
+        >{{ item.label }}</a>
+        <button
+          m-else-if="!item.current"
+          type="button"
+          @click="selectItem(item, $event)"
+        >{{ item.label }}</button>
+        <span m-else aria-current="page">{{ item.label }}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+const {
+  items = []
+} = defineProps({
+  items: Array
+});
+
+const emit = defineEmits(["select"]);
+
+function itemKey(item) {
+  return item.value || item.href || item.label;
+}
+
+function selectItem(item, event) {
+  emit("select", item, event);
+}
+</script>
+
+<style scoped>
+.mikuru-breadcrumb {
+  color: #64748b;
+  font: inherit;
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+li:not(:last-child)::after {
+  color: #94a3b8;
+  content: "/";
+}
+
+a,
+button {
+  border: 0;
+  padding: 0;
+  color: #2563eb;
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:hover,
+button:hover {
+  text-decoration: underline;
+}
+
+span {
+  color: #111827;
+  font-weight: 650;
+}
+</style>

package/components/MikuruCalendar.mikuru

@@ -0,0 +1,142 @@
+<template>
+  <section class="mikuru-calendar" :aria-label="label">
+    <header>
+      <button type="button" @click="previousMonth">Prev</button>
+      <strong>{{ monthLabel }}</strong>
+      <button type="button" @click="nextMonth">Next</button>
+    </header>
+    <div class="weekday-grid">
+      <span m-for="day in weekdays" :key="day">{{ day }}</span>
+    </div>
+    <div class="day-grid">
+      <button
+        m-for="day in days"
+        :key="day.key"
+        type="button"
+        :data-muted="day.currentMonth ? 'false' : 'true'"
+        :data-selected="day.date === modelValue ? 'true' : 'false'"
+        @click="selectDay(day)"
+      >{{ day.day }}</button>
+    </div>
+  </section>
+</template>
+
+<script>
+import { computed, ref, watch } from "mikuru";
+
+const {
+  label = "Calendar",
+  modelValue = "",
+  locale = "en-US"
+} = defineProps({
+  label: String,
+  modelValue: String,
+  locale: String
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const viewDate = ref(new Date());
+const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+watch(modelValue, () => {
+  if (!modelValue.value) return;
+  const parsed = new Date(`${modelValue.value}T00:00:00`);
+  if (!Number.isNaN(parsed.getTime())) viewDate.value = parsed;
+}, { immediate: true });
+
+const monthLabel = computed(() => {
+  return viewDate.value.toLocaleDateString(locale.value, { month: "long", year: "numeric" });
+});
+
+const days = computed(() => {
+  const year = viewDate.value.getFullYear();
+  const month = viewDate.value.getMonth();
+  const first = new Date(year, month, 1);
+  const start = new Date(year, month, 1 - first.getDay());
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return {
+      key: date.toISOString(),
+      day: date.getDate(),
+      date: toDateValue(date),
+      currentMonth: date.getMonth() === month
+    };
+  });
+});
+
+function previousMonth() {
+  viewDate.value = new Date(viewDate.value.getFullYear(), viewDate.value.getMonth() - 1, 1);
+}
+
+function nextMonth() {
+  viewDate.value = new Date(viewDate.value.getFullYear(), viewDate.value.getMonth() + 1, 1);
+}
+
+function selectDay(day) {
+  emit("update:modelValue", day.date);
+  emit("change", day.date, day);
+}
+
+function toDateValue(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+</script>
+
+<style scoped>
+.mikuru-calendar {
+  display: grid;
+  gap: 8px;
+  width: min(320px, 100%);
+  color: #111827;
+  font: inherit;
+}
+
+header,
+.weekday-grid,
+.day-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+
+header {
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+}
+
+strong {
+  text-align: center;
+}
+
+button {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+.weekday-grid span {
+  color: #64748b;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.day-grid button[data-muted="true"] {
+  color: #94a3b8;
+  background: #f8fafc;
+}
+
+.day-grid button[data-selected="true"] {
+  border-color: #2563eb;
+  color: #ffffff;
+  background: #2563eb;
+}
+</style>

package/components/MikuruChip.mikuru

@@ -0,0 +1,64 @@
+<template>
+  <span class="mikuru-chip" :data-tone="tone">
+    <slot>{{ label }}</slot>
+    <button m-if="removable" type="button" :aria-label="removeLabel" @click="remove">Remove</button>
+  </span>
+</template>
+
+<script>
+const {
+  label = "Chip",
+  tone = "neutral",
+  removable = false,
+  removeLabel = "Remove chip"
+} = defineProps({
+  label: String,
+  tone: String,
+  removable: Boolean,
+  removeLabel: String
+});
+
+const emit = defineEmits(["remove"]);
+
+function remove() {
+  emit("remove");
+}
+</script>
+
+<style scoped>
+.mikuru-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  min-height: 26px;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  padding: 3px 9px;
+  color: #334155;
+  background: #f8fafc;
+  font-size: 0.86rem;
+  font-weight: 650;
+}
+
+.mikuru-chip[data-tone="info"] {
+  border-color: #bfdbfe;
+  color: #1e40af;
+  background: #eff6ff;
+}
+
+.mikuru-chip[data-tone="success"] {
+  border-color: #bbf7d0;
+  color: #166534;
+  background: #f0fdf4;
+}
+
+button {
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+</style>