@universal-material/web 3.4.2 → 3.5.0

package/index.d.ts

@@ -3,6 +3,8 @@ import './app-bar/top-app-bar.js';
 import './button/button.js';
 import './button/button-set.js';
 import './button/fab.js';
+import './button/fab-menu.js';
+import './button/fab-menu-item.js';
 import './button/icon-button.js';
 import './card/card.js';
 import './chip/chip.js';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.js

@@ -3,6 +3,8 @@ import './app-bar/top-app-bar.js';
 import './button/button.js';
 import './button/button-set.js';
 import './button/fab.js';
+import './button/fab-menu.js';
+import './button/fab-menu-item.js';
 import './button/icon-button.js';
 import './card/card.js';
 import './chip/chip.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["import '@bart-krakowski/get-week-info-polyfill';\n\nimport './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './dialog/dialog.js';\nimport './dialog/dialog-builder.js';\nimport './dialog/confirm-dialog-builder.js';\nimport './dialog/message-dialog-builder.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './text-area/text-area.js';\nimport './select/select.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './progress/circular-progress.js';\nimport './progress/progress-bar.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './tab-bar/tab-bar.js';\nimport './tab-bar/tab.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './badge/badge.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './button-field/button-field.js';\nexport * from './calendar/calendar.js';\nexport * from './calendar/range-calendar.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './dialog/dialog.js';\nexport * from './dialog/dialog-builder.js';\nexport * from './dialog/confirm-dialog-builder.js';\nexport * from './dialog/message-dialog-builder.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './search/search.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './text-area/text-area.js';\nexport * from './select/select.js';\nexport * from './select/option.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './icon/icon.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/drawer-headline.js';\nexport * from './navigation/side-navigation.js';\nexport * from './overflow-menu/overflow-menu.js';\nexport * from './overflow-menu/overflow-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/progress-bar.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './tab-bar/tab-bar.js';\nexport * from './tab-bar/tab.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["import '@bart-krakowski/get-week-info-polyfill';\n\nimport './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/fab-menu.js';\nimport './button/fab-menu-item.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './dialog/dialog.js';\nimport './dialog/dialog-builder.js';\nimport './dialog/confirm-dialog-builder.js';\nimport './dialog/message-dialog-builder.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './text-area/text-area.js';\nimport './select/select.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './progress/circular-progress.js';\nimport './progress/progress-bar.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './tab-bar/tab-bar.js';\nimport './tab-bar/tab.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './badge/badge.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './button-field/button-field.js';\nexport * from './calendar/calendar.js';\nexport * from './calendar/range-calendar.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './dialog/dialog.js';\nexport * from './dialog/dialog-builder.js';\nexport * from './dialog/confirm-dialog-builder.js';\nexport * from './dialog/message-dialog-builder.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './search/search.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './text-area/text-area.js';\nexport * from './select/select.js';\nexport * from './select/option.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './icon/icon.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/drawer-headline.js';\nexport * from './navigation/side-navigation.js';\nexport * from './overflow-menu/overflow-menu.js';\nexport * from './overflow-menu/overflow-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/progress-bar.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './tab-bar/tab-bar.js';\nexport * from './tab-bar/tab.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}

package/list/list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAKpE,OAAO,qBAAqB,CAAC;AAE7B,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEY,UAAU,UAAS;IAEtD,MAAM,IAAI,kBAAkB;CAmBtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,qBAAqB,CAAC;AAE7B,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAU;IAEY,UAAU,UAAS;IAEtD,MAAM,IAAI,kBAAkB;CAuBtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/list/list-item.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './list-item.styles.js';
 import '../ripple/ripple.js';
 let UmListItem = class UmListItem extends LitElement {
@@ -13,18 +14,21 @@ let UmListItem = class UmListItem extends LitElement {
         const ripple = html `
       <u-ripple></u-ripple>
     `;
+        const containerClasses = classMap({ selectable: this.selectable });
         return html `
-      ${this.selectable ? ripple : nothing}
-      <slot name="leading" part="leading"></slot>
-      <div class="content" part="content">
-        <div class="headline" part="headline">
-          <slot></slot>
-        </div>
-        <div class="supporting-text" part="supporting-text">
-          <slot name="supporting-text"></slot>
+      <div class="container ${containerClasses}">
+        ${this.selectable ? ripple : nothing}
+        <slot name="leading-icon" part="leading"></slot>
+        <div class="content" part="content">
+          <div class="headline" part="headline">
+            <slot></slot>
+          </div>
+          <div class="supporting-text" part="supporting-text">
+            <slot name="supporting-text"></slot>
+          </div>
         </div>
+        <slot name="trailing-icon" part="trailing"></slot>
       </div>
-      <slot name="trailing" part="trailing"></slot>
     `;
     }
 };

package/list/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAGtB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGuC,eAAU,GAAG,KAAK,CAAC;IAqBjE,CAAC;aAvBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAIvB,MAAM;QACb,MAAM,MAAM,GAAG,IAAI,CAAA;;KAElB,CAAC;QAEF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;KAWrC,CAAC;IACJ,CAAC;;AApB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAoB;AAHpD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwBtB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './list-item.styles.js';\n\nimport '../ripple/ripple.js';\n\n@customElement('u-list-item')\nexport class UmListItem extends LitElement {\n  static override styles = styles;\n\n  @property({ type: Boolean, reflect: true }) selectable = false;\n\n  override render(): HTMLTemplateResult {\n    const ripple = html`\n      <u-ripple></u-ripple>\n    `;\n\n    return html`\n      ${this.selectable ? ripple : nothing}\n      <slot name=\"leading\" part=\"leading\"></slot>\n      <div class=\"content\" part=\"content\">\n        <div class=\"headline\" part=\"headline\">\n          <slot></slot>\n        </div>\n        <div class=\"supporting-text\" part=\"supporting-text\">\n          <slot name=\"supporting-text\"></slot>\n        </div>\n      </div>\n      <slot name=\"trailing\" part=\"trailing\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-list-item': UmListItem;\n  }\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../src/list/list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAGtB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAGuC,eAAU,GAAG,KAAK,CAAC;IAyBjE,CAAC;aA3BiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAIvB,MAAM;QACb,MAAM,MAAM,GAAG,IAAI,CAAA;;KAElB,CAAC;QAEF,MAAM,gBAAgB,GAAG,QAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAEnE,OAAO,IAAI,CAAA;8BACe,gBAAgB;UACpC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;;;;;;;;KAYvC,CAAC;IACJ,CAAC;;AAxB2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAoB;AAHpD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA4BtB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './list-item.styles.js';\n\nimport '../ripple/ripple.js';\n\n@customElement('u-list-item')\nexport class UmListItem extends LitElement {\n  static override styles = styles;\n\n  @property({ type: Boolean, reflect: true }) selectable = false;\n\n  override render(): HTMLTemplateResult {\n    const ripple = html`\n      <u-ripple></u-ripple>\n    `;\n\n    const containerClasses = classMap({ selectable: this.selectable });\n\n    return html`\n      <div class=\"container ${containerClasses}\">\n        ${this.selectable ? ripple : nothing}\n        <slot name=\"leading-icon\" part=\"leading\"></slot>\n        <div class=\"content\" part=\"content\">\n          <div class=\"headline\" part=\"headline\">\n            <slot></slot>\n          </div>\n          <div class=\"supporting-text\" part=\"supporting-text\">\n            <slot name=\"supporting-text\"></slot>\n          </div>\n        </div>\n        <slot name=\"trailing-icon\" part=\"trailing\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-list-item': UmListItem;\n  }\n}\n"]}

package/list/list-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6ClB,CAAC"}
+{"version":3,"file":"list-item.styles.d.ts","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiDlB,CAAC"}

package/list/list-item.styles.js

@@ -1,6 +1,10 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
+    display: block;
+  }
+
+  .container {
     position: relative;
     display: flex;
     align-items: center;
@@ -10,7 +14,7 @@ export const styles = css `
     gap: var(--u-list-item-gap, 16px);
   }
 
-  :host([selectable]) {
+  .selectable {
     cursor: pointer;
   }
 

package/list/list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: var(--u-list-item-min-height, 56px);\n    padding-block: var(--u-list-item-block-padding, 8px);\n    padding-inline: var(--u-list-item-inline-padding, 16px);\n    gap: var(--u-list-item-gap, 16px);\n  }\n\n  :host([selectable]) {\n    cursor: pointer;\n  }\n\n  slot:not([name]) {\n    display: block;\n    margin-inline-end: auto;\n  }\n\n  slot {\n    flex-shrink: 0;\n  }\n\n  .content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-list-item-headline-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-list-item-headline-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-list-item-headline-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-list-item-headline-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-list-item-supporting-text-line-height, var(--u-body-m-line-height, 1.25rem));\n    font-size: var(--u-list-item-supporting-text-font-size, var(--u-body-m-font-size, 0.875rem));\n    letter-spacing: var(--u-list-item-supporting-text-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));\n    font-weight: var(--u-list-item-supporting-text-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));\n    color: var(--u-list-item-supporting-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n`;\n"]}
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../src/list/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: var(--u-list-item-min-height, 56px);\n    padding-block: var(--u-list-item-block-padding, 8px);\n    padding-inline: var(--u-list-item-inline-padding, 16px);\n    gap: var(--u-list-item-gap, 16px);\n  }\n\n  .selectable {\n    cursor: pointer;\n  }\n\n  slot:not([name]) {\n    display: block;\n    margin-inline-end: auto;\n  }\n\n  slot {\n    flex-shrink: 0;\n  }\n\n  .content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-list-item-headline-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-list-item-headline-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-list-item-headline-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-list-item-headline-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-list-item-supporting-text-line-height, var(--u-body-m-line-height, 1.25rem));\n    font-size: var(--u-list-item-supporting-text-font-size, var(--u-body-m-font-size, 0.875rem));\n    letter-spacing: var(--u-list-item-supporting-text-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));\n    font-weight: var(--u-list-item-supporting-text-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));\n    color: var(--u-list-item-supporting-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n`;\n"]}

package/menu/menu-item.d.ts

@@ -3,34 +3,16 @@ import { UmButtonWrapper } from '../shared/button-wrapper.js';
 export declare class UmMenuItem extends UmButtonWrapper {
     #private;
     static styles: import("lit").CSSResultGroup[];
-    /**
-     * Force show focus ring
-     */
-    get active(): boolean;
-    set active(active: boolean);
-    /**
-     * Whether the menu item has leading icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasLeadingIcon: boolean;
-    /**
-     * Whether the menu item has trailing icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasTrailingIcon: boolean;
-    /**
-     * Whether the drawer item has badge or not
-     *
-     * _Note:_ Readonly
-     */
+    active: boolean;
+    private _hasLeadingIcon;
+    private _hasTrailingIcon;
     hasBadge: boolean;
     innerRole: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected renderContent(): HTMLTemplateResult;
-    protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
+    protected _renderDefaultTrailingIcon(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/menu/menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,qBACa,UAAW,SAAQ,eAAe;;IAC7C,OAAgB,MAAM,iCAAoC;IAI1D;;OAEG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EASzB;IAED;;;;OAIG;IACwE,cAAc,UAAS;IAElG;;;;OAIG;IACyE,eAAe,UAAS;IAEpG;;;;OAIG;IACiE,QAAQ,UAAS;IAE5E,SAAS,SAAc;IAEvB,iBAAiB;IAMjB,oBAAoB;cAOV,aAAa,IAAI,kBAAkB;IAgBtD,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAWvE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGxE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,qBACa,UAAW,SAAQ,eAAe;;IAC7C,OAAgB,MAAM,iCAAoC;IAEd,MAAM,UAAS;IAElD,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IAC0B,QAAQ,UAAS;IAE5E,SAAS,SAAc;IAEvB,iBAAiB;IAMjB,oBAAoB;cAOV,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAS/C,cAAc,IAAI,kBAAkB;IAgBvD,SAAS,CAAC,0BAA0B,IAAI,cAAc,GAAG,OAAO,OAAO;CAWxE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/menu/menu-item.js

@@ -1,49 +1,19 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { UmButtonWrapper } from '../shared/button-wrapper.js';
 import { styles } from './menu-item.styles.js';
 let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
     constructor() {
         super(...arguments);
-        this.#active = false;
-        /**
-         * Whether the menu item has leading icon or not
-         *
-         * _Note:_ Readonly
-         */
-        this.hasLeadingIcon = false;
-        /**
-         * Whether the menu item has trailing icon or not
-         *
-         * _Note:_ Readonly
-         */
-        this.hasTrailingIcon = false;
-        /**
-         * Whether the drawer item has badge or not
-         *
-         * _Note:_ Readonly
-         */
+        this.active = false;
+        this._hasLeadingIcon = false;
+        this._hasTrailingIcon = false;
         this.hasBadge = false;
         this.innerRole = 'menuitem';
         this.#handleMouseEnter = () => this.dispatchEvent(new CustomEvent('menu-item-mouseenter', { bubbles: true }));
     }
     static { this.styles = [UmButtonWrapper.styles, styles]; }
-    #active;
-    /**
-     * Force show focus ring
-     */
-    get active() {
-        return this.#active;
-    }
-    set active(active) {
-        this.#active = active;
-        if (active) {
-            this.classList.add('force-focus-ring');
-            return;
-        }
-        this.classList.remove('force-focus-ring');
-    }
     connectedCallback() {
         super.connectedCallback();
         this.role = 'presentation';
@@ -54,7 +24,15 @@ let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
         this.removeEventListener('mouseenter', this.#handleMouseEnter);
     }
     #handleMouseEnter;
-    renderContent() {
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            'force-focus-ring': this.active,
+            'leading-icon': this._hasLeadingIcon,
+            'trailing-icon': this._hasTrailingIcon,
+        };
+    }
+    _renderContent() {
         return html `
       <div class="icon leading">
         <slot name="leading-icon" aria-hidden="true" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
@@ -64,30 +42,30 @@ let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
       </span>
       <div class="icon trailing">
         <slot name="trailing-icon" aria-hidden="true" @slotchange="${this.#handleTrailingIconSlotChange}">
-          <span>${this.renderDefaultTrailingIcon()}</span>
+          <span>${this._renderDefaultTrailingIcon()}</span>
         </slot>
       </div>
     `;
     }
-    renderDefaultTrailingIcon() {
+    _renderDefaultTrailingIcon() {
         return nothing;
     }
     #handleLeadingIconSlotChange(e) {
-        this.hasLeadingIcon = e.target.assignedElements({ flatten: true }).length > 0;
+        this._hasLeadingIcon = e.target.assignedElements({ flatten: true }).length > 0;
     }
     #handleTrailingIconSlotChange(e) {
-        this.hasTrailingIcon = e.target.assignedElements({ flatten: true }).length > 0;
+        this._hasTrailingIcon = e.target.assignedElements({ flatten: true }).length > 0;
     }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmMenuItem.prototype, "active", null);
+], UmMenuItem.prototype, "active", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
-], UmMenuItem.prototype, "hasLeadingIcon", void 0);
+    state()
+], UmMenuItem.prototype, "_hasLeadingIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
-], UmMenuItem.prototype, "hasTrailingIcon", void 0);
+    state()
+], UmMenuItem.prototype, "_hasTrailingIcon", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-badge', reflect: true })
 ], UmMenuItem.prototype, "hasBadge", void 0);

package/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './menu-item.styles.js';\n\n@customElement('u-menu-item')\nexport class UmMenuItem extends UmButtonWrapper {\n  static override styles = [UmButtonWrapper.styles, styles];\n\n  #active = false;\n\n  /**\n   * Force show focus ring\n   */\n  @property({ type: Boolean, reflect: true })\n  get active(): boolean {\n    return this.#active;\n  }\n\n  set active(active: boolean) {\n    this.#active = active;\n\n    if (active) {\n      this.classList.add('force-focus-ring');\n      return;\n    }\n\n    this.classList.remove('force-focus-ring');\n  }\n\n  /**\n   * Whether the menu item has leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;\n\n  /**\n   * Whether the menu item has trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;\n\n  /**\n   * Whether the drawer item has badge or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-badge', reflect: true }) hasBadge = false;\n\n  override innerRole = 'menuitem';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.role = 'presentation';\n    this.addEventListener('mouseenter', this.#handleMouseEnter);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('mouseenter', this.#handleMouseEnter);\n  }\n\n  readonly #handleMouseEnter = () => this.dispatchEvent(new CustomEvent<UmMenuItem>('menu-item-mouseenter', { bubbles: true }));\n\n  protected override renderContent(): HTMLTemplateResult {\n    return html`\n      <div class=\"icon leading\">\n        <slot name=\"leading-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n      </div>\n      <span class=\"label\" id=\"text\">\n        <slot></slot>\n      </span>\n      <div class=\"icon trailing\">\n        <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n    `;\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  #handleLeadingIconSlotChange(e: Event) {\n    this.hasLeadingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  #handleTrailingIconSlotChange(e: Event) {\n    this.hasTrailingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-menu-item': UmMenuItem;\n  }\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAkB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,eAAe;IAAxC;;QAGuC,WAAM,GAAG,KAAK,CAAC;QAE1C,oBAAe,GAAG,KAAK,CAAC;QACxB,qBAAgB,GAAG,KAAK,CAAC;QAC0B,aAAQ,GAAG,KAAK,CAAC;QAE5E,cAAS,GAAG,UAAU,CAAC;QAavB,sBAAiB,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAa,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAsChI,CAAC;aA3DiB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAUjD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC;QAC3B,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAC9D,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACjE,CAAC;IAEQ,iBAAiB,CAAoG;IAE3G,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,kBAAkB,EAAE,IAAI,CAAC,MAAM;YAC/B,cAAc,EAAE,IAAI,CAAC,eAAe;YACpC,eAAe,EAAE,IAAI,CAAC,gBAAgB;SACvC,CAAC;IACJ,CAAC;IAEkB,cAAc;QAC/B,OAAO,IAAI,CAAA;;oEAEqD,IAAI,CAAC,4BAA4B;;;;;;qEAMhC,IAAI,CAAC,6BAA6B;kBACrF,IAAI,CAAC,0BAA0B,EAAE;;;KAG9C,CAAC;IACJ,CAAC;IAES,0BAA0B;QAClC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,4BAA4B,CAAC,CAAQ;QACnC,IAAI,CAAC,eAAe,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACtG,CAAC;IAED,6BAA6B,CAAC,CAAQ;QACpC,IAAI,CAAC,gBAAgB,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACvG,CAAC;;AAxD2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAgB;AAE1C;IAAhB,KAAK,EAAE;mDAAiC;AACxB;IAAhB,KAAK,EAAE;oDAAkC;AAC0B;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAP1E,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA4DtB","sourcesContent":["import { html, HTMLTemplateResult, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './menu-item.styles.js';\n\n@customElement('u-menu-item')\nexport class UmMenuItem extends UmButtonWrapper {\n  static override styles = [UmButtonWrapper.styles, styles];\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @state() private _hasLeadingIcon = false;\n  @state() private _hasTrailingIcon = false;\n  @property({ type: Boolean, attribute: 'has-badge', reflect: true }) hasBadge = false;\n\n  override innerRole = 'menuitem';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.role = 'presentation';\n    this.addEventListener('mouseenter', this.#handleMouseEnter);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('mouseenter', this.#handleMouseEnter);\n  }\n\n  readonly #handleMouseEnter = () => this.dispatchEvent(new CustomEvent<UmMenuItem>('menu-item-mouseenter', { bubbles: true }));\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      'force-focus-ring': this.active,\n      'leading-icon': this._hasLeadingIcon,\n      'trailing-icon': this._hasTrailingIcon,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    return html`\n      <div class=\"icon leading\">\n        <slot name=\"leading-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n      </div>\n      <span class=\"label\" id=\"text\">\n        <slot></slot>\n      </span>\n      <div class=\"icon trailing\">\n        <slot name=\"trailing-icon\" aria-hidden=\"true\" @slotchange=\"${this.#handleTrailingIconSlotChange}\">\n          <span>${this._renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n    `;\n  }\n\n  protected _renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  #handleLeadingIconSlotChange(e: Event) {\n    this._hasLeadingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  #handleTrailingIconSlotChange(e: Event) {\n    this._hasTrailingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-menu-item': UmMenuItem;\n  }\n}\n"]}

package/menu/menu-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmDlB,CAAC"}
+{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoDlB,CAAC"}

package/menu/menu-item.styles.js

@@ -5,6 +5,9 @@ export const styles = css `
     --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);
     --_menu-item-padding: var(--u-menu-item-padding, 12px);
     --u-focus-ring-outline-offset: -4px;
+  }
+
+  .container {
     height: var(--u-menu-item-height, 56px);
     padding-inline: var(--_menu-item-padding);
     color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));
@@ -14,12 +17,10 @@ export const styles = css `
     letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
     font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
   }
-
-  :host(:not([has-leading-icon])) .leading {
+  .container:not(.leading-icon) .leading {
     display: none;
   }
-
-  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {
+  .container:not(.trailing-icon) .trailing:has(slot[name=trailing-icon] span:empty) {
     display: none;
   }
 
@@ -38,7 +39,7 @@ export const styles = css `
     gap: var(--u-menu-item-icon-margin, 12px);
   }
 
-  :host(.force-focus-ring) .button,
+  .force-focus-ring .button,
   .button:focus-visible {
     border-radius: var(--u-spacing-small, 8px);
   }

package/menu/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  :host(:not([has-leading-icon])) .leading {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_menu-item-icon-size);\n    height: var(--_menu-item-icon-size);\n    font-size: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n"]}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../src/menu/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);\n    --_menu-item-padding: var(--u-menu-item-padding, 12px);\n    --u-focus-ring-outline-offset: -4px;\n  }\n\n  .container {\n    height: var(--u-menu-item-height, 56px);\n    padding-inline: var(--_menu-item-padding);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-menu-item-label-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-menu-item-label-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-menu-item-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-menu-item-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n  }\n  .container:not(.leading-icon) .leading {\n    display: none;\n  }\n  .container:not(.trailing-icon) .trailing:has(slot[name=trailing-icon] span:empty) {\n    display: none;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_menu-item-icon-size);\n    height: var(--_menu-item-icon-size);\n    font-size: var(--_menu-item-icon-size);\n    color: var(--u-menu-item-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    justify-content: flex-start;\n    gap: var(--u-menu-item-icon-margin, 12px);\n  }\n\n  .force-focus-ring .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    flex: 1;\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n`;\n"]}

package/navigation/drawer-item.d.ts

@@ -2,18 +2,8 @@ import { HTMLTemplateResult } from 'lit';
 import { UmButtonWrapper } from '../shared/button-wrapper.js';
 export declare class UmDrawerItem extends UmButtonWrapper {
     static styles: import("lit").CSSResultGroup[];
-    /**
-     * Whether the drawer item has icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasIcon: boolean;
-    /**
-     * Whether the drawer item has badge or not
-     *
-     * _Note:_ Readonly
-     */
-    hasBadge: boolean;
+    _hasIcon: boolean;
+    _hasBadge: boolean;
     /**
      * Whether the drawer item is active or not
      *
@@ -27,10 +17,11 @@ export declare class UmDrawerItem extends UmButtonWrapper {
     private readonly assignedIcons;
     private readonly assignedBadges;
     connectedCallback(): void;
-    protected renderContent(): HTMLTemplateResult;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
     private handleIconSlotChange;
     private handleBadgeSlotChange;
-    handleClick(): void;
+    _handleClick(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/navigation/drawer-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-item.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,qBACa,YAAa,SAAQ,eAAe;IAE/C,OAAgB,MAAM,iCAGpB;IAEF;;;;OAIG;IACgE,OAAO,UAAS;IAEnF;;;;OAIG;IACiE,QAAQ,UAAS;IAErF;;;;OAIG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACwE,cAAc,UAAS;IAGlG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAG/C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEvC,iBAAiB;cAKP,aAAa,IAAI,kBAAkB;IAiBtD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAIpB,WAAW,IAAI,IAAI;CAW7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"drawer-item.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,qBACa,YAAa,SAAQ,eAAe;IAE/C,OAAgB,MAAM,iCAGpB;IAEO,QAAQ,UAAS;IACjB,SAAS,UAAS;IAE3B;;;;OAIG;IACyC,MAAM,UAAS;IAE3D;;OAEG;IACwE,cAAc,UAAS;IAGlG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAG/C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEvC,iBAAiB;cAKP,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAQ/C,cAAc,IAAI,kBAAkB;IAiBvD,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,qBAAqB;IAIpB,YAAY,IAAI,IAAI;CAW9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/navigation/drawer-item.js

@@ -1,23 +1,13 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
 import { UmButtonWrapper } from '../shared/button-wrapper.js';
 import { styles } from './drawer-item.styles.js';
 let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
     constructor() {
         super(...arguments);
-        /**
-         * Whether the drawer item has icon or not
-         *
-         * _Note:_ Readonly
-         */
-        this.hasIcon = false;
-        /**
-         * Whether the drawer item has badge or not
-         *
-         * _Note:_ Readonly
-         */
-        this.hasBadge = false;
+        this._hasIcon = false;
+        this._hasBadge = false;
         /**
          * Whether the drawer item is active or not
          *
@@ -37,7 +27,14 @@ let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
         super.connectedCallback();
         this.setAttribute('aria-labelledby', 'label');
     }
-    renderContent() {
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            'has-icon': this._hasIcon,
+            'has-badge': this._hasBadge,
+        };
+    }
+    _renderContent() {
         return html `
       <div class="icon">
         <slot
@@ -54,12 +51,12 @@ let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
     `;
     }
     handleIconSlotChange() {
-        this.hasIcon = this.assignedIcons.length > 0;
+        this._hasIcon = this.assignedIcons.length > 0;
     }
     handleBadgeSlotChange() {
-        this.hasBadge = this.assignedBadges.length > 0;
+        this._hasBadge = this.assignedBadges.length > 0;
     }
-    handleClick() {
+    _handleClick() {
         if (this.keepDrawerOpen) {
             return;
         }
@@ -70,11 +67,11 @@ let UmDrawerItem = class UmDrawerItem extends UmButtonWrapper {
     }
 };
 __decorate([
-    property({ type: Boolean, attribute: 'has-icon', reflect: true })
-], UmDrawerItem.prototype, "hasIcon", void 0);
+    state()
+], UmDrawerItem.prototype, "_hasIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-badge', reflect: true })
-], UmDrawerItem.prototype, "hasBadge", void 0);
+    state()
+], UmDrawerItem.prototype, "_hasBadge", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmDrawerItem.prototype, "active", void 0);

package/navigation/drawer-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-item.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,eAAe;IAA1C;;QAOL;;;;WAIG;QACgE,YAAO,GAAG,KAAK,CAAC;QAEnF;;;;WAIG;QACiE,aAAQ,GAAG,KAAK,CAAC;QAErF;;;;WAIG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACwE,mBAAc,GAAG,KAAK,CAAC;IAiDpG,CAAC;aA9EiB,WAAM,GAAG;QACvB,eAAe,CAAC,MAAM;QACtB,MAAM;KACP,AAHqB,CAGpB;IAkCO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAChD,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;;;;yBAMzB,IAAI,CAAC,qBAAqB;;KAE9C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IACjD,CAAC;IAEQ,WAAW;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAEzD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,YAAY,GAAG,KAAK,CAAC;QACtC,CAAC;IACH,CAAC;;AAnEkE;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAiB;AAOf;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAOzC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAKgB;IAA1E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAwB;AAGjF;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACR;AAG9B;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACR;AArCrC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgFxB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './drawer-item.styles.js';\n\n@customElement('u-drawer-item')\nexport class UmDrawerItem extends UmButtonWrapper {\n\n  static override styles = [\n    UmButtonWrapper.styles,\n    styles,\n  ];\n\n  /**\n   * Whether the drawer item has icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-icon', reflect: true }) hasIcon = false;\n\n  /**\n   * Whether the drawer item has badge or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-badge', reflect: true }) hasBadge = false;\n\n  /**\n   * Whether the drawer item is active or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * If true, it will not attempt to close de navigation drawer on click\n   */\n  @property({ type: Boolean, attribute: 'keep-drawer-open', reflect: true }) keepDrawerOpen = false;\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'badge', flatten: true })\n  private readonly assignedBadges!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('aria-labelledby', 'label');\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n    return html`\n      <div class=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=\"${this.handleIconSlotChange}\"></slot>\n      </div>\n      <span class=\"label\" id=\"text\"><slot></slot></span>\n      <span class=\"badge\">\n        <slot\n          name=\"badge\"\n          @slotchange=\"${this.handleBadgeSlotChange}\"></slot>\n      </span>\n    `;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n\n  private handleBadgeSlotChange() {\n    this.hasBadge = this.assignedBadges.length > 0;\n  }\n\n  override handleClick(): void {\n    if (this.keepDrawerOpen) {\n      return;\n    }\n\n    const sideNavigation = this.closest('u-side-navigation');\n\n    if (sideNavigation) {\n      sideNavigation.toggleDrawer = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer-item': UmDrawerItem;\n  }\n}\n"]}
+{"version":3,"file":"drawer-item.js","sourceRoot":"","sources":["../../src/navigation/drawer-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,eAAe;IAA1C;;QAOI,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QAE3B;;;;WAIG;QACyC,WAAM,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACwE,mBAAc,GAAG,KAAK,CAAC;IAyDpG,CAAC;aA3EiB,WAAM,GAAG;QACvB,eAAe,CAAC,MAAM;QACtB,MAAM;KACP,AAHqB,CAGpB;IAuBO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;IAChD,CAAC;IAEkB,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,WAAW,EAAE,IAAI,CAAC,SAAS;SAC5B,CAAC;IACJ,CAAC;IAEkB,cAAc;QAC/B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;;;;yBAMzB,IAAI,CAAC,qBAAqB;;KAE9C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;IAClD,CAAC;IAEQ,YAAY;QACnB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAEzD,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,YAAY,GAAG,KAAK,CAAC;QACtC,CAAC;IACH,CAAC;;AArEQ;IAAR,KAAK,EAAE;8CAAkB;AACjB;IAAR,KAAK,EAAE;+CAAmB;AAOiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAKgB;IAA1E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAwB;AAGjF;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACR;AAG9B;IADhB,qBAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACR;AA1BrC,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA6ExB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './drawer-item.styles.js';\n\n@customElement('u-drawer-item')\nexport class UmDrawerItem extends UmButtonWrapper {\n\n  static override styles = [\n    UmButtonWrapper.styles,\n    styles,\n  ];\n\n  @state() _hasIcon = false;\n  @state() _hasBadge = false;\n\n  /**\n   * Whether the drawer item is active or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * If true, it will not attempt to close de navigation drawer on click\n   */\n  @property({ type: Boolean, attribute: 'keep-drawer-open', reflect: true }) keepDrawerOpen = false;\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'badge', flatten: true })\n  private readonly assignedBadges!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('aria-labelledby', 'label');\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      'has-icon': this._hasIcon,\n      'has-badge': this._hasBadge,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    return html`\n      <div class=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=\"${this.handleIconSlotChange}\"></slot>\n      </div>\n      <span class=\"label\" id=\"text\"><slot></slot></span>\n      <span class=\"badge\">\n        <slot\n          name=\"badge\"\n          @slotchange=\"${this.handleBadgeSlotChange}\"></slot>\n      </span>\n    `;\n  }\n\n  private handleIconSlotChange() {\n    this._hasIcon = this.assignedIcons.length > 0;\n  }\n\n  private handleBadgeSlotChange() {\n    this._hasBadge = this.assignedBadges.length > 0;\n  }\n\n  override _handleClick(): void {\n    if (this.keepDrawerOpen) {\n      return;\n    }\n\n    const sideNavigation = this.closest('u-side-navigation');\n\n    if (sideNavigation) {\n      sideNavigation.toggleDrawer = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-drawer-item': UmDrawerItem;\n  }\n}\n"]}

package/navigation/drawer-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkDlB,CAAC"}
+{"version":3,"file":"drawer-item.styles.d.ts","sourceRoot":"","sources":["../../src/navigation/drawer-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmDlB,CAAC"}

package/navigation/drawer-item.styles.js

@@ -4,6 +4,9 @@ export const styles = css `
     display: block;
     --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.5rem);
     --_drawer-item-padding: var(--u-drawer-item-padding, 16px);
+  }
+
+  .container {
     font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
     line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));
     font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));
@@ -15,18 +18,16 @@ export const styles = css `
     border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));
     color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
+  .container:not(.has-icon) .icon, .container:not(.has-badge) .badge {
+    display: none;
+  }
 
-  :host(.active),
-  :host([active]) {
+  :host(.active) .container,
+  :host([active]) .container {
     background-color: var(--u-drawer-item-label-active-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
     color: var(--u-drawer-item-label-active-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
   }
 
-  :host(:not([has-icon])) .icon,
-  :host(:not([has-badge])) .badge {
-    display: none;
-  }
-
   .icon {
     display: flex;
     width: 1em;

package/navigation/drawer-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"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,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.5rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host(.active),\n  :host([active]) {\n    background-color: var(--u-drawer-item-label-active-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-drawer-item-label-active-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host(:not([has-icon])) .icon,\n  :host(:not([has-badge])) .badge {\n    display: none;\n  }\n\n  .icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_drawer-item-icon-size);\n    line-height: 1em;\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`;\n"]}
+{"version":3,"file":"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,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_drawer-item-icon-size: var(--u-drawer-item-icon-size, 1.5rem);\n    --_drawer-item-padding: var(--u-drawer-item-padding, 16px);\n  }\n\n  .container {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-drawer-item-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-drawer-item-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-drawer-item-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-drawer-item-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    height: var(--u-drawer-item-height, 56px);\n    padding-inline: var(--_drawer-item-padding);\n    margin-inline: calc(var(--_drawer-item-padding) * -1);\n    border-radius: var(--u-drawer-item-shape-corner, var(--u-shape-corner-full, 9999px));\n    color: var(--u-drawer-item-label-inactive-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n  .container:not(.has-icon) .icon, .container:not(.has-badge) .badge {\n    display: none;\n  }\n\n  :host(.active) .container,\n  :host([active]) .container {\n    background-color: var(--u-drawer-item-label-active-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-drawer-item-label-active-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  .icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--_drawer-item-icon-size);\n    line-height: 1em;\n    margin-inline-end: var(--u-drawer-item-icon-margin, 16px);\n  }\n\n  .badge {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-inline-start: auto;\n    padding-inline: var(--u-drawer-item-badge-padding, 12px 8px);\n  }\n\n  .content {\n    justify-content: flex-start;\n  }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "Material web components",
   "type": "module",
   "keywords": [