0xD34F

input:checked + label .products__size {
  /*
    здесь задаёте значения для color и text-shadow,
    в input:checked + label оставляете только border-color
  */
}

Меняют цвет все. Просто не видно - правую границу перекрывает следующий элемент.

Увеличивайте label'ам z-index при hover'е.

Наверное, элемент, к которому прицеплен обработчик события, полностью перекрывается вложенным элементом. А так как mouseleave не всплывает, обрабатывать нечего.

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

Строки же, сравниваются посимвольно. Вычитайте их, будут при этом автоматически преобразованы в числа:

return a.width - b.width

А лучше бы конечно ещё и разобраться с источником данных и получать числовые значения в виде чисел, а не строк.

Так может быть показан блок с дополнительным контентом только у одного элемента списка:

const List = ({ items }) => {
  const [ active, setActive ] = React.useState(null);

  function onClick(e) {
    const index = +e.target.dataset.index;
    setActive(active === index ? null : index);
  }

  return (
    <ul>
      {items.map((n, i) => (
        <li key={n.id}>
          <span data-index={i} onClick={onClick}>{n.id}</span>
          {active === i ? <div>{n.link}</div> : null}
        </li>
      ))}
    </ul>
  )
};

А так - у нескольких одновременно:

const List = ({ items }) => {
  const [ active, setActive ] = React.useState({});

  const onClick = ({ target: { dataset: { index } } }) =>
    setActive(active => ({ ...active, [index]: !active[index] }));

  return (
    <ul>
      {items.map((n, i) => (
        <li key={n.id}>
          <span data-index={i} onClick={onClick}>{n.id}</span>
          {active[i] ? <div>{n.link}</div> : null}
        </li>
      ))}
    </ul>
  )
};

Не надо сравнивать каждый с каждым, считайте количество повторений:

function duplicateEncode(str) {
  const arr = [...str.toLowerCase()];
  const count = arr.reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {});

  return arr.map(n => count[n] > 1 ? ')' : '(').join('');
}

Или не считайте:

function duplicateEncode(str) {
  const arr = str.toLowerCase().split('');
  const duplicates = arr.reduce((acc, n) => (acc[n] = acc.hasOwnProperty(n), acc), {});

  return ''.concat(...arr.map(n => '()'[+duplicates[n]]));
}

const duplicateEncode = str => Object
  .values(Object
    .values(str.toLowerCase())
    .reduce((acc, n, i) => ((acc[n] = acc[n] || []).push(i), acc), {}))
  .reduce((acc, n) => (n.forEach(i => acc[i] = n.length > 1 ? ')' : '('), acc), [])
  .join``;

const duplicateEncode = str => Array
  .from(str.toLowerCase())
  .reduce((acc, n, i, a) => acc + (a.indexOf(n) === a.lastIndexOf(n) ? '(' : ')'), '');

const duplicateEncode = str => str
  .toLowerCase()
  .replace(/./g, (m, _, s) => String.fromCharCode(40 + (s.split(m).length > 2)));

const countUniqueChars = str =>
  new Set(str).size;

или

const countUniqueChars = str => [...str]
  .reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])
  .length;

или

const countUniqueChars = str => Array
  .from(str)
  .reduce((acc, n, i, a) => acc + (i === a.indexOf(n)), 0);

или

const countUniqueChars = str => Object
  .keys(Object.fromEntries([].map.call(str, n => [ n, 1 ])))
  .length;

или

const countUniqueChars = str => str
  .split('')
  .sort()
  .filter((n, i, a) => n !== a[i - 1])
  .length;

или

const countUniqueChars = str =>
  (str && str.match(/(.)(?!.*\1)/g)).length;

https://codesandbox.io/s/vuelidate-simple-error-di...

округление до целого в меньшую сторону

Что-то вы явно не то делаете, передавать данные следует через value. Несколько значений хотите передать - соберите их в один объект, выдумывать какие-то свои пропы не надо.

Так что в index.js меняете value={bookStoreService} data={data} на value={{ bookStoreService, data }}, а в with-bookstore-service.js меняете (bookStoreService, data) на ({ bookStoreService, data }).

<div class="xxx">hello, world!!</div>
<div class="xxx">fuck the world</div>
<div class="xxx">fuck everything</div>

.xxx {
  padding: 10px;
  margin: 10px;
  border: 1px solid silver;
}

let el = null;

document.addEventListener('mousedown', e => el = e.target.closest('.xxx'));
document.addEventListener('mouseup', e => el = null);

document.addEventListener('mousemove', e => {
  if (el) {
    const height = parseInt(getComputedStyle(el).height);
    el.style.height = `${height + e.movementY}px`;
  }
});

https://jsfiddle.net/eu6s3b42/

case CHANGE_ITEM_COUNT:
  return state.map(n => n.id === action.payload.id
    ? {
        ...n,
        count: Math.max(1, n.count + (({
          increment:  1,
          decrement: -1,
        })[action.payload.action]) || 0),
      }
    : n
  );

Потому что объект с настройками

must be defined before the lazysizes script

date_create($date1)->diff(date_create($date2))->format('%a')

В профиле пользователя есть раздел "подписки". Вот ваши, например.

const { id } = Object.values(CategoryProduct).flat().find(n => n.name === name) || {};

str.replace(/(p17)\/\w+/, '$1').replace('/index.m3u8', '.mp3')

О каких ссылках идёт речь: const selector = 'li.my_class a[href="#"]';.

Обработчик клика можно назначать каждой ссылке индивидуально:

document.querySelectorAll(selector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.preventDefault());

Или один раз для всех:

document.addEventListener('click', e => {
  const link = e.target.closest(selector);
  if (link) {
    e.preventDefault();
  }
});

Не могу понять, что в моём коде не так.

Да в общем-то, всё не так:

1. function getIndexOfWarmestDay(data){

   
   Козлиное имя функции - не соответствует тому, что она должна делать.
   
   

2. let max = 0;

   
   Каким будет результат, если все элементы массива отрицательные? Начальное максимальное значение должно быть максимально минимальным - минус бесконечность.
   
   

3. resultArr += max;

   
   Это как вообще родилось? Надо было погуглить, как выполняется добавление значения в массив, вместо того, чтобы высасывать из пальца подобную чушь.
   
   

4. max = 0;

   
   Вместо того, чтобы сбрасывать максимальное значение, надо разместить объявление переменной внутри внешнего цикла, перед внутренним.
   
   

5. console.log(resultArr);

   
   Функция должна заниматься чем-то одним. Не надо смешивать вычисления и вывод результатов. Вместо console.log тут надо делать return.
   
   
6. Слишком многословно, зачем-то написано десять строк вместо одной: data.map(n => Math.max(...n)).
   

return createElement('div', {
  domProps: {
    innerHTML: '<b>hello, world!!</b>',
  },
});