@rcarls/rc-navigation-rail 0.0.0-next-20260921045401

package/CHANGELOG.md

@@ -0,0 +1,87 @@
+# @rcarls/rc-navigation-rail
+
+## 0.0.0-next-20260921045401
+
+### Patch Changes
+
+- Updated dependencies [50d5610]
+- Updated dependencies [4341311]
+  - @rcarls/rc-common@0.0.0-next-20260921045401
+
+## 0.6.0
+
+### Patch Changes
+
+- Updated dependencies [6683eb9]
+- Updated dependencies [ee7ba6c]
+- Updated dependencies [30eb232]
+  - @rcarls/rc-common@0.6.0
+
+## 0.5.0
+
+### Patch Changes
+
+- Updated dependencies [4ae2ef0]
+- Updated dependencies [689340c]
+  - @rcarls/rc-common@0.5.0
+
+## 0.4.2
+
+### Patch Changes
+
+- @rcarls/rc-common@0.4.2
+
+## 0.4.1
+
+### Patch Changes
+
+- @rcarls/rc-common@0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- dce5749: Replace the navigation rail's shadow-DOM fallback toggle with a consumer-authored light-DOM
+  button, and align collapsed and expanded item layouts across the default and reference themes.
+- 4f77b8c: `rc-navigation-rail` no longer renders an internal `nav` landmark or exposes
+  the `label` property and attribute, matching the fix already applied to
+  `rc-navigation-bar`. Wrap it in a labeled native `<nav>` element instead.
+
+  BREAKING CHANGE: remove the `label` property/attribute and stop rendering an
+  internal `<nav aria-label>`; `rc-navigation-rail` now renders a plain `div`
+  for its `nav` part and expects the consumer to own landmark semantics.
+
+- ccca8e2: Add navigation bar and rail packages with shared active-indicator positioning.
+
+### Patch Changes
+
+- 3efe74a: Center navigation rail header content on the inline axis and remove Material
+  elevation from FABs placed in the header slot.
+- 6f91e7a: Fix collapsed `rc-navigation-rail` items so the whole item's box wraps icon and
+  label, not just the icon. The shared component pulled the label out of flow
+  (`position: absolute`), so a theme's whole-item background or focus ring only
+  covered the icon; Material's detached-pill layout now lives in its own theme
+  stylesheet instead of the shared base. Substrate's collapsed rail also grows
+  from `5rem` to `6rem` so single-word labels like "Settings" stop wrapping.
+- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
+  Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
+- e95e204: Document the `label`, `expanded`, `default-expanded`, `active-selector`, and
+  `indicator-target` attributes, document the previously-missing
+  `--rc-navigation-rail-indicator-border` and
+  `--rc-navigation-rail-item-text-decoration` custom properties, and correct
+  `--rc-navigation-rail-indicator-bg`, `--rc-navigation-rail-indicator-radius`,
+  `--rc-navigation-rail-indicator-duration`, `--rc-navigation-rail-focus-ring`,
+  and `--rc-navigation-rail-active-color`, which documented values from the
+  Material and Substrate theme recipes instead of the component's own base
+  defaults.
+- 8c567e0: Fix `expanded` so assigning `undefined` releases control back to
+  `default-expanded`, matching the library's controlled/uncontrolled convention
+  used by `rc-switch`'s `checked` and other value-like properties. It previously
+  ignored `undefined` writes entirely, permanently locking the rail once
+  `expanded` had been set once.
+- e88eff8: Use the system link accent as the theme-free active-link fallback for navigation
+  bar and rail destinations.
+- Updated dependencies [e57277f]
+- Updated dependencies [ccca8e2]
+- Updated dependencies [037b1b3]
+  - @rcarls/rc-common@0.4.0

package/README.md

@@ -0,0 +1,84 @@
+# `@rcarls/rc-navigation-rail`
+
+Navigation rail layout that styles consumer-authored links.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail](https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-rail).
+
+Use this for medium and expanded PWA layouts where native links should keep working before custom
+element upgrade and remain compatible with framework routers.
+
+## Installation
+
+```bash
+npm install @rcarls/rc-navigation-rail
+```
+
+## Import
+
+```js
+import '@rcarls/rc-navigation-rail/define';
+```
+
+## Basic usage
+
+```html
+<nav aria-label="Main navigation">
+  <rc-navigation-rail>
+    <button slot="toggle" type="button" aria-label="Toggle navigation">
+      <span data-rc-navigation-expand-icon aria-hidden="true">menu</span>
+      <span data-rc-navigation-collapse-icon aria-hidden="true">menu_open</span>
+    </button>
+    <a href="/recipes" aria-current="page">
+      <span data-rc-navigation-indicator>
+        <span data-rc-navigation-icon aria-hidden="true">R</span>
+        <span>Recipes</span>
+      </span>
+    </a>
+    <a href="/settings">
+      <span data-rc-navigation-indicator>
+        <span data-rc-navigation-icon aria-hidden="true">S</span>
+        <span>Settings</span>
+      </span>
+    </a>
+  </rc-navigation-rail>
+</nav>
+```
+
+The consumer-authored `<nav>` provides the navigation landmark and accessible
+label. `rc-navigation-rail` deliberately provides no landmark semantics.
+
+## Adaptive usage
+
+Render this component from app layout code for windows at least 600 CSS pixels wide. Keep it
+collapsed at medium widths, and only offer or persist `expanded` at widths of at least 840 CSS
+pixels. Use the same destination data and
+active-link rules as `rc-navigation-bar` so compact and rail layouts stay in
+sync.
+
+## Slots
+
+| Slot     | Description                                               |
+| -------- | --------------------------------------------------------- |
+| default  | Navigation links. Direct `<a>` children are recommended.  |
+| `header` | Content above the navigation links.                       |
+| `footer` | Content pinned after the navigation links.                |
+| `toggle` | Native `<button>` or `rc-button` expand/collapse control. |
+
+## API
+
+| Property          | Attribute          | Type      | Default                                                     | Description                                                  |
+| ----------------- | ------------------ | --------- | ----------------------------------------------------------- | ------------------------------------------------------------ |
+| `expanded`        | `expanded`         | `boolean` | `false`                                                     | Whether the rail is expanded. Host writes are silent.        |
+| `defaultExpanded` | `default-expanded` | `boolean` | `false`                                                     | Initial expanded state for uncontrolled usage.               |
+| `activeSelector`  | `active-selector`  | `string`  | `a[aria-current]:not([aria-current="false"])`               | Selector used to find the active link.                       |
+| `indicatorTarget` | `indicator-target` | `string`  | `[data-rc-navigation-indicator], [data-rc-navigation-icon]` | Selector inside the active link used for indicator geometry. |
+
+| Method             | Description             |
+| ------------------ | ----------------------- |
+| `expand()`         | Expands the rail.       |
+| `collapse()`       | Collapses the rail.     |
+| `toggleExpanded()` | Toggles expanded state. |
+
+| Event                       | Detail                  | Description                                                     |
+| --------------------------- | ----------------------- | --------------------------------------------------------------- |
+| `rc-navigation-rail-toggle` | `{ expanded: boolean }` | Fired when user interaction or a method toggles expanded state. |