@momentum-design/components 0.120.22 → 0.120.24

package/dist/components/option/option.component.d.ts

@@ -1,4 +1,4 @@
-import type { CSSResult, PropertyValues } from 'lit';
+import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import type { IconNames } from '../icon/icon.types';
 import ListItem from '../listitem/listitem.component';
 declare const Option_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & typeof ListItem;
@@ -50,7 +50,8 @@ declare class Option extends Option_base {
     ariaLabel: string | null;
     connectedCallback(): void;
     update(changedProperties: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
+    private renderIcon;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Option;

package/dist/components/option/option.component.js

@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
 import ListItem from '../listitem/listitem.component';
@@ -80,22 +79,20 @@ class Option extends FormInternalsMixin(ListItem) {
             this.dispatchModifiedEvent(this.selected ? 'selected' : 'unselected');
         }
     }
+    renderIcon(slotName, iconName) {
+        return html ` <mdc-icon length-unit="rem" slot="${slotName}" name="${iconName}"></mdc-icon> `;
+    }
     render() {
-        const prefixIconContent = this.prefixIcon
-            ? html `
-          <div part="leading-icon">
-            <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
-          </div>
-        `
-            : nothing;
-        const trailingContent = this.selected
-            ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
-            : nothing;
+        const trailingContent = this.selected ? this.renderIcon('trailing-controls', SELECTED_ICON_NAME) : nothing;
         return html `
-      ${prefixIconContent}
-      <div part="leading-text">
-        ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
-        ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+      <div part="leading">
+        <slot name="leading-controls">
+          ${this.prefixIcon ? this.renderIcon('leading-controls', this.prefixIcon) : nothing}
+        </slot>
+        <div part="leading-text">
+          ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+          ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
+        </div>
       </div>
       <div part="trailing">${trailingContent}</div>
     `;

package/dist/components/option/option.styles.js

@@ -9,7 +9,6 @@ const styles = [
       flex-shrink: 0;
     }
 
-    :host::part(leading-icon),
     :host::part(trailing) {
       display: flex;
       align-items: center;
@@ -20,9 +19,6 @@ const styles = [
       flex: 1;
     }
 
-    :host::part(leading-icon) {
-      margin-inline-end: var(--mdc-listitem-column-gap);
-    }
     :host::part(trailing) {
       margin-inline-start: var(--mdc-listitem-column-gap);
     }

package/dist/components/tab/tab.component.js

@@ -221,9 +221,11 @@ class Tab extends IconNameMixin(Buttonsimple) {
     render() {
         return html `
       <div part="container">
-        ${this.iconName
+        <slot name="prefix">
+          ${this.iconName
             ? html ` <mdc-icon name="${this.iconName}" size="1" length-unit="rem" part="icon"></mdc-icon>`
             : nothing}
+        </slot>
         ${this.text
             ? html ` <mdc-text
               type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}