@lit-material/navigation 0.1.0 → 0.1.2

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.
Files changed (5) hide show
  1. package/custom-elements.json +1 -1
  2. package/dist/navigation-bar-item-styles.d.ts.map +1 -1
  3. package/dist/navigation-bar-item-styles.js +3 -1
  4. package/dist/navigation-bar-item-styles.js.map +1 -1
  5. 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([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": [
package/dist/navigation-bar-item-styles.d.ts.map CHANGED
@@ -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,yBA0HlB,CAAC"}
1
+ {"version":3,"file":"navigation-bar-item-styles.d.ts","sourceRoot":"","sources":["../src/navigation-bar-item-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4HlB,CAAC"}
package/dist/navigation-bar-item-styles.js CHANGED
@@ -3,6 +3,8 @@ 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;
@@ -50,7 +52,7 @@ export const styles = css `
50
52
  display: flex;
51
53
  align-items: center;
52
54
  justify-content: center;
53
- width: 64px;
55
+ width: min(64px, 100%);
54
56
  height: 32px;
55
57
  border-radius: var(--md-sys-shape-corner-full, 16px);
56
58
  transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
package/dist/navigation-bar-item-styles.js.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lit-material/navigation",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
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.2",
47
- "@lit-material/tokens": "0.0.1"
46
+ "@lit-material/core": "0.0.3",
47
+ "@lit-material/tokens": "0.0.2"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@lit-labs/ssr": "^3.3.1",