@momentum-design/components 0.106.8 → 0.107.1

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

@@ -10,8 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
-import { Component } from '../../models';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import StaticChip from '../staticchip/staticchip.component';
 import { DEFAULTS } from './chip.constants';
 import styles from './chip.styles';
 /**
@@ -95,7 +95,7 @@ class Chip extends IconNameMixin(Buttonsimple) {
     `;
     }
 }
-Chip.styles = [...Component.styles, ...styles];
+Chip.styles = [...StaticChip.styles, ...styles];
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

package/dist/components/chip/chip.constants.d.ts

@@ -1,16 +1,5 @@
+import { COLOR } from '../staticchip/staticchip.constants';
 declare const TAG_NAME: "mdc-chip";
-declare const COLOR: {
-    readonly DEFAULT: "default";
-    readonly COBALT: "cobalt";
-    readonly GOLD: "gold";
-    readonly LIME: "lime";
-    readonly MINT: "mint";
-    readonly ORANGE: "orange";
-    readonly PINK: "pink";
-    readonly PURPLE: "purple";
-    readonly SLATE: "slate";
-    readonly VIOLET: "violet";
-};
 declare const DEFAULTS: {
     readonly COLOR: "default";
     readonly TEXT_TYPE: "body-midsize-regular";

package/dist/components/chip/chip.constants.js

@@ -1,20 +1,9 @@
 import { ROLE } from '../../utils/roles';
 import utils from '../../utils/tag-name';
 import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
+import { COLOR } from '../staticchip/staticchip.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 const TAG_NAME = utils.constructTagName('chip');
-const COLOR = {
-    DEFAULT: 'default',
-    COBALT: 'cobalt',
-    GOLD: 'gold',
-    LIME: 'lime',
-    MINT: 'mint',
-    ORANGE: 'orange',
-    PINK: 'pink',
-    PURPLE: 'purple',
-    SLATE: 'slate',
-    VIOLET: 'violet',
-};
 const DEFAULTS = {
     COLOR: COLOR.DEFAULT,
     TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,

package/dist/components/chip/chip.styles.js

@@ -2,21 +2,8 @@ import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = css `
   :host {
-    height: 1.5rem;
-    gap: 0.25rem;
-    padding: 0 0.5rem;
-    border-radius: 0.25rem;
-    border: 1px solid;
     cursor: pointer;
-    white-space: nowrap;
-
-    --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
-
-    color: var(--mdc-chip-color);
-    border-color: var(--mdc-chip-border-color);
-    background-color: var(--mdc-chip-background-color);
+    height: 1.5rem;
   }
 
   :host([color='default']:hover) {
@@ -27,11 +14,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-default-active);
   }
 
-  :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);
-  }
-
   :host([color='cobalt']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-hover);
   }
@@ -40,11 +22,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-cobalt-active);
   }
 
-  :host([color='gold']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-gold);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-normal);
-  }
-
   :host([color='gold']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-hover);
   }
@@ -53,11 +30,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-active);
   }
 
-  :host([color='lime']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-lime);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-normal);
-  }
-
   :host([color='lime']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-hover);
   }
@@ -66,11 +38,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-active);
   }
 
-  :host([color='mint']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-mint);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-normal);
-  }
-
   :host([color='mint']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-hover);
   }
@@ -79,11 +46,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-active);
   }
 
-  :host([color='pink']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-pink);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-normal);
-  }
-
   :host([color='pink']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-hover);
   }
@@ -92,11 +54,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-active);
   }
 
-  :host([color='purple']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-purple);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-normal);
-  }
-
   :host([color='purple']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-hover);
   }
@@ -105,11 +62,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-active);
   }
 
-  :host([color='orange']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-orange);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-normal);
-  }
-
   :host([color='orange']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-hover);
   }
@@ -118,11 +70,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-active);
   }
 
-  :host([color='slate']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-slate);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-normal);
-  }
-
   :host([color='slate']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-hover);
   }
@@ -131,11 +78,6 @@ const styles = css `
     --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-active);
   }
 
-  :host([color='violet']) {
-    --mdc-chip-border-color: var(--mds-color-theme-outline-label-violet);
-    --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-normal);
-  }
-
   :host([color='violet']:hover) {
     --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-hover);
   }

package/dist/components/menupopover/menupopover.component.js

@@ -374,11 +374,9 @@ class MenuPopover extends Popover {
         return super.isOpenUpdated(oldValue, newValue);
     }
     async firstUpdated(changedProperties) {
-        var _a;
         await super.firstUpdated(changedProperties);
         this.collectMenuItems();
         this.resetTabIndexes(0);
-        (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ROLE.MENU);
     }
     /**
      * Reset all tabindex to -1 and set the tabindex of the current menu item to 0

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

@@ -8,6 +8,10 @@ declare const Popover_base: import("../../utils/mixins/index.types").Constructor
  * The popover automatically positions itself based on available space and
  * supports dynamic height adjustments with scrollable content when needed。
  *
+ * Note:
+ *  - A component (button) can trigger more than one popover, but only one of them should change the
+ *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
@@ -261,18 +265,17 @@ declare class Popover extends Popover_base {
      */
     ariaDescribedby: string | null;
     /**
-     * Disable setting the aria-expanded attribute on trigger element.
-     * Make sure to set this to false when the popover is interactive.
+     * Disable setting the `aria-expanded` attribute on trigger element.
+     *
+     * Note, when `disable-aria-expanded` is true
+     *  - when its value change after first update to
+     *    - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover
+     *      registered to the same trigger
+     *      - `false`: check `aria-expanded` value and update it if necessary.
+     *  - aria-haspopup will be disabled as well
      * @default false
      */
     disableAriaExpanded: boolean;
-    /**
-     * Disable setting the aria-haspopup attribute on trigger element.
-     * Make sure to set this to true when the popover is extended and its role
-     * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
-     * @default false
-     */
-    disableAriaHasPopup: boolean;
     /**
      * If a tooltip is connected to the same trigger element,
      * this property will keep the connected tooltip closed if this popover is open.

package/dist/components/popover/popover.component.js

@@ -27,6 +27,10 @@ import { PopoverUtils } from './popover.utils';
  * The popover automatically positions itself based on available space and
  * supports dynamic height adjustments with scrollable content when needed。
  *
+ * Note:
+ *  - A component (button) can trigger more than one popover, but only one of them should change the
+ *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
@@ -261,18 +265,17 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          */
         this.ariaDescribedby = null;
         /**
-         * Disable setting the aria-expanded attribute on trigger element.
-         * Make sure to set this to false when the popover is interactive.
+         * Disable setting the `aria-expanded` attribute on trigger element.
+         *
+         * Note, when `disable-aria-expanded` is true
+         *  - when its value change after first update to
+         *    - `true`: popover will not remove the `aria-expanded` to avoid conflicts when there are more than one popover
+         *      registered to the same trigger
+         *      - `false`: check `aria-expanded` value and update it if necessary.
+         *  - aria-haspopup will be disabled as well
          * @default false
          */
         this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
-        /**
-         * Disable setting the aria-haspopup attribute on trigger element.
-         * Make sure to set this to true when the popover is extended and its role
-         * is not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.
-         * @default false
-         */
-        this.disableAriaHasPopup = DEFAULTS.DISABLE_ARIA_HAS_POPUP;
         /**
          * If a tooltip is connected to the same trigger element,
          * this property will keep the connected tooltip closed if this popover is open.
@@ -699,9 +702,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         if (changedProperties.has('disableAriaExpanded')) {
             this.utils.updateAriaExpandedAttribute();
         }
-        if (changedProperties.has('interactive') || changedProperties.has('disableAriaHasPopup')) {
-            this.utils.updateAriaHasPopupAttribute();
-        }
         if (changedProperties.has('focusTrap')) {
             // if focusTrap turned false and the popover is visible, deactivate the focus trap
             if (!this.focusTrap && this.visible) {
@@ -795,13 +795,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 this.removeEventListener('keydown', this.onEscapeKeydown);
                 (_c = this.triggerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            if (this.disableAriaExpanded) {
-                this.triggerElement.removeAttribute('aria-expanded');
-            }
-            // Remove aria-haspopup if the popover is not interactive
-            if (!this.interactive) {
-                this.triggerElement.removeAttribute('aria-haspopup');
-            }
             this.deactivatePreventScroll();
             (_d = this.deactivateFocusTrap) === null || _d === void 0 ? void 0 : _d.call(this);
             if (this.focusBackToTrigger) {
@@ -972,10 +965,6 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-expanded' }),
     __metadata("design:type", Boolean)
 ], Popover.prototype, "disableAriaExpanded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'disable-aria-haspopup' }),
-    __metadata("design:type", Boolean)
-], Popover.prototype, "disableAriaHasPopup", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'keep-connected-tooltip-closed' }),
     __metadata("design:type", Boolean)

package/dist/components/popover/popover.constants.d.ts

@@ -48,7 +48,6 @@ declare const DEFAULTS: {
     readonly ROLE: "dialog";
     readonly Z_INDEX: 1000;
     readonly DISABLE_ARIA_EXPANDED: false;
-    readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly PROPAGATE_EVENT_ON_ESCAPE: false;
     readonly KEEP_CONNECTED_TOOLTIP_CLOSED: true;
     readonly STRATEGY: "absolute";

package/dist/components/popover/popover.constants.js

@@ -49,7 +49,6 @@ const DEFAULTS = {
     ROLE: 'dialog',
     Z_INDEX: 1000,
     DISABLE_ARIA_EXPANDED: false,
-    DISABLE_ARIA_HAS_POPUP: false,
     PROPAGATE_EVENT_ON_ESCAPE: false,
     KEEP_CONNECTED_TOOLTIP_CLOSED: true,
     STRATEGY: 'absolute',

package/dist/components/popover/popover.utils.d.ts

@@ -32,10 +32,6 @@ export declare class PopoverUtils {
      * Updates the aria-modal attribute based on the popover's role.
      */
     updateAriaModal(): void;
-    /**
-     * Updates the aria-haspopup attribute on the trigger element.
-     */
-    updateAriaHasPopupAttribute(): void;
     /**
      * Updates the aria-expanded attribute on the trigger element.
      */

package/dist/components/popover/popover.utils.js

@@ -111,28 +111,14 @@ export class PopoverUtils {
             this.popover.removeAttribute('aria-modal');
         }
     }
-    /**
-     * Updates the aria-haspopup attribute on the trigger element.
-     */
-    updateAriaHasPopupAttribute() {
-        var _a, _b, _c;
-        if (this.popover.interactive && !this.popover.disableAriaHasPopup) {
-            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.getAttribute('aria-haspopup')) || 'dialog');
-        }
-        else {
-            (_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-haspopup');
-        }
-    }
     /**
      * Updates the aria-expanded attribute on the trigger element.
      */
     updateAriaExpandedAttribute() {
-        var _a, _b;
-        if (this.popover.disableAriaExpanded) {
-            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('aria-expanded');
-        }
-        else {
-            (_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', `${this.popover.visible}`);
+        var _a, _b, _c;
+        if (!this.popover.disableAriaExpanded) {
+            (_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', `${this.popover.visible}`);
+            (_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-haspopup', ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.getAttribute('aria-haspopup')) || this.popover.role || 'dialog');
         }
     }
     /**

package/dist/components/staticchip/index.d.ts

@@ -0,0 +1,9 @@
+import StaticChip from './staticchip.component';
+import '../text';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-staticchip']: StaticChip;
+    }
+}
+export default StaticChip;

package/dist/components/staticchip/index.js

@@ -0,0 +1,6 @@
+import StaticChip from './staticchip.component';
+import { TAG_NAME } from './staticchip.constants';
+import '../text';
+import '../icon';
+StaticChip.register(TAG_NAME);
+export default StaticChip;

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

@@ -0,0 +1,54 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { ColorType } from './staticchip.types';
+declare const StaticChip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Component;
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+declare class StaticChip extends StaticChip_base {
+    /**
+     * The color of the chip. It supports the following colors
+     * - default
+     * - cobalt
+     * - gold
+     * - lime
+     * - mint
+     * - orange
+     * - pink
+     * - purple
+     * - slate
+     * - violet
+     *
+     * @default default
+     */
+    color: ColorType;
+    /**
+     * The visible label text of the chip.
+     *
+     * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+     * including empty spaces to split words.
+     */
+    label: string;
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    private renderIcon;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticChip;

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

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { Component } from '../../models';
+import { DEFAULTS } from './staticchip.constants';
+import styles from './staticchip.styles';
+/**
+ * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.
+ *
+ *
+ * @tagname mdc-staticchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the static chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the static chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the static chip.
+ *
+ */
+class StaticChip extends IconNameMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The color of the chip. It supports the following colors
+         * - default
+         * - cobalt
+         * - gold
+         * - lime
+         * - mint
+         * - orange
+         * - pink
+         * - purple
+         * - slate
+         * - violet
+         *
+         * @default default
+         */
+        this.color = DEFAULTS.COLOR;
+        /**
+         * The visible label text of the chip.
+         *
+         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+         * including empty spaces to split words.
+         */
+        this.label = '';
+    }
+    /**
+     * Renders the icon element if available.
+     * @returns The icon element if available, otherwise nothing.
+     */
+    renderIcon() {
+        if (!this.iconName)
+            return nothing;
+        return html ` <mdc-icon name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+    }
+    render() {
+        return html `
+      ${this.renderIcon()}
+      ${this.label
+            ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
+            >${this.label}</mdc-text
+          >`
+            : nothing}
+    `;
+    }
+}
+StaticChip.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StaticChip.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], StaticChip.prototype, "label", void 0);
+export default StaticChip;

package/dist/components/staticchip/staticchip.constants.d.ts

@@ -0,0 +1,19 @@
+declare const TAG_NAME: "mdc-staticchip";
+declare const COLOR: {
+    readonly DEFAULT: "default";
+    readonly COBALT: "cobalt";
+    readonly GOLD: "gold";
+    readonly LIME: "lime";
+    readonly MINT: "mint";
+    readonly ORANGE: "orange";
+    readonly PINK: "pink";
+    readonly PURPLE: "purple";
+    readonly SLATE: "slate";
+    readonly VIOLET: "violet";
+};
+declare const DEFAULTS: {
+    readonly COLOR: "default";
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+};
+export { TAG_NAME, COLOR, DEFAULTS };

package/dist/components/staticchip/staticchip.constants.js

@@ -0,0 +1,21 @@
+import utils from '../../utils/tag-name';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('staticchip');
+const COLOR = {
+    DEFAULT: 'default',
+    COBALT: 'cobalt',
+    GOLD: 'gold',
+    LIME: 'lime',
+    MINT: 'mint',
+    ORANGE: 'orange',
+    PINK: 'pink',
+    PURPLE: 'purple',
+    SLATE: 'slate',
+    VIOLET: 'violet',
+};
+const DEFAULTS = {
+    COLOR: COLOR.DEFAULT,
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    TAG_NAME: VALID_TEXT_TAGS.SPAN,
+};
+export { TAG_NAME, COLOR, DEFAULTS };

package/dist/components/staticchip/staticchip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid;
+    white-space: nowrap;
+
+    --mdc-chip-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-chip-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-normal);
+
+    color: var(--mdc-chip-color);
+    border-color: var(--mdc-chip-border-color);
+    background-color: var(--mdc-chip-background-color);
+  }
+
+  :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);
+  }
+
+  :host([color='gold']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-gold);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-gold-normal);
+  }
+
+  :host([color='lime']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-lime);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-lime-normal);
+  }
+
+  :host([color='mint']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-mint);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-mint-normal);
+  }
+
+  :host([color='pink']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-pink);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-pink-normal);
+  }
+
+  :host([color='purple']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-purple);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-normal);
+  }
+
+  :host([color='orange']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-orange);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-orange-normal);
+  }
+
+  :host([color='slate']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-slate);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-slate-normal);
+  }
+
+  :host([color='violet']) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-label-violet);
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-normal);
+  }
+`;
+export default [hostFitContentStyles, styles];

package/dist/components/staticchip/staticchip.types.d.ts

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { COLOR } from './staticchip.constants';
+type ColorType = ValueOf<typeof COLOR>;
+export type { ColorType };

package/dist/components/staticchip/staticchip.types.js

@@ -0,0 +1 @@
+export {};