@kubex/zinc 1.1.185 → 2.0.0

package/src/components/button/button.scss

@@ -23,6 +23,8 @@
   // component-level override.
   --btn-color: var(--zn-primary);
   --btn-ink: var(--zn-color-on-primary, 255, 255, 255);
+  // The button colour as text on a surface (outline and text buttons).
+  --btn-surface-fg: var(--zn-color-primary-fg, rgb(var(--btn-color)));
   --notification-color: rgb(var(--zn-color-error));
 
   border-width: var(--zn-button-border-width, 1px);
@@ -33,27 +35,54 @@
   border-color: var(--zn-button-border-color, transparent);
   display: inline-flex;
   position: relative;
+  transition: background-color var(--zn-transition-fast, 150ms) ease,
+              border-color var(--zn-transition-fast, 150ms) ease,
+              color var(--zn-transition-fast, 150ms) ease,
+              transform 160ms var(--zn-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
+
+  &:active:not([disabled]) {
+    transform: scale(0.97);
+  }
 
   &.button--info {
+    --btn-surface-fg: var(--zn-color-info-fg);
     --btn-color: var(--zn-color-info);
     --btn-ink: var(--zn-color-on-info, 255, 255, 255);
   }
 
   &.button--error {
+    --btn-surface-fg: var(--zn-color-danger-fg);
     --btn-color: var(--zn-color-error);
     --btn-ink: var(--zn-color-on-error, 255, 255, 255);
   }
 
   &.button--warning {
+    --btn-surface-fg: var(--zn-color-warning-fg);
     --btn-color: var(--zn-color-warning);
     --btn-ink: var(--zn-color-on-warning, 255, 255, 255);
   }
 
   &.button--success {
+    --btn-surface-fg: var(--zn-color-success-fg);
     --btn-color: var(--zn-color-success);
     --btn-ink: var(--zn-color-on-success, 255, 255, 255);
   }
 
+  &.button--ai {
+    --btn-surface-fg: var(--zn-color-ai-fg);
+    --btn-color: var(--zn-color-ai);
+    --btn-ink: var(--zn-color-on-ai, 255, 255, 255);
+  }
+
+  &.button--small {
+    --zn-button-height: var(--zn-button-height-small, 30px);
+    font-size: var(--zn-button-font-size-small, var(--zn-text-button-label-font-size));
+  }
+
+  &.button--large {
+    --zn-button-height: var(--zn-button-height-large, 40px);
+  }
+
   &__label--hidden {
     visibility: hidden;
   }
@@ -129,30 +158,41 @@
 
 .button--standard {
   &.button--secondary {
-    background-color: var(--zn-color-neutral-50);
-    border-color: var(--zn-button-border-color, var(--zn-color-neutral-50));
-    color: rgb(var(--zn-primary));
+    background-color: var(--zn-button-secondary-background, var(--zn-color-neutral-50));
+    border-color: var(--zn-button-border-color, var(--zn-button-secondary-border, var(--zn-color-neutral-50)));
+    color: var(--zn-button-secondary-color, rgb(var(--zn-primary)));
 
     &:hover:not([disabled]) {
-      background-color: var(--zn-color-neutral-100)
+      background-color: var(--zn-button-secondary-hover-background, var(--zn-color-neutral-100));
     }
 
     &:active:not([disabled]) {
-      background-color: var(--zn-color-neutral-100)
+      background-color: var(--zn-button-secondary-active-background, var(--zn-color-neutral-100));
     }
   }
 
+  &.button--ai {
+    background-color: var(--zn-color-ai-bg);
+    border-color: var(--zn-button-border-color, var(--zn-color-ai-line));
+    color: var(--zn-color-ai-fg);
+    box-shadow: none;
+
+    &:hover:not([disabled]), &:active:not([disabled]) {
+      background-color: color-mix(in srgb, var(--zn-color-ai-bg), var(--zn-color-ai-line));
+    }
+  }
 
   background-color: rgba(var(--btn-color));
   border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
   color: rgba(var(--btn-ink), 0.9);
+  box-shadow: var(--zn-button-shadow, none);
 
   &:hover:not([disabled]) {
-    background-color: rgba(var(--btn-color), 0.8);
+    background-color: color-mix(in srgb, rgb(var(--btn-color)) var(--zn-button-hover-mix, 80%), var(--zn-button-mix-color, transparent));
   }
 
   &:active:not([disabled]) {
-    background-color: rgba(var(--btn-color));
+    background-color: color-mix(in srgb, rgb(var(--btn-color)) var(--zn-button-active-mix, 100%), var(--zn-button-mix-color, transparent));
   }
 }
 
@@ -163,12 +203,14 @@
   border-right-width: var(--zn-button-border-right-width, var(--zn-button-border-width, 1px));
   border-bottom-width: var(--zn-button-border-bottom-width, var(--zn-button-border-width, 1px));
   border-left-width: var(--zn-button-border-left-width, var(--zn-button-border-width, 1px));
-  border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
-  color: rgb(var(--btn-color));
+  border-color: var(--zn-button-border-color, rgba(var(--btn-color), var(--zn-button-outline-border-alpha, 1)));
+  color: var(--btn-surface-fg);
 
+  // A theme can swap the solid hover for a tint by lowering the alpha and
+  // keeping the ink on the button colour (ink mix 0%).
   &:hover:not([disabled]), &:active:not([disabled]) {
-    background-color: rgb(var(--btn-color));
-    color: rgb(var(--btn-ink));
+    background-color: rgba(var(--btn-color), var(--zn-button-outline-hover-alpha, 1));
+    color: color-mix(in srgb, rgb(var(--btn-ink)) var(--zn-button-outline-hover-ink-mix, 100%), var(--btn-surface-fg));
   }
 
   &.button--secondary {
@@ -184,7 +226,7 @@
 
 .button--text {
   background: none;
-  color: rgb(var(--btn-color));
+  color: var(--btn-surface-fg);
 
   &:hover:not([disabled]), &:active:not([disabled]) {
     background-color: rgba(var(--btn-color), 0.1);
@@ -192,6 +234,12 @@
 
   &.button--secondary {
     font-weight: normal;
+    color: var(--zn-button-ghost-color, rgb(var(--btn-color)));
+
+    &:hover:not([disabled]), &:active:not([disabled]) {
+      background-color: var(--zn-button-ghost-hover-background, rgba(var(--btn-color), 0.1));
+      color: var(--zn-button-ghost-hover-color, rgb(var(--btn-color)));
+    }
   }
 }
 
@@ -227,6 +275,7 @@
 
 .button--transparent {
   background-color: transparent;
+  box-shadow: none;
   border-color: var(--zn-button-border-color, transparent) !important;
   color: inherit;
 
@@ -241,6 +290,7 @@
 
 .button--star {
   --btn-color: var(--zn-orange);
+  --btn-surface-fg: rgb(var(--btn-color));
   --btn-ink: var(--zn-color-on-warning, 255, 255, 255);
   background-color: rgb(var(--btn-color));
   border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
@@ -281,15 +331,16 @@
   --icon-button-color: rgb(var(--zn-text));
   --icon-button-hover-color: rgb(var(--zn-primary));
 
-  width: 40px;
-  min-width: 40px;
-  height: 36px;
-  min-height: 36px;
-  max-height: 36px;
+  width: var(--zn-button-icon-width, 40px);
+  min-width: var(--zn-button-icon-width, 40px);
+  height: var(--zn-button-height, 36px);
+  min-height: var(--zn-button-height, 36px);
+  max-height: var(--zn-button-height, 36px);
   padding: 6px;
+  box-shadow: var(--zn-button-icon-shadow, none);
   margin: 0;
   background: rgb(var(--zn-panel));
-  border-color: var(--zn-button-border-color, rgb(var(--zn-border-color))) !important;
+  border-color: var(--zn-button-border-color, var(--zn-button-icon-border, rgb(var(--zn-border-color)))) !important;
   border-radius: var(--zn-border-radius);
   color: var(--icon-button-color);
   font-weight: inherit;
@@ -309,18 +360,19 @@
   }
 
   &.button--icon-button-small {
-    width: 36px;
-    min-width: 36px;
+    width: var(--zn-button-height, 36px);
+    min-width: var(--zn-button-height, 36px);
   }
 
   // Round: 36x36 circle on the tab tint, muted icon by default
   &.button--icon-button-round {
-    width: 36px;
-    min-width: 36px;
+    width: var(--zn-button-height, 36px);
+    min-width: var(--zn-button-height, 36px);
     padding: 8px;
     background: rgb(var(--zn-color-tab));
     border-color: var(--zn-button-border-color, transparent) !important;
     border-radius: var(--zn-border-radius-circle);
+    box-shadow: none;
 
     &:hover:not([disabled]), &:active:not([disabled]) {
       background: rgb(var(--zn-color-border));
@@ -330,9 +382,10 @@
   &.button--plain {
     background: transparent;
     border-color: var(--zn-button-border-color, transparent) !important;
+    box-shadow: none;
 
     &:hover:not([disabled]), &:active:not([disabled]) {
-      background: rgb(var(--zn-color-tab));
+      background: var(--zn-button-plain-hover-background, rgb(var(--zn-color-tab)));
     }
   }
 
@@ -436,19 +489,13 @@
   border: 2px solid currentColor;
   border-right-color: transparent;
   border-radius: 50%;
-  animation: button-spin .7s linear infinite;
+  @include wc.spin(.7s);
 }
 
 .button__label--replaced {
   display: none;
 }
 
-@keyframes button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .button--relative-wrapper {
   position: relative;
   display: inline-flex;
@@ -531,8 +578,10 @@
 .button.button--pill {
   border-radius: var(--zn-border-radius-pill);
   padding: 0 var(--zn-spacing-small);
-  height: 32px;
-  min-height: 32px;
+  height: var(--zn-button-pill-height, 32px);
+  min-height: var(--zn-button-pill-height, 32px);
+  max-height: var(--zn-button-pill-height, 32px);
+  box-shadow: none;
   font-weight: var(--zn-font-weight-normal);
   text-transform: none;
   white-space: nowrap;
@@ -567,3 +616,37 @@
 :host([data-zn-button-group__button--panel-bg]) .button:not(.button--icon-button) {
   @include panel-bg;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .button {
+    transition: background-color var(--zn-transition-fast, 150ms) ease,
+                border-color var(--zn-transition-fast, 150ms) ease,
+                color var(--zn-transition-fast, 150ms) ease;
+
+    &:active:not([disabled]) {
+      transform: none;
+    }
+  }
+}
+
+// Long press menu: the dropdown sits over the button so its panel anchors to the button's box, and lets
+// presses through to the button underneath.
+.button__menu {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.button__menu-anchor {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.button__menu-panel {
+  pointer-events: auto;
+}
+
+.button--has-menu {
+  -webkit-touch-callout: none;
+}

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

@@ -39,4 +39,126 @@ describe('<zn-button>', () => {
     expect(base.getAttribute('aria-pressed')).to.equal('false');
   });
 
+  it('forwards aria-expanded and aria-haspopup to the inner button', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button aria-haspopup="dialog" aria-expanded="false">Menu</zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.getAttribute('aria-haspopup')).to.equal('dialog');
+    expect(base.getAttribute('aria-expanded')).to.equal('false');
+
+    el.setAttribute('aria-expanded', 'true');
+    await el.updateComplete;
+    expect(base.getAttribute('aria-expanded')).to.equal('true');
+
+    const plain = await fixture<ZnButton>(html`<zn-button>Plain</zn-button>`);
+    const plainBase = plain.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(plainBase.hasAttribute('aria-expanded')).to.be.false;
+    expect(plainBase.hasAttribute('aria-haspopup')).to.be.false;
+  });
+
+  it('applies size classes', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button size="small">Small</zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.classList.contains('button--small')).to.be.true;
+
+    el.size = 'large';
+    await el.updateComplete;
+    expect(base.classList.contains('button--small')).to.be.false;
+    expect(base.classList.contains('button--large')).to.be.true;
+  });
+
+  it('applies the ai color', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button color="ai">Summarise</zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.classList.contains('button--ai')).to.be.true;
+    await expect(el).to.be.accessible();
+  });
+
+
+  it('submits to its formaction, with its name and value', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form action="/default">
+        <zn-button type="submit" formaction="/add" name="intent" value="add">Add</zn-button>
+      </form>
+    `);
+    const button = form.querySelector('zn-button')! as HTMLElement & {updateComplete: Promise<unknown>};
+    await button.updateComplete;
+
+    let action = '';
+    let intent: FormDataEntryValue | null = null;
+    form.addEventListener('submit', (e: SubmitEvent) => {
+      e.preventDefault();
+      action = e.submitter!.getAttribute('formaction') ?? '';
+      intent = new FormData(form, e.submitter).get('intent');
+    });
+    button.click();
+
+    expect(action).to.equal('/add');
+    expect(intent).to.equal('add');
+  });
+
+  describe('long press menu', () => {
+    const menuFixture = () => fixture<ZnButton>(html`
+      <zn-button long-press-delay="50">
+        Send
+        <zn-menu slot="menu">
+          <zn-menu-item value="draft">Save as draft</zn-menu-item>
+        </zn-menu>
+      </zn-button>
+    `);
+
+    const press = (base: Element, type: string) =>
+      base.dispatchEvent(new PointerEvent(type, {bubbles: true, composed: true, button: 0, clientX: 5, clientY: 5}));
+
+    it('announces the menu on the inner button', async () => {
+      const el = await menuFixture();
+      const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+      expect(base.getAttribute('aria-haspopup')).to.equal('menu');
+      expect(base.getAttribute('aria-expanded')).to.equal('false');
+    });
+
+    it('runs the click action on a short press', async () => {
+      const el = await menuFixture();
+      const base = el.shadowRoot!.querySelector('[part~="base"]')! as HTMLElement;
+      let clicks = 0;
+      el.addEventListener('click', () => clicks++);
+
+      press(base, 'pointerdown');
+      press(document.body, 'pointerup');
+      base.click();
+
+      expect(clicks).to.equal(1);
+      expect(el.menuDropdown.open).to.be.false;
+    });
+
+    it('opens the menu on a long press and swallows the click that ends it', async () => {
+      const el = await menuFixture();
+      const base = el.shadowRoot!.querySelector('[part~="base"]')! as HTMLElement;
+      let clicks = 0;
+      el.addEventListener('click', () => clicks++);
+
+      press(base, 'pointerdown');
+      await new Promise(resolve => setTimeout(resolve, 100));
+      press(document.body, 'pointerup');
+      base.click();
+
+      expect(el.menuDropdown.open).to.be.true;
+      expect(clicks).to.equal(0);
+      expect(base.getAttribute('aria-expanded')).to.equal('true');
+    });
+
+    it('opens the menu with ArrowDown', async () => {
+      const el = await menuFixture();
+      const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+
+      base.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true, composed: true}));
+      await el.menuDropdown.updateComplete;
+
+      expect(el.menuDropdown.open).to.be.true;
+    });
+
+    it('renders no dropdown without a menu', async () => {
+      const el = await fixture<ZnButton>(html`<zn-button>Plain</zn-button>`);
+      expect(el.shadowRoot!.querySelector('zn-dropdown')).to.be.null;
+    });
+  });
 });

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

@@ -23,6 +23,8 @@ interface CustomButtonWidths {
  * @since 1.0
  *
  * @slot - The default slot.
+ * @slot prefix - Controls shown just before the inline buttons, such as a segmented toggle. Their width is kept
+ *   free when working out which buttons fit.
  *
  */
 export default class ZnButtonMenu extends ZincElement {
@@ -40,7 +42,7 @@ export default class ZnButtonMenu extends ZincElement {
   @property({type: Number, attribute: 'max-level'})
   public maxLevel: number = 2; // primary = 1, secondary = 2, transparent = 3
 
-  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 20;
+  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 16;
 
   @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
 
@@ -51,6 +53,9 @@ export default class ZnButtonMenu extends ZincElement {
   private _originalButtons: CustomButtonWidths[] = [];
 
   private _resizeRafId = 0;
+  // What the last rebuild laid out, so a resize that keeps the same split leaves the DOM alone
+  private _shownCount = -1;
+  private _shownTotal = -1;
 
   private readonly resizeObserver = new ResizeController(this, {
     target: null,
@@ -96,20 +101,20 @@ export default class ZnButtonMenu extends ZincElement {
     if (this.maxWidth) {
       this.containerWidth = Math.min(this.containerWidth, this.maxWidth);
     }
-    this.calculateVisibleButtons();
+    this.calculateVisibleButtons(true);
   }
 
   connectedCallback() {
     super.connectedCallback();
-    this.containerWidth = this.offsetWidth;
 
     if (this.parentNode) {
       this.resizeObserver.observe(this.parentNode as HTMLElement);
     }
   }
 
-  calculateVisibleButtons() {
+  calculateVisibleButtons(onlyIfChanged = false) {
     const containerWidth = this.containerWidth;
+    const focused = this.shadowRoot?.activeElement as ZnButton | null;
 
     let primaryButtons = 0;
     let secondaryButtons = 0;
@@ -119,6 +124,7 @@ export default class ZnButtonMenu extends ZincElement {
     let remainingWidth = containerWidth;
     this._buttons = [...this._originalButtons];
     remainingWidth -= 50; // Allow for more-vert button
+    remainingWidth -= this.getPrefixWidth();
 
     // Sort the buttons
     this._buttons.sort((a, b) => {
@@ -156,6 +162,12 @@ export default class ZnButtonMenu extends ZincElement {
       visibleButtons = Math.min(visibleButtons, this.limit);
     }
 
+    if (onlyIfChanged && visibleButtons === this._shownCount && totalButtons === this._shownTotal) {
+      return;
+    }
+    this._shownCount = visibleButtons;
+    this._shownTotal = totalButtons;
+
     // Remove all buttons from the ui and menu
     const container = this.shadowRoot?.querySelector('.button-menu__container');
     if (container) {
@@ -167,18 +179,18 @@ export default class ZnButtonMenu extends ZincElement {
       menu.innerHTML = '';
     }
 
-    // Add colors to the buttons depending on type
     this._buttons.forEach((button: CustomButtonWidths, index: number) => {
       if (index < visibleButtons) {
         this.shadowRoot?.querySelector('.button-menu__container')?.appendChild(button.button);
-
-        if (button.button.hasAttribute('primary') || button.button.hasAttribute('secondary')) {
-          button.button.setAttribute('text', "");
-        }
       }
     });
 
     this.calculateMenuButtons(totalButtons, visibleButtons, this._buttons);
+
+    if (focused && this.shadowRoot?.activeElement !== focused) {
+      const target = focused.isConnected ? focused : this.shadowRoot?.querySelector<ZnButton>('zn-button[slot="trigger"]');
+      target?.button?.focus();
+    }
   }
 
   calculateMenuButtons(totalButtons: number, visibleButtons: number, buttons: CustomButtonWidths[]) {
@@ -216,7 +228,7 @@ export default class ZnButtonMenu extends ZincElement {
               if (iconLibrary) {
                 iconElement.setAttribute('library', iconLibrary);
               }
-              iconElement.setAttribute('size', '18');
+              iconElement.setAttribute('size', '16');
               iconElement.setAttribute('slot', 'prefix');
               menuItem.appendChild(iconElement);
             }
@@ -268,6 +280,12 @@ export default class ZnButtonMenu extends ZincElement {
     })
   }
 
+  private getPrefixWidth(): number {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="prefix"]');
+    const gap = parseFloat(getComputedStyle(this).getPropertyValue('--menu-gap')) || 0;
+    return (slot?.assignedElements() ?? []).reduce((width, el) => width + (el as HTMLElement).offsetWidth + gap, 0);
+  }
+
   private getButtonLabel(button: ZnButton) {
     const labelSlot = button.shadowRoot?.querySelector<HTMLSlotElement>('slot[part="label"]');
     const slottedLabel = labelSlot ? [...labelSlot.assignedNodes({flatten: true})]
@@ -297,13 +315,16 @@ export default class ZnButtonMenu extends ZincElement {
         'button-menu--no-padding': this.noPadding,
         'button-menu--no-gap': this.noGap,
       })}">
+        <slot name="prefix" @slotchange="${() => this.calculateVisibleButtons()}"></slot>
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
           <zn-button slot="trigger"
                      icon="ellipsis"
                      icon-library="lucide"
                      icon-size="${this.iconSize}"
-                     icon-button="small"></zn-button>
+                     icon-button="small"
+                     plain
+                     label="More actions"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>

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

@@ -44,7 +44,11 @@
   }
 
   zn-button {
-    min-width: 34px;
+    min-width: var(--zn-button-icon-width, 34px);
     flex-shrink: 0;
   }
 }
+
+slot[name="prefix"]::slotted(*) {
+  align-self: center;
+}

package/src/components/channel-tile/channel-tile.component.ts

@@ -197,6 +197,13 @@ export default class ZnChannelTile extends ZincElement {
     this._accept();
   };
 
+  // A click, so listeners on the host see keyboard activation too
+  private _handleKeyDown = (e: KeyboardEvent) => {
+    if (e.target !== e.currentTarget || (e.key !== 'Enter' && e.key !== ' ')) return;
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).click();
+  };
+
   protected render(): unknown {
     const title = this.title || (this.available ? 'Available' : '');
     const countdown = this._isCountingDown() ? this._countdownPercent() : null;
@@ -214,7 +221,8 @@ export default class ZnChannelTile extends ZincElement {
         })}
         role="button"
         tabindex="0"
-        @click=${this._handleClick}>
+        @click=${this._handleClick}
+        @keydown=${this._handleKeyDown}>
         <div class="channel-tile__header">${this.header ? html`<h3>${this.header}</h3>` : ''}</div>
         ${countdown !== null
           ? html`
@@ -261,14 +269,9 @@ export default class ZnChannelTile extends ZincElement {
       <slot name="leading">
         ${this.icon
           ? html`
-            <zn-button icon=${this.icon}
-                       icon-size="20"
-                       icon-button="round"
-                       color=${this.color}
-                       class="${classMap({
-                         [`channel-tile--${this.color}`]: true,
-                       })}"
-                       no-hover></zn-button>`
+            <span class="channel-tile__lead">
+              <zn-icon src=${this.icon} size="16"></zn-icon>
+            </span>`
           : ''}
       </slot>`;
   }
@@ -276,32 +279,36 @@ export default class ZnChannelTile extends ZincElement {
   private _renderAvailableAction() {
     if (this.incoming && this.rejectable) {
       return html`
-        <button class="channel-tile__reject" type="button" aria-label=${this.rejectLabel}
+        <button class="channel-tile__lead channel-tile__reject" type="button" aria-label=${this.rejectLabel}
                 @click=${this._handleReject}>
-          <zn-icon src=${this.rejectIcon} size="22"></zn-icon>
+          <zn-icon src=${this.rejectIcon} size="16"></zn-icon>
         </button>`;
     }
 
     if (this.acceptUri) {
       return html`
-        <zn-button href=${this.acceptUri}
-                   icon=${this.acceptIcon}
-                   icon-size="20"
-                   icon-button="round"
-                   gaid=${this.acceptGaid}
-                   loading-text="Accepting"
-                   no-hover>
-        </zn-button>`;
+        <span class="channel-tile__lead">
+          <zn-button href=${this.acceptUri}
+                     icon=${this.acceptIcon}
+                     icon-size="16"
+                     icon-button="round"
+                     gaid=${this.acceptGaid}
+                     loading-text="Accepting"
+                     plain>
+          </zn-button>
+        </span>`;
     }
 
     return html`
-      <slot name="action">
-        <zn-button icon=${this.acceptIcon}
-                   icon-size="20"
-                   icon-button="round"
-                   gaid=${this.acceptGaid}
-                   no-hover>
-        </zn-button>
-      </slot>`;
+      <span class="channel-tile__lead">
+        <slot name="action">
+          <zn-button icon=${this.acceptIcon}
+                     icon-size="16"
+                     icon-button="round"
+                     gaid=${this.acceptGaid}
+                     plain>
+          </zn-button>
+        </slot>
+      </span>`;
   }
 }