@kubex/zinc 1.1.160 → 1.1.162

package/docs/pages/components/data-table.md

@@ -156,7 +156,7 @@ Use `hide-pagination` to hide pagination controls even when multiple pages are a
 
 ### Row Selection
 
-By default, rows can be selected by clicking. Selected rows are tracked and can be used with bulk actions.
+Rows get a checkbox column and can be selected by clicking once the table has an action to use them: something in the `delete-action`, `modify-action`, `create-action` or `actions` slot. Without one, the table has no checkboxes.
 
 ```html:preview
 <zn-data-table
@@ -176,28 +176,11 @@ By default, rows can be selected by clicking. Selected rows are tracked and can
 </zn-data-table>
 ```
 
-### Hide Checkboxes
-
-Use `hide-checkboxes` to disable row selection functionality.
-
-```html:preview
-<zn-data-table
-  data-uri="/data/data-table.json"
-  method="GET"
-  hide-checkboxes
-  headers='[
-    {"key":"id","label":"ID"},
-    {"key":"name","label":"Name"},
-    {"key":"email","label":"Email"}
-  ]'>
-</zn-data-table>
-```
-
 ### Bulk Actions
 
 Add action buttons to the table header for performing operations on selected rows. Use the `delete-action`, `modify-action`, and `create-action` slots.
 
-`delete-action` and `modify-action` sit beside the caption alongside a select-all toggle, and only appear once rows are selected. `create-action` is a primary action rather than a selection one, so it renders at the end of the header's right-hand group, after the search field.
+`delete-action` and `modify-action` appear at the start of the header's right-hand group once rows are selected. `create-action` is a primary action rather than a selection one, so it renders at the end of that group, after the search field.
 
 ```html:preview
 <zn-data-table
@@ -225,6 +208,32 @@ Add action buttons to the table header for performing operations on selected row
 </zn-data-table>
 ```
 
+### Actions Menu
+
+Elements in the `actions` slot are listed in an ellipsis menu at the start of the header's right-hand group. The menu is disabled until at least one row is checked. Each `zn-button` becomes a menu item using its label, `icon` and `color`, and choosing it clicks the button. A `zn-confirm` takes its label and icon from its `trigger` slot button, and choosing it opens the confirm dialog. An `input[name="keys"]` inside a slotted element is kept filled with the selected row keys, the same as for `delete-action`.
+
+```html:preview
+<zn-data-table
+  data-uri="/data/data-table.json"
+  method="GET"
+  caption="Customers"
+  headers='[
+    {"key":"id","label":"ID"},
+    {"key":"name","label":"Name"},
+    {"key":"email","label":"Email"},
+    {"key":"status","label":"Status"}
+  ]'>
+
+  <zn-button slot="actions" icon="archive@lu">Archive</zn-button>
+
+  <zn-confirm slot="actions" type="error" caption="Delete customers" content="Delete the selected customers?">
+    <zn-button slot="trigger" icon="trash-2@lu" color="error">Delete</zn-button>
+    <form><input type="hidden" name="keys"></form>
+  </zn-confirm>
+
+</zn-data-table>
+```
+
 ### Secondary Columns
 
 Mark columns as secondary to hide them by default. Users can expand rows to view secondary data.
@@ -862,6 +871,7 @@ Access table methods programmatically to control behavior.
     {"key":"email","label":"Email"},
     {"key":"status","label":"Status"}
   ]'>
+  <zn-button slot="delete-action" color="error" icon="delete">Delete Selected</zn-button>
 </zn-data-table>
 
 <br />
@@ -877,7 +887,7 @@ Access table methods programmatically to control behavior.
   });
 
   document.querySelector('#select-all-btn').addEventListener('click', () => {
-    table.selectAll(new Event('click'));
+    table.selectAll();
   });
 </script>
 ```

package/package.json

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

package/scss/themes/_dark.scss

@@ -274,6 +274,7 @@
   --zn-input-border-color-hover: rgb(var(--zn-color-border-active));
   --zn-input-border-color-focus: var(--zn-color-primary-500);
   --zn-input-border-color-disabled: hsl(280, 6%, 9%);
+  --zn-checkbox-border-color: rgb(var(--zn-color-border-active));
 
   /* Focus rings */
   --zn-focus-ring-color: var(--zn-color-primary-700);

package/scss/themes/_light.scss

@@ -217,6 +217,7 @@
   --zn-input-border-color-hover: var(--zn-color-neutral-400);
   --zn-input-border-color-focus: var(--zn-color-primary-500);
   --zn-input-border-color-disabled: var(--zn-color-neutral-300);
+  --zn-checkbox-border-color: var(--zn-color-neutral-400);
   --zn-input-border-width: 1px;
 
   /* Input Required Content */

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

@@ -128,6 +128,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   /** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */
   @property() label: string;
 
+  /** Toggle state, forwarded to the inner button's `aria-pressed`. */
+  @property({attribute: 'aria-pressed'}) pressed: 'true' | 'false' | 'mixed';
+
   // Auto Click Specific
   @property({type: Boolean, attribute: 'auto-click'}) autoClick = false;
   @property({type: Number, attribute: 'auto-click-delay'}) autoClickDelay = 2000;
@@ -436,6 +439,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
         aria-label="${ifDefined(ariaLabel)}"
+        aria-pressed="${ifDefined(isLink ? undefined : this.pressed)}"
         data-notification="${ifDefined(notification)}"
         disabled="${this.disabled || nothing}"
         style=${styleMap(buttonStyles)}

package/src/components/button/button.scss

@@ -487,6 +487,11 @@
   }
 }
 
+// Lift the focused button so later siblings don't paint over its focus ring
+:host([data-zn-button-group__button]:focus-within) {
+  z-index: 1;
+}
+
 :host([data-zn-button-group__button--first]:not([data-zn-button-group__button--last])) .button {
   border-radius: 5px 0 0 5px !important;
   border-right: 0 !important;

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

@@ -29,4 +29,14 @@ describe('<zn-button>', () => {
     expect(el.color).to.equal('default');
   });
 
+  it('forwards aria-pressed to the inner button', async () => {
+    const el = await fixture<ZnButton>(html`<zn-button icon="sun" label="Toggle" aria-pressed="true"></zn-button>`);
+    const base = el.shadowRoot!.querySelector('[part~="base"]')!;
+    expect(base.getAttribute('aria-pressed')).to.equal('true');
+
+    el.setAttribute('aria-pressed', 'false');
+    await el.updateComplete;
+    expect(base.getAttribute('aria-pressed')).to.equal('false');
+  });
+
 });

package/src/components/checkbox/checkbox.component.ts

@@ -43,7 +43,7 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
  * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
  * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
- * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
+ * @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
  * @csspart image-container - The wrapper around the built-in image or image slot.
  * @csspart image - The built-in image.
  * @csspart card-title - The title inside a selection card.
@@ -404,11 +404,15 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
 
             ${!this.checked && this.indeterminate
               ? html`
-                <zn-icon
-                  part="indeterminate-icon"
-                  class="checkbox__indeterminate-icon"
-                  size="16"
-                  src="check_indeterminate_small"></zn-icon>`
+                <svg viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="4"
+                     stroke-linecap="round"
+                     part="indeterminate-icon"
+                     class="checkbox__indeterminate-icon">
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>`
               : ''}
           </span>
 

package/src/components/checkbox/checkbox.scss

@@ -28,13 +28,13 @@
   --checkbox-color: var(--zn-color-primary-600);
   --checkbox-color-hover: var(--zn-color-primary-500);
   --checkbox-icon-color: var(--zn-color-neutral-0);
-  --checkbox-border-color: var(--zn-input-border-color);
+  --checkbox-border-color: var(--zn-checkbox-border-color, var(--zn-input-border-color));
   --checkbox-bg-color: var(--zn-input-background-color);
 
   &.checkbox--default {
     --checkbox-color: var(--zn-color-primary-600);
     --checkbox-color-hover: var(--zn-color-primary-500);
-    --checkbox-border-color: var(--zn-input-border-color);
+    --checkbox-border-color: var(--zn-checkbox-border-color, var(--zn-input-border-color));
   }
 
   &.checkbox--primary {
@@ -131,12 +131,8 @@
 }
 
 .checkbox__indeterminate-icon {
-  --icon-size: var(--toggle-size);
-  --icon-color: var(--checkbox-icon-color);
-
-  display: inline-flex;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
+  height: max(16px, 70%);
+  color: var(--checkbox-icon-color);
 }
 
 .svg-icon {

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

@@ -4,7 +4,6 @@ import {HasSlotController} from "../../internal/slot";
 import {html, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, queryAssignedNodes, queryAsync, state} from 'lit/decorators.js';
-import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
 import type ZnTile from "../tile";
@@ -280,7 +279,7 @@ export default class ContentBlock extends ZincElement {
                 'text-section--text': section.type === 'text',
                 'hidden': section.type === 'reply'
               })}>
-                ${section.lines.map((line) => html`${unsafeHTML(line)}<br>`)}
+                ${section.lines.map((line) => html`${line}<br>`)}
               </div>
             `)}
           </div>
@@ -375,7 +374,7 @@ export default class ContentBlock extends ZincElement {
     const textRows: TextRow[] = [];
 
     if (textContent) {
-      const text = textContent.innerText;
+      const text = textContent.innerText.replace(/<br\s*\/?>/gi, '\n');
       const rows = text.split('\n');
       let previousType: TextRow['type'] | null = null;
       let forceReply = false;