@lit-material/navigation 0.1.1 → 0.1.3
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/custom-elements.json +6 -6
- package/dist/adaptive-navigation.d.ts.map +1 -1
- package/dist/adaptive-navigation.js +4 -0
- package/dist/adaptive-navigation.js.map +1 -1
- package/dist/navigation-bar-item-styles.d.ts.map +1 -1
- package/dist/navigation-bar-item-styles.js +7 -1
- package/dist/navigation-bar-item-styles.js.map +1 -1
- package/dist/navigation-bar-styles.d.ts.map +1 -1
- package/dist/navigation-bar-styles.js +4 -0
- package/dist/navigation-bar-styles.js.map +1 -1
- package/dist/navigation-drawer-item-styles.d.ts.map +1 -1
- package/dist/navigation-drawer-item-styles.js +4 -0
- package/dist/navigation-drawer-item-styles.js.map +1 -1
- package/dist/navigation-drawer-styles.d.ts.map +1 -1
- package/dist/navigation-drawer-styles.js +4 -0
- package/dist/navigation-drawer-styles.js.map +1 -1
- package/dist/navigation-rail-item-styles.d.ts.map +1 -1
- package/dist/navigation-rail-item-styles.js +4 -0
- package/dist/navigation-rail-item-styles.js.map +1 -1
- package/dist/navigation-rail-styles.d.ts.map +1 -1
- package/dist/navigation-rail-styles.js +4 -0
- package/dist/navigation-rail-styles.js.map +1 -1
- package/package.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
{
|
|
254
254
|
"kind": "variable",
|
|
255
255
|
"name": "styles",
|
|
256
|
-
"default": "css` :host { display: block; flex: 1; height: 100%; outline: none; -webkit-tap-highlight-color: transparent; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding-block: 12px 16px; border: none; margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-decoration: none; font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-medium-size, 0.75rem); font-weight: var(--md-sys-typescale-label-medium-weight, 500); -webkit-appearance: none; appearance: none; } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { color: var(--md-sys-color-on-surface, #1c1b1f); } .icon-container { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 32px; border-radius: var(--md-sys-shape-corner-full, 16px); transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } :host([selected]) .icon-container { background-color: var(--md-sys-color-secondary-container, #e8def8); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } slot.badge::slotted(*) { position: absolute; top: -4px; inset-inline-end: 8px; } .label { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .icon-container, .state-layer { transition: none; } } `"
|
|
256
|
+
"default": "css` :host { display: block; flex: 1; /* Shrink below the pill's 64px so more than five destinations fit a phone. */ min-width: 0; height: 100%; outline: none; -webkit-tap-highlight-color: transparent; } :host([hidden]) { display: none; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding-block: 12px 16px; border: none; margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-decoration: none; font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-medium-size, 0.75rem); font-weight: var(--md-sys-typescale-label-medium-weight, 500); -webkit-appearance: none; appearance: none; } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { color: var(--md-sys-color-on-surface, #1c1b1f); } .icon-container { position: relative; display: flex; align-items: center; justify-content: center; width: min(64px, 100%); height: 32px; border-radius: var(--md-sys-shape-corner-full, 16px); transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } :host([selected]) .icon-container { background-color: var(--md-sys-color-secondary-container, #e8def8); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } slot.badge::slotted(*) { position: absolute; top: -4px; inset-inline-end: 8px; } .label { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .icon-container, .state-layer { transition: none; } } `"
|
|
257
257
|
}
|
|
258
258
|
],
|
|
259
259
|
"exports": [
|
|
@@ -491,7 +491,7 @@
|
|
|
491
491
|
{
|
|
492
492
|
"kind": "variable",
|
|
493
493
|
"name": "styles",
|
|
494
|
-
"default": "css` :host { display: block; box-sizing: border-box; } .bar { display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; width: 100%; height: 80px; background-color: var(--md-sys-color-surface-container, #f3edf7); color: var(--md-sys-color-on-surface, #1c1b1f); } ::slotted(lit-material-navigation-bar-item) { flex: 1; } `"
|
|
494
|
+
"default": "css` :host { display: block; box-sizing: border-box; } :host([hidden]) { display: none; } .bar { display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; width: 100%; height: 80px; background-color: var(--md-sys-color-surface-container, #f3edf7); color: var(--md-sys-color-on-surface, #1c1b1f); } ::slotted(lit-material-navigation-bar-item) { flex: 1; } `"
|
|
495
495
|
}
|
|
496
496
|
],
|
|
497
497
|
"exports": [
|
|
@@ -619,7 +619,7 @@
|
|
|
619
619
|
{
|
|
620
620
|
"kind": "variable",
|
|
621
621
|
"name": "styles",
|
|
622
|
-
"default": "css` :host { display: block; outline: none; -webkit-tap-highlight-color: transparent; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 56px; padding-inline: 16px; border: none; border-radius: var(--md-sys-shape-corner-full, 28px); margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-align: start; text-decoration: none; font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-large-size, 0.875rem); font-weight: var(--md-sys-typescale-label-large-weight, 500); -webkit-appearance: none; appearance: none; transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { background-color: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } slot.badge::slotted(*) { display: block; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .item, .state-layer { transition: none; } } `"
|
|
622
|
+
"default": "css` :host { display: block; outline: none; -webkit-tap-highlight-color: transparent; } :host([hidden]) { display: none; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 56px; padding-inline: 16px; border: none; border-radius: var(--md-sys-shape-corner-full, 28px); margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-align: start; text-decoration: none; font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-large-size, 0.875rem); font-weight: var(--md-sys-typescale-label-large-weight, 500); -webkit-appearance: none; appearance: none; transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { background-color: var(--md-sys-color-secondary-container, #e8def8); color: var(--md-sys-color-on-secondary-container, #1d192b); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } slot.badge::slotted(*) { display: block; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .item, .state-layer { transition: none; } } `"
|
|
623
623
|
}
|
|
624
624
|
],
|
|
625
625
|
"exports": [
|
|
@@ -853,7 +853,7 @@
|
|
|
853
853
|
{
|
|
854
854
|
"kind": "variable",
|
|
855
855
|
"name": "styles",
|
|
856
|
-
"default": "css` :host { display: contents; } .drawer { display: flex; flex-direction: column; box-sizing: border-box; gap: 4px; width: 360px; max-width: 100%; height: 100%; padding: 12px; background-color: var(--md-sys-color-surface, #fffbfe); color: var(--md-sys-color-on-surface, #1c1b1f); /* Not part of the tab order for \"modal\" (see the component for why it's the default showModal() focus target) — no visible focus indicator of its own. */ outline: none; } .header { padding: 16px 16px 8px; } .header:empty { display: none; } .content { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; } /* Modal variant: same .drawer content, wrapped in a native <dialog> so the scrim, Escape-to-close, and focus trap all come from the browser. */ .dialog { margin: 0; padding: 0; border: none; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; color: inherit; } .dialog[open] { display: flex; justify-content: flex-start; } :host([position=\"end\"]) .dialog[open] { justify-content: flex-end; } .dialog::backdrop { background-color: rgba(0, 0, 0, 0.32); } .dialog .drawer { box-shadow: var( --md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.3) ); } `"
|
|
856
|
+
"default": "css` :host { display: contents; } :host([hidden]) { display: none; } .drawer { display: flex; flex-direction: column; box-sizing: border-box; gap: 4px; width: 360px; max-width: 100%; height: 100%; padding: 12px; background-color: var(--md-sys-color-surface, #fffbfe); color: var(--md-sys-color-on-surface, #1c1b1f); /* Not part of the tab order for \"modal\" (see the component for why it's the default showModal() focus target) — no visible focus indicator of its own. */ outline: none; } .header { padding: 16px 16px 8px; } .header:empty { display: none; } .content { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; } /* Modal variant: same .drawer content, wrapped in a native <dialog> so the scrim, Escape-to-close, and focus trap all come from the browser. */ .dialog { margin: 0; padding: 0; border: none; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; color: inherit; } .dialog[open] { display: flex; justify-content: flex-start; } :host([position=\"end\"]) .dialog[open] { justify-content: flex-end; } .dialog::backdrop { background-color: rgba(0, 0, 0, 0.32); } .dialog .drawer { box-shadow: var( --md-sys-elevation-level1, 0 1px 2px rgba(0, 0, 0, 0.3) ); } `"
|
|
857
857
|
}
|
|
858
858
|
],
|
|
859
859
|
"exports": [
|
|
@@ -1174,7 +1174,7 @@
|
|
|
1174
1174
|
{
|
|
1175
1175
|
"kind": "variable",
|
|
1176
1176
|
"name": "styles",
|
|
1177
|
-
"default": "css` :host { display: block; outline: none; -webkit-tap-highlight-color: transparent; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; min-height: 56px; padding-block: 4px; border: none; margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-decoration: none; font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-medium-size, 0.75rem); font-weight: var(--md-sys-typescale-label-medium-weight, 500); -webkit-appearance: none; appearance: none; } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { color: var(--md-sys-color-on-surface, #1c1b1f); } .icon-container { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--md-sys-shape-corner-full, 16px); transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } :host([selected]) .icon-container { background-color: var(--md-sys-color-secondary-container, #e8def8); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } slot.badge::slotted(*) { position: absolute; top: -4px; inset-inline-end: 8px; } .label { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .icon-container, .state-layer { transition: none; } } `"
|
|
1177
|
+
"default": "css` :host { display: block; outline: none; -webkit-tap-highlight-color: transparent; } :host([hidden]) { display: none; } :host([disabled]) { pointer-events: none; } .item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; box-sizing: border-box; width: 100%; min-height: 56px; padding-block: 4px; border: none; margin: 0; background-color: transparent; color: var(--md-sys-color-on-surface-variant, #49454f); cursor: pointer; text-decoration: none; font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif); font-size: var(--md-sys-typescale-label-medium-size, 0.75rem); font-weight: var(--md-sys-typescale-label-medium-weight, 500); -webkit-appearance: none; appearance: none; } .item:disabled, .item[aria-disabled=\"true\"] { cursor: default; } :host([selected]) .item { color: var(--md-sys-color-on-surface, #1c1b1f); } .icon-container { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--md-sys-shape-corner-full, 16px); transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)); } :host([selected]) .icon-container { background-color: var(--md-sys-color-secondary-container, #e8def8); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } slot.badge::slotted(*) { position: absolute; top: -4px; inset-inline-end: 8px; } .label { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .state-layer { position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; opacity: 0; pointer-events: none; transition: opacity 100ms linear; } .item:hover .state-layer { opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08); } .state-layer[data-pressed] { opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1); } .focus-ring { position: absolute; inset: -2px; border-radius: inherit; outline: 3px solid var(--md-sys-color-secondary, #625b71); outline-offset: 2px; pointer-events: none; } .focus-ring[hidden] { display: none; } :host([disabled]) .item { color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .icon-container, .state-layer { transition: none; } } `"
|
|
1178
1178
|
}
|
|
1179
1179
|
],
|
|
1180
1180
|
"exports": [
|
|
@@ -1412,7 +1412,7 @@
|
|
|
1412
1412
|
{
|
|
1413
1413
|
"kind": "variable",
|
|
1414
1414
|
"name": "styles",
|
|
1415
|
-
"default": "css` :host { display: block; box-sizing: border-box; } .rail { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 80px; height: 100%; padding-block: 12px; background-color: var(--md-sys-color-surface, #fffbfe); color: var(--md-sys-color-on-surface, #1c1b1f); } .fab { flex: none; margin-block-end: 12px; } .fab:empty { display: none; } .items { display: flex; flex: 1; flex-direction: column; gap: 4px; width: 100%; min-height: 0; overflow-y: auto; } .items.top { justify-content: flex-start; } .items.center { justify-content: center; } .items.bottom { justify-content: flex-end; } `"
|
|
1415
|
+
"default": "css` :host { display: block; box-sizing: border-box; } :host([hidden]) { display: none; } .rail { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 80px; height: 100%; padding-block: 12px; background-color: var(--md-sys-color-surface, #fffbfe); color: var(--md-sys-color-on-surface, #1c1b1f); } .fab { flex: none; margin-block-end: 12px; } .fab:empty { display: none; } .items { display: flex; flex: 1; flex-direction: column; gap: 4px; width: 100%; min-height: 0; overflow-y: auto; } .items.top { justify-content: flex-start; } .items.center { justify-content: center; } .items.bottom { justify-content: flex-end; } `"
|
|
1416
1416
|
}
|
|
1417
1417
|
],
|
|
1418
1418
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adaptive-navigation.d.ts","sourceRoot":"","sources":["../src/adaptive-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"adaptive-navigation.d.ts","sourceRoot":"","sources":["../src/adaptive-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAkCpB;IAE8B,YAAY,EAAE,qBAAqB,EAAE,CAAM;IAE/C,QAAQ,SAAM;IAE1C,gEAAgE;IACnC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEpE,sDAAsD;IAC1C,KAAK,SAAU;IAE3B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,IAAI;IAIH,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kCAAkC,EAAE,6BAA6B,CAAC;KACnE;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"adaptive-navigation.js","sourceRoot":"","sources":["../src/adaptive-navigation.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAUlC;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IAAtD;;
|
|
1
|
+
{"version":3,"file":"adaptive-navigation.js","sourceRoot":"","sources":["../src/adaptive-navigation.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-bar-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-bar-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-bar-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-bar-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgIlB,CAAC"}
|
|
@@ -3,11 +3,17 @@ export const styles = css `
|
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
5
5
|
flex: 1;
|
|
6
|
+
/* Shrink below the pill's 64px so more than five destinations fit a phone. */
|
|
7
|
+
min-width: 0;
|
|
6
8
|
height: 100%;
|
|
7
9
|
outline: none;
|
|
8
10
|
-webkit-tap-highlight-color: transparent;
|
|
9
11
|
}
|
|
10
12
|
|
|
13
|
+
:host([hidden]) {
|
|
14
|
+
display: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
11
17
|
:host([disabled]) {
|
|
12
18
|
pointer-events: none;
|
|
13
19
|
}
|
|
@@ -50,7 +56,7 @@ export const styles = css `
|
|
|
50
56
|
display: flex;
|
|
51
57
|
align-items: center;
|
|
52
58
|
justify-content: center;
|
|
53
|
-
width: 64px;
|
|
59
|
+
width: min(64px, 100%);
|
|
54
60
|
height: 32px;
|
|
55
61
|
border-radius: var(--md-sys-shape-corner-full, 16px);
|
|
56
62
|
transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-bar-item-styles.js","sourceRoot":"","sources":["../src/navigation-bar-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-bar-item-styles.js","sourceRoot":"","sources":["../src/navigation-bar-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-bar-styles.d.ts","sourceRoot":"","sources":["../src/navigation-bar-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-bar-styles.d.ts","sourceRoot":"","sources":["../src/navigation-bar-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-bar-styles.js","sourceRoot":"","sources":["../src/navigation-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-bar-styles.js","sourceRoot":"","sources":["../src/navigation-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-drawer-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-drawer-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-drawer-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6GlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-item-styles.js","sourceRoot":"","sources":["../src/navigation-drawer-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-drawer-item-styles.js","sourceRoot":"","sources":["../src/navigation-drawer-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-styles.d.ts","sourceRoot":"","sources":["../src/navigation-drawer-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-drawer-styles.d.ts","sourceRoot":"","sources":["../src/navigation-drawer-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4ElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-styles.js","sourceRoot":"","sources":["../src/navigation-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-drawer-styles.js","sourceRoot":"","sources":["../src/navigation-drawer-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-rail-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-rail-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-rail-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-rail-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2HlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-rail-item-styles.js","sourceRoot":"","sources":["../src/navigation-rail-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-rail-item-styles.js","sourceRoot":"","sources":["../src/navigation-rail-item-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-rail-styles.d.ts","sourceRoot":"","sources":["../src/navigation-rail-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"navigation-rail-styles.d.ts","sourceRoot":"","sources":["../src/navigation-rail-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoDlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-rail-styles.js","sourceRoot":"","sources":["../src/navigation-rail-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"navigation-rail-styles.js","sourceRoot":"","sources":["../src/navigation-rail-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lit-material/navigation",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Material Design 3 navigation drawer, navigation rail, and navigation bar web components.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"lit": "^3.2.0",
|
|
46
|
-
"@lit-material/core": "0.0
|
|
47
|
-
"@lit-material/tokens": "0.0
|
|
46
|
+
"@lit-material/core": "0.1.0",
|
|
47
|
+
"@lit-material/tokens": "0.1.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@lit-labs/ssr": "^3.3.1",
|