@m3e/nav-bar 1.0.6 → 1.1.1

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/dist/index.js +548 -454
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.min.js +2 -266
  4. package/dist/index.min.js.map +1 -1
  5. package/package.json +2 -16
package/dist/index.min.js CHANGED
@@ -36,274 +36,10 @@ const N={attribute:!0,type:String,converter:I,reflect:!1,hasChanged:D},H=(t=N,e,
36
36
  * Copyright 2017 Google LLC
37
37
  * SPDX-License-Identifier: BSD-3-Clause
38
38
  */
39
- function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}var V,X,F,G,Q;let Y=class extends(r(t,"navigation")){constructor(){super(...arguments),V.add(this),this[Q]=(new v).disableRovingTabIndex(),X.set(this,void 0),this.mode="compact"}get items(){return this[u].items}get selected(){return this[u].selectedItems[0]??null}get currentMode(){return this._mode??("compact"!==this.mode?"expanded":"compact")}set currentMode(t){this._mode=t}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,g(this,X,"f")?.call(this)}update(t){super.update(t),t.has("mode")&&(g(this,X,"f")?.call(this),"auto"===this.mode?function(t,e,i,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===o?r.call(t,i):r?r.value=i:e.set(t,i)}(this,X,f.observe([b.XSmall,b.Small],t=>{this._mode=t.get(b.XSmall)||t.get(b.Small)?"compact":"expanded",this._updateItems()}),"f"):this._updateItems()),t.has("_mode")&&this._updateItems()}render(){return e`<slot @change="${g(this,V,"m",G)}" @slotchange="${g(this,V,"m",F)}"></slot>`}_updateItems(){const t="compact"===this.currentMode?"vertical":"horizontal";this._updateOrientation(t),this.classList.toggle("-compact","vertical"===t)}_updateOrientation(t){this[u].items.forEach(e=>e.orientation=t)}};var Z,tt,et;X=new WeakMap,V=new WeakSet,Q=u,F=function(){this[u].setItems([...this.querySelectorAll("m3e-nav-item")]),this._updateItems()},G=function(t){t.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},Y.styles=i`
40
- :host {
41
- display: flex;
42
- overflow-x: auto;
43
- overflow-y: hidden;
44
- align-items: stretch;
45
- scrollbar-width: ${a.scrollbar.thinWidth};
46
- scrollbar-color: ${a.scrollbar.color};
47
- min-height: var(--m3e-nav-bar-height, 4rem);
48
- background-color: var(--m3e-nav-bar-container-color, ${a.color.surfaceContainer});
49
- justify-content: center;
50
- --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);
51
- }
52
- `,y([function(t){return J({...t,state:!0,attribute:!1})}
39
+ function K(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}var V,X,F,G,Q;let Y=class extends(r(t,"navigation")){constructor(){super(...arguments),V.add(this),this[Q]=(new v).disableRovingTabIndex(),X.set(this,void 0),this.mode="compact"}get items(){return this[u].items}get selected(){return this[u].selectedItems[0]??null}get currentMode(){return this._mode??("compact"!==this.mode?"expanded":"compact")}set currentMode(t){this._mode=t}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,g(this,X,"f")?.call(this)}update(t){super.update(t),t.has("mode")&&(g(this,X,"f")?.call(this),"auto"===this.mode?function(t,e,i,o,r){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");"a"===o?r.call(t,i):r?r.value=i:e.set(t,i)}(this,X,f.observe([b.XSmall,b.Small],t=>{this._mode=t.get(b.XSmall)||t.get(b.Small)?"compact":"expanded",this._updateItems()}),"f"):this._updateItems()),t.has("_mode")&&this._updateItems()}render(){return e`<slot @change="${g(this,V,"m",G)}" @slotchange="${g(this,V,"m",F)}"></slot>`}_updateItems(){const t="compact"===this.currentMode?"vertical":"horizontal";this._updateOrientation(t),this.classList.toggle("-compact","vertical"===t)}_updateOrientation(t){this[u].items.forEach(e=>e.orientation=t)}};var Z,tt,et;X=new WeakMap,V=new WeakSet,Q=u,F=function(){this[u].setItems([...this.querySelectorAll("m3e-nav-item")]),this._updateItems()},G=function(t){t.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},Y.styles=i`:host { display: flex; overflow-x: auto; overflow-y: hidden; align-items: stretch; scrollbar-width: ${a.scrollbar.thinWidth}; scrollbar-color: ${a.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); background-color: var(--m3e-nav-bar-container-color, ${a.color.surfaceContainer}); justify-content: center; --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`,y([function(t){return J({...t,state:!0,attribute:!1})}
53
40
  /**
54
41
  * @license
55
42
  * Copyright 2017 Google LLC
56
43
  * SPDX-License-Identifier: BSD-3-Clause
57
- */()],Y.prototype,"_mode",void 0),y([J({reflect:!0})],Y.prototype,"mode",void 0),Y=y([w("m3e-nav-bar")],Y);let it=class extends(s(n(l(c(d(h(p(r(t,"button"),!0)))))))){constructor(){super(...arguments),Z.add(this),tt.set(this,t=>g(this,Z,"m",et).call(this,t)),this.orientation="vertical"}get navBar(){return this.closest("m3e-nav-bar")??this.closest("m3e-nav-rail")??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",g(this,tt,"f"),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",g(this,tt,"f"),{capture:!0})}update(t){if(super.update(t),t.has("selected")){this.ariaSelected=null,this.ariaPressed=null,this.ariaCurrent=`${this.selected}`;for(const t of this.querySelectorAll("m3e-icon"))t.toggleAttribute("filled",this.selected);this.navBar?.[u].notifySelectionChange(this)}}updated(t){super.updated(t),t.has("orientation")&&this._focusRing?.attach(this)}firstUpdated(t){super.firstUpdated(t),[this._focusRing,this._stateLayer,this._ripple].forEach(t=>t?.attach(this))}render(){const t=this.disabled||this.disabledInteractive;return e`${"vertical"===this.orientation?e`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>`:o}
58
- <div class="outer">
59
- ${this[m]()}
60
- <div class="inner">
61
- ${"horizontal"===this.orientation?e`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>`:o}
62
- <m3e-state-layer class="state-layer" ?disabled="${t}"></m3e-state-layer>
63
- <m3e-ripple class="ripple" centered ?disabled="${t}"></m3e-ripple>
64
- <div class="touch" aria-hidden="true"></div>
65
- <div class="base">
66
- <div class="icon-wrapper" aria-hidden="true">
67
- <div class="icon">
68
- <slot name="icon" aria-hidden="true"></slot>
69
- </div>
70
- </div>
71
- <div class="label">
72
- <slot></slot>
73
- </div>
74
- </div>
75
- </div>
76
- </div>`}};tt=new WeakMap,Z=new WeakSet,et=function(t){t.defaultPrevented||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.navBar?.[u].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},it.styles=i`
77
- :host {
78
- display: inline-block;
79
- vertical-align: middle;
80
- position: relative;
81
- outline: none;
82
- user-select: none;
83
- flex: 1;
84
- font-size: var(--m3e-nav-item-label-text-font-size, ${a.typescale.standard.label.medium.fontSize});
85
- font-weight: var(
86
- --m3e-nav-item-label-text-font-weight,
87
- ${a.typescale.standard.label.medium.fontWeight}
88
- );
89
- line-height: var(
90
- --m3e-nav-item-label-text-line-height,
91
- ${a.typescale.standard.label.medium.lineHeight}
92
- );
93
- letter-spacing: var(--m3e-nav-item-label-text-tracking, ${a.typescale.standard.label.medium.tracking});
94
- border-radius: var(--m3e-nav-item-shape, ${a.shape.corner.full});
95
- min-width: var(--_nav-item-min-width);
96
- align-self: var(--_nav-item-align-self);
97
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
98
- }
99
- :host([orientation="horizontal"]) {
100
- max-width: fit-content;
101
- }
102
- :host(:not(:disabled):not([disabled-interactive])) {
103
- cursor: pointer;
104
- }
105
- :host([disabled-interactive]) {
106
- cursor: not-allowed;
107
- }
108
- .outer {
109
- height: 100%;
110
- }
111
- .outer,
112
- .inner {
113
- display: flex;
114
- align-items: center;
115
- justify-content: var(--_nav-item-justify-content, center);
116
- position: relative;
117
- border-radius: inherit;
118
- }
119
- .icon-wrapper {
120
- position: relative;
121
- flex: none;
122
- }
123
- .base {
124
- justify-content: unset;
125
- box-sizing: border-box;
126
- vertical-align: middle;
127
- display: inline-flex;
128
- align-items: center;
129
- justify-content: center;
130
- position: relative;
131
- width: 100%;
132
- }
133
- .icon {
134
- position: absolute;
135
- }
136
- .label {
137
- vertical-align: middle;
138
- }
139
- ::slotted([slot="icon"]),
140
- ::slotted([slot="selected-icon"]) {
141
- width: 1em;
142
- font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;
143
- }
144
- :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {
145
- --m3e-state-layer-hover-color: var(
146
- --m3e-nav-item-inactive-hover-state-layer-color,
147
- ${a.color.onSecondaryContainer}
148
- );
149
- --m3e-state-layer-focus-color: var(
150
- --m3e-nav-item-inactive-focus-state-layer-color,
151
- ${a.color.onSecondaryContainer}
152
- );
153
- --m3e-ripple-color: var(
154
- --m3e-nav-item-inactive-pressed-state-layer-color,
155
- ${a.color.onSecondaryContainer}
156
- );
157
- }
158
- :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {
159
- color: var(--m3e-nav-item-inactive-label-text-color, ${a.color.onSurfaceVariant});
160
- }
161
- :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
162
- color: var(--m3e-nav-item-inactive-icon-color, ${a.color.onSecondaryContainer});
163
- }
164
- :host([selected]:not(:disabled):not([disabled-interactive])) .outer {
165
- --m3e-state-layer-hover-color: var(
166
- --m3e-nav-item-active-hover-state-layer-color,
167
- ${a.color.onSecondaryContainer}
168
- );
169
- --m3e-state-layer-focus-color: var(
170
- --m3e-nav-item-active-focus-state-layer-color,
171
- ${a.color.onSecondaryContainer}
172
- );
173
- --m3e-ripple-color: var(
174
- --m3e-nav-item-active-pressed-state-layer-color,
175
- ${a.color.onSecondaryContainer}
176
- );
177
- }
178
- :host([selected]:not(:disabled):not([disabled-interactive])) .label {
179
- color: var(--m3e-nav-item-active-label-text-color, ${a.color.secondary});
180
- }
181
- :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {
182
- background-color: var(--m3e-nav-item-active-container-color, ${a.color.secondaryContainer});
183
- }
184
- :host([selected]:not(:disabled):not([disabled-interactive])) .icon {
185
- color: var(--m3e-nav-item-active-icon-color, ${a.color.onSecondaryContainer});
186
- }
187
- :host([orientation="vertical"]) .outer {
188
- align-self: stretch;
189
- align-items: flex-start;
190
- }
191
- :host([orientation="vertical"]) .label {
192
- text-align: center;
193
- display: -webkit-box;
194
- -webkit-line-clamp: 2;
195
- -webkit-box-orient: vertical;
196
- overflow: hidden;
197
- line-clamp: 2;
198
- }
199
- :host([orientation="vertical"]) .base {
200
- flex-direction: column;
201
- row-gap: var(--m3e-nav-item-spacing, 0.25rem);
202
- }
203
- :host([orientation="vertical"]) .base {
204
- margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);
205
- }
206
- :host([orientation="vertical"]) .state-layer,
207
- :host([orientation="vertical"]) .ripple {
208
- top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);
209
- bottom: unset;
210
- }
211
- :host([orientation="vertical"]) .state-layer,
212
- :host([orientation="vertical"]) .ripple,
213
- :host([orientation="vertical"]) .icon-wrapper {
214
- width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);
215
- }
216
- :host([orientation="vertical"]) .state-layer,
217
- :host([orientation="vertical"]) .ripple,
218
- :host([orientation="vertical"]) .icon-wrapper {
219
- height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);
220
- }
221
- :host([orientation="vertical"]) .icon {
222
- top: calc(
223
- calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(
224
- var(--m3e-nav-item-icon-size, 1.5rem) / 2
225
- )
226
- );
227
- left: calc(
228
- calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(
229
- var(--m3e-nav-item-icon-size, 1.5rem) / 2
230
- )
231
- );
232
- }
233
- :host([orientation="vertical"]) .focus-ring {
234
- border-radius: var(--m3e-nav-item-focus-ring-shape, ${a.shape.corner.extraSmall});
235
- }
236
- :host([orientation="horizontal"]) .icon-wrapper {
237
- width: var(--m3e-nav-item-icon-size, 1.5rem);
238
- height: var(--m3e-nav-item-icon-size, 1.5rem);
239
- }
240
- :host([orientation="horizontal"]) .base {
241
- padding: var(--m3e-horizontal-nav-item-padding, 1rem);
242
- }
243
- :host([orientation="horizontal"]) .label {
244
- flex: 1 1 auto;
245
- }
246
- :host([orientation="horizontal"]) .base {
247
- column-gap: var(--m3e-nav-item-spacing, 0.25rem);
248
- }
249
- :host([orientation="horizontal"]) .inner {
250
- height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);
251
- width: fit-content;
252
- }
253
- .state-layer,
254
- .ripple {
255
- margin-inline: auto;
256
- }
257
- :host(:disabled) .label,
258
- :host([disabled-interactive]) .label {
259
- color: color-mix(
260
- in srgb,
261
- var(--m3e-nav-item-disabled-label-text-color, ${a.color.onSurface})
262
- var(--m3e-nav-item-disabled-label-text-opacity, 38%),
263
- transparent
264
- );
265
- }
266
- :host(:disabled) .icon,
267
- :host([disabled-interactive]) .icon {
268
- color: color-mix(
269
- in srgb,
270
- var(--m3e-nav-item-disabled-icon-color, ${a.color.onSurface})
271
- var(--m3e-nav-item-disabled-icon-opacity, 38%),
272
- transparent
273
- );
274
- }
275
- a {
276
- all: unset;
277
- display: block;
278
- position: absolute;
279
- top: 0px;
280
- left: 0px;
281
- right: 0px;
282
- bottom: 0px;
283
- z-index: 1;
284
- }
285
- @media (forced-colors: active) {
286
- :host(:disabled) .label,
287
- :host([disabled-interactive]) .label,
288
- :host(:disabled) .icon,
289
- :host([disabled-interactive]) .icon {
290
- color: GrayText;
291
- }
292
- :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,
293
- :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {
294
- color: ButtonText;
295
- }
296
- :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {
297
- background-color: ButtonText;
298
- }
299
- :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label {
300
- color: ButtonText;
301
- }
302
- :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label,
303
- :host([selected]:not(:disabled):not([disabled-interactive])) .icon {
304
- forced-color-adjust: none;
305
- color: ButtonFace;
306
- }
307
- }
308
- `,y([K(".focus-ring")],it.prototype,"_focusRing",void 0),y([K(".state-layer")],it.prototype,"_stateLayer",void 0),y([K(".ripple")],it.prototype,"_ripple",void 0),y([J({reflect:!0})],it.prototype,"orientation",void 0),it=y([w("m3e-nav-item")],it);export{Y as M3eNavBarElement,it as M3eNavItemElement};
44
+ */()],Y.prototype,"_mode",void 0),y([J({reflect:!0})],Y.prototype,"mode",void 0),Y=y([w("m3e-nav-bar")],Y);let it=class extends(s(n(l(c(d(h(p(r(t,"button"),!0)))))))){constructor(){super(...arguments),Z.add(this),tt.set(this,t=>g(this,Z,"m",et).call(this,t)),this.orientation="vertical"}get navBar(){return this.closest("m3e-nav-bar")??this.closest("m3e-nav-rail")??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",g(this,tt,"f"),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",g(this,tt,"f"),{capture:!0})}update(t){if(super.update(t),t.has("selected")){this.ariaSelected=null,this.ariaPressed=null,this.ariaCurrent=`${this.selected}`;for(const t of this.querySelectorAll("m3e-icon"))t.toggleAttribute("filled",this.selected);this.navBar?.[u].notifySelectionChange(this)}}updated(t){super.updated(t),t.has("orientation")&&this._focusRing?.attach(this)}firstUpdated(t){super.firstUpdated(t),[this._focusRing,this._stateLayer,this._ripple].forEach(t=>t?.attach(this))}render(){const t=this.disabled||this.disabledInteractive;return e`${"vertical"===this.orientation?e`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>`:o}<div class="outer">${this[m]()}<div class="inner">${"horizontal"===this.orientation?e`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>`:o}<m3e-state-layer class="state-layer" ?disabled="${t}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${t}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon" aria-hidden="true"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`}};tt=new WeakMap,Z=new WeakSet,et=function(t){t.defaultPrevented||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.navBar?.[u].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},it.styles=i`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${a.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${a.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${a.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${a.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${a.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${a.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${a.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${a.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${a.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${a.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${a.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${a.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${a.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${a.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${a.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${a.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${a.shape.corner.extraSmall}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${a.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${a.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`,y([K(".focus-ring")],it.prototype,"_focusRing",void 0),y([K(".state-layer")],it.prototype,"_stateLayer",void 0),y([K(".ripple")],it.prototype,"_ripple",void 0),y([J({reflect:!0})],it.prototype,"orientation",void 0),it=y([w("m3e-nav-item")],it);export{Y as M3eNavBarElement,it as M3eNavItemElement};
309
45
  //# sourceMappingURL=index.min.js.map