fix(chip) styles for improved layout and responsiveness.

Replaces flex with grid to mathc angular implementation and to make ellipsis work. Simplifies margin logic by using `gap` and removes redundant parts' styles. Adds `ellipsis()` to truncate text and sets a max width for slotted content to match angular behavior.

Author: desig9stein

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

@@ -2,21 +2,25 @@
 @use 'styles/utilities' as *;
 
 :host {
-    display: inline-flex;
+    display: inline-block;
     vertical-align: top;
+    height: ;
 }
 
 :host button {
     @include type-style('body-2');
+    @include ellipsis();
 
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
     justify-content: center;
     align-items: center;
     font-family: var(--ig-font-family);
     border-style: none;
     box-shadow: none;
     cursor: pointer;
-    padding: pad(2px, 6px, 12px);
+    padding: 0 pad-inline(2px, 6px, 12px);
+    gap: sizable(rem(3px), rem(6px), rem(8px));
 
     &[disabled] {
         pointer-events: none;
@@ -110,14 +114,8 @@
     justify-content: center;
 }
 
-[part='prefix'] {
-    margin-inline-end: pad-inline(rem(3px), rem(6px), rem(8px));
-}
-
-[part='suffix'] {
-    margin-inline-start: pad-inline(rem(3px), rem(6px), rem(8px));
-}
-
 ::slotted(*) {
-    display: flex;
+    @include ellipsis();
+
+    max-width: 32ch;
 }