@api-client/ui 0.3.3 → 0.3.4

package/demo/md/chip/chip.html

@@ -12,20 +12,47 @@
       margin: 20px 0;
     }
 
-    ui-chip:not(:last-of-type) {
-      margin-right: 12px;
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+    }
+
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
     }
 
     .grid-5 {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      justify-items: center;
+      grid-template-columns: 160px 1fr 1fr 1fr 1fr;
+      gap: 0 0;
+      justify-items: center; 
+      align-items: center;
+      grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
+      grid-auto-rows: 80px;
+
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
     }
 
     .grid-4 {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
+      grid-template-columns: 160px 1fr 1fr 1fr;
+      gap: 0 0;
+      justify-items: center; 
+      align-items: center;
+      grid-template-rows: 40px repeat(auto-fit, minmax(80px, 1fr));
+      grid-auto-rows: 60px;
+
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
     }
 
     .grid-3 {

package/demo/md/chip/chip.ts

@@ -3,6 +3,7 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
 import type UiChip from '../../../src/md/chip/internals/Chip.js'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
 import '../../../src/md/chip/ui-chip.js'
+import '../../../src/md/chip/ui-chip-set.js'
 import '../../../src/md/icons/ui-icon.js'
 
 const calendarIcon = iconWrapper(
@@ -36,72 +37,100 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <a href="../">Back</a>
       <section class="demo-section">
-        <h2 class="title-large">Assist chip</h2>
-        <div class="demo-row grid-4">
-          <ui-chip type="assist" @click="${this.handleClickHandler}">Enabled</ui-chip>
-          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
+        <h2 class="display-large">Assist chip</h2>
 
+        <div class="grid-5">
+          <span>&nbsp</span>
+          <span class="column-title title-medium">Regular</span>
+          <span class="column-title title-medium">Icon</span>
+          <span class="column-title title-medium">Avatar</span>
+          <span class="column-title title-medium">Elevated</span>
+
+          <span class="row-name title-small">Enabled</span>
+          <ui-chip type="assist" @click="${this.handleClickHandler}">Assist</ui-chip>
           <ui-chip type="assist" @click="${this.handleClickHandler}">
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            With icon
+            Assist
+          </ui-chip>
+          <ui-chip type="assist" @click="${this.handleClickHandler}">
+            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
+            Assist
+          </ui-chip>
+          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
+            <ui-icon slot="icon">${calendarIcon}</ui-icon>Assist
           </ui-chip>
 
+          <span class="row-name title-small">Disabled</span>
+          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">Assist</ui-chip>
           <ui-chip type="assist" @click="${this.handleClickHandler}" disabled>
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Disabled with icon
+            Assist
           </ui-chip>
-        </div>
-
-        <div class="demo-row grid-4">
-          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>Enabled</ui-chip>
-          <ui-chip type="assist" disabled @click="${this.handleClickHandler}" elevated>Disabled</ui-chip>
-
-          <ui-chip type="assist" @click="${this.handleClickHandler}" elevated>
-            <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            With icon
+          <ui-chip type="assist" disabled @click="${this.handleClickHandler}">
+            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
+            Assist
           </ui-chip>
-
           <ui-chip type="assist" @click="${this.handleClickHandler}" disabled elevated>
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            Disabled with icon
+            Assist
           </ui-chip>
         </div>
       </section>
 
       <section class="demo-section">
-        <h2 class="title-large">Filter chip</h2>
-        <div class="demo-row grid-4">
-          <ui-chip type="filter" @click="${this.handleClickHandler}" @select="${this.handleSelect}">Docs</ui-chip>
+        <h2 class="display-large">Filter chip</h2>
+        <div class="grid-5">
+          <span>&nbsp</span>
+          <span class="column-title title-medium">Unchecked</span>
+          <span class="column-title title-medium">Checked</span>
+          <span class="column-title title-medium">List</span>
+          <span class="column-title title-medium">Elevated</span>
+
+          <span class="row-name title-small">Enabled</span>
+          <ui-chip type="filter" @click="${this.handleClickHandler}" @select="${this.handleSelect}">Filter</ui-chip>
           <ui-chip type="filter" checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
-            >Slides</ui-chip
-          >
-          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
-            >Images</ui-chip
+            >Filter</ui-chip
           >
           <ui-chip
             type="filter"
-            list="abc"
+            list
             @click="${this.handleClickHandler}"
             @list="${this.handleList}"
             @select="${this.handleSelect}"
             >Other</ui-chip
           >
-        </div>
-        <div class="demo-row grid-4">
-          <ui-chip type="filter" @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
-            >Docs</ui-chip
+          <ui-chip
+            type="filter"
+            list
+            elevated
+            @click="${this.handleClickHandler}"
+            @list="${this.handleList}"
+            @select="${this.handleSelect}"
+            >Other</ui-chip
           >
-          <ui-chip type="filter" checked @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
-            >Slides</ui-chip
+
+          <span class="row-name title-small">Disabled</span>
+          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" @select="${this.handleSelect}"
+            >Filter</ui-chip
           >
-          <ui-chip type="filter" disabled @click="${this.handleClickHandler}" elevated @select="${this.handleSelect}"
-            >Images</ui-chip
+          <ui-chip type="filter" disabled checked @click="${this.handleClickHandler}" @select="${this.handleSelect}"
+            >Filter</ui-chip
           >
           <ui-chip
             type="filter"
-            list="abc"
+            list
+            disabled
             @click="${this.handleClickHandler}"
+            @list="${this.handleList}"
+            @select="${this.handleSelect}"
+            >Other</ui-chip
+          >
+          <ui-chip
+            type="filter"
+            list
             elevated
+            disabled
+            @click="${this.handleClickHandler}"
             @list="${this.handleList}"
             @select="${this.handleSelect}"
             >Other</ui-chip
@@ -110,52 +139,78 @@ class ComponentDemoPage extends DemoPage {
       </section>
 
       <section class="demo-section">
-        <h2 class="title-large">Input chip</h2>
-        <div class="demo-row grid-3">
-          <ui-chip type="input" @click="${this.handleClickHandler}">Enabled</ui-chip>
-          <ui-chip type="input" closable @click="${this.handleClickHandler}" @close="${this.handleClose}"
-            >Closable</ui-chip
+        <h2 class="display-large">Input chip</h2>
+
+        <div class="grid-5">
+          <span>&nbsp</span>
+          <span class="column-title title-medium">Regular</span>
+          <span class="column-title title-medium">removable</span>
+          <span class="column-title title-medium">Disabled</span>
+          <span class="column-title title-medium">Elevated</span>
+
+          <span class="row-name title-small">Regular</span>
+          <ui-chip type="input" @click="${this.handleClickHandler}">Input</ui-chip>
+          <ui-chip type="input" removable @click="${this.handleClickHandler}" @close="${this.handleClose}"
+            >Input</ui-chip
           >
-          <ui-chip type="input" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
-        </div>
-        <div class="demo-row grid-3">
+          <ui-chip type="input" disabled @click="${this.handleClickHandler}">Input</ui-chip>
+          <ui-chip type="input" elevated @click="${this.handleClickHandler}">Input</ui-chip>
+
+          <span class="row-name title-small">With icon</span>
           <ui-chip type="input" @click="${this.handleClickHandler}">
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            With icon
+            Input
           </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" closable @close="${this.handleClose}">
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            With icon
+            Input
           </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" closable disabled @close="${this.handleClose}">
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
             <ui-icon slot="icon">${calendarIcon}</ui-icon>
-            With icon
+            Input
           </ui-chip>
-        </div>
-        <div class="demo-row grid-3">
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
+            <ui-icon slot="icon">${calendarIcon}</ui-icon>
+            Input
+          </ui-chip>
+
+          <span class="row-name title-small">With avatar</span>
           <ui-chip type="input" @click="${this.handleClickHandler}">
             <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            With avatar
+            Input
           </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" closable @close="${this.handleClose}">
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable @close="${this.handleClose}">
             <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            With avatar
+            Input
           </ui-chip>
-          <ui-chip type="input" @click="${this.handleClickHandler}" closable disabled @close="${this.handleClose}">
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable disabled @close="${this.handleClose}">
             <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
-            With avatar
+            Input
+          </ui-chip>
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable elevated @close="${this.handleClose}">
+            <img src="./pawel6c9a.jpg" slot="avatar" alt="Pawel Psztyc" />
+            Input
           </ui-chip>
         </div>
       </section>
 
       <section class="demo-section">
-        <h2 class="title-large">Suggestion chip</h2>
-        <div class="demo-row grid-3">
+        <h2 class="display-large">Suggestion chip</h2>
+        <div class="demo-row grid-3 frame">
           <ui-chip type="suggestion" @click="${this.handleClickHandler}">Enabled</ui-chip>
           <ui-chip type="suggestion" @click="${this.handleClickHandler}" elevated>Elevated</ui-chip>
           <ui-chip type="suggestion" disabled @click="${this.handleClickHandler}">Disabled</ui-chip>
         </div>
       </section>
+
+      <section class="demo-section">
+        <h2 class="display-large">Chip set</h2>
+        <ui-chip-set>
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
+          <ui-chip type="input" @click="${this.handleClickHandler}" removable>Input</ui-chip>
+        </ui-chip-set>
+      </section>
     `
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/button/internals/base.ts

@@ -262,16 +262,12 @@ export default class BaseButton extends UiElement {
 
   override handlePointerEnter(e: PointerEvent): void {
     super.handlePointerEnter(e)
-    if (this.ripple) {
-      this.ripple.beginHover(e)
-    }
+    this.ripple?.beginHover(e)
   }
 
   override handlePointerLeave(e: PointerEvent): void {
     super.handlePointerLeave(e)
-    if (this.ripple) {
-      this.ripple.endHover()
-    }
+    this.ripple?.endHover()
   }
 
   protected override render(): TemplateResult {

package/src/md/chip/internals/Chip.styles.ts

@@ -6,166 +6,179 @@ export default css`
     vertical-align: middle;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    height: 32px;
+    position: relative;
+    user-select: none;
 
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     line-height: var(--md-sys-typescale-label-large-height);
 
-    border-radius: var(--md-sys-shape-corner-small);
-    color: var(--md-sys-color-on-surface);
-    fill: var(--md-sys-color-primary);
-
-    user-select: none;
-
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-  }
 
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
+    --_leading-icon-color: currentColor;
+    --_trailing-icon-color: currentColor;
+    --_background-color: transparent;
+    --_color: inherit;
+    --_shadow: var(--md-sys-elevation-0);
+    --_outline-color: transparent;
+    --_outline-size: 0;
+    --_inline-padding-start: 16px;
+    --_inline-padding-end: 16px;
+    --_avatar-size: 24px;
+    --_avatar-shape: 24px;
+    --_icon-size: 18px;
 
-  :host([disabled][elevated]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-    box-shadow: none;
-  }
-
-  :host([disabled]) .content {
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.68;
-  }
-
-  .surface {
-    position: relative;
-    height: inherit;
-    border-radius: inherit;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-small);
+    box-shadow: var(--_shadow);
+    border: var(--_outline-size) solid var(--_outline-color);
   }
 
   .ripple {
-    z-index: 0;
     border-radius: inherit;
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
-  .container {
-    position: absolute;
-    inset: 0;
+  .ripple.activated {
+    z-index: 1;
+  }
 
-    box-sizing: border-box;
-    border-radius: inherit;
-    border: 1px var(--md-sys-color-outline) solid;
-    z-index: 0;
+  :host([disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_outline-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  .content {
+  .surface {
     height: inherit;
     display: flex;
     align-items: center;
     justify-content: start;
     box-sizing: border-box;
-    padding: 0 16px;
+    padding: 0 var(--_inline-padding-end) 0 var(--_inline-padding-start);
     border-radius: inherit;
-    border: 1px transparent solid;
-    position: relative;
-    z-index: 1;
+    background-color: var(--_background-color);
+    color: var(--_color);
+    gap: 0;
   }
 
-  :host([elevated]) .container {
-    background-color: var(--md-sys-color-surface);
-    box-shadow: var(--md-sys-elevation-1);
-    border-width: 0;
+  .leading-icon {
+    height: var(--_icon-size);
+    width: 0px;
+    overflow: hidden;
+    transition: width 230ms var(--md-sys-animation-easing-standard);
+    color: var(--_leading-icon-color);
+    fill: currentColor;
   }
 
-  .withIcon .content,
-  :host([type='filter'][checked]) .content {
-    padding-left: 8px;
+  .leading-icon::slotted(*) {
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    margin-right: 8px;
   }
 
-  .withAvatar .content {
-    padding-left: 4px;
+  slot[name='avatar']::slotted(*) {
+    width: var(--_avatar-size);
+    height: var(--_avatar-size);
+    border-radius: var(--_avatar-shape);
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-right: 8px;
   }
 
-  :host([closable]) .content,
-  :host([type='filter'][list]) .content {
-    padding-right: 8px;
+  .check-mark.checked {
+    width: 18px;
+    margin-right: 8px;
   }
 
-  .withIcon slot[name='icon']::slotted(*),
-  .withAvatar slot[name='avatar']::slotted(*) {
-    margin-right: 8px;
+  .trailing-icon {
+    margin-left: 8px;
+    width: 18px;
+    height: 18px;
+    color: var(--_trailing-icon-color);
+    fill: currentColor;
   }
 
-  slot[name='icon']::slotted(*) {
-    width: 16px;
-    height: 16px;
+  :host([elevated]) {
+    --_shadow: var(--md-sys-elevation-1);
+    border: none;
+    --_background-color: var(--md-sys-color-surface-container-low);
   }
 
-  slot[name='avatar']::slotted(*) {
-    width: 24px;
-    height: 24px;
-    border-radius: var(--md-sys-shape-corner-medium);
+  :host([elevated]:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-2);
   }
 
-  .leading-icon {
-    height: 18px;
-    width: 0px;
-    overflow: hidden;
-    transition: width 230ms var(--md-sys-animation-easing-standard);
+  .surface.has-trailing-icon {
+    --_inline-padding-end: 8px;
   }
 
-  .check-mark.checked {
-    width: 18px;
-    margin-right: 8px;
+  :host([type='assist']:not([disabled])) {
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_color: var(--md-sys-color-on-surface);
+    --_leading-icon-color: var(--md-sys-color-primary);
   }
 
-  .trailing-icon {
-    margin-left: 8px;
-    width: 18px;
-    height: 18px;
-    fill: var(--md-sys-color-on-surface-variant);
+  :host .has-icon {
+    --_inline-padding-start: 8px;
+  }
+
+  :host .has-avatar {
+    --_inline-padding-start: 4px;
+  }
+
+  :host([checked]) {
+    --_inline-padding-start: 8px;
+    --_background-color: var(--md-sys-color-secondary-container);
   }
 
-  :host([elevated]:hover) .container,
-  :host([elevated]:focus) .container {
-    box-shadow: var(--md-sys-elevation-2);
+  :host([type='filter']:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-primary);
+    --_trailing-icon-color: var(--md-sys-on-surface-variant);
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([elevated][dragged]) .container {
-    box-shadow: var(--md-sys-elevation-4);
+  :host([type='filter'][checked]) {
+    --_outline-size: 1px;
   }
 
-  :host([checked]) .container {
-    background-color: var(--md-sys-color-secondary-container);
-    border-width: 0;
+  :host([type='filter'][checked]:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-on-secondary-container);
+    --_trailing-icon-color: var(--md-sys-on-secondary-container);
+    --_outline-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
   }
 
-  :host([type='filter']),
-  :host([type='filter']) .leading-icon {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
+  :host([type='input']:not([disabled])) {
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_leading-icon-color: var(--md-sys-color-primary);
+    --_trailing-icon-color: var(--md-sys-color-on-surface-variant);
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([type='filter'][checked]),
-  :host([type='filter'][checked]) .leading-icon {
-    color: var(--md-sys-color-on-secondary-container);
+  :host([type='input'][checked]) {
+    --_outline-size: 0px;
   }
 
-  :host([type='input']) .container {
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface-variant);
+  :host([type='suggestion']) {
+    --_outline-size: 1px;
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([type='input']) .leading-icon,
-  :host([type='input']) .trailing-icon {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
+  :host([type='suggestion']:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-primary);
   }
 `