ngwr 11.2.0 → 12.0.0

package/glitch-text/styles/_index.scss

@@ -6,6 +6,11 @@
 // Glitch text (reactbits port). Two pseudo-element clones of the text
 // are offset by ±5px and tinted with `text-shadow` (red / cyan).
 // A clip-path keyframe slices random horizontal bands of each clone.
+//
+// The clones hang off `__clones`, never off the host. `content: attr(data-text)`
+// is exposed to the accessibility tree, so pseudos on the host made the string
+// announce three times; `__clones` carries `aria-hidden` and takes both of them
+// out of the tree at once.
 
 .wr-glitch-text {
   --wr-glitch-text-before-duration: 2s;
@@ -20,8 +25,18 @@
   font-weight: 900;
   color: var(--wr-color-on-surface, #0f172a);
 
-  &::before,
-  &::after {
+  // The decorative layer. Stretched over the label so the clones land exactly
+  // where they did when they hung off the host. No `pointer-events: none`: the
+  // clones overhang the host by 10px on each side, and the hover-only variant
+  // is gated on `:hover`, so a layer the pointer passes through would leave the
+  // effect flickering off along those two strips.
+  &__clones {
+    position: absolute;
+    inset: 0;
+  }
+
+  &__clones::before,
+  &__clones::after {
     content: attr(data-text);
     position: absolute;
     top: 0;
@@ -31,29 +46,29 @@
     clip-path: inset(0 0 0 0);
   }
 
-  // Always-on variant — pseudos animate continuously.
-  &:not(&--hover-only)::before {
+  // Always-on variant — clones animate continuously.
+  &:not(&--hover-only) &__clones::before {
     // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-before-shadow` (`5px 0`)
     left: -10px;
     text-shadow: var(--wr-glitch-text-before-shadow);
     animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
   }
-  &:not(&--hover-only)::after {
+  &:not(&--hover-only) &__clones::after {
     // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-after-shadow` (`-5px 0`)
     left: 10px;
     text-shadow: var(--wr-glitch-text-after-shadow);
     animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
   }
 
-  // Hover-only variant — pseudos hidden by default, animate on :hover.
-  &--hover-only::before,
-  &--hover-only::after {
+  // Hover-only variant — clones hidden by default, animate on :hover.
+  &--hover-only &__clones::before,
+  &--hover-only &__clones::after {
     content: '';
     opacity: 0;
     animation: none;
   }
 
-  &--hover-only:hover::before {
+  &--hover-only:hover &__clones::before {
     content: attr(data-text);
     opacity: 1;
     // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
@@ -61,7 +76,7 @@
     text-shadow: var(--wr-glitch-text-before-shadow);
     animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
   }
-  &--hover-only:hover::after {
+  &--hover-only:hover &__clones::after {
     content: attr(data-text);
     opacity: 1;
     // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
@@ -75,8 +90,8 @@
 // reads as broken double-vision text, so plain text is the right fallback.
 // `!important` outweighs the higher-specificity `:hover` re-enable rules.
 @media (prefers-reduced-motion: reduce) {
-  .wr-glitch-text::before,
-  .wr-glitch-text::after {
+  .wr-glitch-text__clones::before,
+  .wr-glitch-text__clones::after {
     content: '' !important;
     opacity: 0 !important;
     animation: none !important;

package/i18n/en.json

@@ -42,7 +42,9 @@
     "toggleRow": "Toggle child rows",
     "selectGroup": "Select group",
     "toggleGroup": "Toggle group",
-    "noMatches": "No matches"
+    "noMatches": "No matches",
+    "search": "Search",
+    "reset": "Reset"
   },
   "eventCalendar": {
     "today": "Today",
@@ -66,6 +68,9 @@
   "splitter": {
     "divider": "Resize panes"
   },
+  "stepper": {
+    "optional": "optional"
+  },
   "transfer": {
     "source": "Available",
     "target": "Selected",
@@ -76,6 +81,9 @@
     "toSource": "Move to available",
     "count": "{{checked}} / {{total}}"
   },
+  "form": {
+    "optional": "optional"
+  },
   "validation": {
     "required": "This field is required.",
     "requiredTrue": "This field must be checked.",
@@ -85,7 +93,7 @@
     "min": "Enter {{min}} or more.",
     "max": "Enter {{max}} or less.",
     "pattern": "This value is not in the expected format.",
-    "noWhitespace": "This field cannot be blank.",
+    "noWhitespace": "This value cannot contain spaces.",
     "hexColor": "Enter a hex colour, e.g. #1a2b3c.",
     "url": "Enter a valid URL.",
     "cardNumber": "Enter a valid card number.",
@@ -104,7 +112,8 @@
     "clearSelection": "Clear selection",
     "removeItem": "Remove {{label}}",
     "noResults": "No results",
-    "loading": "Loading…"
+    "loading": "Loading…",
+    "more": "+{{count}} more"
   },
   "tree": {
     "expand": "Expand",
@@ -149,6 +158,11 @@
     "increment": "Increment",
     "decrement": "Decrement"
   },
+  "inputOtp": {
+    "label": "Verification code",
+    "digit": "Digit {{index}}",
+    "character": "Character {{index}}"
+  },
   "anchor": {
     "label": "Table of contents"
   },
@@ -158,6 +172,9 @@
   "backTop": {
     "label": "Back to top"
   },
+  "breadcrumbs": {
+    "label": "Breadcrumbs"
+  },
   "burger": {
     "label": "Toggle menu"
   },
@@ -170,7 +187,21 @@
     "nextYears": "Next 12 years"
   },
   "imageCropper": {
-    "empty": "No image"
+    "empty": "No image",
+    "window": "Crop region",
+    "keyHelp": "Arrow keys move the crop. Hold Alt with an arrow key to resize it, and Shift for larger steps. The crop is announced as left, top, width and height in image pixels."
+  },
+  "sortableList": {
+    "keyHelp": "Press Space to pick this item up, then use the arrow keys to move it. Press Space again to drop it, or Escape to put it back.",
+    "grabbed": "Grabbed. {{index}} of {{total}}.",
+    "moved": "{{index}} of {{total}}.",
+    "dropped": "Dropped. {{index}} of {{total}}.",
+    "cancelled": "Move cancelled."
+  },
+  "colorPicker": {
+    "area": "Saturation and brightness, {{saturation}}% and {{brightness}}%",
+    "hue": "Hue",
+    "alpha": "Opacity"
   },
   "calendarHeatmap": {
     "label": "Calendar heatmap"
@@ -189,7 +220,9 @@
     "goToSlide": "Go to slide {{index}}",
     "prev": "Previous slide",
     "next": "Next slide",
-    "pagination": "Carousel pagination"
+    "pagination": "Carousel pagination",
+    "roledescription": "carousel",
+    "slideRoledescription": "slide"
   },
   "actionSheet": {
     "label": "Actions"
@@ -253,7 +286,19 @@
     "rangeStart": "Range start",
     "rangeEnd": "Range end",
     "startTime": "Start time",
-    "endTime": "End time"
+    "endTime": "End time",
+    "hours": "Hours",
+    "minutes": "Minutes",
+    "seconds": "Seconds",
+    "incrementHours": "Increment hours",
+    "decrementHours": "Decrement hours",
+    "incrementMinutes": "Increment minutes",
+    "decrementMinutes": "Decrement minutes",
+    "incrementSeconds": "Increment seconds",
+    "decrementSeconds": "Decrement seconds",
+    "toggleAmPm": "Toggle AM / PM",
+    "am": "AM",
+    "pm": "PM"
   },
   "sidebar": {
     "label": "Sidebar"
@@ -276,6 +321,11 @@
   "knob": {
     "label": "Value"
   },
+  "slider": {
+    "label": "Value",
+    "lower": "Lower value",
+    "upper": "Upper value"
+  },
   "speedDial": {
     "label": "Actions"
   },

package/i18n/ru.json

@@ -42,7 +42,9 @@
     "toggleRow": "Показать вложенные строки",
     "selectGroup": "Выбрать группу",
     "toggleGroup": "Свернуть группу",
-    "noMatches": "Ничего не найдено"
+    "noMatches": "Ничего не найдено",
+    "search": "Поиск",
+    "reset": "Сбросить"
   },
   "eventCalendar": {
     "today": "Сегодня",
@@ -66,6 +68,9 @@
   "splitter": {
     "divider": "Изменить размер областей"
   },
+  "stepper": {
+    "optional": "необязательно"
+  },
   "transfer": {
     "source": "Доступно",
     "target": "Выбрано",
@@ -76,6 +81,9 @@
     "toSource": "Вернуть в доступные",
     "count": "{{checked}} / {{total}}"
   },
+  "form": {
+    "optional": "необязательно"
+  },
   "validation": {
     "required": "Обязательное поле.",
     "requiredTrue": "Нужно поставить отметку.",
@@ -85,7 +93,7 @@
     "min": "Не меньше {{min}}.",
     "max": "Не больше {{max}}.",
     "pattern": "Значение не соответствует формату.",
-    "noWhitespace": "Поле не может состоять из пробелов.",
+    "noWhitespace": "Значение не может содержать пробелы.",
     "hexColor": "Введите цвет в формате #1a2b3c.",
     "url": "Введите корректный адрес.",
     "cardNumber": "Введите корректный номер карты.",
@@ -104,7 +112,8 @@
     "clearSelection": "Очистить выбор",
     "removeItem": "Удалить {{label}}",
     "noResults": "Ничего не найдено",
-    "loading": "Загрузка…"
+    "loading": "Загрузка…",
+    "more": "ещё {{count}}"
   },
   "tree": {
     "expand": "Развернуть",
@@ -149,6 +158,11 @@
     "increment": "Увеличить",
     "decrement": "Уменьшить"
   },
+  "inputOtp": {
+    "label": "Код подтверждения",
+    "digit": "Цифра {{index}}",
+    "character": "Символ {{index}}"
+  },
   "anchor": {
     "label": "Содержание"
   },
@@ -158,6 +172,9 @@
   "backTop": {
     "label": "Наверх"
   },
+  "breadcrumbs": {
+    "label": "Хлебные крошки"
+  },
   "burger": {
     "label": "Переключить меню"
   },
@@ -170,7 +187,21 @@
     "nextYears": "Следующие 12 лет"
   },
   "imageCropper": {
-    "empty": "Нет изображения"
+    "empty": "Нет изображения",
+    "window": "Область обрезки",
+    "keyHelp": "Стрелки перемещают область обрезки. Alt со стрелкой изменяет её размер, Shift увеличивает шаг. Область объявляется как отступ слева, отступ сверху, ширина и высота в пикселях изображения."
+  },
+  "sortableList": {
+    "keyHelp": "Нажмите пробел, чтобы взять элемент, затем перемещайте его стрелками. Пробел ещё раз — отпустить, Escape — вернуть на место.",
+    "grabbed": "Взят. {{index}} из {{total}}.",
+    "moved": "{{index}} из {{total}}.",
+    "dropped": "Отпущен. {{index}} из {{total}}.",
+    "cancelled": "Перемещение отменено."
+  },
+  "colorPicker": {
+    "area": "Насыщенность и яркость, {{saturation}}% и {{brightness}}%",
+    "hue": "Оттенок",
+    "alpha": "Непрозрачность"
   },
   "calendarHeatmap": {
     "label": "Календарная тепловая карта"
@@ -189,7 +220,9 @@
     "goToSlide": "Перейти к слайду {{index}}",
     "prev": "Предыдущий слайд",
     "next": "Следующий слайд",
-    "pagination": "Пагинация карусели"
+    "pagination": "Пагинация карусели",
+    "roledescription": "карусель",
+    "slideRoledescription": "слайд"
   },
   "actionSheet": {
     "label": "Действия"
@@ -253,7 +286,19 @@
     "rangeStart": "Начало периода",
     "rangeEnd": "Конец периода",
     "startTime": "Время начала",
-    "endTime": "Время окончания"
+    "endTime": "Время окончания",
+    "hours": "Часы",
+    "minutes": "Минуты",
+    "seconds": "Секунды",
+    "incrementHours": "Увеличить часы",
+    "decrementHours": "Уменьшить часы",
+    "incrementMinutes": "Увеличить минуты",
+    "decrementMinutes": "Уменьшить минуты",
+    "incrementSeconds": "Увеличить секунды",
+    "decrementSeconds": "Уменьшить секунды",
+    "toggleAmPm": "Переключить ДП / ПП",
+    "am": "ДП",
+    "pm": "ПП"
   },
   "sidebar": {
     "label": "Боковая панель"
@@ -276,6 +321,11 @@
   "knob": {
     "label": "Значение"
   },
+  "slider": {
+    "label": "Значение",
+    "lower": "Нижнее значение",
+    "upper": "Верхнее значение"
+  },
   "speedDial": {
     "label": "Действия"
   },

package/image-cropper/styles/_index.scss

@@ -36,6 +36,25 @@
     border: 1px solid var(--wr-color-surface);
     cursor: move;
     box-shadow: 0 0 0 1px rgba(var(--wr-color-primary-rgb), 0.6);
+
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+  }
+
+  // The help text and the live region. Both exist for a screen reader only: the
+  // crop rectangle and its handles are the sighted affordance for the same two
+  // things.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 
   &__handle {

package/input/styles/_index.scss

@@ -50,7 +50,7 @@
   &:disabled,
   &[readonly] {
     --wr-input-color: var(--wr-color-on-surface-muted);
-    --wr-input-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+    --wr-input-bg: var(--wr-color-fill);
   }
 
   &:disabled {
@@ -195,7 +195,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 }

package/input-number/styles/_index.scss

@@ -77,11 +77,11 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.4;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
   &--disabled {
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/input-otp/styles/_index.scss

@@ -13,6 +13,13 @@
   display: inline-flex;
   align-items: center;
   gap: var(--wr-input-otp-gap);
+  // A long code has to wrap, because the alternative is off the screen: the
+  // cells are a fixed `--wr-input-otp-size` and never shrink, so eight of them
+  // at the default size measure 8 × 40 + 7 × 8 = 376px and a 375px phone got a
+  // horizontal scrollbar on the whole page. Wrapping rather than shrinking on
+  // purpose — a cell narrower than 40px is already under the 44px touch target,
+  // and squeezing it to fit trades a visible defect for an unreachable one.
+  flex-wrap: wrap;
   font-family: var(--wr-font-family-base);
 
   &__cell {
@@ -44,7 +51,7 @@
     }
 
     &:disabled {
-      background: rgba(var(--wr-color-outline-rgb), 0.5);
+      background: var(--wr-color-fill-strong);
       color: var(--wr-color-on-surface-muted);
       cursor: not-allowed;
     }
@@ -66,6 +73,6 @@
   }
 
   &--disabled {
-    opacity: 0.7;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/knob/styles/_index.scss

@@ -60,6 +60,6 @@
 
   &--disabled &__surface {
     cursor: not-allowed;
-    opacity: 0.65;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/lightbox/styles/_index.scss

@@ -47,9 +47,12 @@
     background: transparent;
     cursor: zoom-in;
 
+    // Not cancelled — MOVED. The ring is drawn on the host by
+    // `&:has(&__trigger:focus-visible)` below (see the comment there); this
+    // only keeps the UA's own ring from leaking a few clipped corner pixels
+    // through in a second colour.
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
-      outline-offset: 2px;
+      outline: none;
     }
   }
 
@@ -71,6 +74,17 @@
   &--loading &__thumb {
     opacity: 0;
   }
+
+  // The trigger is `width: 100%; height: 100%`, so it is exactly coterminous
+  // with the host — and the host clips (`overflow: hidden` above, for the
+  // rounded corners), so a ring drawn on the button falls entirely outside the
+  // clip and nothing survives. Insetting the offset does not rescue it either:
+  // `&__thumb` is `position: relative; z-index: 2` and paints over the button's
+  // own outline. An element's outline is not clipped by its OWN `overflow`, so
+  // the ring goes on the host instead.
+  &:has(&__trigger:focus-visible) {
+    @include theme.focus-ring;
+  }
 }
 
 @keyframes wr-lightbox-shimmer {

package/line-chart/styles/_index.scss

@@ -74,26 +74,40 @@
   }
 
   &__x-labels {
-    display: flex;
-    gap: 0.25rem;
+    position: relative;
     margin-top: 0.25rem;
-    // These two mirror `padding.left` / `padding.right` in line-chart.ts, which are
-    // SVG viewBox coordinates (`[attr.x1]="padding.left"`). SVG geometry is absolute
-    // and does not flip with `direction`, so the label strip has to stay on the same
-    // physical axis as the axis it labels.
-    // rtl-ok: physical SVG gutter — must track the y-axis the TS draws at x=36
-    padding-left: 36px;
-    // rtl-ok: the other half of that same physical SVG gutter pair
-    padding-right: 16px;
+    font-size: var(--wr-text-xs);
+    // The labels are absolutely positioned onto their points, so the strip has no
+    // content of its own to give it a height. Without this it collapses and the
+    // labels overlap whatever the page puts under the chart.
+    height: 1.25em;
+    // A `translateX` percentage means the LABEL's own width, so the room left beside it
+    // has to arrive in another unit — `cqw` is this strip's. Every label is out of flow,
+    // so the strip contributes no intrinsic width either way and the containment this
+    // turns on costs the layout nothing.
+    container-type: inline-size;
   }
 
   &__x-label {
-    flex: 1 1 0;
-    text-align: center;
-    font-size: var(--wr-text-xs);
-    color: var(--wr-color-on-surface-muted);
+    position: absolute;
+    // rtl-ok: the SVG's own x, and SVG coordinates do not flip with `direction`
+    left: calc(var(--wr-line-chart-x, 50) * 1%);
+    // Centred on the point it names, but never past either end of the strip: the shift
+    // is the smaller of half the label and the room actually left on that side, so a
+    // label that fits sits exactly on its dot and only the outermost ones move inwards.
+    // Physical for the same reason `left` is. Together with the width bound below, a
+    // label stays inside its own slot: measured in Chromium at 600px, twelve month names
+    // went from four overlapping pairs and 13px hanging outside the chart to neither.
+    // jsdom has no layout, so no spec can hold that — the spec pins the two numbers the
+    // template hands this rule instead.
+    transform: translateX(
+      clamp(calc(var(--wr-line-chart-x, 50) * -1cqw), -50%, calc((100 - var(--wr-line-chart-x, 50)) * 1cqw - 100%))
+    );
+    max-width: calc(var(--wr-line-chart-x-max, 100) * 1%);
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: inherit;
+    color: var(--wr-color-on-surface-muted);
     white-space: nowrap;
   }
 }

package/list/styles/_index.scss

@@ -71,7 +71,7 @@
     }
 
     &--disabled {
-      opacity: 0.55;
+      opacity: var(--wr-disabled-opacity);
       pointer-events: none;
       cursor: not-allowed;
     }