@rcarls/rc-range-slider 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # @rcarls/rc-range-slider
 
+## 0.7.0
+
+### Minor Changes
+
+- 54d9ead: Localize every component's built-in text. Button names, role
+  descriptions, announcements, and default labels now resolve per key from
+  the element's `messages` property, then from text registered with
+  `registerMessages(locale, catalog)` in `@rcarls/rc-common`, then from the
+  English defaults. The locale is the element's own `lang`, else
+  `<html lang>`; an ancestor's `lang` is ignored, because it usually marks
+  content rather than the interface. Components re-render when that locale
+  changes or new text is registered. `RcMessageCatalog` types the catalog,
+  and each package adds its scope to it.
+
+  Numbers a component formats as text follow the same locale:
+  `rc-progress`'s default percentage and `rc-splitter`'s `aria-valuetext`
+  use `Intl.NumberFormat`. `TypeaheadController` matches prefixes with an
+  `Intl.Collator`, so case and accents are ignored the way the locale
+  ignores them, and takes a `locale` option. `ItemsCollectionController`'s
+  `setCreateOption(text, label?)` takes the option's visible text from its
+  caller.
+
+  `rc-transfer-list`'s direction arrows are now decorative: screen readers
+  read only the action name, and the arrows turn over in RTL.
+
+  **Breaking:** chrome-text properties are replaced by `messages`. Migrate:
+
+  - `rc-search-bar` `clear-label` / `clearLabel` → `messages.clear`
+  - `rc-adaptive-menu` `overflow-label` / `overflowLabel` → `messages.overflow`
+  - `rc-chip-group` `show-all-label` / `showAllLabel` and `show-less-label` /
+    `showLessLabel` → `messages.showAll` and `messages.showLess`
+  - `rc-select` and `rc-combobox` `dialog-confirm-label` /
+    `dialogConfirmLabel` and `dialog-cancel-label` / `dialogCancelLabel` →
+    `messages.done` and `messages.cancel`
+  - `rc-editor-toolbar` `label` → `messages.toolbar`
+
+  Per-instance names stay attributes, but now default to `undefined` and fall
+  back to a message: `label` on `rc-adaptive-menu`, `rc-chip-group`,
+  `rc-menubar`, and `rc-splitter`; `available-label` and `selected-label`
+  on `rc-transfer-list`; `low-label` and `high-label` on `rc-range-slider`.
+  Read the resolved name from the rendered `aria-label` instead of the
+  property.
+
+- c590dd9: Run a horizontal range slider along the inline axis, like the native range
+  input it enhances. In RTL the range grows from the right, pointer positions
+  are measured from the right edge, and ArrowLeft raises a thumb's value, as
+  the APG describes. In vertical text the slider runs from the inline start
+  (the top, or the bottom in RTL), its thumbs report
+  `aria-orientation="vertical"`, and the arrow keys move a thumb the way it
+  moves on screen, with Right always raising and Left lowering, as a native
+  range input does in Chromium. Thumbs are centered with logical margins, and
+  the floating value is centered correctly in every writing mode.
+
+  `orientation="vertical"` now follows the block axis instead of forcing a
+  physical bottom-to-top track. Its ARIA orientation, pointer mapping, arrow
+  keys, range fill, thumbs, and floating values all turn with the writing mode.
+
+### Patch Changes
+
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+
+- b764a3c: Observe interface locale changes through containing shadow roots and the host's own document.
+  An explicit empty `lang` now means an unknown locale rather than falling back to `<html lang>`.
+  Typeahead compares complete grapheme prefixes, including decomposed accents and collation
+  expansions. Default interpolating messages format numeric positions in the interface locale
+  while translation callbacks continue to receive numbers and can accept an optional locale.
+  Default messages isolate consumer text whose direction is unknown. Textarea content direction
+  uses the native LTR fallback for neutral `dir="auto"` content, recognizes Arabic Letter Mark and
+  isolate controls, and reruns plugins when the native textarea's `lang` or `dir` changes.
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
+
 ## 0.6.0
 
 ### Patch Changes

package/README.md

@@ -48,3 +48,11 @@ Consumers can decorate the track with a real named slot:
 Visual thumb styling belongs to CSS parts, not native input pseudo-elements,
 because the upgraded interaction surface is custom shadow DOM. The fallback
 inputs remain ordinary native range controls before the component upgrades.
+
+## Localization
+
+Built-in text follows the element's own `lang`, else `<html lang>`, and never an
+ancestor's `lang`, which usually marks content. Override it per element with the
+`messages` property, or for every instance with `registerMessages()` from
+`@rcarls/rc-common` under `rc-range-slider`. Keys: `low`, `high`. They name a thumb only when neither its input nor `low-label`/`high-label` does. See the
+[rc-common Localization section](https://github.com/richardcarls/rc-webcomponents/tree/develop/packages/rc-common#localization).

package/dist/custom-elements.json

@@ -44,9 +44,16 @@
       "kind": "javascript-module",
       "path": "src/rc-range-slider.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_RANGE_SLIDER_MESSAGES",
+          "type": {
+            "text": "Readonly<RCRangeSliderMessages>"
+          }
+        },
         {
           "kind": "class",
-          "description": "Two-thumb range slider backed by native range inputs for min/max values, following the\nWAI-ARIA Multi-Thumb Slider pattern.\n\nConsumers provide two direct child `<input type=\"range\">` elements. Before\nupgrade, those inputs are the usable progressive-enhancement fallback. After\nupgrade, the inputs remain in light DOM as hidden form reflectors while the\nshadow thumbs become the focusable, accessible interaction surface.\n\nForm participation is handled natively by each input's `name` attribute.",
+          "description": "Two-thumb range slider backed by native range inputs for min/max values, following the\nWAI-ARIA Multi-Thumb Slider pattern.\n\nConsumers provide two direct child `<input type=\"range\">` elements. Before\nupgrade, those inputs are the usable progressive-enhancement fallback. After\nupgrade, the inputs remain in light DOM as hidden form reflectors while the\nshadow thumbs become the focusable, accessible interaction surface.\n\nForm participation is handled natively by each input's `name` attribute.\n\nBuilt-in text (the default thumb names) follows the element's own `lang`, else\n`<html lang>`: per element through `messages`, or for every instance\nthrough `registerMessages()` from `@rcarls/rc-common` under `rc-range-slider`.",
           "name": "RCRangeSlider",
           "cssProperties": [
             {
@@ -298,24 +305,37 @@
               "attribute": "readonly",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "messages",
+              "type": {
+                "text": "Partial<RCRangeSliderMessages> | undefined"
+              },
+              "description": "Built-in text overrides; unset keys fall back to registered text, then English."
+            },
+            {
+              "kind": "field",
+              "name": "_messages",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MessagesController( this, 'rc-range-slider', DEFAULT_RANGE_SLIDER_MESSAGES, { overrides: () => this.messages, }, )"
+            },
             {
               "kind": "field",
               "name": "lowLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Minimum'",
-              "description": "Accessible label for the low (min) thumb when the input does not provide one.",
+              "description": "Accessible label for the low (min) thumb when the input does not provide one.\nDefaults to the `low` message.",
               "attribute": "low-label"
             },
             {
               "kind": "field",
               "name": "highLabel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Maximum'",
-              "description": "Accessible label for the high (max) thumb when the input does not provide one.",
+              "description": "Accessible label for the high (max) thumb when the input does not provide one.\nDefaults to the `high` message.",
               "attribute": "high-label"
             },
             {
@@ -360,6 +380,14 @@
               "attribute": "orientation",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_flow",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlowController(this)",
+              "description": "Keeps the thumbs' aria-orientation on the orientation actually rendered."
+            },
             {
               "kind": "field",
               "name": "_lowValue",
@@ -872,6 +900,42 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_axisFraction",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                },
+                {
+                  "name": "rect",
+                  "type": {
+                    "text": "DOMRect"
+                  }
+                }
+              ],
+              "description": "How far along the layout axis a pointer is, 0 at its logical start.\nHorizontal layout uses the inline axis; vertical layout uses block."
+            },
+            {
+              "kind": "method",
+              "name": "_valueKeys",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ increase: readonly string[]; decrease: readonly string[] }"
+                }
+              },
+              "description": "The arrow keys that raise and lower the value, matching a native range\ninput. The keys along the rendered track move the thumb the way it moves\non screen. The cross-axis keys keep the native range convention: Up or\nRight raises the value."
+            },
             {
               "kind": "method",
               "name": "_normalizeValue",
@@ -1054,21 +1118,19 @@
               "fieldName": "readonly"
             },
             {
-              "description": "Accessible label for the low (min) thumb when the input does not provide one.",
+              "description": "Accessible label for the low (min) thumb when the input does not provide one.\nDefaults to the `low` message.",
               "name": "low-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Minimum'",
               "fieldName": "lowLabel"
             },
             {
-              "description": "Accessible label for the high (max) thumb when the input does not provide one.",
+              "description": "Accessible label for the high (max) thumb when the input does not provide one.\nDefaults to the `high` message.",
               "name": "high-label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Maximum'",
               "fieldName": "highLabel"
             },
             {
@@ -1117,6 +1179,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_RANGE_SLIDER_MESSAGES",
+          "declaration": {
+            "name": "DEFAULT_RANGE_SLIDER_MESSAGES",
+            "module": "src/rc-range-slider.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "RCRangeSlider",