@momentum-design/components 0.122.13 → 0.122.15

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

@@ -1,6 +1,7 @@
 import { CSSResult } from 'lit';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import type { VariantType } from './alertchip.types';
+declare const AlertChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
 /**
  * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
  *
@@ -27,7 +28,7 @@ import type { VariantType } from './alertchip.types';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-declare class AlertChip extends Buttonsimple {
+declare class AlertChip extends AlertChip_base {
     /**
      * The variant of the alertchip. It supports 5 variants
      * - neutral

package/dist/components/alertchip/alertchip.component.js

@@ -11,6 +11,7 @@ import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import styles from './alertchip.styles';
 import { DEFAULTS } from './alertchip.constants';
 import { getAlertIcon } from './alertchip.utils';
@@ -40,7 +41,7 @@ import { getAlertIcon } from './alertchip.utils';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.
  * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.
  */
-class AlertChip extends Buttonsimple {
+class AlertChip extends IconNameMixin(Buttonsimple) {
     constructor() {
         super(...arguments);
         /**
@@ -72,7 +73,7 @@ class AlertChip extends Buttonsimple {
     }
     render() {
         return html `
-      <mdc-icon part="icon" name="${getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
+      <mdc-icon part="icon" name="${this.iconName || getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
       ${this.label
             ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
             >${this.label}</mdc-text

package/dist/components/alertchip/alertchip.styles.js

@@ -21,10 +21,14 @@ const styles = css `
 
   :host::part(label) {
     color: var(--mdc-chip-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
   :host::part(icon) {
     color: var(--mdc-chip-icon-color);
+    flex-shrink: 0;
   }
 
   :host([variant='neutral']:hover) {

package/dist/components/chip/chip.component.js

@@ -83,7 +83,7 @@ class Chip extends IconNameMixin(Buttonsimple) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

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

@@ -116,6 +116,15 @@ declare class ListItem extends ListItem_base {
      * @default undefined
      */
     dataIndex?: number;
+    /**
+     * Indicates whether the list item is active.
+     * When set to true, the list item appears in a active state.
+     *
+     * NOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.
+     *
+     * @default undefined
+     */
+    active?: boolean;
     constructor();
     connectedCallback(): void;
     /**

package/dist/components/listitem/listitem.component.js

@@ -230,7 +230,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
         <div part="leading">
           ${this.renderLeadingControls()}
           <div part="leading-text">
-            ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
+            ${this.getText('leading-text-primary-label', this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_REGULAR, this.label)}
             ${this.getText('leading-text-secondary-label', TYPE.BODY_SMALL_REGULAR, this.secondaryLabel)}
             ${this.getText('leading-text-tertiary-label', TYPE.BODY_SMALL_REGULAR, this.tertiaryLabel)}
           </div>
@@ -287,4 +287,8 @@ __decorate([
     property({ type: Number, reflect: true, attribute: 'data-index' }),
     __metadata("design:type", Number)
 ], ListItem.prototype, "dataIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'active' }),
+    __metadata("design:type", Boolean)
+], ListItem.prototype, "active", void 0);
 export default ListItem;

package/dist/components/listitem/listitem.styles.js

@@ -3,6 +3,7 @@ import { hostFocusRingStyles } from '../../utils/styles';
 const styles = css `
   :host {
     --mdc-listitem-default-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-listitem-default-active-background-color: var(--mds-color-theme-background-primary-active);
     --mdc-listitem-background-color-hover: var(--mds-color-theme-background-primary-hover);
     --mdc-listitem-background-color-active: var(--mds-color-theme-background-primary-active);
     --mdc-listitem-primary-label-color: var(--mds-color-theme-text-primary-normal);
@@ -62,6 +63,9 @@ const styles = css `
     color: var(--mdc-listitem-disabled-color);
     cursor: default;
   }
+  :host([active]) {
+    background-color: var(--mdc-listitem-default-active-background-color);
+  }
   :host(:hover) {
     background-color: var(--mdc-listitem-background-color-hover);
   }

package/dist/components/staticchip/staticchip.component.js

@@ -65,7 +65,7 @@ class StaticChip extends IconNameMixin(Component) {
     renderIcon() {
         if (!this.iconName)
             return nothing;
-        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
     }
     render() {
         return html `

package/dist/components/staticchip/staticchip.styles.js

@@ -18,6 +18,16 @@ const styles = css `
     background-color: var(--mdc-chip-background-color);
   }
 
+  :host::part(icon) {
+    flex-shrink: 0;
+  }
+
+  :host::part(label) {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   :host([color='cobalt']) {
     --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-normal);