@rcarls/rc-range-slider 0.6.0 → 0.7.0

package/dist/types/packages/rc-range-slider/src/rc-range-slider.d.ts

@@ -1,4 +1,5 @@
 import { LitElement, nothing } from 'lit';
+import { FlowController } from '@rcarls/rc-common';
 export interface RCRangeSliderValueEvent {
     /** Current [low, high] value tuple. */
     value: [number, number];
@@ -13,6 +14,19 @@ declare global {
     }
 }
 type DisplayValue = 'float' | 'inline-start' | 'inline-end' | null;
+/** Built-in text of `rc-range-slider`. */
+export interface RCRangeSliderMessages {
+    /** Default name of the low thumb, when neither its input nor `low-label` names it. */
+    low: string;
+    /** Default name of the high thumb, when neither its input nor `high-label` names it. */
+    high: string;
+}
+export declare const DEFAULT_RANGE_SLIDER_MESSAGES: Readonly<RCRangeSliderMessages>;
+declare module '@rcarls/rc-common' {
+    interface RcMessageCatalog {
+        'rc-range-slider': RCRangeSliderMessages;
+    }
+}
 /**
  * Two-thumb range slider backed by native range inputs for min/max values, following the
  * WAI-ARIA Multi-Thumb Slider pattern.
@@ -24,6 +38,10 @@ type DisplayValue = 'float' | 'inline-start' | 'inline-end' | null;
  *
  * Form participation is handled natively by each input's `name` attribute.
  *
+ * Built-in text (the default thumb names) follows the element's own `lang`, else
+ * `<html lang>`: per element through `messages`, or for every instance
+ * through `registerMessages()` from `@rcarls/rc-common` under `rc-range-slider`.
+ *
  * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-range-slider rc-range-slider docs}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/ WAI-ARIA Multi-Thumb Slider pattern}
  *
@@ -41,15 +59,18 @@ type DisplayValue = 'float' | 'inline-start' | 'inline-end' | null;
  * @attr disabled - Disables both thumbs and their hidden native input reflectors.
  * @attr readonly - Prevents edits while preserving normal focus and display.
  * @attr low-label - Accessible label for the low (min) thumb when the input does not provide one.
+ *   Defaults to the `low` message.
  * @attr high-label - Accessible label for the high (max) thumb when the input does not provide
- *   one.
+ *   one. Defaults to the `high` message.
  * @attr low-value-text - Formatted screen-reader text for the low value. Falls back to the raw
  *   number.
  * @attr high-value-text - Formatted screen-reader text for the high value. Falls back to the raw
  *   number.
  * @attr display - Controls the live value display: absent (none), `float`, `inline-start`, or
  *   `inline-end`.
- * @attr orientation - Orientation, forwarded to the custom thumbs: `horizontal` or `vertical`.
+ * @attr orientation - `horizontal` runs along the inline axis like a native range input: right to
+ *   left in RTL, and vertical in vertical text, where the thumbs report `aria-orientation` of
+ *   `vertical`. `vertical` runs along the block axis, so it renders horizontally in vertical text.
  *
  * @cssprop [--rc-range-slider-accent=Highlight] - Accent color for selected range, thumb border, focus, hover, and active states.
  * @cssprop [--rc-range-slider-gap=var(--rc-control-gap)] - Gap between track and inline value display.
@@ -110,10 +131,19 @@ export declare class RCRangeSlider extends LitElement {
     disabled: boolean;
     /** Prevents edits while preserving normal focus and display. */
     readonly: boolean;
-    /** Accessible label for the low (min) thumb when the input does not provide one. */
-    lowLabel: string;
-    /** Accessible label for the high (max) thumb when the input does not provide one. */
-    highLabel: string;
+    /** Built-in text overrides; unset keys fall back to registered text, then English. */
+    messages: Partial<RCRangeSliderMessages> | undefined;
+    private readonly _messages;
+    /**
+     * Accessible label for the low (min) thumb when the input does not provide one.
+     * Defaults to the `low` message.
+     */
+    lowLabel: string | undefined;
+    /**
+     * Accessible label for the high (max) thumb when the input does not provide one.
+     * Defaults to the `high` message.
+     */
+    highLabel: string | undefined;
     /** Formatted screen-reader text for the low value. Falls back to the raw number. */
     lowValueText: string;
     /** Formatted screen-reader text for the high value. Falls back to the raw number. */
@@ -129,6 +159,8 @@ export declare class RCRangeSlider extends LitElement {
     display: DisplayValue;
     /** Orientation; reflected as an attribute and forwarded to custom thumbs. */
     orientation: 'horizontal' | 'vertical';
+    /** Keeps the thumbs' aria-orientation on the orientation actually rendered. */
+    protected readonly _flow: FlowController;
     private _lowValue;
     private _highValue;
     private _$lowInput;
@@ -140,7 +172,7 @@ export declare class RCRangeSlider extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(): void;
-    render(): typeof nothing | import('lit').TemplateResult<1>;
+    render(): typeof nothing | import('lit-html').TemplateResult<1>;
     private _renderThumb;
     /**
      * Finds the first two child `<input type="range">` elements and wires them.
@@ -179,6 +211,18 @@ export declare class RCRangeSlider extends LitElement {
     private _thumbStyle;
     private _thumbCenterStyle;
     private _floatStyle;
+    /**
+     * How far along the layout axis a pointer is, 0 at its logical start.
+     * Horizontal layout uses the inline axis; vertical layout uses block.
+     */
+    private _axisFraction;
+    /**
+     * The arrow keys that raise and lower the value, matching a native range
+     * input. The keys along the rendered track move the thumb the way it moves
+     * on screen. The cross-axis keys keep the native range convention: Up or
+     * Right raises the value.
+     */
+    private _valueKeys;
     private _normalizeValue;
     private _min;
     private _max;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Two-thumb range slider backed by native range inputs for min/max values.",
   "repository": {
     "type": "git",
@@ -57,7 +57,7 @@
     "vitest-browser-lit": "^1.0.1"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.6.0"
+    "@rcarls/rc-common": "0.7.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0"