0xD34F

кнопка.addEventListener('click', () => {
  const [ li ] = шаблон.content.cloneNode(true).children;
  li.querySelector('.card__image').src = инпут_с_ссылкой.value;
  li.querySelector('.card__title').textContent = инпут_с_подписью.value;
  список.insertAdjacentElement('afterbegin', li);

  // или

  список.prepend(document.importNode(шаблон.content, true));
  список.querySelector('img').setAttribute('src', инпут_с_ссылкой.value);
  список.querySelector('h2').innerText = инпут_с_подписью.value;
});

К чёрту focus, используйте focusin, оно всплывает, в отличие от.

Вариант раз. Нужно знать два индекса - элемента внешнего массива и элемента внутреннего, добавим в компонент соответствующее свойство:

data: () => ({
  active: [ 0, -1 ],
  ...

При переходе к следующему/предыдущему элементу изменяем внутренний индекс, если вышли за границу внутреннего массива, переходим к следующим/предыдущим элементам внешнего массива, пока не встретится такой, у которого внутри что-то есть; внутренний индекс при этом сбрасываем в крайнее положение - чтобы соответствовал первому или последнему элементу вложенного массива, в зависимости от направления движения:

methods: {
  onKeyDown(e) {
    const { items } = this;
    const step = ({
      ArrowUp: -1,
      ArrowDown: 1,
    })[e.key];

    if (step && items.some(n => n.children?.length)) {
      let iItem = this.active[0];
      let iChild = this.active[1] + step;

      while (!items[iItem].children?.[iChild]) {
        iItem = (iItem + step + items.length) % items.length;
        iChild = step === 1 ? 0 : ~-items[iItem].children?.length;
      }

      this.active = [ iItem, iChild ];
    }
  },
  ...

Осталось выделить как активный тот DOM-элемент, индексы которого совпадают с сохранёнными в экземпляре компонента, назначаем класс при равенстве обоих пар значений:

<ul>
  <li v-for="(item, iItem) in items">
    <ul>
      <li
        v-for="(child, iChild) in item.children"
        :class="{ active: active[0] === iItem && active[1] === iChild }"
        ...

Вариант два - развернём в общий плоский массив элементы вложенных массивов:

computed: {
  children() {
    return this.items.flatMap(n => n.children ?? []);
  },
  ...

Тогда можно будет обойтись одним индексом:

data: () => ({
  active: null,
  ...

Которому просто делаем +/- 1:

methods: {
  onKeyDown({ key }) {
    const { length } = this.children;
    const step = 
      key === 'ArrowUp'   ? -1 :
      key === 'ArrowDown' ?  1 :
                             0;

    if (step && length) {
      const active = this.active ?? (step === 1 ? -1 : length);
      this.active = Math.max(0, Math.min(length - 1, active + step));
    }
  },
  ...

Если элемент вложенного массива совпадает с тем, который можно достать из плоского массива, воспользовавшись индексом, добавим соответствующему DOM-элементу класс:

<ul>
  <li v-for="item in items">
    <ul>
      <li
        v-for="child in item.children"
        :class="{ active: children[active] === child }"
        ...

В верхнем компоненте хранится текущее состояние, которое вместе с методом его обновления через provide / inject предоставляется ниже расположенным компонентам. Например.

Добавляем в компонент свойство - индекс выбранного элемента выпадающего списка, по нажатию на стрелки делаем ему плюс-минус один. В зависимости от равенства значения этого свойства текущему индексу в v-for назначаем элементу списка класс, который его визуально выделит. Как-то так.

const filteredProducts = computed(() => {
  const search = searchQuery.value.toLowerCase();
  return search.length > 2
    ? data.value.filter(n => n.title.toLowerCase().includes(search))
    : null;
});

<ul v-if="filteredProducts" class="search-result">
  <li v-if="!filteredProducts.length">
    <h3>ничего не найдено</h3>
  </li>
  <li v-for="n in filteredProducts">
    <div>
      <Image :src="n.image" :alt="n.title" width="40" height="40" />
    </div>
    <h3>{{ n.title }}</h3>
    <div>
      <p>{{ n.price }}</p>
    </div>
  </li>
</ul>

Показываем не более одного - добавляем в компонент свойство, которое будет содержать id, индекс или ещё что-то уникальное для каждого из элементов данных (да хоть бы и ссылку на сам элемент). Показываем скрытое в зависимости от равенства значения этого свойства тому, что доступно в текущей итерации v-for.

Или, показываем несколько сразу - создаём отдельный компонент, в экземпляры которого будут передаваться элементы данных. Внутри компонента свойство, в зависимости от значения которого (истина-ложь) показываем или скрываем чего там надо.

Как получить строки таблицы:

// если гарантируется отсутствие thead и tfoot, или их содержимое также должно учитываться
const { rows } = table;

// если tbody один
const [ { rows } ] = table.tBodies;

// если tbody несколько
const rows = Array.prototype.flatMap.call(table.tBodies, n => [...n.rows]);
// или
const rows = [].concat(...Array.from(table.tBodies, n => [...n.children]));
// или
const rows = table.querySelectorAll('tbody tr');

Как получить средний элемент:

const middle = arr => arr[arr.length >> 1];
// или
const middle = arr => arr[Math.floor(arr.length / 2)];
// или
const middle = arr => arr[Math.round(~-arr.length / 2)];
// или
const middle = arr => arr[(arr.length - arr.length % 2) / 2];

Всё, можно доставать ячейку:

const cell = middle(middle(rows).cells);
// или
const cell = middle([].reduce.call(rows, (acc, n) => (acc.push(...n.children), acc), []));
// или, без получения строк
const cell = middle(table.querySelectorAll('tbody td'));

Строки сложить в массив. Завести два индекса - текущей строки и её последнего отображаемого символа. Если при увеличении количества отображаемых символов выходим за границу строки - переключаемся на следующую строку и сбрасываем счётчик символов.

Куда, что и с какой задержкой будем печатать:

const el = document.querySelector('p');
const strings = [ 'hello, world!!', 'fuck the world', 'fuck everything' ];
const delay = 100;

Печатаем:

function Typewriter(el, strings, delay) {
  let i = 0;
  let length = 0;

  return setInterval(() => {
    if (++length > strings[i].length) {
      i = -~i % strings.length;
      length = 0;
    }

    el.textContent = strings[i].slice(0, length);
  }, delay);
}


const intervalId = Typewriter(el, strings, delay);
// хотим остановить, делаем так: clearInterval(intervalId);

или

function Typewriter(el, strings, delay) {
  let timeoutId = null;

  (function step(i, length) {
    length = -~length % -~strings[i].length;
    i = (i + !length) % strings.length;
    el.innerText = strings[i].substring(0, length);
    timeoutId = setTimeout(step, delay, i, length);
  })(0, 0);

  return () => clearTimeout(timeoutId);
}


const stop = Typewriter(el, strings, delay);
// хотим остановить, делаем так: stop();

При повторном нажатии на кнопку максимальным числом выскакивает число удалённого li.

Как и должно быть. Кто вам обещал, что вызов метода remove приведёт к исчезновению элемента из lis? Искать максимальный элемент следует среди тех, что всё ещё присутствуют на странице, а не тех, что были изначально - то есть, или надо получать элементы непосредственно перед поиском, или коллекция элементов должна быть динамической.

Сам поиск максимального элемента - это какая-то шизофрения, какого чёрта вы удаляете элементы до того, как будут проверены значения всех (т.е., до того, как убедитесь, что тот, который собираетесь удалить, действительно максимальный - попробуйте сделать максимальный не первым, и посмотрите, что получится)? При переборе коллекции надо запоминать максимальный элемент, сравнивать с текущим, если текущий больше, обновлять максимум.

function max(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = null;

  for (const n of data) {
    const val = getVal(n);
    if (!result || result[1] < val) {
      result = [ n, val ];
    }
  }

  return result?.[0];
}


document.querySelector('button').addEventListener('click', function(e) {
  max(this, n => +n.textContent)?.remove();
  e.target.disabled = !this.length;
}.bind(document.querySelector('ul').children));

Получить массив текущих поведений, выкинуть лишнее, установить:

map.setBehaviors(map.behaviors.filter(n => n !== 'drag'));

- if (map && typeof map.setCenter === 'function' && typeof map.setZoom === 'function') {
-     map.setCenter(15)(marker.geometry.getCoordinates(), 15);
-     map.setZoom(15);
- }
+ map.setLocation({
+   center: markersCollection.find(n => n.id === officeId).coordinate,
+   zoom: 15,
+ });

использую библиотеку rc-slider, к сожалению она не предлагает возможности...

А если изучить документацию повнимательнее? Есть пример с выводом значения в тултипе при перетаскивании, сделать тултип постоянно видимым не проблема.

1 переносим на следующий разряд влево, а 5 пишем в текущий

Единица - окей, а пятёрка откуда взялась? F + B будет 1A. Ну, то есть 15 + 11 = 26. Т.е., 16 (единица, переносящаяся влево) и 10 (A).

function getCombinations($arr, $keys = [], $vals = []) {
  return ($n = $arr[count($keys)] ?? null)
    ? array_merge(...array_map(
        fn($k) => getCombinations(
          $arr,
          [ ...$keys, $k ],
          [ ...$vals, ...$n[$k] ]
        ),
        array_keys($n)
      ))
    : [ implode('_', $keys) => $vals ];
}