@momentum-design/components 0.36.2 → 0.36.3

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

@@ -0,0 +1,46 @@
+import { CSSResult } from 'lit';
+import type { VariantType } from './alertchip.types';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+declare class AlertChip extends Buttonsimple {
+    /**
+     * The variant of the alertchip. It supports 5 variants
+     * - neutral
+     * - warning
+     * - error
+     * - success
+     * - informational
+     *
+     * @default neutral
+     */
+    variant: VariantType;
+    /**
+     * The visible label text of the alertchip.
+     *
+     * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+     * including empty spaces to split words.
+     */
+    label: string;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default AlertChip;

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

@@ -0,0 +1,79 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './alertchip.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './alertchip.constants';
+import { getAlertIcon } from './alertchip.utils';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+class AlertChip extends Buttonsimple {
+    constructor() {
+        super();
+        /**
+         * The variant of the alertchip. It supports 5 variants
+         * - neutral
+         * - warning
+         * - error
+         * - success
+         * - informational
+         *
+         * @default neutral
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * The visible label text of the alertchip.
+         *
+         * We recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+         * including empty spaces to split words.
+         */
+        this.label = '';
+        this.disabled = undefined;
+        this.softDisabled = undefined;
+        this.active = undefined;
+        this.size = DEFAULTS.SIZE;
+        this.role = DEFAULTS.ROLE;
+    }
+    render() {
+        return html `
+      <mdc-icon part="icon" name="${getAlertIcon(this.variant)}" length-unit="rem" size="1"></mdc-icon>
+      <mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
+    `;
+    }
+}
+AlertChip.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AlertChip.prototype, "variant", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AlertChip.prototype, "label", void 0);
+export default AlertChip;

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

@@ -0,0 +1,16 @@
+declare const TAG_NAME: "mdc-alertchip";
+declare const VARIANTS: {
+    readonly NEUTRAL: "neutral";
+    readonly ERROR: "error";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly INFORMATIONAL: "informational";
+};
+declare const DEFAULTS: {
+    readonly VARIANT: "neutral";
+    readonly TEXT_TYPE: "body-midsize-regular";
+    readonly TAG_NAME: "span";
+    readonly SIZE: 24;
+    readonly ROLE: "button";
+};
+export { DEFAULTS, TAG_NAME, VARIANTS };

package/dist/components/alertchip/alertchip.constants.js

@@ -0,0 +1,19 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
+import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('alertchip');
+const VARIANTS = {
+    NEUTRAL: 'neutral',
+    ERROR: 'error',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    INFORMATIONAL: 'informational',
+};
+const DEFAULTS = {
+    VARIANT: VARIANTS.NEUTRAL,
+    TEXT_TYPE: TYPE.BODY_MIDSIZE_REGULAR,
+    TAG_NAME: VALID_TEXT_TAGS.SPAN,
+    SIZE: BUTTON_SIZES[24],
+    ROLE: 'button',
+};
+export { DEFAULTS, TAG_NAME, VARIANTS };

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

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

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

@@ -0,0 +1,106 @@
+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;
+    
+    --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-alert-default-normal);
+    --mdc-chip-icon-color: var(--mds-color-theme-text-secondary-normal);
+
+    border-color: var(--mdc-chip-border-color);
+    background: var(--mdc-chip-background-color);
+  }
+
+  :host::part(label){
+    color: var(--mdc-chip-color);
+  }
+
+  :host([variant="neutral"])::part(icon){
+    color: var(--mdc-chip-icon-color);
+  }
+  
+
+  :host([variant="neutral"]:hover){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-default-hover);
+  }
+
+  :host([variant="neutral"]:active){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-default-active);
+  }
+
+  :host([variant="error"])::part(icon){
+    --mdc-chip-icon-color: var(--mds-color-theme-text-error-normal);
+  }
+  
+  :host([variant="error"]){
+    --mdc-chip-border-color: var(--mds-color-theme-outline-cancel-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-normal);
+  }
+
+  :host([variant="error"]:hover){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-hover);
+  }
+
+  :host([variant="error"]:active){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-error-active);
+  }
+
+  :host([variant="warning"])::part(icon){
+    --mdc-chip-icon-color: var(--mds-color-theme-text-warning-normal);
+  }
+
+  :host([variant="warning"]){
+    --mdc-chip-border-color: var(--mds-color-theme-outline-warning-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-normal);
+  }
+
+  :host([variant="warning"]:hover){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-hover);
+  }
+
+  :host([variant="warning"]:active){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-warning-active);
+  }
+
+  :host([variant="success"])::part(icon){
+    --mdc-chip-icon-color: var(--mds-color-theme-text-success-normal);
+  }
+
+  :host([variant="success"]){
+    --mdc-chip-border-color: var(--mds-color-theme-outline-join-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-normal);
+  }
+
+  :host([variant="success"]:hover){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-hover);
+  }
+
+  :host([variant="success"]:active){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-success-active);
+  }
+
+  :host([variant="informational"])::part(icon){
+    --mdc-chip-icon-color: var(--mds-color-theme-text-accent-normal);
+  }
+
+  :host([variant="informational"]){
+    --mdc-chip-border-color: var(--mds-color-theme-outline-theme-normal);
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-normal);
+  }
+
+  :host([variant="informational"]:hover){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-hover);
+  }
+
+  :host([variant="informational"]:active){
+    --mdc-chip-background-color: var(--mds-color-theme-background-alert-theme-active);
+  }
+`;
+export default [hostFitContentStyles, styles, ...hostFocusRingStyles()];

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

@@ -0,0 +1,6 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANTS } from './alertchip.constants';
+import type { IconNames } from '../icon/icon.types';
+type VariantType = ValueOf<typeof VARIANTS>;
+type IconListType = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'dnd-presence-badge-filled' | 'info-badge-filled'>;
+export { VariantType, IconListType };

package/dist/components/alertchip/alertchip.types.js

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

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

@@ -0,0 +1,3 @@
+import type { VariantType, IconListType } from './alertchip.types';
+declare const getAlertIcon: (type: VariantType) => IconListType;
+export { getAlertIcon };

package/dist/components/alertchip/alertchip.utils.js

@@ -0,0 +1,12 @@
+import { VARIANTS } from './alertchip.constants';
+const getAlertIcon = (type) => {
+    const alertIcon = {
+        [VARIANTS.ERROR]: 'error-legacy-badge-filled',
+        [VARIANTS.WARNING]: 'warning-badge-filled',
+        [VARIANTS.SUCCESS]: 'check-circle-badge-filled',
+        [VARIANTS.INFORMATIONAL]: 'info-badge-filled',
+        [VARIANTS.NEUTRAL]: 'dnd-presence-badge-filled',
+    };
+    return alertIcon[type];
+};
+export { getAlertIcon };

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

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

package/dist/components/alertchip/index.js

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

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

@@ -0,0 +1,57 @@
+import { CSSResult } from 'lit';
+import type { ColorType } from './chip.types';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+declare const Chip_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * 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.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+declare class Chip extends Chip_base {
+    /**
+     * The color of the chip. It supports the following colors
+     * - default
+     * - cobalt
+     * - gold
+     * - lime
+     * - mint
+     * - 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;
+    constructor();
+    /**
+     * 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 Chip;

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

@@ -0,0 +1,97 @@
+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 styles from './chip.styles';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import { Component } from '../../models';
+import { DEFAULTS } from './chip.constants';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * 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.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+class Chip extends IconNameMixin(Buttonsimple) {
+    constructor() {
+        super();
+        /**
+         * The color of the chip. It supports the following colors
+         * - default
+         * - cobalt
+         * - gold
+         * - lime
+         * - mint
+         * - 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 = '';
+        this.role = DEFAULTS.ROLE;
+        this.size = DEFAULTS.SIZE;
+        this.active = undefined;
+        this.softDisabled = undefined;
+    }
+    /**
+     * 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()}
+        <mdc-text type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}">${this.label}</mdc-text>
+      `;
+    }
+}
+Chip.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Chip.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "label", void 0);
+export default Chip;

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

@@ -0,0 +1,20 @@
+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 PINK: "pink";
+    readonly PURPLE: "purple";
+    readonly SLATE: "slate";
+    readonly VIOLET: "violet";
+};
+declare const DEFAULTS: {
+    COLOR: "default";
+    TEXT_TYPE: "body-midsize-regular";
+    TAG_NAME: "span";
+    SIZE: 24;
+    ROLE: string;
+};
+export { TAG_NAME, COLOR, DEFAULTS };

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

@@ -0,0 +1,23 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.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',
+    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,
+    SIZE: BUTTON_SIZES[24],
+    ROLE: 'button',
+};
+export { TAG_NAME, COLOR, DEFAULTS };

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

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

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

@@ -0,0 +1,140 @@
+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;
+    
+    --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='default']:hover) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-default-hover);
+  }
+
+  :host([color='default']:active) {
+    --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);
+  }
+
+  :host([color='cobalt']:active) {
+    --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);
+  }
+
+  :host([color='gold']:active) {
+    --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);
+  }
+
+  :host([color='lime']:active) {
+    --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);
+  }
+
+  :host([color='mint']:active) {
+    --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);
+  }
+
+  :host([color='pink']:active) {
+    --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);
+  }
+
+  :host([color='purple']:active) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-purple-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);
+  }
+
+  :host([color='slate']:active) {
+    --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);
+  }
+
+  :host([color='violet']:active) {
+    --mdc-chip-background-color: var(--mds-color-theme-background-label-violet-active);
+  }
+
+  :host([disabled]), :host([disabled]:hover), :host([disabled]:active) {
+    --mdc-chip-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-chip-background-color: var(--mds-color-theme-background-primary-disabled);
+    --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);
+    cursor: auto;
+  }
+`;
+export default [hostFitContentStyles, styles, ...hostFocusRingStyles()];

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

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

package/dist/components/chip/chip.types.js

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