@digital-realty/ix-chip 1.0.7 → 1.0.9

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 ix-chip
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2023 ix-chip
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,32 +1,32 @@
-# \<ix-chip>
-
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
-
-## Installation
-
-```bash
-npm i @digital-realty/ix-chip
-```
-
-## Usage
-
-```html
-<script type="module">
-  import '@digital-realty/ix-chip/ix-chip.js';
-  import '@digital-realty/ix-chip/ix-chip-set.js';
-</script>
-
-<ix-chip></ix-chip>
-<ix-chip-set><ix-chip><ix-chip></ix-chip-set>
-```
-### In React
-```html
-<script type="module">
-  import { IxChip } from '@digital-realty/ix-chip/IxChip'
-  import { IxChipSet } from '@digital-realty/ix-chip/IxChipSet'
-</script>
-```
-
-## Demo and Documentation
-
-Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-chip--default).
+# \<ix-chip>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-chip
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-chip/ix-chip.js';
+  import '@digital-realty/ix-chip/ix-chip-set.js';
+</script>
+
+<ix-chip></ix-chip>
+<ix-chip-set><ix-chip><ix-chip></ix-chip-set>
+```
+### In React
+```html
+<script type="module">
+  import { IxChip } from '@digital-realty/ix-chip/IxChip'
+  import { IxChipSet } from '@digital-realty/ix-chip/IxChipSet'
+</script>
+```
+
+## Demo and Documentation
+
+Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-chip--default).

package/dist/IxChip.d.ts

@@ -1,28 +1,28 @@
-import { LitElement } from 'lit';
-import '@material/web/chips/assist-chip.js';
-import '@material/web/chips/filter-chip.js';
-import '@material/web/chips/input-chip.js';
-import '@material/web/chips/suggestion-chip.js';
-export declare class IxChip extends LitElement {
-    appearance: 'assist' | 'filter' | 'input' | 'suggestion';
-    /**
-     * Whether or not the chip is disabled.
-     *
-     * Disabled chips are not focusable, unless `always-focusable` is set.
-     */
-    disabled: boolean;
-    /**
-     * When true, allow disabled chips to be focused with arrow keys.
-     *
-     * Add this when a chip needs increased visibility when disabled. See
-     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
-     * for more guidance on when this is needed.
-     */
-    alwaysFocusable: boolean;
-    /**
-     * The label of the chip.
-     */
-    label: string;
-    remove: () => void;
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@material/web/chips/assist-chip.js';
+import '@material/web/chips/filter-chip.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/chips/suggestion-chip.js';
+export declare class IxChip extends LitElement {
+    appearance: 'assist' | 'filter' | 'input' | 'suggestion';
+    /**
+     * Whether or not the chip is disabled.
+     *
+     * Disabled chips are not focusable, unless `always-focusable` is set.
+     */
+    disabled: boolean;
+    /**
+     * When true, allow disabled chips to be focused with arrow keys.
+     *
+     * Add this when a chip needs increased visibility when disabled. See
+     * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+     * for more guidance on when this is needed.
+     */
+    alwaysFocusable: boolean;
+    /**
+     * The label of the chip.
+     */
+    label: string;
+    remove: () => void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxChip.js

@@ -1,84 +1,84 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import '@material/web/chips/assist-chip.js';
-import '@material/web/chips/filter-chip.js';
-import '@material/web/chips/input-chip.js';
-import '@material/web/chips/suggestion-chip.js';
-export class IxChip extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.appearance = 'assist';
-        /**
-         * Whether or not the chip is disabled.
-         *
-         * Disabled chips are not focusable, unless `always-focusable` is set.
-         */
-        this.disabled = false;
-        /**
-         * When true, allow disabled chips to be focused with arrow keys.
-         *
-         * Add this when a chip needs increased visibility when disabled. See
-         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
-         * for more guidance on when this is needed.
-         */
-        this.alwaysFocusable = false;
-        /**
-         * The label of the chip.
-         */
-        this.label = '';
-        this.remove = () => {
-            this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
-        };
-    }
-    render() {
-        let comp;
-        if (this.appearance === 'assist') {
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@material/web/chips/assist-chip.js';
+import '@material/web/chips/filter-chip.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/chips/suggestion-chip.js';
+export class IxChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.appearance = 'assist';
+        /**
+         * Whether or not the chip is disabled.
+         *
+         * Disabled chips are not focusable, unless `always-focusable` is set.
+         */
+        this.disabled = false;
+        /**
+         * When true, allow disabled chips to be focused with arrow keys.
+         *
+         * Add this when a chip needs increased visibility when disabled. See
+         * https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls
+         * for more guidance on when this is needed.
+         */
+        this.alwaysFocusable = false;
+        /**
+         * The label of the chip.
+         */
+        this.label = '';
+        this.remove = () => {
+            this.dispatchEvent(new CustomEvent('remove', { bubbles: true }));
+        };
+    }
+    render() {
+        let comp;
+        if (this.appearance === 'assist') {
             comp = html `<md-assist-chip
         ?disabled=${this.disabled}
         ?always-focusable=${this.alwaysFocusable}
         .label=${this.label}
         >${this.label}</md-assist-chip
-      >`;
-        }
-        else if (this.appearance === 'filter') {
+      >`;
+        }
+        else if (this.appearance === 'filter') {
             comp = html `<md-filter-chip
         ?disabled=${this.disabled}
         ?always-focusable=${this.alwaysFocusable}
         .label=${this.label}
         >${this.label}</md-filter-chip
-      >`;
-        }
-        else if (this.appearance === 'input') {
+      >`;
+        }
+        else if (this.appearance === 'input') {
             comp = html `<md-input-chip
         ?disabled=${this.disabled}
         ?always-focusable=${this.alwaysFocusable}
         .label=${this.label}
         @remove=${this.remove}
         >${this.label}</md-input-chip
-      >`;
-        }
-        else if (this.appearance === 'suggestion') {
+      >`;
+        }
+        else if (this.appearance === 'suggestion') {
             comp = html `<md-suggestion-chip
         ?disabled=${this.disabled}
         ?always-focusable=${this.alwaysFocusable}
         .label=${this.label}
         >${this.label}</md-suggestion-chip
-      >`;
-        }
-        return html ` ${comp} `;
-    }
-}
-__decorate([
-    property({ type: String })
-], IxChip.prototype, "appearance", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxChip.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'always-focusable' })
-], IxChip.prototype, "alwaysFocusable", void 0);
-__decorate([
-    property()
-], IxChip.prototype, "label", void 0);
+      >`;
+        }
+        return html ` ${comp} `;
+    }
+}
+__decorate([
+    property({ type: String })
+], IxChip.prototype, "appearance", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'always-focusable' })
+], IxChip.prototype, "alwaysFocusable", void 0);
+__decorate([
+    property()
+], IxChip.prototype, "label", void 0);
 //# sourceMappingURL=IxChip.js.map

package/dist/IxChipSet.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import '@material/web/chips/chip-set';
-export declare class IxChipSet extends LitElement {
-    render(): import("lit").TemplateResult<1>;
-}
+import { LitElement } from 'lit';
+import '@material/web/chips/chip-set';
+export declare class IxChipSet extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/IxChipSet.js

@@ -1,8 +1,8 @@
-import { LitElement, html } from 'lit';
-import '@material/web/chips/chip-set';
-export class IxChipSet extends LitElement {
-    render() {
-        return html `<md-chip-set><slot></slot></md-chip-set>`;
-    }
-}
+import { LitElement, html } from 'lit';
+import '@material/web/chips/chip-set';
+export class IxChipSet extends LitElement {
+    render() {
+        return html `<md-chip-set><slot></slot></md-chip-set>`;
+    }
+}
 //# sourceMappingURL=IxChipSet.js.map

package/dist/IxCustomChip.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import '@digital-realty/ix-icon/ix-icon.js';
+interface AppearanceConfig {
+    [key: string]: {
+        icon: string;
+        text: string;
+    };
+}
+declare const appearanceConfig: AppearanceConfig;
+export declare class IxCustomChip extends LitElement {
+    appearance: keyof typeof appearanceConfig;
+    iconName: string;
+    noIcon: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/IxCustomChip.js

@@ -0,0 +1,56 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-icon/ix-icon.js';
+const appearanceConfig = {
+    default: { icon: '', text: '' },
+    completed: { icon: 'check_circle', text: 'COMPLETED' },
+    cancelled: { icon: 'delete_forever', text: 'CANCELLED' },
+    cancellationRequested: {
+        icon: 'auto_delete',
+        text: 'CANCELLATION REQUESTED',
+    },
+    inProgress: { icon: 'clock_loader_60', text: 'IN PROGRESS' },
+    new: { icon: '', text: 'NEW' },
+    pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },
+    rejected: { icon: 'warning', text: 'REJECTED' },
+};
+export class IxCustomChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.appearance = 'default';
+        this.iconName = 'star';
+        this.noIcon = false;
+    }
+    render() {
+        const { icon, text } = appearanceConfig[this.appearance];
+        return html `
+      <div
+        class="wrapper ${this.noIcon ? 'no-icon' : ''}"
+        appearance=${this.appearance}
+      >
+        ${!this.noIcon
+            ? html `
+              <slot name="icon" class="icon"> </slot>
+              ${icon !== ''
+                ? html `<ix-icon filled class="icon">${icon}</ix-icon>`
+                : html `<ix-icon filled class="icon">${this.iconName}</ix-icon>`}
+            `
+            : nothing}
+        ${text ? html `${text}` : nothing}
+
+        <slot class="text-container"></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], IxCustomChip.prototype, "appearance", void 0);
+__decorate([
+    property({ type: String })
+], IxCustomChip.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxCustomChip.prototype, "noIcon", void 0);
+//# sourceMappingURL=IxCustomChip.js.map

package/dist/IxCustomChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IxCustomChip.js","sourceRoot":"","sources":["../src/IxCustomChip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,oCAAoC,CAAC;AAM5C,MAAM,gBAAgB,GAAqB;IACzC,OAAO,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE;IACtD,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE;IACxD,qBAAqB,EAAE;QACrB,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,wBAAwB;KAC/B;IACD,UAAU,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,aAAa,EAAE;IAC5D,GAAG,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;IAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,kBAAkB,EAAE;IAC9D,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE;CAChD,CAAC;AAEF,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAC8B,eAAU,GACpC,SAAS,CAAC;QAEgB,aAAQ,GAAW,MAAM,CAAC;QAEzB,WAAM,GAAY,KAAK,CAAC;IAuBvD,CAAC;IArBC,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,OAAO,IAAI,CAAA;;yBAEU,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;qBAChC,IAAI,CAAC,UAAU;;UAE1B,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;gBAEA,IAAI,KAAK,EAAE;gBACX,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,YAAY;gBACtD,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,QAAQ,YAAY;aAClE;YACH,CAAC,CAAC,OAAO;UACT,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO;;;;KAInC,CAAC;IACJ,CAAC;CACF;AA5B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACf;AAEgB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA2B;AAEzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAyB","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\n\ninterface AppearanceConfig {\n  [key: string]: { icon: string; text: string };\n}\n\nconst appearanceConfig: AppearanceConfig = {\n  default: { icon: '', text: '' },\n  completed: { icon: 'check_circle', text: 'COMPLETED' },\n  cancelled: { icon: 'delete_forever', text: 'CANCELLED' },\n  cancellationRequested: {\n    icon: 'auto_delete',\n    text: 'CANCELLATION REQUESTED',\n  },\n  inProgress: { icon: 'clock_loader_60', text: 'IN PROGRESS' },\n  new: { icon: '', text: 'NEW' },\n  pending: { icon: 'assignment_late', text: 'PENDING APPROVAL' },\n  rejected: { icon: 'warning', text: 'REJECTED' },\n};\n\nexport class IxCustomChip extends LitElement {\n  @property({ type: String }) appearance: keyof typeof appearanceConfig =\n    'default';\n\n  @property({ type: String }) iconName: string = 'star';\n\n  @property({ type: Boolean }) noIcon: boolean = false;\n\n  render() {\n    const { icon, text } = appearanceConfig[this.appearance];\n    return html`\n      <div\n        class=\"wrapper ${this.noIcon ? 'no-icon' : ''}\"\n        appearance=${this.appearance}\n      >\n        ${!this.noIcon\n          ? html`\n              <slot name=\"icon\" class=\"icon\"> </slot>\n              ${icon !== ''\n                ? html`<ix-icon filled class=\"icon\">${icon}</ix-icon>`\n                : html`<ix-icon filled class=\"icon\">${this.iconName}</ix-icon>`}\n            `\n          : nothing}\n        ${text ? html`${text}` : nothing}\n\n        <slot class=\"text-container\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { IxChip } from './IxChip.js';
-export { IxChipSet } from './IxChipSet.js';
+export { IxChip } from './IxChip.js';
+export { IxChipSet } from './IxChipSet.js';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { IxChip } from './IxChip.js';
-export { IxChipSet } from './IxChipSet.js';
+export { IxChip } from './IxChip.js';
+export { IxChipSet } from './IxChipSet.js';
 //# sourceMappingURL=index.js.map

package/dist/ix-chip-set.d.ts

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

package/dist/ix-chip-set.js

@@ -1,3 +1,3 @@
-import { IxChipSet } from './IxChipSet.js';
-window.customElements.define('ix-chip-set', IxChipSet);
+import { IxChipSet } from './IxChipSet.js';
+window.customElements.define('ix-chip-set', IxChipSet);
 //# sourceMappingURL=ix-chip-set.js.map

package/dist/ix-chip.d.ts

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

package/dist/ix-chip.js

@@ -1,3 +1,3 @@
-import { IxChip } from './IxChip.js';
-window.customElements.define('ix-chip', IxChip);
+import { IxChip } from './IxChip.js';
+window.customElements.define('ix-chip', IxChip);
 //# sourceMappingURL=ix-chip.js.map

package/dist/ix-custom-chip.d.ts

@@ -0,0 +1,4 @@
+import { IxCustomChip } from './IxCustomChip.js';
+export declare class IxCustomChipStyled extends IxCustomChip {
+    static styles: import("lit").CSSResult;
+}

package/dist/ix-custom-chip.js

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+import { IxCustomChip } from './IxCustomChip.js';
+export class IxCustomChipStyled extends IxCustomChip {
+}
+IxCustomChipStyled.styles = css `
+    :host {
+      --ix-font-color: #092241;
+      --ix-icon-pending-color: #ff9800;
+    }
+
+    .wrapper {
+      align-items: center;
+      background-color: var(
+        --ix-custom-chip-background-color,
+        var(--md-sys-color-on-primary, #ffffff)
+      );
+      border-radius: var(--ix-custom-chip-border-radius, 62.4375rem);
+      color: var(--ix-custom-chip-color, --ix-font-color);
+      display: flex;
+      font-size: var(--ix-custom-chip-font-size, 0.75rem);
+      font-weight: var(--ix-custom-chip-font-weight, 700);
+      gap: var(--ix-custom-chip-icon-gap-right, 0.4375rem);
+      letter-spacing: var(--ix-custom-chip-letter-spacing, 0.078125rem);
+      padding: var(--ix-custom-chip-padding, 0.25rem 1rem 0.25rem 0.25rem);
+      text-transform: var(--ix-custom-chip-text-transform, uppercase);
+      width: fit-content;
+    }
+
+    .wrapper[appearance='new'] {
+      background-color: var(
+        --ix-button-confirm-color,
+        var(--md-sys-color-on-primary, #002020)
+      );
+      color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));
+      padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);
+    }
+
+    .wrapper.no-icon {
+      padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);
+    }
+
+    .icon {
+      color: var(
+        --ix-custom-chip-icon-color,
+        var(--md-sys-color-scrim, #000000)
+      );
+      font-size: var(--ix-custom-chip-icon-font-size, 1.5625rem);
+      line-height: var(--ix-custom-chip-icon-line-height, 1.5625rem);
+    }
+
+    [appearance='completed'] .icon {
+      color: var(--ix-button-confirm-color);
+    }
+
+    [appearance='pending'] .icon,
+    [appearance='inProgress'] .icon {
+      color: var(--ix-icon-pending-color, #ff9800);
+    }
+
+    [appearance='rejected'] .icon,
+    [appearance='cancellationRequested'] .icon,
+    [appearance='cancelled'] .icon {
+      color: var(--ix-button-cancel-color, #db0028);
+    }
+
+    .text-container {
+      margin-right: var(--ix-custom-chip-margin-right, 1rem);
+    }
+  `;
+window.customElements.define('ix-custom-chip', IxCustomChipStyled);
+//# sourceMappingURL=ix-custom-chip.js.map

package/dist/ix-custom-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-custom-chip.js","sourceRoot":"","sources":["../src/ix-custom-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,kBAAmB,SAAQ,YAAY;;AAClC,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgE3B,CAAC;AAGJ,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { IxCustomChip } from './IxCustomChip.js';\n\nexport class IxCustomChipStyled extends IxCustomChip {\n  static override styles = css`\n    :host {\n      --ix-font-color: #092241;\n      --ix-icon-pending-color: #ff9800;\n    }\n\n    .wrapper {\n      align-items: center;\n      background-color: var(\n        --ix-custom-chip-background-color,\n        var(--md-sys-color-on-primary, #ffffff)\n      );\n      border-radius: var(--ix-custom-chip-border-radius, 62.4375rem);\n      color: var(--ix-custom-chip-color, --ix-font-color);\n      display: flex;\n      font-size: var(--ix-custom-chip-font-size, 0.75rem);\n      font-weight: var(--ix-custom-chip-font-weight, 700);\n      gap: var(--ix-custom-chip-icon-gap-right, 0.4375rem);\n      letter-spacing: var(--ix-custom-chip-letter-spacing, 0.078125rem);\n      padding: var(--ix-custom-chip-padding, 0.25rem 1rem 0.25rem 0.25rem);\n      text-transform: var(--ix-custom-chip-text-transform, uppercase);\n      width: fit-content;\n    }\n\n    .wrapper[appearance='new'] {\n      background-color: var(\n        --ix-button-confirm-color,\n        var(--md-sys-color-on-primary, #002020)\n      );\n      color: var(--md-sys-color-on-primary, var(--ix-font-color, #092241));\n      padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);\n    }\n\n    .wrapper.no-icon {\n      padding: var(--ix-custom-chip-no-icon-padding, 0.5625rem 1rem);\n    }\n\n    .icon {\n      color: var(\n        --ix-custom-chip-icon-color,\n        var(--md-sys-color-scrim, #000000)\n      );\n      font-size: var(--ix-custom-chip-icon-font-size, 1.5625rem);\n      line-height: var(--ix-custom-chip-icon-line-height, 1.5625rem);\n    }\n\n    [appearance='completed'] .icon {\n      color: var(--ix-button-confirm-color);\n    }\n\n    [appearance='pending'] .icon,\n    [appearance='inProgress'] .icon {\n      color: var(--ix-icon-pending-color, #ff9800);\n    }\n\n    [appearance='rejected'] .icon,\n    [appearance='cancellationRequested'] .icon,\n    [appearance='cancelled'] .icon {\n      color: var(--ix-button-cancel-color, #db0028);\n    }\n\n    .text-container {\n      margin-right: var(--ix-custom-chip-margin-right, 1rem);\n    }\n  `;\n}\n\nwindow.customElements.define('ix-custom-chip', IxCustomChipStyled);\n"]}

package/dist/react/IxChip.d.ts

@@ -1,4 +1,4 @@
-import { IxChip as LitComp } from '../IxChip.js';
-export declare const IxChip: import("@lit/react").ReactWebComponent<LitComp, {
-    onclick: string;
-}>;
+import { IxChip as LitComp } from '../IxChip.js';
+export declare const IxChip: import("@lit/react").ReactWebComponent<LitComp, {
+    onclick: string;
+}>;

package/dist/react/IxChip.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { IxChip as LitComp } from '../IxChip.js';
-customElements.define('ix-chip', LitComp);
-export const IxChip = createComponent({
-    tagName: 'ix-chip',
-    elementClass: LitComp,
-    react: React,
-    events: {
-        onclick: 'onClick',
-    },
-});
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxChip as LitComp } from '../IxChip.js';
+customElements.define('ix-chip', LitComp);
+export const IxChip = createComponent({
+    tagName: 'ix-chip',
+    elementClass: LitComp,
+    react: React,
+    events: {
+        onclick: 'onClick',
+    },
+});
 //# sourceMappingURL=IxChip.js.map

package/dist/react/IxChipSet.d.ts

@@ -1,2 +1,2 @@
-import { IxChipSet as LitComp } from '../IxChipSet.js';
-export declare const IxChipSet: import("@lit/react").ReactWebComponent<LitComp, {}>;
+import { IxChipSet as LitComp } from '../IxChipSet.js';
+export declare const IxChipSet: import("@lit/react").ReactWebComponent<LitComp, {}>;

package/dist/react/IxChipSet.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import { createComponent } from '@lit/react';
-import { IxChipSet as LitComp } from '../IxChipSet.js';
-customElements.define('ix-chip-set', LitComp);
-export const IxChipSet = createComponent({
-    tagName: 'ix-chip-set',
-    elementClass: LitComp,
-    react: React,
-});
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { IxChipSet as LitComp } from '../IxChipSet.js';
+customElements.define('ix-chip-set', LitComp);
+export const IxChipSet = createComponent({
+    tagName: 'ix-chip-set',
+    elementClass: LitComp,
+    react: React,
+});
 //# sourceMappingURL=IxChipSet.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-chip following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -12,7 +12,8 @@
     "./ix-chip.js": "./dist/ix-chip.js",
     "./ix-chip-set.js": "./dist/ix-chip-set.js",
     "./IxChipSet": "./dist/react/IxChipSet.js",
-    "./IxChip": "./dist/react/IxChip.js"
+    "./IxChip": "./dist/react/IxChip.js",
+    "./ix-custom-chip.js": "./dist/ix-custom-chip.js"
   },
   "publishConfig": {
     "access": "public"
@@ -28,8 +29,9 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@digital-realty/ix-icon": "^1.0.3",
     "@lit/react": "^1.0.2",
-    "@material/web": "^1.0.0",
+    "@material/web": "1.2.0",
     "lit": "^2.0.2",
     "react": "^18.2.0"
   },
@@ -96,6 +98,5 @@
     "package.json",
     "README.md",
     "LICENSE"
-  ],
-  "gitHead": "7dd8615d5f732cb14d465b2d46b2ee743546a4b2"
+  ]
 }