@rcarls/rc-navigation-bar 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +67 -0
- package/README.md +7 -7
- package/dist/custom-elements.json +1 -1
- package/dist/rc-navigation-bar-CeGCrt5g.js +58 -0
- package/dist/{rc-navigation-bar-CNk5Kuwk.js.map → rc-navigation-bar-CeGCrt5g.js.map} +1 -1
- package/dist/rc-navigation-bar-define.js +1 -1
- package/dist/rc-navigation-bar.js +1 -1
- package/dist/types/packages/rc-navigation-bar/src/index.d.ts +1 -1
- package/dist/types/packages/rc-navigation-bar/src/rc-navigation-bar.d.ts +1 -1
- package/package.json +2 -2
- package/dist/rc-navigation-bar-CNk5Kuwk.js +0 -156
- package/dist/types/packages/rc-navigation-bar/src/rc-navigation-bar.test.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,72 @@
|
|
|
1
1
|
# @rcarls/rc-navigation-bar
|
|
2
2
|
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 38cd00c: Convert viewport measurements to local CSS pixels when reordering items,
|
|
8
|
+
positioning navigation indicators, and clamping anchored popups under CSS zoom.
|
|
9
|
+
Reorder previews now account for the scroll container's zoom, while anchor
|
|
10
|
+
corrections settle without repeated overshoot.
|
|
11
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
12
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
13
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
14
|
+
styles are unchanged.
|
|
15
|
+
|
|
16
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
17
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
18
|
+
depend on `@rcarls/rc-common` for it.
|
|
19
|
+
|
|
20
|
+
- b9175e9: Position the navigation indicator in logical coordinates, so it lands on the
|
|
21
|
+
current link in RTL and in vertical writing modes instead of mirroring to
|
|
22
|
+
the opposite side or swapping its width and height.
|
|
23
|
+
|
|
24
|
+
Add `physicalOffset`, the inverse of `logicalRect`: it turns a logical
|
|
25
|
+
offset from the start corner into the physical `translate` an element
|
|
26
|
+
anchored at `inset-inline-start`/`inset-block-start` needs.
|
|
27
|
+
|
|
28
|
+
- Updated dependencies [e3dfa59]
|
|
29
|
+
- Updated dependencies [50d5610]
|
|
30
|
+
- Updated dependencies [9ee769c]
|
|
31
|
+
- Updated dependencies [1179f24]
|
|
32
|
+
- Updated dependencies [595fe37]
|
|
33
|
+
- Updated dependencies [38cd00c]
|
|
34
|
+
- Updated dependencies [5c006de]
|
|
35
|
+
- Updated dependencies [a6553ff]
|
|
36
|
+
- Updated dependencies [2205478]
|
|
37
|
+
- Updated dependencies [4341311]
|
|
38
|
+
- Updated dependencies [899bb5e]
|
|
39
|
+
- Updated dependencies [25fcfe0]
|
|
40
|
+
- Updated dependencies [51f6403]
|
|
41
|
+
- Updated dependencies [9caca6b]
|
|
42
|
+
- Updated dependencies [b764a3c]
|
|
43
|
+
- Updated dependencies [54d9ead]
|
|
44
|
+
- Updated dependencies [b9175e9]
|
|
45
|
+
- Updated dependencies [c8b762b]
|
|
46
|
+
- Updated dependencies [55e1e7f]
|
|
47
|
+
- Updated dependencies [f1ca82d]
|
|
48
|
+
- Updated dependencies [b87f27b]
|
|
49
|
+
- Updated dependencies [32ebead]
|
|
50
|
+
- Updated dependencies [bfefedd]
|
|
51
|
+
- Updated dependencies [c130173]
|
|
52
|
+
- Updated dependencies [11680b6]
|
|
53
|
+
- Updated dependencies [223d36c]
|
|
54
|
+
- Updated dependencies [7b91a44]
|
|
55
|
+
- Updated dependencies [aa04ead]
|
|
56
|
+
- Updated dependencies [ac65b5b]
|
|
57
|
+
- Updated dependencies [afcfef8]
|
|
58
|
+
- Updated dependencies [11ef1ad]
|
|
59
|
+
- @rcarls/rc-common@0.7.0
|
|
60
|
+
|
|
61
|
+
## 0.6.0
|
|
62
|
+
|
|
63
|
+
### Patch Changes
|
|
64
|
+
|
|
65
|
+
- Updated dependencies [6683eb9]
|
|
66
|
+
- Updated dependencies [ee7ba6c]
|
|
67
|
+
- Updated dependencies [30eb232]
|
|
68
|
+
- @rcarls/rc-common@0.6.0
|
|
69
|
+
|
|
3
70
|
## 0.5.0
|
|
4
71
|
|
|
5
72
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -51,12 +51,12 @@ layout stay coordinated.
|
|
|
51
51
|
|
|
52
52
|
## API
|
|
53
53
|
|
|
54
|
-
| Property
|
|
55
|
-
|
|
|
56
|
-
| `activeSelector`
|
|
54
|
+
| Property | Attribute | Type | Default | Description |
|
|
55
|
+
| ----------------- | ------------------ | -------- | ----------------------------------------------------------- | ------------------------------------------------------------ |
|
|
56
|
+
| `activeSelector` | `active-selector` | `string` | `a[aria-current]:not([aria-current="false"])` | Selector used to find the active link. |
|
|
57
57
|
| `indicatorTarget` | `indicator-target` | `string` | `[data-rc-navigation-indicator], [data-rc-navigation-icon]` | Selector inside the active link used for indicator geometry. |
|
|
58
58
|
|
|
59
|
-
| Part
|
|
60
|
-
|
|
|
61
|
-
| `nav`
|
|
62
|
-
| `indicator` | Active item indicator.
|
|
59
|
+
| Part | Description |
|
|
60
|
+
| ----------- | ---------------------------- |
|
|
61
|
+
| `nav` | Navigation layout container. |
|
|
62
|
+
| `indicator` | Active item indicator. |
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { css as v, LitElement as g, html as p } from "lit";
|
|
2
|
+
import { property as l, query as o } from "lit/decorators.js";
|
|
3
|
+
import { NavigationIndicatorController as b } from "@rcarls/rc-common";
|
|
4
|
+
const h = v`:host{color-scheme:inherit;color:var(--rc-navigation-bar-color,CanvasText);background:var(--rc-navigation-bar-bg,Canvas);display:block}:host([hidden]){display:none}[part=nav]{min-block-size:var(--rc-navigation-bar-block-size,4rem);padding-block:var(--rc-navigation-bar-padding-block,0);padding-inline:var(--rc-navigation-bar-padding-inline,0);justify-content:stretch;align-items:stretch;display:flex;position:relative;overflow:hidden}slot{justify-content:space-around;align-items:stretch;gap:var(--rc-navigation-bar-gap,0);flex:auto;display:flex}::slotted(a){z-index:1;justify-content:center;align-items:center;gap:var(--rc-navigation-bar-item-gap,.25rem);min-inline-size:0;min-block-size:var(--rc-navigation-bar-item-min-block-size,3rem);padding-block:var(--rc-navigation-bar-item-padding-block,.5rem);padding-inline:var(--rc-navigation-bar-item-padding-inline,.75rem);box-sizing:border-box;color:var(--rc-navigation-bar-item-color,inherit);font:inherit;text-align:center;text-decoration:var(--rc-navigation-bar-item-text-decoration,revert);outline-offset:var(--rc-navigation-bar-focus-ring-offset,2px);-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1 1 0;display:inline-flex;position:relative}::slotted(a:focus-visible){outline:var(--rc-navigation-bar-focus-ring,revert)}::slotted(a[aria-current]:not([aria-current=false])){color:var(--rc-navigation-bar-active-color,LinkText)}#indicator{z-index:0;box-sizing:border-box;border:var(--rc-navigation-bar-indicator-border,1px solid Highlight);border-radius:var(--rc-navigation-bar-indicator-radius,0);background:var(--rc-navigation-bar-indicator-bg,transparent);pointer-events:none;transition:transform var(--rc-navigation-bar-indicator-duration,0s) var(--rc-navigation-bar-indicator-easing,ease), inline-size var(--rc-navigation-bar-indicator-duration,0s) var(--rc-navigation-bar-indicator-easing,ease), block-size var(--rc-navigation-bar-indicator-duration,0s) var(--rc-navigation-bar-indicator-easing,ease), opacity var(--rc-navigation-bar-indicator-duration,0s) ease;position:absolute;inset-block-start:0;inset-inline-start:0}#indicator[hidden]{opacity:0;display:block}@media (forced-colors:active){#indicator{background:0 0;border:1px solid highlight}}@media (prefers-reduced-motion:reduce){#indicator{transition-duration:0s}}`;
|
|
5
|
+
var u = Object.defineProperty, r = (c, t, s, f) => {
|
|
6
|
+
for (var a = void 0, n = c.length - 1, d; n >= 0; n--)
|
|
7
|
+
(d = c[n]) && (a = d(t, s, a) || a);
|
|
8
|
+
return a && u(t, s, a), a;
|
|
9
|
+
};
|
|
10
|
+
const e = class e extends g {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.activeSelector = 'a[aria-current]:not([aria-current="false"])', this.indicatorTarget = "[data-rc-navigation-indicator], [data-rc-navigation-icon]", this._indicatorCtrl = new b(this, {
|
|
13
|
+
slot: () => this._$slot ?? null,
|
|
14
|
+
container: () => this._$nav ?? null,
|
|
15
|
+
indicator: () => this._$indicator ?? null,
|
|
16
|
+
activeSelector: () => this.activeSelector,
|
|
17
|
+
indicatorTargetSelector: () => this.indicatorTarget
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
firstUpdated() {
|
|
21
|
+
this._indicatorCtrl.sync();
|
|
22
|
+
}
|
|
23
|
+
updated(t) {
|
|
24
|
+
(t.has("activeSelector") || t.has("indicatorTarget")) && this._indicatorCtrl.sync();
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
return p`
|
|
28
|
+
<div part="nav">
|
|
29
|
+
<div id="indicator" part="indicator" hidden></div>
|
|
30
|
+
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
31
|
+
</div>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
_handleSlotChange() {
|
|
35
|
+
this._indicatorCtrl.sync();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
e.styles = [h];
|
|
39
|
+
let i = e;
|
|
40
|
+
r([
|
|
41
|
+
l({ type: String, attribute: "active-selector" })
|
|
42
|
+
], i.prototype, "activeSelector");
|
|
43
|
+
r([
|
|
44
|
+
l({ type: String, attribute: "indicator-target" })
|
|
45
|
+
], i.prototype, "indicatorTarget");
|
|
46
|
+
r([
|
|
47
|
+
o("slot")
|
|
48
|
+
], i.prototype, "_$slot");
|
|
49
|
+
r([
|
|
50
|
+
o('[part="nav"]')
|
|
51
|
+
], i.prototype, "_$nav");
|
|
52
|
+
r([
|
|
53
|
+
o("#indicator")
|
|
54
|
+
], i.prototype, "_$indicator");
|
|
55
|
+
export {
|
|
56
|
+
i as R
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=rc-navigation-bar-CeGCrt5g.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rc-navigation-bar-
|
|
1
|
+
{"version":3,"file":"rc-navigation-bar-CeGCrt5g.js","sources":["../src/rc-navigation-bar.styles.ts","../src/rc-navigation-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationBarStyles = css`\n :host {\n display: block;\n color-scheme: inherit;\n color: var(--rc-navigation-bar-color, CanvasText);\n background: var(--rc-navigation-bar-bg, Canvas);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n [part='nav'] {\n position: relative;\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n min-block-size: var(--rc-navigation-bar-block-size, 4rem);\n padding-block: var(--rc-navigation-bar-padding-block, 0);\n padding-inline: var(--rc-navigation-bar-padding-inline, 0);\n overflow: hidden;\n }\n\n slot {\n display: flex;\n flex: 1 1 auto;\n align-items: stretch;\n justify-content: space-around;\n gap: var(--rc-navigation-bar-gap, 0);\n }\n\n ::slotted(a) {\n position: relative;\n z-index: 1;\n display: inline-flex;\n flex: 1 1 0;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--rc-navigation-bar-item-gap, 0.25rem);\n min-inline-size: 0;\n min-block-size: var(--rc-navigation-bar-item-min-block-size, 3rem);\n padding-block: var(--rc-navigation-bar-item-padding-block, 0.5rem);\n padding-inline: var(--rc-navigation-bar-item-padding-inline, 0.75rem);\n box-sizing: border-box;\n color: var(--rc-navigation-bar-item-color, inherit);\n font: inherit;\n text-align: center;\n text-decoration: var(--rc-navigation-bar-item-text-decoration, revert);\n outline-offset: var(--rc-navigation-bar-focus-ring-offset, 2px);\n -webkit-tap-highlight-color: transparent;\n }\n\n ::slotted(a:focus-visible) {\n outline: var(--rc-navigation-bar-focus-ring, revert);\n }\n\n ::slotted(a[aria-current]:not([aria-current='false'])) {\n color: var(--rc-navigation-bar-active-color, LinkText);\n }\n\n #indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n z-index: 0;\n box-sizing: border-box;\n border: var(--rc-navigation-bar-indicator-border, 1px solid Highlight);\n border-radius: var(--rc-navigation-bar-indicator-radius, 0);\n background: var(--rc-navigation-bar-indicator-bg, transparent);\n pointer-events: none;\n transition:\n transform var(--rc-navigation-bar-indicator-duration, 0ms)\n var(--rc-navigation-bar-indicator-easing, ease),\n inline-size var(--rc-navigation-bar-indicator-duration, 0ms)\n var(--rc-navigation-bar-indicator-easing, ease),\n block-size var(--rc-navigation-bar-indicator-duration, 0ms)\n var(--rc-navigation-bar-indicator-easing, ease),\n opacity var(--rc-navigation-bar-indicator-duration, 0ms) ease;\n }\n\n #indicator[hidden] {\n display: block;\n opacity: 0;\n }\n\n @media (forced-colors: active) {\n #indicator {\n border: 1px solid Highlight;\n background: transparent;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #indicator {\n transition-duration: 0s;\n }\n }\n`;\n\nexport default navigationBarStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { NavigationIndicatorController } from '@rcarls/rc-common';\n\nimport navigationBarStyles from './rc-navigation-bar.styles.js';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-navigation-bar': RCNavigationBar;\n }\n}\n\n/**\n * Bottom navigation layout that styles consumer-authored links.\n *\n * `rc-navigation-bar` preserves native `<a>` elements in light DOM for router\n * interop and progressive enhancement. Mark the current link with\n * `aria-current=\"page\"` or provide `active-selector` for router active classes.\n * Wrap the component in a consumer-authored `<nav>` when it represents a\n * navigation landmark.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-navigation-bar rc-navigation-bar docs}\n * @see {@link https://m3.material.io/components/navigation-bar/overview Material 3 navigation bar}\n *\n * @slot default - Navigation links. Direct `<a>` children are recommended.\n *\n * @csspart nav - The navigation layout container.\n * @csspart indicator - The active item indicator.\n *\n * @cssprop [--rc-navigation-bar-bg=Canvas] - Navigation surface background.\n * @cssprop [--rc-navigation-bar-color=CanvasText] - Navigation text color.\n * @cssprop [--rc-navigation-bar-block-size=4rem] - Minimum block size for the bar.\n * @cssprop [--rc-navigation-bar-padding-block=0] - Bar block-axis padding.\n * @cssprop [--rc-navigation-bar-padding-inline=0] - Bar inline-axis padding.\n * @cssprop [--rc-navigation-bar-gap=0] - Gap between slotted items.\n * @cssprop [--rc-navigation-bar-item-gap=0.25rem] - Gap between item icon and label.\n * @cssprop [--rc-navigation-bar-item-min-block-size=3rem] - Minimum item block size.\n * @cssprop [--rc-navigation-bar-item-padding-block=0.5rem] - Item block-axis padding.\n * @cssprop [--rc-navigation-bar-item-padding-inline=0.75rem] - Item inline-axis padding.\n * @cssprop [--rc-navigation-bar-item-color=inherit] - Resting item text color.\n * @cssprop [--rc-navigation-bar-item-text-decoration] - Slotted link text decoration (defers to\n * native anchor text-decoration when unset).\n * @cssprop [--rc-navigation-bar-active-color] - Active item text color. Falls back to\n * `--rc-navigation-bar-item-color`, then `inherit`.\n * @cssprop [--rc-navigation-bar-indicator-bg=transparent] - Active indicator background.\n * @cssprop [--rc-navigation-bar-indicator-border=1px solid Highlight] - Active indicator border.\n * @cssprop [--rc-navigation-bar-indicator-radius=0] - Active indicator corner radius.\n * @cssprop [--rc-navigation-bar-indicator-duration=0ms] - Active indicator transition duration.\n * @cssprop [--rc-navigation-bar-indicator-easing=ease] - Active indicator transition easing.\n * @cssprop [--rc-navigation-bar-focus-ring] - Slotted link focus outline (defers to native\n * outline when unset).\n * @cssprop [--rc-navigation-bar-focus-ring-offset=2px] - Slotted link outline offset.\n *\n * @attr active-selector - Selector used to find the active link.\n * @attr indicator-target - Selector inside the active link used for indicator geometry.\n */\nexport class RCNavigationBar extends LitElement {\n static override styles = [navigationBarStyles];\n\n /** Selector used to find the active link. Defaults to `aria-current`. */\n @property({ type: String, attribute: 'active-selector' })\n activeSelector = 'a[aria-current]:not([aria-current=\"false\"])';\n\n /** Selector inside the active link used for indicator geometry. */\n @property({ type: String, attribute: 'indicator-target' })\n indicatorTarget = '[data-rc-navigation-indicator], [data-rc-navigation-icon]';\n\n @query('slot') private _$slot!: HTMLSlotElement;\n\n @query('[part=\"nav\"]') private _$nav!: HTMLElement;\n\n @query('#indicator') private _$indicator!: HTMLElement;\n\n private readonly _indicatorCtrl = new NavigationIndicatorController(this, {\n slot: () => this._$slot ?? null,\n container: () => this._$nav ?? null,\n indicator: () => this._$indicator ?? null,\n activeSelector: () => this.activeSelector,\n indicatorTargetSelector: () => this.indicatorTarget,\n });\n\n protected override firstUpdated(): void {\n this._indicatorCtrl.sync();\n }\n\n protected override updated(changed: PropertyValues<this>): void {\n if (changed.has('activeSelector') || changed.has('indicatorTarget')) {\n this._indicatorCtrl.sync();\n }\n }\n\n protected override render() {\n return html`\n <div part=\"nav\">\n <div id=\"indicator\" part=\"indicator\" hidden></div>\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n\n private _handleSlotChange(): void {\n this._indicatorCtrl.sync();\n }\n}\n\nexport default RCNavigationBar;\n"],"names":["navigationBarStyles","css","_RCNavigationBar","LitElement","NavigationIndicatorController","changed","html","RCNavigationBar","__decorateClass","property","query"],"mappings":";;;AAEO,MAAMA,IAAsBC;;;;;;ACwD5B,MAAMC,IAAN,MAAMA,UAAwBC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAKL,KAAA,iBAAiB,+CAIjB,KAAA,kBAAkB,6DAQlB,KAAiB,iBAAiB,IAAIC,EAA8B,MAAM;AAAA,MACxE,MAAM,MAAM,KAAK,UAAU;AAAA,MAC3B,WAAW,MAAM,KAAK,SAAS;AAAA,MAC/B,WAAW,MAAM,KAAK,eAAe;AAAA,MACrC,gBAAgB,MAAM,KAAK;AAAA,MAC3B,yBAAyB,MAAM,KAAK;AAAA,IAAA,CACrC;AAAA,EAAA;AAAA,EAEkB,eAAqB;AACtC,SAAK,eAAe,KAAA;AAAA,EACtB;AAAA,EAEmB,QAAQC,GAAqC;AAC9D,KAAIA,EAAQ,IAAI,gBAAgB,KAAKA,EAAQ,IAAI,iBAAiB,MAChE,KAAK,eAAe,KAAA;AAAA,EAExB;AAAA,EAEmB,SAAS;AAC1B,WAAOC;AAAA;AAAA;AAAA,4BAGiB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AAAA,EAEQ,oBAA0B;AAChC,SAAK,eAAe,KAAA;AAAA,EACtB;AACF;AA9CEJ,EAAgB,SAAS,CAACF,CAAmB;AADxC,IAAMO,IAANL;AAKLM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GAJ7CF,EAKX,WAAA,gBAAA;AAIAC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAR9CF,EASX,WAAA,iBAAA;AAEuBC,EAAA;AAAA,EAAtBE,EAAM,MAAM;AAAA,GAXFH,EAWY,WAAA,QAAA;AAEQC,EAAA;AAAA,EAA9BE,EAAM,cAAc;AAAA,GAbVH,EAaoB,WAAA,OAAA;AAEFC,EAAA;AAAA,EAA5BE,EAAM,YAAY;AAAA,GAfRH,EAekB,WAAA,aAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './rc-navigation-bar';
|
|
1
|
+
export * from './rc-navigation-bar.js';
|
|
@@ -60,7 +60,7 @@ export declare class RCNavigationBar extends LitElement {
|
|
|
60
60
|
private readonly _indicatorCtrl;
|
|
61
61
|
protected firstUpdated(): void;
|
|
62
62
|
protected updated(changed: PropertyValues<this>): void;
|
|
63
|
-
protected render(): import('lit').TemplateResult<1>;
|
|
63
|
+
protected render(): import('lit-html').TemplateResult<1>;
|
|
64
64
|
private _handleSlotChange;
|
|
65
65
|
}
|
|
66
66
|
export default RCNavigationBar;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.7.0",
|
|
7
7
|
"description": "Bottom navigation layout that styles consumer-authored links.",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@rcarls/rc-common": "0.
|
|
48
|
+
"@rcarls/rc-common": "0.7.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { css as v, LitElement as g, html as p } from "lit";
|
|
2
|
-
import { property as l, query as o } from "lit/decorators.js";
|
|
3
|
-
import { NavigationIndicatorController as b } from "@rcarls/rc-common";
|
|
4
|
-
const h = v`
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
color-scheme: inherit;
|
|
8
|
-
color: var(--rc-navigation-bar-color, CanvasText);
|
|
9
|
-
background: var(--rc-navigation-bar-bg, Canvas);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:host([hidden]) {
|
|
13
|
-
display: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
[part='nav'] {
|
|
17
|
-
position: relative;
|
|
18
|
-
display: flex;
|
|
19
|
-
align-items: stretch;
|
|
20
|
-
justify-content: stretch;
|
|
21
|
-
min-block-size: var(--rc-navigation-bar-block-size, 4rem);
|
|
22
|
-
padding-block: var(--rc-navigation-bar-padding-block, 0);
|
|
23
|
-
padding-inline: var(--rc-navigation-bar-padding-inline, 0);
|
|
24
|
-
overflow: hidden;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
slot {
|
|
28
|
-
display: flex;
|
|
29
|
-
flex: 1 1 auto;
|
|
30
|
-
align-items: stretch;
|
|
31
|
-
justify-content: space-around;
|
|
32
|
-
gap: var(--rc-navigation-bar-gap, 0);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
::slotted(a) {
|
|
36
|
-
position: relative;
|
|
37
|
-
z-index: 1;
|
|
38
|
-
display: inline-flex;
|
|
39
|
-
flex: 1 1 0;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
align-items: center;
|
|
42
|
-
justify-content: center;
|
|
43
|
-
gap: var(--rc-navigation-bar-item-gap, 0.25rem);
|
|
44
|
-
min-inline-size: 0;
|
|
45
|
-
min-block-size: var(--rc-navigation-bar-item-min-block-size, 3rem);
|
|
46
|
-
padding-block: var(--rc-navigation-bar-item-padding-block, 0.5rem);
|
|
47
|
-
padding-inline: var(--rc-navigation-bar-item-padding-inline, 0.75rem);
|
|
48
|
-
box-sizing: border-box;
|
|
49
|
-
color: var(--rc-navigation-bar-item-color, inherit);
|
|
50
|
-
font: inherit;
|
|
51
|
-
text-align: center;
|
|
52
|
-
text-decoration: var(--rc-navigation-bar-item-text-decoration, revert);
|
|
53
|
-
outline-offset: var(--rc-navigation-bar-focus-ring-offset, 2px);
|
|
54
|
-
-webkit-tap-highlight-color: transparent;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
::slotted(a:focus-visible) {
|
|
58
|
-
outline: var(--rc-navigation-bar-focus-ring, revert);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
::slotted(a[aria-current]:not([aria-current='false'])) {
|
|
62
|
-
color: var(--rc-navigation-bar-active-color, LinkText);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
#indicator {
|
|
66
|
-
position: absolute;
|
|
67
|
-
inset-block-start: 0;
|
|
68
|
-
inset-inline-start: 0;
|
|
69
|
-
z-index: 0;
|
|
70
|
-
box-sizing: border-box;
|
|
71
|
-
border: var(--rc-navigation-bar-indicator-border, 1px solid Highlight);
|
|
72
|
-
border-radius: var(--rc-navigation-bar-indicator-radius, 0);
|
|
73
|
-
background: var(--rc-navigation-bar-indicator-bg, transparent);
|
|
74
|
-
pointer-events: none;
|
|
75
|
-
transition:
|
|
76
|
-
transform var(--rc-navigation-bar-indicator-duration, 0ms)
|
|
77
|
-
var(--rc-navigation-bar-indicator-easing, ease),
|
|
78
|
-
inline-size var(--rc-navigation-bar-indicator-duration, 0ms)
|
|
79
|
-
var(--rc-navigation-bar-indicator-easing, ease),
|
|
80
|
-
block-size var(--rc-navigation-bar-indicator-duration, 0ms)
|
|
81
|
-
var(--rc-navigation-bar-indicator-easing, ease),
|
|
82
|
-
opacity var(--rc-navigation-bar-indicator-duration, 0ms) ease;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
#indicator[hidden] {
|
|
86
|
-
display: block;
|
|
87
|
-
opacity: 0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (forced-colors: active) {
|
|
91
|
-
#indicator {
|
|
92
|
-
border: 1px solid Highlight;
|
|
93
|
-
background: transparent;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
@media (prefers-reduced-motion: reduce) {
|
|
98
|
-
#indicator {
|
|
99
|
-
transition-duration: 0s;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
`;
|
|
103
|
-
var u = Object.defineProperty, r = (c, t, s, m) => {
|
|
104
|
-
for (var a = void 0, n = c.length - 1, d; n >= 0; n--)
|
|
105
|
-
(d = c[n]) && (a = d(t, s, a) || a);
|
|
106
|
-
return a && u(t, s, a), a;
|
|
107
|
-
};
|
|
108
|
-
const e = class e extends g {
|
|
109
|
-
constructor() {
|
|
110
|
-
super(...arguments), this.activeSelector = 'a[aria-current]:not([aria-current="false"])', this.indicatorTarget = "[data-rc-navigation-indicator], [data-rc-navigation-icon]", this._indicatorCtrl = new b(this, {
|
|
111
|
-
slot: () => this._$slot ?? null,
|
|
112
|
-
container: () => this._$nav ?? null,
|
|
113
|
-
indicator: () => this._$indicator ?? null,
|
|
114
|
-
activeSelector: () => this.activeSelector,
|
|
115
|
-
indicatorTargetSelector: () => this.indicatorTarget
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
firstUpdated() {
|
|
119
|
-
this._indicatorCtrl.sync();
|
|
120
|
-
}
|
|
121
|
-
updated(t) {
|
|
122
|
-
(t.has("activeSelector") || t.has("indicatorTarget")) && this._indicatorCtrl.sync();
|
|
123
|
-
}
|
|
124
|
-
render() {
|
|
125
|
-
return p`
|
|
126
|
-
<div part="nav">
|
|
127
|
-
<div id="indicator" part="indicator" hidden></div>
|
|
128
|
-
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
129
|
-
</div>
|
|
130
|
-
`;
|
|
131
|
-
}
|
|
132
|
-
_handleSlotChange() {
|
|
133
|
-
this._indicatorCtrl.sync();
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
e.styles = [h];
|
|
137
|
-
let i = e;
|
|
138
|
-
r([
|
|
139
|
-
l({ type: String, attribute: "active-selector" })
|
|
140
|
-
], i.prototype, "activeSelector");
|
|
141
|
-
r([
|
|
142
|
-
l({ type: String, attribute: "indicator-target" })
|
|
143
|
-
], i.prototype, "indicatorTarget");
|
|
144
|
-
r([
|
|
145
|
-
o("slot")
|
|
146
|
-
], i.prototype, "_$slot");
|
|
147
|
-
r([
|
|
148
|
-
o('[part="nav"]')
|
|
149
|
-
], i.prototype, "_$nav");
|
|
150
|
-
r([
|
|
151
|
-
o("#indicator")
|
|
152
|
-
], i.prototype, "_$indicator");
|
|
153
|
-
export {
|
|
154
|
-
i as R
|
|
155
|
-
};
|
|
156
|
-
//# sourceMappingURL=rc-navigation-bar-CNk5Kuwk.js.map
|
|
File without changes
|