@celestia-island/hikari 0.55.28 → 0.55.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.28",
+  "version": "0.55.30",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkIconButtonGroup.scss

@@ -107,6 +107,7 @@
 }
 
 .hk-icon-group-item {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -168,3 +169,29 @@
   font-weight: 600;
   line-height: 1;
 }
+
+/* Status marker (HkIconButtonGroupOption.marker) — a small dot pinned to
+ * the item's bottom-right corner. "success" = the theme's success green
+ * with a surface-colored ring so it stays legible on top of the icon's
+ * corner and across active/muted tints. Purely decorative: the accessible
+ * meaning lives in the option's label/tooltip the host controls. */
+.hk-icon-group-item-marker {
+  position: absolute;
+  right: calc(var(--space-1, 0.25rem) / 2);
+  bottom: calc(var(--space-1, 0.25rem) / 2);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.hk-icon-group-item-marker-success {
+  background: rgb(var(--color-success, 14 184 64));
+  box-shadow: 0 0 0 0.125rem rgb(var(--color-surface, 240 244 248));
+}
+
+/* Slider items already establish position:relative for the thumb stack —
+ * keep the marker above the gliding pill, not under it. */
+.hk-icon-group-slider .hk-icon-group-item .hk-icon-group-item-marker {
+  z-index: 1;
+}

package/src/components/HkIconButtonGroup.test.tsx

@@ -1,6 +1,6 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkIconButtonGroup from "./HkIconButtonGroup";
@@ -303,3 +303,41 @@ describe("HkIconButtonGroup", () => {
     });
   });
 });
+describe("option markers", () => {
+  const baseOpts = (marker?: "success", disabled?: boolean) => [
+    { key: "totp", label: "TOTP" },
+    { key: "password", label: "Password", marker, disabled },
+  ];
+
+  it("renders the success marker dot and data-marker attribute", () => {
+    const c = mountComp(() => h(HkIconButtonGroup, {
+      mode: "single",
+      variant: "slider",
+      options: baseOpts("success"),
+      modelValue: "totp",
+    }));
+    const item = c.querySelector('.hk-icon-group-item[data-key="password"]') as HTMLElement;
+    expect(item).toBeTruthy();
+    expect(item.getAttribute("data-marker")).toBe("success");
+    expect(item.querySelector(".hk-icon-group-item-marker-success")).toBeTruthy();
+    // The untouched sibling carries no marker.
+    const sibling = c.querySelector('.hk-icon-group-item[data-key="totp"]') as HTMLElement;
+    expect(sibling.getAttribute("data-marker")).toBeNull();
+  });
+
+  it("ignores activation of a disabled marked option", async () => {
+    const onSelect = vi.fn();
+    const c = mountComp(() => h(HkIconButtonGroup, {
+      mode: "single",
+      variant: "slider",
+      options: baseOpts("success", true),
+      modelValue: "totp",
+      onSelect,
+    }));
+    const item = c.querySelector('.hk-icon-group-item[data-key="password"]') as HTMLButtonElement;
+    expect(item.getAttribute("disabled")).not.toBeNull();
+    item.click();
+    await Promise.resolve();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});

package/src/components/HkIconButtonGroup.tsx

@@ -17,6 +17,11 @@ export interface HkIconButtonGroupOption {
    *  host's vue differs. Missing icons fall back to the label's initial. */
   icon?: unknown;
   disabled?: boolean;
+  /** Status dot pinned to the item's bottom-right corner. `"success"`
+   *  draws a small green dot (step-proven factor, completed requirement);
+   *  the dot is decorative — pair it with `disabled` and an updated
+   *  tooltip when it means "this one is done". */
+  marker?: "success";
   /** Tooltip text override; an EMPTY string suppresses the tooltip. */
   tooltip?: string;
 }
@@ -168,6 +173,7 @@ export default defineComponent({
               class="hk-icon-group-item"
               data-key={option.key}
               data-active={active || undefined}
+              data-marker={option.marker || undefined}
               role={props.mode === "single" ? "radio" : undefined}
               aria-checked={props.mode === "single" ? active : undefined}
               aria-pressed={props.mode === "multiple" ? active : undefined}
@@ -185,6 +191,12 @@ export default defineComponent({
                     </span>
                   )}
               </span>
+              {option.marker && (
+                <span
+                  class={`hk-icon-group-item-marker hk-icon-group-item-marker-${option.marker}`}
+                  aria-hidden="true"
+                />
+              )}
             </button>
           );
           // An empty tooltip override suppresses the wrapper entirely.

package/src/i18n/locales/ar/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "إزالة",
   "hikari::tagInput.addCustom": "استخدام \"{q}\"",
   "hikari::tagInput.reorder": "إعادة الترتيب — {label}",
-  "hikari::modal.hiddenLayers": "الطبقات المخفية"
+  "hikari::modal.hiddenLayers": "الطبقات المخفية",
+  "hikari::theme.modeTabHint": "هذه التبويبات تختار لوحة الألوان التي تحرّرها؛ لتبديل الوضع الفاتح/الداكن للتطبيق كله استخدم شريط الأوضاع أعلى نافذة السمة."
 }

package/src/i18n/locales/de/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Entfernen",
   "hikari::tagInput.addCustom": "„{q}“ verwenden",
   "hikari::tagInput.reorder": "Neu anordnen — {label}",
-  "hikari::modal.hiddenLayers": "Verdeckte Ebenen"
+  "hikari::modal.hiddenLayers": "Verdeckte Ebenen",
+  "hikari::theme.modeTabHint": "Diese Reiter wählen die zu bearbeitende Palette; die appweite Hell/Dunkel-Umschaltung liegt im Modusstreifen des Themen-Popups."
 }

package/src/i18n/locales/en/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Remove",
   "hikari::tagInput.addCustom": "Use “{q}”",
   "hikari::tagInput.reorder": "Reorder {label}",
-  "hikari::modal.hiddenLayers": "Hidden layers"
+  "hikari::modal.hiddenLayers": "Hidden layers",
+  "hikari::theme.modeTabHint": "These tabs pick which palette you are EDITING; to switch the app-wide light/dark, use the mode strip at the top of the theme popup."
 }

package/src/i18n/locales/es/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Quitar",
   "hikari::tagInput.addCustom": "Usar «{q}»",
   "hikari::tagInput.reorder": "Reordenar — {label}",
-  "hikari::modal.hiddenLayers": "Capas ocultas"
+  "hikari::modal.hiddenLayers": "Capas ocultas",
+  "hikari::theme.modeTabHint": "Estas pestañas eligen la paleta que estás EDITANDO; para cambiar el modo claro/oscuro de toda la app, usa la franja de modos de la parte superior del panel de temas."
 }

package/src/i18n/locales/fr/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Retirer",
   "hikari::tagInput.addCustom": "Utiliser « {q} »",
   "hikari::tagInput.reorder": "Réorganiser — {label}",
-  "hikari::modal.hiddenLayers": "Couches masquées"
+  "hikari::modal.hiddenLayers": "Couches masquées",
+  "hikari::theme.modeTabHint": "Ces onglets choisissent la palette éditée ; pour basculer clair/sombre dans toute l’app, utilisez la barre de mode du menu de thème."
 }

package/src/i18n/locales/ja/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "削除",
   "hikari::tagInput.addCustom": "「{q}」を使用",
   "hikari::tagInput.reorder": "並べ替え — {label}",
-  "hikari::modal.hiddenLayers": "非表示の階層"
+  "hikari::modal.hiddenLayers": "非表示の階層",
+  "hikari::theme.modeTabHint": "このタブは編集対象のパレットを選ぶだけです。アプリ全体の明/暗はテーマポップアップ上部のモードストリップで切り替えてください。"
 }

package/src/i18n/locales/ko/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "제거",
   "hikari::tagInput.addCustom": "\"{q}\" 사용",
   "hikari::tagInput.reorder": "순서 변경 — {label}",
-  "hikari::modal.hiddenLayers": "숨겨진 레이어"
+  "hikari::modal.hiddenLayers": "숨겨진 레이어",
+  "hikari::theme.modeTabHint": "이 탭은 편집할 팔레트를 고를 뿐입니다. 앱 전체 밝기/어둠은 테마 팝업 상단의 모드 스트립에서 바꾸세요."
 }

package/src/i18n/locales/pt/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Remover",
   "hikari::tagInput.addCustom": "Usar \"{q}\"",
   "hikari::tagInput.reorder": "Reordenar — {label}",
-  "hikari::modal.hiddenLayers": "Camadas ocultas"
+  "hikari::modal.hiddenLayers": "Camadas ocultas",
+  "hikari::theme.modeTabHint": "Estas abas escolhem a paleta que você está EDITANDO; para alternar o claro/escuro do app inteiro, use a faixa de modos no topo do painel de temas."
 }

package/src/i18n/locales/ru/components.json

@@ -217,5 +217,6 @@
   "hikari::tagInput.remove": "Удалить",
   "hikari::tagInput.addCustom": "Использовать «{q}»",
   "hikari::tagInput.reorder": "Изменить порядок — {label}",
-  "hikari::modal.hiddenLayers": "Скрытые слои"
+  "hikari::modal.hiddenLayers": "Скрытые слои",
+  "hikari::theme.modeTabHint": "Вкладки выбирают редактируемую палитру; общесистемное переключение светлой/тёмной — в полосе режимов вверху меню темы."
 }

package/src/i18n/locales/zh-Hans/components.json

@@ -221,5 +221,6 @@
   "hikari::tagInput.remove": "移除",
   "hikari::tagInput.addCustom": "使用「{q}」",
   "hikari::tagInput.reorder": "拖动排序 — {label}",
-  "hikari::modal.hiddenLayers": "隐藏层级"
+  "hikari::modal.hiddenLayers": "隐藏层级",
+  "hikari::theme.modeTabHint": "切换这里编辑的是对应模式的调色板；要切换应用整体深/浅，请用主题弹窗顶部的模式条。"
 }

package/src/i18n/locales/zh-Hant/components.json

@@ -221,5 +221,6 @@
   "hikari::tagInput.remove": "移除",
   "hikari::tagInput.addCustom": "使用「{q}」",
   "hikari::tagInput.reorder": "拖曳排序 — {label}",
-  "hikari::modal.hiddenLayers": "隱藏層級"
+  "hikari::modal.hiddenLayers": "隱藏層級",
+  "hikari::theme.modeTabHint": "切換這裡編輯的是對應模式的調色盤；要切換應用整體深/淺，請用主題彈窗頂部的模式條。"
 }