feat(chip): add outlined version

CHANGELOG.md

@@ -24,7 +24,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - Added the `igcStateChange` event, emitted after each render pass with a snapshot of the current virtual window (`startIndex`, `endIndex`, `viewportSize`, `totalSize`).
     - Added the `layoutComplete` property - a promise that resolves once the current render pass, and any follow-up renders triggered by item measurement, have fully settled.
     - Transparently degrades past the maximum scroll coordinate supported by the browser, so lists far larger than the DOM would normally allow keep scrolling and rendering correctly.
-
+- #### Chip
+  - Added the `outlined` property to the component. When set to `true`, the Chip will have an outlined style. [#2307](https://github.com/IgniteUI/igniteui-webcomponents/pull/2307)
 ### Changed
 - #### Combo
   - The dropdown list is now virtualized using the new `igc-virtual-scroll` component instead of the third-party `@lit-labs/virtualizer` package. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
@@ -33,6 +34,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Removed the `@lit-labs/virtualizer` dependency. Virtualization is now implemented internally by the new `igc-virtual-scroll` component. [#2222](https://github.com/IgniteUI/igniteui-webcomponents/pull/2222)
 - #### Carousel
   - The component now delegates focus, starting with its indicator container, navigation buttons, or the first focusable element in the active slide, whichever is available. Related to [#2291](https://github.com/IgniteUI/igniteui-webcomponents/issues/2291).
+- #### Chip
+  - The `focus-outline-color` and `focus-selected-outline-color` CSS variables were replaced with `focus-shadow-color` and `focus-selected-shadow-color`.
 
 ## [7.2.4] - 2026-06-29
 ### Added

package.json

@@ -80,7 +80,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.5",
-    "igniteui-theming": "^28.0.0-beta.1",
+    "igniteui-theming": "^28.0.0-beta.2",
     "keep-a-changelog": "^3.1.0",
     "lint-staged": "^17.3.0",
     "lit-analyzer": "^2.0.3",

src/components/chip/chip.spec.ts

@@ -11,6 +11,13 @@ describe('Chip', () => {
     defineComponents(IgcChipComponent);
   });
 
+  it('passes the a11y audit', async () => {
+    const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
+
+    await expect(chip).shadowDom.to.be.accessible();
+    await expect(chip).to.be.accessible();
+  });
+
   it('should initialize with default values', async () => {
     const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
 
@@ -61,6 +68,20 @@ describe('Chip', () => {
     expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
   });
 
+  it('should toggle the outlined property successfully', async () => {
+    const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
+
+    chip.outlined = true;
+    expect(chip.outlined).to.be.true;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip outlined></igc-chip>', DIFF_OPTIONS);
+
+    chip.outlined = false;
+    expect(chip.outlined).to.be.false;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
+  });
+
   it('should toggle the selectable property successfully', async () => {
     const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
 

src/components/chip/chip.ts

@@ -74,6 +74,14 @@ export default class IgcChipComponent extends EventEmitterMixin<
   @property({ type: Boolean, reflect: true })
   public removable = false;
 
+  /**
+   * Defines if the chip is outlined or not.
+   *
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public outlined = false;
+
   /**
    * Defines if the chip is selectable or not.
    * @attr

src/components/chip/themes/chip.base.scss

@@ -13,7 +13,7 @@
     display: inline-flex;
     place-items: center;
     font-family: var(--ig-font-family);
-    border: rem(1px) solid;
+    border: none;
     box-shadow: none;
     cursor: pointer;
     padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));
@@ -23,85 +23,63 @@
     }
 }
 
-:host([variant='primary']) button,
-:host([selected][variant='primary']) button:not([disabled]) {
-    background: color(primary, 500);
-    color: contrast-color(primary, 500);
-
-    &:focus {
-        background: color(primary, 800);
-        color: contrast-color(primary, 800);
-    }
-
-    &:hover {
-        background: color(primary, 600);
-        color: contrast-color(primary, 600);
-    }
-}
-
-:host([variant='info']) button,
-:host([selected][variant='info']) button:not([disabled]) {
-    background: color(info, 500);
-    color: contrast-color(info, 500);
-
-    &:focus {
-        background: color(info, 800);
-        color: contrast-color(info, 800);
+@mixin chip-variants($variant, $variant-color) {
+    :host([variant='#{$variant}']) button,
+    :host([selected][variant='#{$variant}']) button:not([disabled]) {
+        background: color($variant-color, 500);
+        color: contrast-color($variant-color, 500);
+
+        &:focus {
+            background: color($variant-color, 800);
+            color: contrast-color($variant-color, 800);
+        }
+
+        &:hover {
+            background: color($variant-color, 600);
+            color: contrast-color($variant-color, 600);
+        }
     }
 
-    &:hover {
-        background: color(info, 600);
-        color: contrast-color(info, 600);
+    :host([variant='#{$variant}']) button[disabled],
+    :host([selected][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200);
+        color: color(gray, 500);
     }
 }
 
-:host([variant='success']) button,
-:host([selected][variant='success']) button:not([disabled]) {
-    background: color(success, 500);
-    color: contrast-color(success, 500);
-
-    &:focus {
-        background: color(success, 800);
-        color: contrast-color(success, 800);
-    }
+@include chip-variants('primary', primary);
+@include chip-variants('info', info);
+@include chip-variants('success', success);
+@include chip-variants('warning', warn);
+@include chip-variants('danger', error);
 
-    &:hover {
-        background: color(success, 600);
-        color: contrast-color(success, 600);
-    }
-}
+@mixin outlined-variant($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        background: transparent;
 
-:host([variant='warning']) button,
-:host([selected][variant='warning']) button:not([disabled]) {
-    background: color(warn, 500);
-    color: contrast-color(warn, 500);
+        &:focus {
+            background: color($variant-color, 800, .30);
+        }
 
-    &:focus {
-        background: color(warn, 800);
-        color: contrast-color(warn, 800);
+        &:hover {
+            background: color($variant-color, 600, .16);
+        }
     }
 
-    &:hover {
-        background: color(warn, 600);
-        color: contrast-color(warn, 600);
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200, .30);
+        color: color(gray, 500);
+        border-color: color(gray, 500, .30);
     }
 }
 
-:host([variant='danger']) button,
-:host([selected][variant='danger']) button:not([disabled]) {
-    background: color(error, 500);
-    color: contrast-color(error, 500);
-
-    &:focus {
-        background: color(error, 800);
-        color: contrast-color(error, 800);
-    }
-
-    &:hover {
-        background: color(error, 600);
-        color: contrast-color(error, 600);
-    }
-}
+@include outlined-variant('primary', primary);
+@include outlined-variant('info', info);
+@include outlined-variant('success', success);
+@include outlined-variant('warning', warn);
+@include outlined-variant('danger', error);
 
 [part='prefix'],
 [part='suffix'] {

src/components/chip/themes/dark/chip.bootstrap.scss

@@ -7,3 +7,17 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 300);
+@include chip-outlined-variants-dark('info', info, 600);
+@include chip-outlined-variants-dark('success', success, 200);
+@include chip-outlined-variants-dark('warning', warn, 500);
+@include chip-outlined-variants-dark('danger', error, 400);

src/components/chip/themes/dark/chip.fluent.scss

@@ -7,3 +7,25 @@ $theme: $fluent;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade, $color-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color($variant-color, $color-shade);
+
+        &:focus {
+            background: color($variant-color, 800, .50);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .20);
+        }
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200, 600);
+@include chip-outlined-variants-dark('info', info, 200, 500);
+@include chip-outlined-variants-dark('success', success, 100, 600);
+@include chip-outlined-variants-dark('warning', warn, 200, 500);
+@include chip-outlined-variants-dark('danger', error, 50, 600);

src/components/chip/themes/dark/chip.indigo.scss

@@ -36,14 +36,54 @@ $theme: $indigo;
     }
 }
 
+:host([variant='warning']) button[disabled],
+:host([selected][variant='warning']) button[disabled] {
+    color: color(gray, 50);
+}
+
 :host([variant='danger']) button,
 :host([selected][variant='danger']) button:not([disabled]) {
     &:focus {
         box-shadow: 0 0 0 rem(3px) color(error, 900);
     }
 }
 
-:host([selected]) button[disabled],
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .2);
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+
+        &:hover {
+            @if $variant == 'success' {
+                background: color($variant-color, 700, .30);
+            } @else if $variant == 'danger' {
+                background: color($variant-color, 500, .30);
+            } @else {
+                background: color($variant-color, 400, .30);
+            }
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: transparent;
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 400);
+@include chip-outlined-variants-dark('info', info, 300);
+@include chip-outlined-variants-dark('success', success, 500);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 400);

src/components/chip/themes/dark/chip.material.scss

@@ -7,3 +7,17 @@ $theme: $material;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200);
+@include chip-outlined-variants-dark('info', info, 200);
+@include chip-outlined-variants-dark('success', success, 300);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 300);

src/components/chip/themes/light/chip.bootstrap.scss

@@ -6,3 +6,22 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        color: contrast-color($variant-color, 100);
+
+        @if $variant == 'warning' or $variant == 'info' {
+            border-color: color($variant-color, 900);
+        } @else {
+            border-color: color($variant-color, 600);
+        }
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);