@rcarls/rc-adaptive-menu 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,191 @@
 # @rcarls/rc-adaptive-menu
 
+## 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.
+
+- 687a9be: Add shared popup surface tokens: `--rc-popup-background`, `--rc-popup-color`,
+  `--rc-popup-border`, `--rc-popup-radius`, `--rc-popup-shadow`, and
+  `--rc-popup-padding-block`. Menus, adaptive-menu popups, and select and
+  combobox listboxes read them before their own fallbacks. Themes set them at the
+  theme root, so popups rendered inside other shadow roots keep the theme's
+  surface. Select and combobox add `--rc-*-listbox-background` and
+  `--rc-*-listbox-color`.
+
+  Breaking: popup surfaces no longer fall back to `--rc-control-radius`. Set
+  `--rc-popup-radius` (or the per-component radius token) to change popup
+  corners. The Material, Substrate, and Win31 themes no longer set per-component
+  popup surface tokens such as `--rc-menu-radius` or
+  `--rc-adaptive-menu-popup-background`; override the `--rc-popup-*` tokens
+  instead. Material select and combobox listboxes now use the menu container
+  color, Material forced-colors popups gain a border, and Substrate listboxes use
+  the menu shadow and padding. Material retains its two-layer adaptive-menu popup
+  shadow through a component token while other popups continue using the shared
+  shadow.
+
+- 6d126fd: Add shared item type tokens: `--rc-item-font-family`, `--rc-item-font-size`,
+  `--rc-item-font-weight`, `--rc-item-line-height`, `--rc-item-letter-spacing`,
+  and `--rc-item-icon-size`. Menu, listbox, and adaptive-menu items read them.
+  Adaptive menu adds `--rc-adaptive-menu-trigger-hover-background`,
+  `--rc-adaptive-menu-trigger-shadow`, and
+  `--rc-adaptive-menu-trigger-active-shadow`, and styles overflowed `rc-button`
+  and `rc-menu-button` rows from its item tokens. Themes declare their menu,
+  adaptive-menu, and item tokens on the theme root, so menus inside other shadow
+  roots match menus in the document. Substrate's adaptive-menu trigger now shows
+  its hover background.
+
+  Breaking: theme menu and adaptive-menu tokens are inherited from the theme root
+  instead of set on each element, so a value set on an ancestor now reaches
+  nested menus. Material sets menu, listbox, and adaptive-menu item type through
+  `--rc-item-*` instead of per-component rules; override those tokens to change
+  item type. Themes no longer style the adaptive-menu trigger through
+  `::part(overflow-trigger)` hover and pressed rules; use the new trigger tokens.
+
+### Patch Changes
+
+- 51aac05: `rc-adaptive-menu` no longer throws when actions are added while its first render is still
+  pending. The action observer tried to give the overflow trigger a tab stop before the shadow
+  tree existed; changes before the first render are now left to the initial sync.
+- 9ee769c: Anchor popups in logical terms only. A placement is now `block-start`,
+  `block-end`, `inline-start`, or `inline-end`, each with an optional
+  `-start`/`-end` edge alignment, and all of them follow the writing mode and
+  direction. Block sides open above or below a row in horizontal text and
+  beside it in vertical text; inline sides open along the reading direction,
+  so `inline-end` opens to the left in RTL. `resolveAnchorPlacement` exposes
+  the resolution for other consumers.
+
+  **Breaking:** the physical placements `top*`, `bottom*`, `left*`, and
+  `right*` are removed from `AnchorPlacement`, `rc-menu-button`'s and
+  `rc-fab-menu`'s `placement`, and the React and Solid typings. Migrate:
+
+  - `bottom*` → `block-end*`
+  - `top*` → `block-start*`
+  - `right*` → `inline-end*` (in LTR)
+  - `left*` → `inline-start*` (in LTR)
+
+  Defaults move with them and render the same in horizontal LTR text:
+  `rc-menu-button`, `rc-select`, and `rc-combobox` open at `block-end-start`,
+  `rc-adaptive-menu`'s overflow menu at `block-end-end`, and `rc-fab-menu` at
+  `block-start-end`. In vertical text these popups now open beside their
+  trigger instead of over the next item. Vertical menubars and vertical
+  adaptive menus open submenus at `inline-end-start`. Open popups also
+  re-resolve their physical side and alignment when an ancestor's `dir`
+  changes, and `rc-fab-menu` keeps its corner-aware default even when nested in
+  a vertical menubar.
+
+- 1179f24: Drop the `@oddbird/css-anchor-positioning` polyfill. Browsers without full
+  native anchor positioning now use `AnchorController`'s script positioning,
+  which applies the same placement and flip rules and re-positions when the page
+  scrolls or the viewport, anchor, or floating element resizes. Those browsers no
+  longer download the 41 kB polyfill the first time a popup opens.
+- 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.
+
+- a6553ff: Batch layout sampling into a shared animation-frame read phase so mounting a
+  large component route no longer alternates forced layout reads with component
+  writes. Closed anchored popups now skip placement work until they open, while
+  scroller boundaries, carousel positioning, flow state, and opted-in initial
+  scroll observation settle before the next paint.
+
+  Add `RafScheduler.schedulePhased()`, live `AnchorController.disabled` getters,
+  and the `ScrollObserverController.initialEvaluation` timing option.
+
+- f1ca82d: Add an anchored, non-modal popover package with a Material rich-tooltip recipe. Share native Popover API visibility and fallback behavior across existing popup components.
+- 11680b6: Expose and navigate the orientation a widget actually renders in. An
+  `orientation` attribute names a layout: `horizontal` runs along the inline
+  axis and `vertical` along the block axis, so both turn over in vertical
+  writing modes, the way a native `<input type="range">` does. Toolbar,
+  menubar, and adaptive menu now report the rendered orientation as
+  `aria-orientation`, and their arrow keys follow it, so a horizontal toolbar
+  in vertical text navigates with ArrowDown.
+
+  `keyNavigation` treats an explicit `navigationAxis` and role defaults as
+  layout orientations and converts them the same way; an explicit
+  `aria-orientation` attribute is still used as is. Add `renderedOrientation`
+  and a `FlowController` that keeps a host's writing mode and direction current
+  for rendering.
+
+  `rc-toolbar` now reflects `orientation` to its host attribute, and its
+  vertical layout is keyed off that attribute rather than `aria-orientation`.
+
+- 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
 
 ### Minor Changes

package/README.md

@@ -72,3 +72,11 @@ Use `default-open` for initial uncontrolled state, or write `open` and handle
 requested by user interaction; property writes and `openMenu()`, `closeMenu()`,
 and `toggleMenu()` calls are silent. The `$actions`, `$promotedActions`, and
 `$overflowedActions` getters expose the original nodes in current DOM order.
+
+## 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-adaptive-menu`. Keys: `label`, `overflow`. `label` only applies when the `label` attribute is unset. 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-adaptive-menu.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_ADAPTIVE_MENU_MESSAGES",
+          "type": {
+            "text": "Readonly<RCAdaptiveMenuMessages>"
+          }
+        },
         {
           "kind": "class",
-          "description": "Priority-aware action toolbar that preserves authored light-DOM controls while moving\nlower-priority actions into an overflow menu.\n\nActions remain the same connected nodes in the same parent. The component\nchanges only their slot assignment and component-owned ARIA/focus state, so\nframework listeners, native form behavior, dialog invokers, and references\ncontinue to work after an action moves.\n\nDirect native buttons and links are supported. `rc-button`, `rc-chip`, and\n`rc-menu-button` wrappers participate through their direct native trigger.\nDOM order is the default priority; a numeric `data-priority` promotes larger\nvalues first. Authoring `slot=\"overflow\"` keeps an action overflow-only. A\nnegative `data-priority` has the same effect: the action always overflows,\nregardless of `max-shown`. The overflow menu itself renders in authored DOM\norder (native slot distribution, not JS-ordered), so author negative-priority\nactions after normal-priority ones to have them appear last.\n\nThis is a purely declarative computation from authored state (`max-shown`,\n`data-priority`, and authored `slot`) re-evaluated whenever that authored\nstate changes. The component performs no runtime size measurement: it does\nnot observe its own or its children's rendered size, and `max-shown`\nactions are promoted regardless of whether they visually fit the available\nspace. A consumer that needs the promoted count to react to available\nspace — a responsive breakpoint, a container query, a window size class —\nowns that decision itself and writes the resulting `max-shown` value down.",
+          "description": "Priority-aware action toolbar that preserves authored light-DOM controls while moving\nlower-priority actions into an overflow menu.\n\nActions remain the same connected nodes in the same parent. The component\nchanges only their slot assignment and component-owned ARIA/focus state, so\nframework listeners, native form behavior, dialog invokers, and references\ncontinue to work after an action moves.\n\nDirect native buttons and links are supported. `rc-button`, `rc-chip`, and\n`rc-menu-button` wrappers participate through their direct native trigger.\nDOM order is the default priority; a numeric `data-priority` promotes larger\nvalues first. Authoring `slot=\"overflow\"` keeps an action overflow-only. A\nnegative `data-priority` has the same effect: the action always overflows,\nregardless of `max-shown`. The overflow menu itself renders in authored DOM\norder (native slot distribution, not JS-ordered), so author negative-priority\nactions after normal-priority ones to have them appear last.\n\nThis is a purely declarative computation from authored state (`max-shown`,\n`data-priority`, and authored `slot`) re-evaluated whenever that authored\nstate changes. The component performs no runtime size measurement: it does\nnot observe its own or its children's rendered size, and `max-shown`\nactions are promoted regardless of whether they visually fit the available\nspace. A consumer that needs the promoted count to react to available\nspace — a responsive breakpoint, a container query, a window size class —\nowns that decision itself and writes the resulting `max-shown` value down.\n\nBuilt-in text (the toolbar and overflow 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-adaptive-menu`.",
           "name": "RCAdaptiveMenu",
           "cssProperties": [
             {
@@ -108,6 +115,51 @@
               "name": "--rc-adaptive-menu-trigger-color",
               "default": "ButtonText"
             },
+            {
+              "description": "Overflow trigger background under the pointer.",
+              "name": "--rc-adaptive-menu-trigger-hover-background",
+              "default": "var(--rc-adaptive-menu-trigger-background)"
+            },
+            {
+              "description": "Overflow trigger box shadow.",
+              "name": "--rc-adaptive-menu-trigger-shadow",
+              "default": "none"
+            },
+            {
+              "description": "Overflow trigger box shadow while pressed.",
+              "name": "--rc-adaptive-menu-trigger-active-shadow",
+              "default": "var(--rc-adaptive-menu-trigger-shadow)"
+            },
+            {
+              "description": "Overflow action label font family; shared with menu and listbox items.",
+              "name": "--rc-item-font-family",
+              "default": "inherit"
+            },
+            {
+              "description": "Overflow action label font size; shared with menu and listbox items.",
+              "name": "--rc-item-font-size",
+              "default": "inherit"
+            },
+            {
+              "description": "Overflow action label font weight; shared with menu and listbox items.",
+              "name": "--rc-item-font-weight",
+              "default": "inherit"
+            },
+            {
+              "description": "Overflow action label line height; shared with menu and listbox items.",
+              "name": "--rc-item-line-height",
+              "default": "inherit"
+            },
+            {
+              "description": "Overflow action label letter spacing; shared with menu and listbox items.",
+              "name": "--rc-item-letter-spacing",
+              "default": "inherit"
+            },
+            {
+              "description": "Overflow action leading icon size; shared with menu items.",
+              "name": "--rc-item-icon-size",
+              "default": "inherit"
+            },
             {
               "description": "Default overflow icon size.",
               "name": "--rc-adaptive-menu-icon-size",
@@ -131,32 +183,32 @@
             {
               "description": "Overflow popup block padding.",
               "name": "--rc-adaptive-menu-popup-padding-block",
-              "default": "0.25em"
+              "default": "var(--rc-popup-padding-block)"
             },
             {
               "description": "Overflow popup border.",
               "name": "--rc-adaptive-menu-popup-border",
-              "default": "var(--rc-border)"
+              "default": "var(--rc-popup-border)"
             },
             {
               "description": "Overflow popup radius.",
               "name": "--rc-adaptive-menu-popup-radius",
-              "default": "var(--rc-control-radius)"
+              "default": "var(--rc-popup-radius)"
             },
             {
               "description": "Overflow popup background.",
               "name": "--rc-adaptive-menu-popup-background",
-              "default": "var(--rc-surface)"
+              "default": "var(--rc-popup-background)"
             },
             {
               "description": "Overflow popup shadow.",
               "name": "--rc-adaptive-menu-popup-shadow",
-              "default": "var(--rc-shadow)"
+              "default": "var(--rc-popup-shadow)"
             },
             {
               "description": "Overflow popup foreground.",
               "name": "--rc-adaptive-menu-popup-color",
-              "default": "var(--rc-field-text)"
+              "default": "var(--rc-popup-color)"
             },
             {
               "description": "Overflow action minimum block size.",
@@ -208,6 +260,21 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "messages",
+              "type": {
+                "text": "Partial<RCAdaptiveMenuMessages> | 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-adaptive-menu', DEFAULT_ADAPTIVE_MENU_MESSAGES, { overrides: () => this.messages, }, )"
+            },
             {
               "kind": "field",
               "name": "_styledRoots",
@@ -220,10 +287,9 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Actions'",
-              "description": "Accessible label for the toolbar.",
+              "description": "Accessible label for the toolbar. Defaults to the `label` message.",
               "attribute": "label"
             },
             {
@@ -302,13 +368,11 @@
             },
             {
               "kind": "field",
-              "name": "overflowLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'More actions'",
-              "description": "Accessible name for the overflow trigger and popup.",
-              "attribute": "overflow-label"
+              "name": "_flow",
+              "privacy": "protected",
+              "readonly": true,
+              "default": "new FlowController(this)",
+              "description": "Keeps the exposed aria-orientation on the orientation actually rendered."
             },
             {
               "kind": "field",
@@ -373,7 +437,14 @@
               "name": "_anchor",
               "privacy": "private",
               "readonly": true,
-              "default": "new AnchorController(this, { anchor: () => this._$trigger, floating: () => this._$popup, placement: 'bottom-end', offset: 4, shadowHost: () => this, })"
+              "default": "new AnchorController(this, { anchor: () => this._$trigger, floating: () => this._$popup, placement: 'block-end-end', offset: 4, shadowHost: () => this, disabled: () => !this.open || !this.hasAttribute('data-overflow'), })"
+            },
+            {
+              "kind": "field",
+              "name": "_popover",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new PopoverController(this, { element: () => this._$popup })"
             },
             {
               "kind": "field",
@@ -823,12 +894,11 @@
           ],
           "attributes": [
             {
-              "description": "Accessible label for the toolbar.",
+              "description": "Accessible label for the toolbar. Defaults to the `label` message.",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Actions'",
               "fieldName": "label"
             },
             {
@@ -864,15 +934,6 @@
               },
               "default": "'horizontal'",
               "fieldName": "orientation"
-            },
-            {
-              "description": "Accessible name for the overflow trigger and popup.",
-              "name": "overflow-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "'More actions'",
-              "fieldName": "overflowLabel"
             }
           ],
           "superclass": {
@@ -884,6 +945,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DEFAULT_ADAPTIVE_MENU_MESSAGES",
+          "declaration": {
+            "name": "DEFAULT_ADAPTIVE_MENU_MESSAGES",
+            "module": "src/rc-adaptive-menu.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "RCAdaptiveMenu",