@rcarls/rc-splitter 0.6.0 → 0.7.0

package/dist/types/packages/rc-splitter/src/rc-splitter.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { DragGestureController, DragGestureDetail, KeyboardNavigationAction } from '@rcarls/rc-common';
+import { DragGestureController, FlowController, DragGestureDetail, KeyboardNavigationAction, LogicalAxis } from '@rcarls/rc-common';
 type SplitterOrientation = 'horizontal' | 'vertical';
 type SplitterMode = 'length' | 'percent' | 'fixed';
 declare global {
@@ -7,12 +7,29 @@ declare global {
         'rc-splitter': RCSplitter;
     }
 }
+/** Built-in text of `rc-splitter`. */
+export interface RCSplitterMessages {
+    /** Default name of the primary pane, when `label` is unset. */
+    label: string;
+    expand: (label: string) => string;
+    collapse: (label: string) => string;
+}
+export declare const DEFAULT_SPLITTER_MESSAGES: Readonly<RCSplitterMessages>;
+declare module '@rcarls/rc-common' {
+    interface RcMessageCatalog {
+        'rc-splitter': RCSplitterMessages;
+    }
+}
 /**
  * Resizable pane splitter with pointer, keyboard, anchored settling, and
  * collapse/restore controls, following the WAI-ARIA Window Splitter pattern.
  *
  * Set `orientation="vertical"` for a vertical splitter
  *
+ * Built-in text (the collapse button name and default pane name; the separator value text is formatted for the same locale) 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-splitter`.
+ *
  * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-splitter rc-splitter docs}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/ WAI-ARIA Window Splitter pattern}
  *
@@ -22,8 +39,11 @@ declare global {
  * @fires rc-splitter-change - Fired when the separator position changes; `detail: { value, valueText }`
  *
  * @attr label - Accessible label applied to the primary pane and referenced by the separator
- *   handle's `aria-labelledby`.
- * @attr orientation - Layout direction: `horizontal` (left/right panes) or `vertical` (top/bottom panes).
+ *   handle's `aria-labelledby`. Defaults to the `label` message.
+ * @attr orientation - Layout: `horizontal` places the panes side by side along the inline axis
+ *   (left/right in LTR, right/left in RTL), `vertical` stacks them along the block axis. Both turn
+ *   over in vertical writing modes; the separator's `aria-orientation`, arrow keys, and dragging
+ *   follow the layout actually rendered.
  * @attr mode - Value units and pane sizing behavior: `length`, `percent`, or `fixed`.
  * @attr step - Keyboard resize step size, in the current mode's units.
  * @attr min - Minimum primary pane size, in the current mode's units.
@@ -66,8 +86,11 @@ declare global {
  */
 export declare class RCSplitter extends LitElement {
     static styles: import('lit').CSSResult[];
-    /** Accessible label for this splitter. Default label is 'Splitter'. */
-    label: string;
+    /** Built-in text overrides; unset keys fall back to registered text, then English. */
+    messages: Partial<RCSplitterMessages> | undefined;
+    private readonly _messages;
+    /** Accessible label for this splitter. Defaults to the `label` message. */
+    label: string | undefined;
     /** Splitter orientation, for keyboard navigation and initial sizing. */
     orientation: SplitterOrientation;
     /**
@@ -102,7 +125,7 @@ export declare class RCSplitter extends LitElement {
     protected _toggleCollapse(): void;
     protected _onCollapseButtonClick(): void;
     protected _onCollapseKeydown(e: KeyboardEvent): void;
-    protected get _collapseButtonIcon(): import('lit').TemplateResult<1>;
+    protected get _collapseButtonIcon(): import('lit-html').TemplateResult<1>;
     protected _setValue(val: number, dispatch: boolean): void;
     protected _setUserValue(val: number): void;
     private _value;
@@ -117,8 +140,10 @@ export declare class RCSplitter extends LitElement {
     snapPoints: string;
     /** Minimum release velocity, in px/s, that qualifies as a swipe. */
     swipeVelocity: number;
-    /** A human-readable string representation of the value. */
+    /** The value as a CSS length, such as `40%` or `240px`. */
     get valueText(): string;
+    /** The value for `aria-valuetext`, with digits in the splitter's locale. */
+    protected get _accessibleValueText(): string;
     protected _minValue: number;
     protected _maxValue: number;
     /** Last valid value, for collapse functionality. */
@@ -134,6 +159,13 @@ export declare class RCSplitter extends LitElement {
     protected readonly _reducedMotion: MediaQueryList | null;
     protected readonly _gesture: DragGestureController;
     protected _resizeObserver: ResizeObserver;
+    /** Keeps the separator's aria-orientation and drag axis on the rendered layout. */
+    protected readonly _flow: FlowController;
+    /**
+     * The logical axis the panes sit along: `horizontal` places them side by
+     * side along the inline axis, `vertical` stacks them along the block axis.
+     */
+    protected get _paneAxis(): LogicalAxis;
     protected _onKeyboardResize(action: KeyboardNavigationAction): void;
     protected _onPointerResize(e: Pick<PointerEvent, 'clientX' | 'clientY'>): void;
     /**
@@ -155,12 +187,17 @@ export declare class RCSplitter extends LitElement {
     protected _snapDuration(): number;
     protected _onPrimaryChange(_e: Event): void;
     protected _onSecondaryChange(_e: Event): void;
+    /**
+     * The extent of `rect` along a logical axis. The pane axis is vertical on
+     * screen in vertical text, so a physical width would measure the wrong one.
+     */
+    protected _sizeAlong(rect: DOMRect, axis: LogicalAxis): number;
     protected _measureHostSize(axis: 'inline' | 'block'): number;
     protected _onResize(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
     protected updated(): void;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
 }
 export default RCSplitter;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Resizable pane splitter with pointer, keyboard, and collapse/restore controls.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-common": "0.6.0"
+    "@rcarls/rc-common": "0.7.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",