npm - @francofantomius/material-components - Versions diffs - 1.1.1 → 1.2.0 - Mend

@francofantomius/material-components 1.1.1 → 1.2.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.

Files changed (380) hide show

package/dist/chunks/{navigation-rail-item-6pdhNHJK.js.map → navigation-rail-item-CWvGjLjC.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-rail-item-6pdhNHJK.js","names":[],"sources":["../../src/components/navigation-rail/navigation-rail.css.ts","../../src/components/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationRailStyles = css`\n :host {\n display: inline-flex;\n flex-direction: column;\n width: var(--md-navigation-rail-width, 80px);\n min-width: var(--md-navigation-rail-width, 80px);\n height: var(--md-navigation-rail-height, 100%);\n min-height: 100%;\n box-sizing: border-box;\n background-color: var(--md-navigation-rail-container-color, var(--md-sys-color-surface, #FEF7FF));\n color: var(--md-navigation-rail-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n border-right: var(--md-navigation-rail-border, 1px solid var(--md-sys-color-outline-variant, #CAC4D0));\n font-family: var(--md-sys-typescale-font-family, inherit);\n user-select: none;\n position: relative;\n }\n\n .rail {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 12px 0;\n box-sizing: border-box;\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n .rail::-webkit-scrollbar {\n width: 4px;\n }\n\n .rail::-webkit-scrollbar-thumb {\n background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: 4px;\n }\n\n .header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n width: 100%;\n flex-shrink: 0;\n }\n\n .destinations {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n width: 100%;\n flex: 1;\n }\n\n /* Alignment Variants /\n :host([alignment=\"top\"]) .destinations {\n justify-content: flex-start;\n }\n\n :host([alignment=\"center\"]) .destinations {\n justify-content: center;\n }\n\n :host([alignment=\"bottom\"]) .destinations {\n justify-content: flex-end;\n }\n\n .footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n margin-top: auto;\n width: 100%;\n padding-top: 12px;\n flex-shrink: 0;\n }\n`;\n\nexport const navigationRailItemStyles = css`\n :host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: 0.38;\n }\n\n .item {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 56px;\n padding: 4px 0 8px 0;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n text-decoration: none;\n cursor: pointer;\n outline: none;\n border-radius: 12px;\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n .indicator-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .active-indicator {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--md-navigation-rail-indicator-width, 56px);\n height: var(--md-navigation-rail-indicator-height, 32px);\n border-radius: var(--md-navigation-rail-indicator-shape, 16px);\n background-color: transparent;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n color 200ms cubic-bezier(0.2, 0, 0, 1);\n overflow: hidden;\n }\n\n .item:hover .active-indicator {\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n }\n\n / Active / Selected State /\n :host([active]) .active-indicator,\n :host([selected]) .active-indicator {\n background-color: var(--md-navigation-rail-active-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));\n color: var(--md-navigation-rail-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));\n }\n\n :host([active]) .item:hover .active-indicator,\n :host([selected]) .item:hover .active-indicator {\n background-color: var(--md-navigation-rail-active-indicator-hover-color, var(--md-sys-color-secondary-container, #E8DEF8));\n }\n\n .icon-slot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: 24px;\n line-height: 1;\n z-index: 1;\n }\n\n .label-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin-top: 4px;\n box-sizing: border-box;\n }\n\n .label {\n font-size: var(--md-sys-typescale-label-medium-size, 12px);\n line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n font-weight: 500;\n letter-spacing: 0.5px;\n text-align: center;\n max-width: 72px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--md-navigation-rail-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1),\n font-weight 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([active]) .label,\n :host([selected]) .label {\n color: var(--md-navigation-rail-active-label-color, var(--md-sys-color-on-surface, #1D1B20));\n font-weight: 700;\n }\n\n :host([hide-label]) .label-container,\n :host([hide-labels]) .label-container {\n display: none;\n }\n\n / Badge styling /\n .badge-slot {\n position: absolute;\n top: -2px;\n right: 4px;\n z-index: 2;\n pointer-events: none;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n background-color: var(--md-sys-color-error, #B3261E);\n color: var(--md-sys-color-on-error, #FFFFFF);\n box-sizing: border-box;\n }\n\n .badge.dot {\n min-width: 6px;\n width: 6px;\n height: 6px;\n padding: 0;\n border-radius: 50%;\n }\n\n :host([active]) .badge,\n :host([selected]) .badge {\n background-color: var(--md-sys-color-error, #B3261E);\n color: var(--md-sys-color-on-error, #FFFFFF);\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { navigationRailItemStyles } from './navigation-rail.css.js';\n\n/\n Material Design 3 Navigation Rail Item component.\n \n @slot icon - Custom leading icon.\n * @slot - Default slot for destination label.\n * @slot badge - Custom badge element.\n */\n@customElement('md-navigation-rail-item')\nexport class MdNavigationRailItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, navigationRailItemStyles];\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String, attribute: 'active-icon' })\n activeIcon = '';\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n headline = '';\n\n @property({ type: String })\n badge = '';\n\n @property({ type: Boolean, attribute: 'badge-dot' })\n badgeDot = false;\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n target = '';\n\n @property({ type: String })\n value = '';\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n super.willUpdate(changedProperties);\n if (changedProperties.has('active') && !changedProperties.has('selected')) {\n this.selected = this.active;\n } else if (changedProperties.has('selected') && !changedProperties.has('active')) {\n this.active = this.selected;\n } else if (changedProperties.has('active') && changedProperties.has('selected')) {\n if (this.active) {\n this.selected = true;\n } else if (this.selected) {\n this.active = true;\n }\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n this.emitEvent('item-click', {\n label: this.label \|\| this.headline,\n icon: this.icon,\n active: this.active,\n value: this.value,\n item: this,\n });\n };\n\n override render() {\n const text = this.label \|\| this.headline;\n const currentIcon = (this.active && this.activeIcon) ? this.activeIcon : this.icon;\n\n const renderBadge = () => {\n if (this.badgeDot) {\n return html`<span class=\"badge dot\"></span>`;\n }\n if (this.badge) {\n return html`<span class=\"badge\">${this.badge}</span>`;\n }\n return nothing;\n };\n\n const inner = html`\n <div class=\"indicator-wrapper\">\n <div class=\"active-indicator\">\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"icon-slot\">\n <slot name=\"icon\">\n ${currentIcon ? html`<md-icon name=${currentIcon}></md-icon>` : nothing}\n </slot>\n </span>\n </div>\n\n <div class=\"badge-slot\">\n <slot name=\"badge\">\n ${renderBadge()}\n </slot>\n </div>\n </div>\n\n <div class=\"label-container\">\n <slot>\n ${text ? html`<span class=\"label\">${text}</span>` : nothing}\n </slot>\n </div>\n `;\n\n if (this.href) {\n return html`\n <a\n class=\"item\"\n href=${this.disabled ? nothing : this.href}\n target=${this.target \|\| nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-current=${this.active ? 'page' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClick}\n >\n ${inner}\n </a>\n `;\n }\n\n return html`\n <div\n class=\"item\"\n role=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-pressed=${this.active ? 'true' : 'false'}\n @click=${this.handleClick}\n >\n ${inner}\n </div>\n `;\n }\n}\n\n// Aliases\n@customElement('md-nav-rail-item')\nexport class MdNavRailItem extends MdNavigationRailItem {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-navigation-rail-item': MdNavigationRailItem;\n 'md-nav-rail-item': MdNavRailItem;\n }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkFvB,IAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}
1	+ {"version":3,"file":"navigation-rail-item-CWvGjLjC.js","names":[],"sources":["../../src/components/navigation-rail/navigation-rail.css.ts","../../src/components/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const navigationRailStyles = css`\n :host {\n display: inline-flex;\n flex-direction: column;\n width: var(--md-navigation-rail-width, 80px);\n min-width: var(--md-navigation-rail-width, 80px);\n height: var(--md-navigation-rail-height, 100%);\n min-height: 100%;\n box-sizing: border-box;\n background-color: var(--md-navigation-rail-container-color, var(--md-sys-color-surface, #FEF7FF));\n color: var(--md-navigation-rail-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n border-right: var(--md-navigation-rail-border, 1px solid var(--md-sys-color-outline-variant, #CAC4D0));\n font-family: var(--md-sys-typescale-font-family, inherit);\n user-select: none;\n position: relative;\n }\n\n .rail {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 12px 0;\n box-sizing: border-box;\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n .rail::-webkit-scrollbar {\n width: 4px;\n }\n\n .rail::-webkit-scrollbar-thumb {\n background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: 4px;\n }\n\n .header {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n width: 100%;\n flex-shrink: 0;\n }\n\n .destinations {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n width: 100%;\n flex: 1;\n }\n\n /* Alignment Variants /\n :host([alignment=\"top\"]) .destinations {\n justify-content: flex-start;\n }\n\n :host([alignment=\"center\"]) .destinations {\n justify-content: center;\n }\n\n :host([alignment=\"bottom\"]) .destinations {\n justify-content: flex-end;\n }\n\n .footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n margin-top: auto;\n width: 100%;\n padding-top: 12px;\n flex-shrink: 0;\n }\n`;\n\nexport const navigationRailItemStyles = css`\n :host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: 0.38;\n }\n\n .item {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: 56px;\n padding: 4px 0 8px 0;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n color: var(--md-sys-color-on-surface-variant, #49454F);\n text-decoration: none;\n cursor: pointer;\n outline: none;\n border-radius: 12px;\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n .indicator-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .active-indicator {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--md-navigation-rail-indicator-width, 56px);\n height: var(--md-navigation-rail-indicator-height, 32px);\n border-radius: var(--md-navigation-rail-indicator-shape, 16px);\n background-color: transparent;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n color 200ms cubic-bezier(0.2, 0, 0, 1);\n overflow: hidden;\n }\n\n .item:hover .active-indicator {\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n }\n\n / Active / Selected State /\n :host([active]) .active-indicator,\n :host([selected]) .active-indicator {\n background-color: var(--md-navigation-rail-active-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8));\n color: var(--md-navigation-rail-active-icon-color, var(--md-sys-color-on-secondary-container, #1D192B));\n }\n\n :host([active]) .item:hover .active-indicator,\n :host([selected]) .item:hover .active-indicator {\n background-color: var(--md-navigation-rail-active-indicator-hover-color, var(--md-sys-color-secondary-container, #E8DEF8));\n }\n\n .icon-slot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: 24px;\n line-height: 1;\n z-index: 1;\n }\n\n .label-container {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n margin-top: 4px;\n box-sizing: border-box;\n }\n\n .label {\n font-size: var(--md-sys-typescale-label-medium-size, 12px);\n line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n font-weight: 500;\n letter-spacing: 0.5px;\n text-align: center;\n max-width: 72px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--md-navigation-rail-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n transition: color 150ms cubic-bezier(0.2, 0, 0, 1),\n font-weight 150ms cubic-bezier(0.2, 0, 0, 1);\n }\n\n :host([active]) .label,\n :host([selected]) .label {\n color: var(--md-navigation-rail-active-label-color, var(--md-sys-color-on-surface, #1D1B20));\n font-weight: 700;\n }\n\n :host([hide-label]) .label-container,\n :host([hide-labels]) .label-container {\n display: none;\n }\n\n / Badge styling /\n .badge-slot {\n position: absolute;\n top: -2px;\n right: 4px;\n z-index: 2;\n pointer-events: none;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n font-size: 11px;\n font-weight: 600;\n line-height: 1;\n background-color: var(--md-sys-color-error, #B3261E);\n color: var(--md-sys-color-on-error, #FFFFFF);\n box-sizing: border-box;\n }\n\n .badge.dot {\n min-width: 6px;\n width: 6px;\n height: 6px;\n padding: 0;\n border-radius: 50%;\n }\n\n :host([active]) .badge,\n :host([selected]) .badge {\n background-color: var(--md-sys-color-error, #B3261E);\n color: var(--md-sys-color-on-error, #FFFFFF);\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { navigationRailItemStyles } from './navigation-rail.css.js';\n\n/\n Material Design 3 Navigation Rail Item component.\n \n @slot icon - Custom leading icon.\n * @slot - Default slot for destination label.\n * @slot badge - Custom badge element.\n */\n@customElement('md-navigation-rail-item')\nexport class MdNavigationRailItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, navigationRailItemStyles];\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String, attribute: 'active-icon' })\n activeIcon = '';\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n headline = '';\n\n @property({ type: String })\n badge = '';\n\n @property({ type: Boolean, attribute: 'badge-dot' })\n badgeDot = false;\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n hideLabel = false;\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n target = '';\n\n @property({ type: String })\n value = '';\n\n override willUpdate(changedProperties: Map<string, unknown>) {\n super.willUpdate(changedProperties);\n if (changedProperties.has('active') && !changedProperties.has('selected')) {\n this.selected = this.active;\n } else if (changedProperties.has('selected') && !changedProperties.has('active')) {\n this.active = this.selected;\n } else if (changedProperties.has('active') && changedProperties.has('selected')) {\n if (this.active) {\n this.selected = true;\n } else if (this.selected) {\n this.active = true;\n }\n }\n }\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n this.emitEvent('item-click', {\n label: this.label \|\| this.headline,\n icon: this.icon,\n active: this.active,\n value: this.value,\n item: this,\n });\n };\n\n override render() {\n const text = this.label \|\| this.headline;\n const currentIcon = (this.active && this.activeIcon) ? this.activeIcon : this.icon;\n\n const renderBadge = () => {\n if (this.badgeDot) {\n return html`<span class=\"badge dot\"></span>`;\n }\n if (this.badge) {\n return html`<span class=\"badge\">${this.badge}</span>`;\n }\n return nothing;\n };\n\n const inner = html`\n <div class=\"indicator-wrapper\">\n <div class=\"active-indicator\">\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n <span class=\"icon-slot\">\n <slot name=\"icon\">\n ${currentIcon ? html`<md-icon name=${currentIcon}></md-icon>` : nothing}\n </slot>\n </span>\n </div>\n\n <div class=\"badge-slot\">\n <slot name=\"badge\">\n ${renderBadge()}\n </slot>\n </div>\n </div>\n\n <div class=\"label-container\">\n <slot>\n ${text ? html`<span class=\"label\">${text}</span>` : nothing}\n </slot>\n </div>\n `;\n\n if (this.href) {\n return html`\n <a\n class=\"item\"\n href=${this.disabled ? nothing : this.href}\n target=${this.target \|\| nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-current=${this.active ? 'page' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClick}\n >\n ${inner}\n </a>\n `;\n }\n\n return html`\n <div\n class=\"item\"\n role=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-pressed=${this.active ? 'true' : 'false'}\n @click=${this.handleClick}\n >\n ${inner}\n </div>\n `;\n }\n}\n\n// Aliases\n@customElement('md-nav-rail-item')\nexport class MdNavRailItem extends MdNavigationRailItem {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-navigation-rail-item': MdNavigationRailItem;\n 'md-nav-rail-item': MdNavRailItem;\n }\n}\n"],"mappings":"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"}