@kubex/zinc 1.1.185 → 2.0.0

package/scss/themes/_typography.scss

@@ -14,14 +14,16 @@
  *   --zn-text-<role>-transform
  *   --zn-text-<role>-letter-spacing
  *
- * All roles use the sans family (--zn-font-sans). Apply a role
- * in a component with the text-style() mixin from scss/mixins.
+ * Roles use the sans family (--zn-font-sans) unless a theme sets
+ * --zn-text-<role>-font-family. Apply a role in a component with
+ * the text-style() mixin from scss/mixins.
  *************************************************************/
 
 $text-styles: (
   "paragraph": ("size": 14px, "line": 21px, "spacing": 21px, "weight": normal, "color": default, "transform": none),
   "table-content": ("size": 14px, "line": 16px, "spacing": 15px, "weight": normal, "color": default, "transform": none),
   "chat": ("size": 16px, "line": 24px, "spacing": 15px, "weight": normal, "color": default, "transform": none),
+  "page-title": ("size": 16px, "line": 16px, "spacing": 18px, "weight": semibold, "color": default, "transform": none),
   "h1": ("size": 16px, "line": 16px, "spacing": 18px, "weight": semibold, "color": default, "transform": none),
   "h2": ("size": 14px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),
   "h3": ("size": 11px, "line": 16px, "spacing": 15px, "weight": semibold, "color": default, "transform": none),

package/scss/variables/index.scss

@@ -1,10 +1 @@
 @forward "spacing";
-
-@keyframes rotate-gradient {
-  from {
-    --rotate: 0deg;
-  }
-  to {
-    --rotate: 360deg;
-  }
-}

package/src/components/alert/alert.component.ts

@@ -1,6 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
+import {registerCosmicBorder} from "../../internal/cosmic-border";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './alert.scss';
@@ -26,24 +27,33 @@ export default class ZnAlert extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   @property({type: String}) icon: string = '';
+  /** The status icon's size in pixels. */
+  @property({attribute: 'icon-size', type: Number}) iconSize = 24;
   @property({type: String}) caption: string = '';
   @property({type: Boolean}) collapse: boolean = false;
   @property({type: String, reflect: true}) appearance: 'transparent' | 'solid' = 'transparent';
-  @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' = 'info';
+  /** `ai` marks AI-generated content only. */
+  @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' | 'ai' = 'info';
   @property({type: Boolean, reflect: true}) center: boolean = false;
   @property({type: String}) size: 'small' | 'medium' | 'large' = 'medium';
 
+  connectedCallback() {
+    super.connectedCallback();
+    registerCosmicBorder();
+  }
+
   render() {
     let icon;
 
     if (this.icon) {
       if (this.collapse) {
         icon = this.icon ? html`
-          <zn-icon class="alert-icon" src="${this.icon}" id="xy2" @click="${this.hideAlert}"
-                   style="cursor: pointer"></zn-icon>` : "";
+          <button type="button" class="alert-dismiss" aria-label="Dismiss" @click="${this.hideAlert}">
+            <zn-icon class="alert-icon" src="${this.icon}" size="${this.iconSize}" id="xy2"></zn-icon>
+          </button>` : "";
       } else {
         icon = this.icon ? html`
-          <zn-icon class="alert-icon" src="${this.icon}" id="xy2"></zn-icon>` : '';
+          <zn-icon class="alert-icon" src="${this.icon}" size="${this.iconSize}" id="xy2"></zn-icon>` : '';
       }
     }
 

package/src/components/alert/alert.scss

@@ -5,19 +5,39 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  border-radius: 10px;
+  border-radius: var(--zn-alert-border-radius, 10px);
 }
 
 :host {
-  background-color: rgba(var(--zn-panel), 0.8);
+  background-color: var(--zn-alert-background, rgba(var(--zn-panel), 0.8));
 }
 
 :host([appearance="solid"]) {
-  background-color: rgb(var(--zn-panel));
+  background-color: var(--zn-alert-solid-background, rgb(var(--zn-panel)));
+}
+
+.alert-dismiss {
+  display: inline-flex;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--zn-focus-ring);
+    border-radius: var(--zn-border-radius-small);
+  }
 }
 
 .alert-icon {
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  padding: var(--zn-alert-icon-padding, var(--zn-spacing-2x-small) var(--zn-spacing-x-small));
+  margin-top: var(--zn-alert-icon-offset, 0);
+}
+
+// zn-icon draws lucide icons at its own stroke; a theme can lighten the status icon's
+.alert-icon::part(icon) {
+  stroke-width: var(--zn-alert-icon-stroke-width, 2.1);
 }
 
 p {
@@ -35,6 +55,8 @@ p {
 // which is not where alerts sit.
 .wrapper {
   position: relative;
+  align-items: var(--zn-alert-align-items, center);
+  gap: var(--zn-alert-gap, 0);
   border: 1px solid rgb(var(--zn-border-color)) !important;
   width: 100%;
   height: 100%;
@@ -55,7 +77,8 @@ p {
   flex-grow: 1;
   align-self: start;
   text-align: left;
-  padding: 8px;
+  padding: var(--zn-alert-content-padding, 8px);
+  color: var(--zn-alert-body-color, inherit);
 
   > h6 {
     font-size: inherit;
@@ -81,78 +104,41 @@ p {
   background: rgba(var(--zn-panel), .05);
 }
 
-:host([level="primary"]) .wrapper {
-  h6 {
-    color: rgb(var(--zn-primary));
-  }
-
-  border-color: rgb(var(--zn-primary)) !important;
-  background: rgba(var(--zn-primary), .05);
-
-  zn-icon {
-    --icon-color: rgb(var(--zn-primary));
-  }
-}
-
-:host([level="error"]) .wrapper {
-  h6 {
-    color: rgb(var(--zn-color-error));
-  }
-
-  border-color: rgb(var(--zn-color-error)) !important;
-  background: rgba(var(--zn-color-error), .05);
-
-  zn-icon {
-    --icon-color: rgb(var(--zn-color-error));
-  }
-}
-
-:host([level="info"]) .wrapper {
-  h6 {
-    color: rgb(var(--zn-color-info));
-  }
+// Each level paints from one RGB triplet: the title and border in the colour,
+// the wrapper a light tint of it. A theme can soften the border and deepen the
+// tint through the alpha tokens, or give titles a neutral colour.
+@each $level, $rgb, $role in (
+  (primary, var(--zn-primary), primary),
+  (error, var(--zn-color-error), danger),
+  (info, var(--zn-color-info), info),
+  (warning, var(--zn-color-warning), warning),
+  (success, var(--zn-color-success), success),
+  (ai, var(--zn-color-ai), ai)
+) {
+  :host([level="#{$level}"]) .wrapper {
+    h6 {
+      color: var(--zn-alert-title-color, rgb(#{$rgb}));
+    }
 
-  border-color: rgb(var(--zn-color-info)) !important;
-  background: rgba(var(--zn-color-info), .05);
+    border-color: rgba(#{$rgb}, var(--zn-alert-border-alpha, 1)) !important;
+    background: rgba(#{$rgb}, var(--zn-alert-tint-alpha, .05));
 
-  zn-icon {
-    --icon-color: rgb(var(--zn-color-info));
+    zn-icon {
+      @if $role == primary {
+        --icon-color: rgb(#{$rgb});
+      } @else {
+        --icon-color: var(--zn-color-#{$role}-fg);
+      }
+    }
   }
 }
 
-:host([level="warning"]) .wrapper {
-  h6 {
-    color: rgb(var(--zn-color-warning));
-  }
-
-  border-color: rgb(var(--zn-color-warning)) !important;
-  background: rgba(var(--zn-color-warning), .05);
-
-  zn-icon {
-    --icon-color: rgb(var(--zn-color-warning));
-  }
-}
-
-:host([level="success"]) .wrapper {
-  h6 {
-    color: rgb(var(--zn-color-success));
-  }
-
-  border-color: rgb(var(--zn-color-success)) !important;
-  background: rgba(var(--zn-color-success), .05);
-
-  zn-icon {
-    --icon-color: rgb(var(--zn-color-success));
-  }
-}
-
-
 :host([level="note"]) .wrapper {
   h6 {
-    color: var(--zn-color-gray-800);
+    color: var(--zn-alert-title-color, var(--zn-color-gray-800));
   }
 
-  border-color: var(--zn-color-gray-500) !important;
+  border-color: var(--zn-alert-note-border-color, var(--zn-color-gray-500)) !important;
   background: var(--zn-color-gray-100);
 
   zn-icon {
@@ -167,7 +153,7 @@ p {
   }
 
   &--medium {
-    padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+    padding: var(--zn-alert-padding, var(--zn-spacing-x-small) var(--zn-spacing-small));
     font-size: 100%;
   }
 

package/src/components/alert/alert.test.ts

@@ -7,4 +7,12 @@ describe('<zn-alert>', () => {
 
     expect(el).to.exist;
   });
+
+  it('tints an ai alert from the ai colour', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-alert level="ai" caption="Suggested" style="--zn-color-ai: 1, 2, 3">Drafted for you.</zn-alert>`);
+    const wrapper = el.shadowRoot!.querySelector('.wrapper')!;
+
+    expect(getComputedStyle(wrapper).borderTopColor).to.equal('rgb(1, 2, 3)');
+  });
 });

package/src/components/animated-button/animated-button.component.ts

@@ -142,7 +142,7 @@ export default class ZnAnimatedButton extends ZincElement {
   }
 
   protected render() {
-    const isDisabled = this.disabled || this.currentState !== 'idle';
+    const isBusy = this.currentState !== 'idle';
     const showSpinner = this.currentState === 'processing';
     const showSuccess = this.currentState === 'success';
     const showFailure = this.currentState === 'failure';
@@ -163,7 +163,8 @@ export default class ZnAnimatedButton extends ZincElement {
     return html`
       <button
         class=${classMap(classes)}
-        ?disabled=${isDisabled}
+        ?disabled=${this.disabled}
+        aria-disabled=${isBusy ? 'true' : 'false'}
         @click=${this.handleClick}
         type="button"
         aria-live="polite"

package/src/components/animated-button/animated-button.scss

@@ -1,4 +1,5 @@
 @use "../../../scss/shared/button-mixin" as shared;
+@use "../../wc";
 
 :host {
   display: inline-block;
@@ -24,11 +25,11 @@
   font-family: inherit;
   cursor: pointer;
 
-  &:hover:not(:disabled) {
+  &:hover:not(:disabled, [aria-disabled='true']) {
     opacity: 0.9;
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled, [aria-disabled='true']) {
     transform: scale(0.98);
   }
 
@@ -64,23 +65,14 @@
 .animated-button__spinner {
   display: inline-flex;
   flex-shrink: 0;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+  @include wc.spin;
 }
 
 // Shimmer animation for processing state
 .animated-button__shimmer {
   position: absolute;
   top: 0;
-  left: -100%;
+  left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
@@ -89,16 +81,7 @@
     rgba(255, 255, 255, 0.3) 50%,
     rgba(255, 255, 255, 0) 100%
   );
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
+  @include wc.sweep(1.5s, $easing: ease);
 }
 
 // State: Idle (default blue)

package/src/components/animated-button/animated-button.test.ts

@@ -22,16 +22,17 @@ describe('<zn-animated-button>', () => {
     expect(button?.textContent?.trim()).to.equal('Buy Now');
   });
 
-  it('should be disabled when processing', async () => {
+  it('should be aria-disabled but focusable when processing', async () => {
     const el = await fixture<ZnAnimatedButton>(html`<zn-animated-button></zn-animated-button>`);
     const button = el.shadowRoot?.querySelector('button') as HTMLButtonElement;
 
-    expect(button.disabled).to.be.false;
+    expect(button.getAttribute('aria-disabled')).to.not.equal('true');
 
     button.click();
     await el.updateComplete;
 
-    expect(button.disabled).to.be.true;
+    expect(button.getAttribute('aria-disabled')).to.equal('true');
+    expect(button.disabled).to.be.false;
   });
 
   it('should emit zn-purchase event when clicked', async () => {

package/src/components/avatar-group/avatar-group.component.ts

@@ -0,0 +1,84 @@
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {property, state} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+import ZnTooltip from '../tooltip';
+
+import styles from './avatar-group.scss';
+
+/**
+ * @summary Overlapping avatars that show each person's name on hover, collapsing any past `max` into a "+N" count.
+ * @documentation https://zinc.style/components/avatar-group
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-tooltip
+ *
+ * @slot - `zn-icon` avatars. Each one's tooltip shows its `alt`, or its `src` when it has none.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overflow - The "+N" count standing in for the avatars past `max`.
+ *
+ * @cssproperty --zn-avatar-ring-color - The ring that separates overlapping avatars; defaults to the panel surface.
+ */
+export default class ZnAvatarGroup extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-tooltip': ZnTooltip,
+  };
+
+  /** The most avatars to show; the rest are counted in a "+N" avatar whose tooltip lists them. 0 shows them all. */
+  @property({type: Number}) max = 0;
+
+  @state() private _avatars: HTMLElement[] = [];
+
+  constructor() {
+    super();
+    // eslint-disable-next-line no-new
+    new MutationController(this, {
+      config: {childList: true, subtree: true, attributes: true, attributeFilter: ['src', 'alt', 'size']},
+      callback: () => this._syncAvatars(),
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._syncAvatars();
+  }
+
+  // Each avatar is routed to its own slot so it can sit inside a tooltip of its own
+  private _syncAvatars() {
+    this._avatars = [...this.children].filter((el): el is HTMLElement => el instanceof HTMLElement);
+    this._avatars.forEach((avatar, i) => {
+      const slot = `avatar-${i}`;
+      if (avatar.slot !== slot) avatar.slot = slot;
+      // The ring and overlap are circular, so a square avatar would show its corners outside them
+      if (!avatar.hasAttribute('round')) avatar.setAttribute('round', '');
+    });
+  }
+
+  private _name(avatar: HTMLElement) {
+    return avatar.getAttribute('alt') || avatar.getAttribute('src') || avatar.textContent?.trim() || '';
+  }
+
+  render() {
+    const shown = this.max > 0 && this._avatars.length > this.max ? this._avatars.slice(0, this.max) : this._avatars;
+    const hidden = this._avatars.slice(shown.length);
+    const hiddenNames = hidden.map(avatar => this._name(avatar)).filter(Boolean).join(', ');
+    const size = (shown[0] as HTMLElement & { size?: number })?.size;
+
+    return html`
+      <div part="base" class="avatar-group" role="group">
+        ${shown.map((avatar, i) => html`
+          <zn-tooltip content="${this._name(avatar)}">
+            <slot name="avatar-${i}"></slot>
+          </zn-tooltip>`)}
+        ${hidden.length > 0 ? html`
+          <zn-tooltip content="${hiddenNames}">
+            <span part="overflow" class="avatar-group__overflow" tabindex="0" role="img"
+                  aria-label="${hidden.length} more: ${hiddenNames}"
+                  style="${size ? `--avatar-size: ${size}px` : ''}">+${hidden.length}</span>
+          </zn-tooltip>` : ''}
+      </div>`;
+  }
+}

package/src/components/avatar-group/avatar-group.scss

@@ -0,0 +1,54 @@
+@use "../../wc";
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+::slotted(zn-icon),
+.avatar-group__overflow {
+  border-radius: 50%;
+  // A ring in the surface colour separates each avatar from the one it overlaps
+  box-shadow: 0 0 0 2px var(--zn-avatar-ring-color, rgb(var(--zn-panel)));
+}
+
+::slotted(zn-icon:not([slot="avatar-0"])),
+.avatar-group__overflow {
+  margin-inline-start: -0.4rem;
+}
+
+// Lifted over its neighbours so the whole avatar shows while its tooltip is open
+::slotted(zn-icon:hover) {
+  position: relative;
+  z-index: 1;
+}
+
+// Matches a solid zn-icon avatar in the text colour
+.avatar-group__overflow {
+  --avatar-size: 28px;
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  background-color: rgb(var(--zn-text));
+  color: rgb(var(--zn-panel));
+  font-size: calc(var(--avatar-size) * var(--zn-avatar-font-scale, 0.4167));
+  font-weight: var(--zn-avatar-font-weight, var(--zn-font-weight-semibold));
+  line-height: 1;
+  letter-spacing: .02em;
+  cursor: default;
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: 2px;
+  }
+}

package/src/components/avatar-group/avatar-group.test.ts

@@ -0,0 +1,59 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnAvatarGroup from './avatar-group.component';
+
+describe('<zn-avatar-group>', () => {
+  it('should wrap each avatar in a tooltip with its name', async () => {
+    const el = await fixture<ZnAvatarGroup>(html`
+      <zn-avatar-group>
+        <zn-icon src="Ben Brooks" library="avatar"></zn-icon>
+        <zn-icon src="JE" alt="Jade Ellis" library="avatar"></zn-icon>
+      </zn-avatar-group>
+    `);
+    await el.updateComplete;
+
+    const tooltips = [...el.shadowRoot!.querySelectorAll('zn-tooltip')];
+    expect(tooltips.map(tooltip => tooltip.getAttribute('content'))).to.deep.equal(['Ben Brooks', 'Jade Ellis']);
+    expect(tooltips[0].querySelector('slot')!.assignedElements()[0]).to.equal(el.children[0]);
+  });
+
+  it('should make its avatars round', async () => {
+    const el = await fixture<ZnAvatarGroup>(html`
+      <zn-avatar-group><zn-icon src="Ben Brooks" library="avatar"></zn-icon></zn-avatar-group>
+    `);
+    expect(el.children[0].hasAttribute('round')).to.be.true;
+  });
+
+  it('should count the avatars past max and list them in the overflow tooltip', async () => {
+    const el = await fixture<ZnAvatarGroup>(html`
+      <zn-avatar-group max="2">
+        <zn-icon src="Ben Brooks" library="avatar" size="lg"></zn-icon>
+        <zn-icon src="Jade Ellis" library="avatar" size="lg"></zn-icon>
+        <zn-icon src="Kai Walsh" library="avatar" size="lg"></zn-icon>
+        <zn-icon src="Ann Isaacs" library="avatar" size="lg"></zn-icon>
+      </zn-avatar-group>
+    `);
+    await el.updateComplete;
+
+    const overflow = el.shadowRoot!.querySelector<HTMLElement>('[part="overflow"]')!;
+    expect(overflow.textContent!.trim()).to.equal('+2');
+    expect(overflow.closest('zn-tooltip')!.getAttribute('content')).to.equal('Kai Walsh, Ann Isaacs');
+    expect(overflow.getBoundingClientRect().width).to.equal(40);
+    expect((el.children[2] as HTMLElement).getBoundingClientRect().width).to.equal(0);
+  });
+
+  it('should update when avatars are added', async () => {
+    const el = await fixture<ZnAvatarGroup>(html`
+      <zn-avatar-group><zn-icon src="Ben Brooks" library="avatar"></zn-icon></zn-avatar-group>
+    `);
+    const added = document.createElement('zn-icon');
+    added.setAttribute('src', 'Jade Ellis');
+    added.setAttribute('library', 'avatar');
+    el.append(added);
+    await new Promise(resolve => setTimeout(resolve, 0));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelectorAll('zn-tooltip')).to.have.length(2);
+    expect(added.slot).to.equal('avatar-1');
+  });
+});

package/src/components/avatar-group/index.ts

@@ -0,0 +1,12 @@
+import ZnAvatarGroup from './avatar-group.component';
+
+export * from './avatar-group.component';
+export default ZnAvatarGroup;
+
+ZnAvatarGroup.define('zn-avatar-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-avatar-group': ZnAvatarGroup;
+  }
+}

package/src/components/badge/badge.component.ts

@@ -0,0 +1,49 @@
+import {classMap} from "lit/directives/class-map.js";
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './badge.scss';
+
+/**
+ * @summary Badges label the status or category of a record, such as "Active" or "Past due".
+ * @documentation https://zinc.style/components/badge
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The badge's label.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnBadge extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  /** `ai` marks AI-generated content only. */
+  @property({reflect: true}) type: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'ai' = 'neutral';
+
+  @property({reflect: true}) size: 'medium' | 'large' = 'medium';
+
+  /** Fills the badge with its type colour. */
+  @property({type: Boolean, reflect: true}) solid = false;
+
+  /** Leads the label with a dot in the type colour. */
+  @property({type: Boolean, reflect: true}) dot = false;
+
+  render() {
+    return html`
+      <span part="base" class="${classMap({
+        'badge': true,
+        [`badge--${this.type}`]: true,
+        'badge--large': this.size === 'large',
+        'badge--solid': this.solid,
+        'badge--dot': this.dot,
+      })}">
+        ${this.type === 'ai' ? html`
+          <zn-icon class="badge__icon" src="sparkle" library="lucide" size="14"></zn-icon>` : ''}
+        <slot></slot>
+      </span>
+    `;
+  }
+}