@brftech/filex-core 0.42.2 → 0.43.0

package/src/components/StorageTags.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * StorageTags — what kind of storage a row is, in the same words everywhere.
+ *
+ * ⚠⚠ ONE vocabulary (release-candidate sweep, 2026-09-21, QA #34): the admin
+ * panel had TWO lists of the same storages, and they described them in two
+ * dialects — Admin → Storages marked a read-only storage "RO" next to a raw
+ * driver id ("local"), Connections → Storages marked it "SALT OKUNUR" next to
+ * "LOCAL" (the same id, upper-cased by CSS), and the explorer's side bar says
+ * "Salt okunur". This component is the one place those words are chosen: the
+ * driver's NAME (the same `storages.driver.*` names the storage form offers),
+ * then "Read-only" and "Disabled" when they apply. Both lists draw it.
+ *
+ * A driver this build has no name for (an external plugin's) is shown as its
+ * id rather than hidden.
+ *
+ * ⚠ It is also THE read-only mark of the explorer: the side panel's storage
+ * row and the Home card draw it with no `driver` (only the fact that matters
+ * there). Wave 2 had grown two looks for one fact — the explorer's tinted pill
+ * ("Salt okunur" on the panel and on Home) and this bordered one in the admin
+ * lists — so the explorer now draws this component too.
+ */
+import { computed } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import { useLocale } from '../composables/useLocale';
+
+const props = withDefaults(
+  defineProps<{
+    /** The driver id; absent draws no driver tag (the explorer's read-only mark). */
+    driver?: string;
+    readOnly?: boolean;
+    /** `false` draws "Disabled"; `undefined` / `true` draws nothing. */
+    enabled?: boolean;
+    locale?: LocaleCode | string;
+  }>(),
+  // ⚠ An explicit `undefined` default. Vue casts an ABSENT boolean prop to
+  // `false`, so without it every caller that does not pass `enabled` (the
+  // explorer's marks, Admin → Replica) drew "Disabled" beside "Read-only".
+  { enabled: undefined },
+);
+
+const { t } = useLocale(() => props.locale ?? 'en');
+
+const driverName = computed(() => {
+  if (!props.driver) return '';
+  const key = `storages.driver.${props.driver}`;
+  const out = t(key);
+  return out === key ? props.driver : out;
+});
+</script>
+
+<template>
+  <span class="fe-stags" data-testid="storage-tags">
+    <span v-if="driver" class="fe-stag" :title="driver" data-testid="storage-tag-driver">{{ driverName }}</span>
+    <span v-if="readOnly" class="fe-stag fe-stag--warn" data-testid="storage-tag-readonly">{{
+      t('sidenav.storage.readOnly')
+    }}</span>
+    <span v-if="enabled === false" class="fe-stag" data-testid="storage-tag-disabled">{{
+      t('conn.list.disabled')
+    }}</span>
+  </span>
+</template>

package/src/components/TabBar.vue

@@ -162,7 +162,7 @@ function onAux(id: string, ev: MouseEvent) {
         @dragend="onDragEnd"
       >
         <span v-if="tab.split" class="fe-tabs__splitdot" aria-hidden="true"></span>
-        <span class="fe-tabs__label">{{ tab.label }}</span>
+        <span class="fe-tabs__label"><bdi>{{ tab.label }}</bdi></span>
         <!-- ⚠ Not drawn when this is the only tab. Owner's decision,
              2026-09-13, verbatim: *"tek kalan tab'de x gözükmemeli, onu da
              kaldırırsın."* It is not a style choice — `useTabs.closeTab()`

package/src/components/TagKindIcon.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * TagKindIcon — the one glyph that says which KIND a tag is.
+ *
+ * ⚠⚠ Why this exists (v0.43.0): tags used to be one kind, silently shared with
+ * every account on the server while the code called them per-user; a tester's
+ * "müşteri teklifi" showed up in other people's panels and they could remove
+ * it, and nothing on screen had ever said a tag was shared. With two kinds the
+ * screen has to say it EVERYWHERE a tag appears — the picker, the chips on a
+ * file, the navigation panel, the tag view's heading, the search filter — and
+ * one component is the only way those five cannot draw it five ways.
+ *
+ *   personal — one figure: yours, like a star.
+ *   team     — two figures: everyone in your team who can see the file.
+ *
+ * Decorative (`aria-hidden`): every caller also puts the kind into words
+ * (`tags.kind.*` in the title / accessible name), because an icon alone is
+ * not an explanation.
+ */
+import type { TagKind } from '../lib/tags';
+
+defineProps<{
+  kind: TagKind;
+  /** Edge length in px. */
+  size?: number;
+}>();
+</script>
+
+<template>
+  <svg
+    class="fe-tagkind"
+    :class="`fe-tagkind--${kind}`"
+    :width="size ?? 12"
+    :height="size ?? 12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+    :data-tag-kind="kind"
+  >
+    <template v-if="kind === 'team'">
+      <circle cx="9" cy="8" r="3.2" />
+      <path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
+      <circle cx="17" cy="9" r="2.6" />
+      <path d="M16.5 14.2c2.6.3 4.5 2.6 4.5 5.3" />
+    </template>
+    <template v-else>
+      <circle cx="12" cy="8" r="3.6" />
+      <path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7" />
+    </template>
+  </svg>
+</template>

package/src/components/TagPicker.vue

@@ -1,13 +1,36 @@
 <script setup lang="ts">
+import { requestFailure } from '../lib/errorWords';
 /**
  * TagPicker — small chip list with add/remove for a node.
  *
  * Reads `GET /api/files/manager/tags?node_id=…` on mount, writes the
- * full new array via `POST /api/files/manager/tags`.
+ * full new set via `POST /api/files/manager/tags`.
  *
  * Tag colors are deterministic: hash(name) → palette index. Consumers
  * can override with the `palette` prop.
  *
+ * === etiket:k2 — TWO KINDS, AND THE CHIP SAYS WHICH (v0.43.0) ===========
+ * ⚠⚠ Tester, 2026-09-22: a non-admin's tag "müşteri teklifi" appeared in
+ * another user's and the admin's panel and on the file, and the other user
+ * could remove it. Tags were one shared label per file while the code called
+ * them per-user, and this component never said a word about who could see
+ * one. The owner's decision: personal and team tags.
+ *
+ *   - Every chip carries its kind — `TagKindIcon` plus the words in its title
+ *     and accessible name — so nobody has to guess who sees it.
+ *   - Adding asks WHO SEES IT, with the answer written under each choice.
+ *     Personal is the default: a label nobody chose to share is not shared.
+ *   - "Team" is offered only where saving it would succeed: the server says
+ *     `can_edit_team` (edit permission on the file). For a viewer it stays on
+ *     screen, disabled, with the reason — a choice that vanishes cannot tell
+ *     the person it exists. A team chip's × is likewise absent for them.
+ *   - The name keeps its capitals ("Müşteri Teklifi"); the server decides
+ *     sameness (lib/tags `tagKey` mirrors it only to avoid a pointless POST).
+ *   - An OLDER server (no `items` in its answer) has one shared kind: the
+ *     chips read as team and the kind choice is not offered, because the old
+ *     server would ignore it and the person would believe a label was private
+ *     when it is not.
+ *
  * === etiket:t1 — THE CHIP IS A DOOR ==================================
  * ⚠⚠ Owner, 2026-09-13: "taglediğim dosya klasör tag'ine gitmiyor." The tag
  * VIEW existed and the panel listed every tag, but from a file there was no way
@@ -28,6 +51,9 @@
 import { ref, watch, onMounted, computed } from 'vue';
 import { useLocale } from '../composables/useLocale';
 import type { LocaleCode } from '../types/ExplorerConfig';
+import { announceTagsChanged, tagItemsOf, tagKey, type TagItem, type TagKind } from '../lib/tags';
+import TagKindIcon from './TagKindIcon.vue';
+import ChoiceButtons, { type ChoiceOption } from './ChoiceButtons.vue';
 
 const props = defineProps<{
   nodeId: number;
@@ -52,24 +78,50 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'change', tags: string[]): void;
+  /** The names (the pre-v0.43 payload, kept for embedders), then the items. */
+  (e: 'change', tags: string[], items: TagItem[]): void;
   (e: 'error', message: string): void;
-  /** etiket:t1 — "show me everything tagged this". The host owns navigation. */
-  (e: 'open', tag: string): void;
+  /** etiket:t1 — "show me everything tagged this". The host owns navigation.
+   *  `kind` (v0.43) says WHICH of two same-named tags was clicked. */
+  (e: 'open', tag: string, kind: TagKind): void;
 }>();
 
 const { t } = useLocale(() => props.locale ?? 'en');
 
-/** "Open tag: invoices" — the chip's title and its accessible name, one value
- *  so the two cannot say different things. */
-function openTitle(tag: string): string {
-  return t('tags.open', { tag });
+/** "Open tag: invoices · Personal tag …" — the chip's title and its accessible
+ *  name, one value so the two cannot say different things. The kind sentence
+ *  rides along, so a screen reader hears WHO sees the tag, not only its name. */
+function openTitle(item: TagItem): string {
+  return `${t('tags.open', { tag: item.name })} · ${t(`tags.chip.${item.kind}`, { tag: item.name })}`;
 }
 
-const tags = ref<string[]>([]);
+const items = ref<TagItem[]>([]);
+/** Whether TEAM tags may be added or removed here (server: `can_edit_team`). */
+const canEditTeam = ref(true);
+/** The server predates kinds: one shared kind, no choice to offer. */
+const legacy = ref(false);
 const loading = ref(false);
 const adding = ref(false);
 const newTag = ref('');
+const newKind = ref<TagKind>('personal');
+const addForm = ref<HTMLFormElement | null>(null);
+
+/** Personal chips first, then team — the grouping the navigation panel uses,
+ *  so the same file reads the same in every place. */
+const shown = computed(() => [
+  ...items.value.filter((i) => i.kind === 'personal'),
+  ...items.value.filter((i) => i.kind === 'team'),
+]);
+
+const kindOptions = computed<ChoiceOption[]>(() => [
+  { value: 'personal', label: t('tags.kind.personal'), help: t('tags.kind.personal_help') },
+  {
+    value: 'team',
+    label: t('tags.kind.team'),
+    help: canEditTeam.value ? t('tags.kind.team_help') : t('tags.kind.team_locked'),
+    disabled: !canEditTeam.value,
+  },
+]);
 
 const palette = computed(() => props.palette ?? [
   '#ef4444', '#f59e0b', '#10b981', '#3b82f6',
@@ -83,10 +135,22 @@ function colorFor(tag: string): string {
   return arr[Math.abs(h) % arr.length];
 }
 
+/** A team chip a viewer cannot take off draws no ×. */
+function canRemove(item: TagItem): boolean {
+  return item.kind === 'personal' || canEditTeam.value;
+}
+
 async function buildHeaders(extra: Record<string, string> = {}): Promise<Record<string, string>> {
   return { ...(await (props.authHeaders ?? (() => ({})))()), ...extra };
 }
 
+function absorb(body: unknown) {
+  const b = (body ?? {}) as { items?: unknown; can_edit_team?: unknown };
+  legacy.value = !Array.isArray(b.items);
+  items.value = tagItemsOf(body);
+  if (typeof b.can_edit_team === 'boolean') canEditTeam.value = b.can_edit_team;
+}
+
 async function load() {
   loading.value = true;
   try {
@@ -95,10 +159,7 @@ async function load() {
       headers: await buildHeaders(),
       credentials: props.authCredentials ?? 'same-origin',
     });
-    if (res.ok) {
-      const body = await res.json();
-      tags.value = Array.isArray(body.tags) ? body.tags : [];
-    }
+    if (res.ok) absorb(await res.json());
   } catch (err) {
     emit('error', err instanceof Error ? err.message : String(err));
   } finally {
@@ -106,39 +167,82 @@ async function load() {
   }
 }
 
-async function persist(next: string[]) {
-  const previous = [...tags.value];
-  tags.value = next;
+async function persist(next: TagItem[]) {
+  const previous = [...items.value];
+  items.value = next;
   try {
     const base = props.apiBase ?? '';
+    // ⚠ An older server gets the old shape: it would ignore `items` and read
+    // the missing `tags` as "clear every tag".
+    const body = legacy.value
+      ? { node_id: props.nodeId, tags: next.map((i) => i.name) }
+      : { node_id: props.nodeId, items: next };
     const res = await fetch(`${base}/api/files/manager/tags`, {
       method: 'POST',
       headers: await buildHeaders({ 'Content-Type': 'application/json' }),
       credentials: props.authCredentials ?? 'same-origin',
-      body: JSON.stringify({ node_id: props.nodeId, tags: next }),
+      body: JSON.stringify(body),
     });
-    if (!res.ok) throw new Error(`tag save failed: ${res.status}`);
-    emit('change', next);
+    if (!res.ok) throw requestFailure(res.status, await res.text().catch(() => ''), props.locale);
+    // The server's answer is the truth: it keeps the FIRST spelling of a name
+    // ("müşteri teklifi" typed on a second file lands as "Müşteri Teklifi").
+    const answer: unknown = await res.json().catch(() => null);
+    if (!legacy.value && answer && Array.isArray((answer as { items?: unknown }).items)) {
+      items.value = tagItemsOf(answer);
+    }
+    // ⚠ Announced, not only emitted: if the dialog was closed while the
+    // request was in flight this component is gone and Vue drops its emit —
+    // the panel would keep the list from before the save (lib/tags).
+    announceTagsChanged();
+    emit('change', items.value.map((i) => i.name), items.value);
   } catch (err) {
-    tags.value = previous;
+    items.value = previous;
     emit('error', err instanceof Error ? err.message : String(err));
   }
 }
 
+function closeAdd() {
+  newTag.value = '';
+  newKind.value = 'personal';
+  adding.value = false;
+}
+
 function add() {
   const v = newTag.value.trim();
-  if (!v || tags.value.includes(v)) {
-    newTag.value = '';
-    adding.value = false;
+  const kind: TagKind = legacy.value ? 'team' : newKind.value;
+  if (!v || items.value.some((i) => i.kind === kind && tagKey(i.name) === tagKey(v))) {
+    closeAdd();
     return;
   }
-  persist([...tags.value, v]);
-  newTag.value = '';
-  adding.value = false;
+  void persist([...items.value, { name: v, kind }]);
+  closeAdd();
+}
+
+/**
+ * What leaving the name field does.
+ *
+ * ⚠⚠ Before kinds, leaving the field SAVED what was typed. With a kind choice
+ * beside the field that is a trap: the pointer's way to "Team" is a blur of
+ * the field, so the tag would be saved as PERSONAL on the way to the button —
+ * and Safari does not focus a clicked button at all, so there is no
+ * `relatedTarget` to recognise the move by. So with kinds, only Enter or the
+ * Add button saves; the choice and the button swallow `mousedown` (below) so
+ * a pointer never takes focus off the field; and leaving an EMPTY field closes
+ * the form, which is the tidy-up the old blur gave. An older server has no
+ * choice to lose, so it keeps the old save-on-leave.
+ */
+function onFieldBlur(e: FocusEvent) {
+  if (legacy.value) {
+    add();
+    return;
+  }
+  const to = e.relatedTarget as Node | null;
+  if (to && addForm.value?.contains(to)) return;
+  if (!newTag.value.trim()) closeAdd();
 }
 
-function remove(tag: string) {
-  persist(tags.value.filter((t) => t !== tag));
+function remove(item: TagItem) {
+  void persist(items.value.filter((i) => i !== item));
 }
 
 onMounted(load);
@@ -148,31 +252,53 @@ watch(() => props.nodeId, load);
 <template>
   <div class="filex-tag-picker" :class="{ 'is-loading': loading }">
     <span
-      v-for="tag in tags"
-      :key="tag"
+      v-for="item in shown"
+      :key="`${item.kind}:${item.name}`"
       class="filex-tag"
-      :style="{ '--filex-tag-color': colorFor(tag) }"
+      :class="`filex-tag--${item.kind}`"
+      :data-tag-kind="item.kind"
+      :style="{ '--filex-tag-color': colorFor(item.name) }"
     >
+      <TagKindIcon :kind="item.kind" />
       <button
         class="filex-tag-open"
         type="button"
-        :title="openTitle(tag)"
-        :aria-label="openTitle(tag)"
-        :data-testid="`tag-open-${tag}`"
-        @click="emit('open', tag)"
-      >{{ tag }}</button>
-      <button class="filex-tag-x" type="button" @click="remove(tag)" :aria-label="t('tags.remove')">×</button>
+        :title="openTitle(item)"
+        :aria-label="openTitle(item)"
+        :data-testid="`tag-open-${item.name}`"
+        @click="emit('open', item.name, item.kind)"
+      >{{ item.name }}</button>
+      <button
+        v-if="canRemove(item)"
+        class="filex-tag-x"
+        type="button"
+        :aria-label="`${t('tags.remove')}: ${item.name}`"
+        @click="remove(item)"
+      >×</button>
     </span>
 
-    <form v-if="adding" class="filex-tag-add" @submit.prevent="add">
+    <form v-if="adding" ref="addForm" class="filex-tag-add" @submit.prevent="add">
       <input
         v-model="newTag"
         autofocus
+        maxlength="64"
         :placeholder="t('tags.name')"
         :aria-label="t('tags.name')"
-        @blur="add"
-        @keydown.escape="adding = false; newTag = ''"
+        @blur="onFieldBlur"
+        @keydown.escape="closeAdd"
       />
+      <!-- `mousedown.prevent`: a pointer on the choice or the button must not
+           take focus off the field (see onFieldBlur). -->
+      <div v-if="!legacy" class="filex-tag-kindwrap" @mousedown.prevent>
+        <ChoiceButtons
+          :model-value="newKind"
+          :options="kindOptions"
+          :aria-label="t('tags.kind.label')"
+          testid-prefix="tag-kind"
+          @update:model-value="(v: string | string[]) => (newKind = v === 'team' ? 'team' : 'personal')"
+        />
+      </div>
+      <button class="filex-tag-add-submit" type="submit" @mousedown.prevent>{{ t('tags.add_submit') }}</button>
     </form>
     <button v-else class="filex-tag-add-btn" type="button" @click="adding = true">
       {{ t('tags.add') }}
@@ -247,6 +373,12 @@ watch(() => props.nodeId, load);
   font-size: 12px;
   width: 110px;
 }
+.filex-tag-add > input {
+  width: auto;
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1;
+}
 .filex-tag-add-btn {
   border: 1px dashed var(--filex-border, #d1d5db);
   background: transparent;
@@ -265,4 +397,58 @@ watch(() => props.nodeId, load);
   border-color: var(--filex-accent, var(--fe-primary, #2f6ceb));
   color: var(--filex-accent, var(--fe-primary, #2f6ceb));
 }
+/* etiket:k2 — the kind rides inside the chip, before the name, in the chip's
+   own colour: the icon is the at-a-glance half, the title the spelled-out one.
+   A personal chip is OUTLINED and a team chip FILLED, so the two read apart
+   even for someone who cannot tell two 12px glyphs apart. */
+.filex-tag .fe-tagkind {
+  flex: none;
+  opacity: 0.9;
+}
+.filex-tag--personal {
+  background: transparent;
+  /* The page's own text colour, not the tag colour: an amber outline is
+     legible, amber letters on white are not. */
+  color: var(--fe-text, inherit);
+  box-shadow: inset 0 0 0 1.5px var(--filex-tag-color);
+}
+.filex-tag--personal .fe-tagkind {
+  color: var(--filex-tag-color);
+  opacity: 1;
+}
+.filex-tag--personal .filex-tag-x {
+  color: inherit;
+  opacity: 0.7;
+}
+/* The add form: the name and Add on one line, the kind choice under them at
+   full width with its two answers side by side, so "who sees this" reads as
+   one question with two answers rather than two stray boxes. */
+.filex-tag-add {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 6px;
+  flex-basis: 100%;
+}
+.filex-tag-add .filex-tag-add-submit {
+  grid-column: 2;
+  grid-row: 1;
+}
+.filex-tag-kindwrap {
+  grid-column: 1 / -1;
+  grid-row: 2;
+}
+.filex-tag-kindwrap .fe-choice {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.filex-tag-add-submit {
+  border: 1px solid var(--filex-border, #d1d5db);
+  background: transparent;
+  border-radius: 12px;
+  padding: 2px 12px;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+}
 </style>

package/src/components/ThemePalette.vue

@@ -25,7 +25,7 @@
  */
 import type { LocaleCode } from '../types/ExplorerConfig';
 import { useLocale } from '../composables/useLocale';
-import { THEMES, type ThemeDef } from '../lib/themes';
+import { allThemes, themeName, type ThemeDef } from '../lib/themes';
 
 const props = defineProps<{
   locale: LocaleCode;
@@ -52,7 +52,7 @@ function cardVars(th: ThemeDef): Record<string, string> {
   <p v-if="hint !== false" class="fe-themes__hint">{{ t('theme.hint') }}</p>
   <div class="fe-themes" role="listbox" :aria-label="t('theme.title')">
     <button
-      v-for="th in THEMES"
+      v-for="th in allThemes()"
       :key="th.id"
       type="button"
       class="fe-themecard"
@@ -83,7 +83,7 @@ function cardVars(th: ThemeDef): Record<string, string> {
         </span>
       </span>
       <span class="fe-themecard__name">
-        {{ t(th.nameKey) }}
+        {{ themeName(th, t) }}
         <span v-if="th.id === current" class="fe-themecard__check" :title="t('theme.selected')">✓</span>
       </span>
     </button>
@@ -121,7 +121,7 @@ function cardVars(th: ThemeDef): Record<string, string> {
   background: var(--fe-bg);
   cursor: pointer;
   overflow: hidden;
-  text-align: left;
+  text-align: start;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   font: inherit;
 }

package/src/components/TimeZonePicker.vue

@@ -141,14 +141,33 @@ const ALIASES: Record<string, string> = {
   'Asia/Kolkata': 'india calcutta ist',
 };
 
-/** Every way a person might type an offset the platform prints as "GMT+03:00". */
-function offsetAliases(offset: string): string {
-  const m = /GMT([+-])(\d{1,2})(?::?(\d{2}))?/.exec(offset);
-  if (!m) return 'gmt utc';
-  const [, sign, hRaw, minRaw] = m;
-  const h = String(Number(hRaw));
+/**
+ * A zone's offset from UTC in minutes, or null when the engine will not say.
+ *
+ * ⚠⚠ Read in ONE fixed shape — `en-US` — and parsed as a NUMBER. The offset
+ * the row DISPLAYS is in the interface language, and that is not "GMT…"
+ * everywhere: Arabic prints "غرينتش+3", other languages print their own word
+ * or their own digits. The search aliases used to be parsed out of that
+ * localised text with a `GMT` pattern, so under Arabic not one zone could be
+ * found by typing "+3" or "UTC+3" (translator finding, v0.43.0).
+ */
+function offsetMinutes(zone: string): number | null {
+  const m = /^GMT(?:([+-])(\d{1,2})(?::(\d{2}))?)?$/.exec(namePart(zone, 'en-US', 'shortOffset').trim());
+  if (!m) return null;
+  if (!m[1]) return 0;
+  const minutes = Number(m[2]) * 60 + Number(m[3] ?? 0);
+  return m[1] === '-' ? -minutes : minutes;
+}
+
+/** Every way a person might type an offset — "+3", "+03", "+03:00", "gmt+3", "utc+0300". */
+function offsetAliases(minutes: number | null): string {
+  if (minutes === null) return '';
+  if (minutes === 0) return 'gmt utc';
+  const sign = minutes < 0 ? '-' : '+';
+  const abs = Math.abs(minutes);
+  const h = String(Math.floor(abs / 60));
   const hh = h.padStart(2, '0');
-  const mm = minRaw ?? '00';
+  const mm = String(abs % 60).padStart(2, '0');
   const forms = [`${sign}${h}`, `${sign}${hh}`, `${sign}${hh}:${mm}`, `${sign}${hh}${mm}`];
   return [...forms.map((f) => `gmt${f}`), ...forms.map((f) => `utc${f}`), ...forms].join(' ');
 }
@@ -226,7 +245,7 @@ function buildIndex(): TzRow[] {
     const genericLocal = namePart(zone, loc, 'longGeneric');
     const genericEn = loc === 'en-US' ? '' : namePart(zone, 'en-US', 'longGeneric');
     const haystack = fold(
-      [zone, city, region, genericLocal, genericEn, ALIASES[zone] ?? '', offsetAliases(offset)]
+      [zone, city, region, genericLocal, genericEn, ALIASES[zone] ?? '', offset, offsetAliases(offsetMinutes(zone))]
         .filter(Boolean)
         .join(' '),
     );
@@ -605,8 +624,8 @@ function onKeydown(ev: KeyboardEvent): void {
 .fe-tzpick__list {
   position: absolute;
   top: calc(100% + 4px);
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: 5;
   box-sizing: border-box;
   margin: 0;