@kubex/zinc 1.1.170 → 1.1.172

package/docs/pages/components/button-group.md

@@ -139,6 +139,55 @@ Button groups work with all button variants including colors and styles.
 </zn-button-group>
 ```
 
+### Panel Background
+
+Use the `panel-bg` attribute to give every button in the group the icon button look: a panel background with a border, text-coloured labels and a tinted hover. Color variants tint the label and icon instead of filling the button.
+
+```html:preview
+<zn-button-group panel-bg>
+  <zn-button icon="format_bold"></zn-button>
+  <zn-button icon="format_italic"></zn-button>
+  <zn-button icon="format_underlined"></zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group panel-bg>
+  <zn-button icon="view_list">List</zn-button>
+  <zn-button icon="grid_view">Grid</zn-button>
+  <zn-button icon="delete" color="error">Delete</zn-button>
+</zn-button-group>
+
+<br />
+<br />
+
+<zn-button-group panel-bg gap>
+  <zn-button>Cancel</zn-button>
+  <zn-button>Save</zn-button>
+</zn-button-group>
+```
+
+Set `aria-pressed="true"` on the selected button to show it in its active colour, for segmented toggles.
+
+```html:preview
+<zn-button-group panel-bg class="panel-bg-toggle">
+  <zn-button aria-pressed="false">Mine</zn-button>
+  <zn-button aria-pressed="true">Everyone</zn-button>
+</zn-button-group>
+
+<script type="module">
+  const group = document.querySelector('.panel-bg-toggle');
+  group.addEventListener('click', event => {
+    const clicked = event.target.closest('zn-button');
+    if (!clicked) return;
+    group.querySelectorAll('zn-button').forEach(button => {
+      button.setAttribute('aria-pressed', String(button === clicked));
+    });
+  });
+</script>
+```
+
 ### With Icons
 
 Button groups work seamlessly with icon buttons.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.170",
+  "version": "1.1.172",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/button/button.scss

@@ -493,12 +493,12 @@
 }
 
 :host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button {
-  border-radius: 5px 0 0 5px !important;
+  border-radius: var(--zn-button-border-radius, var(--zn-border-radius)) 0 0 var(--zn-button-border-radius, var(--zn-border-radius)) !important;
   border-right: 0 !important;
 }
 
 :host([data-zn-button-group__button--last]:not([data-zn-button-group__button--first])) .button {
-  border-radius: 0 5px 5px 0 !important;
+  border-radius: 0 var(--zn-button-border-radius, var(--zn-border-radius)) var(--zn-button-border-radius, var(--zn-border-radius)) 0 !important;
   border-left: 0 !important;
 }
 
@@ -513,12 +513,32 @@
   white-space: nowrap;
 }
 
-.button--panel-bg {
+// The icon-button look on a regular button: color variants tint the ink only
+@mixin panel-bg {
   background: rgb(var(--zn-panel));
   border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));
   color: rgb(var(--zn-text));
 
+  &.button--error, &.button--info, &.button--success, &.button--warning {
+    color: rgb(var(--btn-color));
+  }
+
   &:hover:not([disabled]), &:active:not([disabled]) {
     background: rgba(var(--zn-color-tab), 0.5);
   }
+
+  &[aria-pressed="true"] {
+    &, &:hover:not([disabled]), &:active:not([disabled]) {
+      background: rgba(var(--btn-color), 0.1);
+      color: rgb(var(--btn-color));
+    }
+  }
+}
+
+.button--panel-bg {
+  @include panel-bg;
+}
+
+:host([data-zn-button-group__button--panel-bg]) .button:not(.button--icon-button) {
+  @include panel-bg;
 }

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

@@ -1,5 +1,5 @@
 import {classMap} from "lit/directives/class-map.js";
-import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -30,18 +30,27 @@ export default class ZnButtonGroup extends ZincElement {
   @property({type: Boolean}) wrap = false;
   @property({type: Boolean}) start = false;
   @property({type: Boolean}) gap = false;
+  /** Gives every button in the group the icon-button look: panel background,
+   * border, text-colored ink and a tab-tint hover. */
+  @property({type: Boolean, attribute: 'panel-bg'}) panelBackground = false;
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has('panelBackground')) {
+      this.handleSlotChange();
+    }
+  }
+
   private handleSlotChange() {
-    if (this.direction === 'vertical') {
+    if (!this.defaultSlot) {
       return;
     }
 
     const allSlotted = [...this.defaultSlot.assignedElements({flatten: true})] as HTMLElement[];
 
     // Collect buttons from direct zn-button elements and from zn-dropdown wrappers
-    const groupItems: {button: HTMLElement; wrapper?: HTMLElement}[] = [];
+    const groupItems: { button: HTMLElement; wrapper?: HTMLElement }[] = [];
     for (const el of allSlotted) {
       if (el.tagName === 'ZN-BUTTON') {
         groupItems.push({button: el});
@@ -53,6 +62,14 @@ export default class ZnButtonGroup extends ZincElement {
       }
     }
 
+    groupItems.forEach(({button}) => {
+      button.toggleAttribute('data-zn-button-group__button--panel-bg', this.panelBackground);
+    });
+
+    if (this.direction === 'vertical') {
+      return;
+    }
+
     groupItems.forEach(({button, wrapper}, index) => {
       button.toggleAttribute('data-zn-button-group__button--grow', this.grow);
 

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

@@ -7,4 +7,22 @@ describe('<zn-button-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('marks slotted buttons with panel-bg and clears it when removed', async () => {
+    const el = await fixture<HTMLElement & {panelBackground: boolean; updateComplete: Promise<boolean>}>(html`
+      <zn-button-group panel-bg>
+        <zn-button>One</zn-button>
+        <zn-button>Two</zn-button>
+      </zn-button-group>
+    `);
+    await el.updateComplete;
+    const buttons = [...el.querySelectorAll('zn-button')];
+
+    expect(buttons.every(b => b.hasAttribute('data-zn-button-group__button--panel-bg'))).to.be.true;
+
+    el.panelBackground = false;
+    await el.updateComplete;
+
+    expect(buttons.some(b => b.hasAttribute('data-zn-button-group__button--panel-bg'))).to.be.false;
+  });
 });

package/src/components/content-block/content-block.component.ts

@@ -2,8 +2,10 @@ import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
+import {looksLikeHtml, sanitizeHtml} from './sanitize-html';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -13,6 +15,8 @@ import styles from './content-block.scss';
 interface TextRow {
   lines: string[];
   type: 'reply' | 'text';
+  /** `lines` holds a single sanitized HTML string. */
+  html?: boolean;
 }
 
 /**
@@ -264,7 +268,9 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${line}<br>`)}
+                ${section.html
+                  ? unsafeHTML(section.lines[0])
+                  : section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -358,6 +364,11 @@ export default class ContentBlock extends ZincElement {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     const textRows: TextRow[] = [];
 
+    if (textContent && looksLikeHtml(textContent.innerText)) {
+      this._textRows = [{lines: [sanitizeHtml(textContent.innerText)], type: 'text', html: true}];
+      return this._textRows;
+    }
+
     if (textContent) {
       const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');

package/src/components/content-block/content-block.test.ts

@@ -17,11 +17,43 @@ describe('<zn-content-block>', () => {
     expect(el).to.exist;
   });
 
-  it('should render markup in the text body as text', async () => {
+  it('should render plain text in the text body as text', async () => {
+    const content = await textSection('1 &lt; 2 &amp;&amp; 3 &gt; 2');
+
+    expect(content.textContent).to.contain('1 < 2 && 3 > 2');
+  });
+
+  it('should drop images and handlers from markup in the text body', async () => {
     const content = await textSection('&lt;img src="x" onerror="window.__xss = true"&gt; hello');
 
     expect(content.querySelector('img')).to.be.null;
-    expect(content.textContent).to.contain('<img src="x" onerror="window.__xss = true"> hello');
+    expect(content.textContent).to.contain('hello');
+    expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
+  });
+
+  it('should render allowed formatting from markup in the text body', async () => {
+    const content = await textSection(
+      '&lt;p&gt;&lt;em&gt;&lt;strong&gt;Need help?&lt;/strong&gt; Visit our '
+      + '&lt;a href="http://help.example.com" onclick="x()"&gt;Help Center&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;'
+    );
+
+    expect(content.querySelector('p em strong')?.textContent).to.equal('Need help?');
+    const link = content.querySelector('a')!;
+    expect(link.getAttribute('href')).to.equal('http://help.example.com/');
+    expect(link.getAttribute('rel')).to.equal('noopener noreferrer');
+    expect(link.hasAttribute('onclick')).to.be.false;
+    expect(content.textContent).to.not.contain('<p>');
+  });
+
+  it('should strip unsafe links and dropped elements from markup in the text body', async () => {
+    const content = await textSection(
+      '&lt;p&gt;&lt;a href="JavaScript:alert(1)"&gt;click&lt;/a&gt;&lt;/p&gt;'
+      + '&lt;style&gt;p{color:red}&lt;/style&gt;&lt;script&gt;window.__xss = true&lt;/script&gt;'
+    );
+
+    expect(content.querySelector('a')!.hasAttribute('href')).to.be.false;
+    expect(content.querySelector('style, script')).to.be.null;
+    expect(content.textContent).to.not.contain('color:red');
     expect((window as unknown as Record<string, unknown>).__xss).to.be.undefined;
   });
 

package/src/components/content-block/sanitize-html.ts

@@ -0,0 +1,85 @@
+const ALLOWED = new Set(['p', 'br', 'strong', 'b', 'em', 'i', 'u', 'ul', 'ol', 'li', 'a']);
+
+// Removed with their contents; any other disallowed element is unwrapped to its children.
+// img is dropped because a remote src in an email is a tracking pixel.
+const DROPPED = new Set([
+  'script', 'style', 'template', 'iframe', 'frame', 'object', 'embed', 'noscript', 'title', 'head',
+  'meta', 'link', 'base', 'svg', 'math', 'img', 'picture', 'video', 'audio', 'form', 'input', 'button',
+  'select', 'textarea',
+]);
+
+// Unwrapped like any disallowed element, but kept as a paragraph so their text doesn't run together
+const BLOCKS = new Set(['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'table', 'tr', 'center', 'section']);
+
+const SAFE_PROTOCOLS = new Set(['http:', 'https:', 'mailto:']);
+
+const HTML_TAG = /<\/?(p|div|span|strong|b|em|i|u|a|img|ul|ol|li|table|tr|td|h[1-6]|blockquote|font|center)\b[^>]*>/i;
+
+/** Whether a plain-text body is really HTML source. `<br>` alone doesn't count. */
+export function looksLikeHtml(text: string): boolean {
+  return HTML_TAG.test(text);
+}
+
+function safeHref(href: string | null): string | null {
+  if (!href) return null;
+  try {
+    const url = new URL(href.trim());
+    return SAFE_PROTOCOLS.has(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function copyChildren(from: Node, to: Node, doc: Document) {
+  from.childNodes.forEach((child) => {
+    if (child.nodeType === Node.TEXT_NODE) {
+      to.appendChild(doc.createTextNode(child.textContent ?? ''));
+      return;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) return;
+
+    const tag = (child as Element).localName;
+    if (DROPPED.has(tag)) return;
+    if (tag === 'p' || BLOCKS.has(tag)) {
+      appendParagraph(child, to, doc);
+      return;
+    }
+    if (!ALLOWED.has(tag)) {
+      copyChildren(child, to, doc);
+      return;
+    }
+
+    const el = doc.createElement(tag);
+    if (tag === 'a') {
+      const href = safeHref((child as Element).getAttribute('href'));
+      if (href) {
+        el.setAttribute('href', href);
+        el.setAttribute('target', '_blank');
+        el.setAttribute('rel', 'noopener noreferrer');
+      }
+    }
+    copyChildren(child, el, doc);
+    to.appendChild(el);
+  });
+}
+
+// Skips paragraphs left empty, e.g. spacer paragraphs or ones that only held an image
+function appendParagraph(from: Node, to: Node, doc: Document) {
+  const p = doc.createElement('p');
+  copyChildren(from, p, doc);
+  if (p.textContent?.trim()) {
+    to.appendChild(p);
+  }
+}
+
+/**
+ * Rebuilds untrusted HTML from an allowlist of formatting tags. Attributes are never copied,
+ * except a link's href when it is http(s) or mailto.
+ */
+export function sanitizeHtml(source: string): string {
+  const parsed = new DOMParser().parseFromString(source, 'text/html');
+  const out = document.implementation.createHTMLDocument('');
+  const root = out.createElement('div');
+  copyChildren(parsed.body, root, out);
+  return root.innerHTML;
+}