@kubex/zinc 1.1.184 → 2.0.0

package/src/components/toggle/toggle.component.ts

@@ -1,3 +1,4 @@
+import { animateTo } from "../../internal/animate";
 import { classMap } from "lit/directives/class-map.js";
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
 import { defaultValue } from "../../internal/default-value";
@@ -20,6 +21,7 @@ import styles from './toggle.scss';
  * @dependency zn-tooltip
  *
  * @event zn-input - Emitted when the toggle receives input.
+ * @event zn-change - Emitted when the toggle is switched on or off.
  *
  * @slot - The toggle's label.
  * @slot description - A description of the toggle's label. Alternatively, you can use the `description` attribute.
@@ -44,6 +46,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   });
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
+  @query('.switch__control') knob: HTMLElement;
 
   @state() hasFocus: boolean = false;
 
@@ -98,6 +101,21 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
     super.firstUpdated(_changedProperties);
   }
 
+  updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    // Skips the first render so a toggle that loads checked doesn't wobble into place.
+    if (changedProperties.has('checked') && changedProperties.get('checked') !== undefined) {
+      animateTo(this.knob, [
+        { scale: '1 1' },
+        { scale: '1.35 0.8', offset: 0.3 },
+        { scale: '0.85 1.12', offset: 0.55 },
+        { scale: '1.06 0.95', offset: 0.72 },
+        { scale: '0.98 1.02', offset: 0.86 },
+        { scale: '1 1' }
+      ], { duration: 500, easing: 'ease-out' });
+    }
+  }
+
   private handleBlur() {
     this.hasFocus = false;
   }
@@ -115,6 +133,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
   private handleClick() {
     this.checked = !this.checked;
+    this.emit('zn-change');
     if (this.triggerSubmit) {
       this.formControlController.submit();
     }
@@ -125,14 +144,11 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   }
 
   private handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.checked = false;
-    }
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
+    event.preventDefault();
 
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.checked = true;
+    if (this.checked !== (event.key === 'ArrowRight')) {
+      this.input.click();
     }
   }
 

package/src/components/toggle/toggle.scss

@@ -19,28 +19,35 @@
 }
 
 .switch__input-wrapper {
+  --track-width: var(--zn-toggle-track-width, 42px);
+  --track-height: var(--zn-toggle-track-height, 24px);
+  --knob-size: var(--zn-toggle-knob-size, 20.32px);
+  --knob-inset: var(--zn-toggle-knob-inset, 0.92px);
+  --track-border-width: var(--zn-toggle-track-border-width, 0.92px);
+
   box-sizing: border-box;
   text-align: left;
   position: relative;
   display: inline-flex;
-  width: 42px;
-  height: 24px;
+  width: var(--track-width);
+  height: var(--track-height);
   flex-shrink: 0;
   cursor: pointer;
-  border-radius: 12px;
+  border-radius: var(--zn-border-radius-pill);
   align-items: center;
-  background-color: rgb(var(--zn-color-tab));
+  background-color: var(--zn-toggle-track-background, rgb(var(--zn-color-tab)));
   // The unchecked track needs an edge of its own. --zn-color-tab sits close to
   // the surface behind it on dark themes, which left the switch reading as a
   // free-floating knob with no discoverable control boundary. The checked state
   // below repaints the border in the accent colour.
-  border: 0.92px solid rgb(var(--zn-border-color));
+  border: var(--track-border-width) solid var(--zn-toggle-track-border-color, rgb(var(--zn-border-color)));
   margin: var(--zn-toggle-margin);
-  transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
+  transition: color .25s ease-out, background-color .25s ease-out, border-color .25s ease-out;
 }
 
-:host(:focus) .switch__input-wrapper {
-  outline: rgb(var(--zn-primary)) solid 1px;
+.switch__input-wrapper:has(.switch__input:focus-visible) {
+  outline: var(--zn-focus-ring);
+  outline-offset: var(--zn-focus-ring-offset);
 }
 
 :host([checked]) .switch__input-wrapper {
@@ -48,7 +55,7 @@
   border-color: rgb(var(--zn-color-primary));
 
   .switch__control {
-    left: calc(100% - 20.32px - 0.92px);
+    translate: calc(var(--track-width) - 2 * var(--track-border-width) - var(--knob-size) - 2 * var(--knob-inset)) -50%;
     // The knob carries the on/off state, so it takes the on-primary ink: a
     // white knob on a light accent (neon lime, amber) is invisible.
     background: rgb(var(--zn-color-on-primary, 255, 255, 255));
@@ -97,14 +104,21 @@
   pointer-events: none;
   position: absolute;
   top: 50%;
-  left: 0.92px;
-  width: 20.32px;
-  height: 20.32px;
+  left: var(--knob-inset);
+  width: var(--knob-size);
+  height: var(--knob-size);
   border-radius: 50%;
-  background: #fff;
-  transform: translateY(-50%);
-  transition: left .3s ease-in-out, background-color .4s ease-in-out;
+  background: var(--zn-toggle-knob-color, #fff);
+  box-shadow: var(--zn-toggle-knob-shadow, none);
+  // Position lives in `translate` so the squish animation's `scale` doesn't scale the travel distance too.
+  translate: 0 -50%;
+  // Springy curve: overshoots the far edge slightly, then settles.
+  transition: translate .5s linear(0, 0.4 12%, 0.85 25%, 1.06 38%, 1.03 50%, 0.985 64%, 1.005 80%, 1), background-color .25s ease-out;
   outline: none;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: background-color .25s ease-out;
+  }
 }
 
 .switch__input {
@@ -117,19 +131,9 @@
 
 // sizes
 .switch__wrapper--small .switch__input-wrapper {
-  height: 20px;
-  width: 35px;
-}
-
-.switch__wrapper--small .switch__control {
-  width: 14px;
-  height: 14px;
-}
-
-:host([checked]) .switch__wrapper--small .switch__input-wrapper {
-  .switch__control {
-    left: calc(100% - 14px - 0.92px);
-  }
+  --track-width: var(--zn-toggle-track-width-small, 35px);
+  --track-height: var(--zn-toggle-track-height-small, 20px);
+  --knob-size: var(--zn-toggle-knob-size-small, 14px);
 }
 
 // Label position
@@ -144,8 +148,11 @@
   flex-direction: row;
 }
 
+// The switch leads and the label follows it, so labels of any length line up. A theme can instead put the label
+// first with the switch at the far edge.
 .switch__wrapper--label-right label {
-  flex-direction: row-reverse;
+  flex-direction: var(--zn-toggle-side-label-direction, row-reverse);
+  justify-content: var(--zn-toggle-side-label-justify, flex-end);
 }
 
 // Support inline label

package/src/components/toggle/toggle.test.ts

@@ -19,6 +19,17 @@ describe('<zn-toggle>', () => {
     expect(label.nextElementSibling).to.equal(description);
   });
 
+  it('emits zn-change when switched', async () => {
+    const el = await fixture<HTMLElement & { updateComplete: Promise<boolean> }>(html` <zn-toggle label="On"></zn-toggle> `);
+    let changes = 0;
+    el.addEventListener('zn-change', () => changes++);
+
+    el.shadowRoot!.querySelector<HTMLInputElement>('input')!.click();
+    await el.updateComplete;
+
+    expect(changes).to.equal(1);
+  });
+
   describe('form submission', () => {
     it('should submit the value when checked', async () => {
       const form = await fixture<HTMLFormElement>(html`
@@ -47,4 +58,10 @@ describe('<zn-toggle>', () => {
       expect(new FormData(form).get('feature')).to.equal('disabled');
     });
   });
+
+  it('keeps a right-hand label beside the switch', async () => {
+    const el = await fixture<HTMLElement>(html`<zn-toggle label="Short" label-position="right"></zn-toggle>`);
+    const label = el.shadowRoot!.querySelector('label')!;
+    expect(getComputedStyle(label).justifyContent).to.equal('flex-end');
+  });
 });

package/src/components/tooltip/tooltip.component.ts

@@ -62,6 +62,7 @@ export default class ZnTooltip extends ZincElement {
   }
 
   disconnectedCallback() {
+    super.disconnectedCallback();
     this.closeWatcher?.destroy();
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
@@ -149,6 +150,8 @@ export default class ZnTooltip extends ZincElement {
       this.emit('zn-after-show');
     } else {
       topLayerManager.unregisterTooltip(this);
+      this.closeWatcher?.destroy();
+      document.removeEventListener('keydown', this.handleDocumentKeyDown);
 
       this.emit('zn-hide');
       this.popup.active = false;

package/src/components/tooltip/tooltip.scss

@@ -7,6 +7,7 @@
 
 .tooltip {
   --arrow-size: 6px;
+  --arrow-color: var(--zn-tooltip-background-color, rgb(var(--zn-color-text)));
 }
 
 .tooltip::part(popup),
@@ -36,15 +37,19 @@
   display: block;
   width: max-content;
   max-width: max-content;
-  border-radius: var(--zn-border-radius);
+  font-family: var(--zn-tooltip-font-family, var(--zn-font-sans));
+  font-size: var(--zn-tooltip-font-size, var(--zn-text-paragraph-font-size));
+  font-weight: var(--zn-tooltip-font-weight, var(--zn-text-paragraph-font-weight));
+  line-height: var(--zn-tooltip-line-height, var(--zn-text-paragraph-line-height));
+  border-radius: var(--zn-tooltip-border-radius, var(--zn-border-radius));
   background-color: var(--arrow-color);
+  box-shadow: var(--zn-tooltip-shadow, none);
   text-align: start;
   white-space: normal;
-  // The bubble is painted in --arrow-color, which resolves to --zn-color-text,
-  // so the ink has to be the surface colour rather than a fixed white — on any
-  // dark theme the text colour is light and white-on-light is unreadable.
-  color: rgb(var(--zn-color-base, 255, 255, 255));
-  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  // The default bubble is the text colour, so the ink must be the surface
+  // colour rather than a fixed white — on a dark theme the text is light.
+  color: var(--zn-tooltip-color, rgb(var(--zn-color-base, 255, 255, 255)));
+  padding: var(--zn-tooltip-padding, var(--zn-spacing-x-small) var(--zn-spacing-small));
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;

package/src/components/tooltip/tooltip.test.ts

@@ -75,4 +75,16 @@ describe('<zn-tooltip>', () => {
     expect(tooltip.open).to.be.false;
     await dropdown.hide();
   });
+
+  it('paints the bubble from the tooltip tokens', async () => {
+    const el = await fixture<ZnTooltip>(html`
+      <zn-tooltip content="Hi" open
+                  style="--zn-tooltip-background-color: rgb(1, 2, 3); --zn-tooltip-color: rgb(4, 5, 6)">
+        <button>Trigger</button>
+      </zn-tooltip>`);
+    const body = el.shadowRoot!.querySelector('.tooltip__body')!;
+
+    expect(getComputedStyle(body).backgroundColor).to.equal('rgb(1, 2, 3)');
+    expect(getComputedStyle(body).color).to.equal('rgb(4, 5, 6)');
+  });
 });

package/src/components/translation-field/index.ts

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

package/src/components/translation-field/translation-field.component.ts

@@ -0,0 +1,55 @@
+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 './translation-field.scss';
+
+/**
+ * @summary A field's source text beside the control that translates it.
+ * @documentation https://zinc.style/components/translation-field
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The control the translation is written in, such as a `zn-input` with the language code as its prefix.
+ * @slot source - The source text, shown read-only.
+ * @slot actions - Actions beside the label.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart source - The box holding the source.
+ */
+export default class ZnTranslationField extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property() label = '';
+
+  /** The source's language code, shown beside it. */
+  @property({attribute: 'source-code'}) sourceCode = '';
+
+  /** For source text that runs over several lines, such as a message body. */
+  @property({type: Boolean, reflect: true}) multiline = false;
+
+  /** Lines the source up with a control that has a toolbar above it, such as a compact `zn-editor`. */
+  @property({type: Boolean, reflect: true}) offset = false;
+
+  render() {
+    return html`
+      <div part="base" class="translation-field">
+        <div class="translation-field__label">
+          <b>${this.label}</b>
+          <slot name="actions"></slot>
+        </div>
+        <div class="translation-field__pair">
+          <div part="source" class=${classMap({
+            'translation-field__source': true,
+            'translation-field__source--multiline': this.multiline,
+          })}>
+            <span class="translation-field__code">${this.sourceCode.toUpperCase()}</span>
+            <div class="translation-field__text"><slot name="source"></slot></div>
+          </div>
+          <div class="translation-field__target"><slot></slot></div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/translation-field/translation-field.scss

@@ -0,0 +1,101 @@
+@use "../../wc";
+
+:host {
+  // The source and target codes share a gutter, so the two texts start level
+  --translation-field-code-width: 32px;
+
+  display: block;
+  container-type: inline-size;
+}
+
+.translation-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  font-size: var(--zn-input-font-size-medium);
+}
+
+.translation-field__label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+  min-height: 26px;
+  color: rgb(var(--zn-text));
+}
+
+.translation-field__pair {
+  display: grid;
+  // A zn-translation-fields sets these when it stacks its fields
+  grid-template-columns: repeat(var(--translation-field-columns, 2), minmax(0, 1fr));
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+
+  @container (max-width: 560px) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.translation-field__source {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+  min-width: 0;
+  min-height: var(--zn-input-height-medium);
+  padding: 0 calc(var(--zn-spacing-unit, 8px) * 1.5);
+  border-radius: 8px;
+  background-color: var(--zn-input-background-color-disabled);
+  color: rgb(var(--zn-color-muted-text));
+
+  // Level with a compact editor's text: the same padding and line height
+  &--multiline {
+    align-items: flex-start;
+    padding: var(--zn-spacing-x-small) calc(var(--zn-spacing-unit, 8px) * 1.5);
+    line-height: 1.5;
+  }
+}
+
+.translation-field__source {
+  align-self: var(--translation-field-source-align, stretch);
+}
+
+:host([offset]) .translation-field__source {
+  // A compact editor's toolbar and the gap under it
+  margin-top: var(--translation-field-source-offset, calc(24px + var(--zn-spacing-unit, 8px) * 1.5));
+}
+
+.translation-field__code {
+  flex: none;
+  width: var(--translation-field-code-width);
+  line-height: calc(var(--zn-input-font-size-medium) * 1.5);
+  color: rgb(var(--zn-text));
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.translation-field__text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  // Keeps a plain-text source's line breaks; set on the text alone, as it would inherit into a slotted component
+  ::slotted(span) {
+    white-space: pre-wrap;
+  }
+}
+
+.translation-field__target {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  // A code prefix and the text after it start where the source's do
+  ::slotted(*) {
+    --zn-input-icon-color: rgb(var(--zn-text));
+    --zn-input-padding-inline: calc(var(--zn-spacing-unit, 8px) * 1.5);
+    --zn-input-prefix-min-width: calc(var(--translation-field-code-width) + var(--zn-spacing-unit, 8px) * 1.5);
+    --editor-height: auto;
+    // Never shorter than the source beside it
+    flex: 1 0 auto;
+  }
+}

package/src/components/translation-fields/index.ts

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

package/src/components/translation-fields/translation-fields.component.ts

@@ -0,0 +1,80 @@
+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 './translation-fields.scss';
+
+export type TranslationFieldsLayout = 'split' | 'stacked';
+
+const LAYOUTS: { layout: TranslationFieldsLayout, label: string, icon: string }[] = [
+  {layout: 'split', label: 'Side by side', icon: 'columns-2@lu'},
+  {layout: 'stacked', label: 'Stacked', icon: 'rows-2@lu'},
+];
+
+/**
+ * @summary Lays out `zn-translation-field`s with their source beside or above the translation, chosen by the viewer.
+ * @documentation https://zinc.style/components/translation-fields
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The `zn-translation-field`s.
+ * @slot actions - Actions level with the layout switch.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class ZnTranslationFields extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  @property({reflect: true}) layout: TranslationFieldsLayout = 'split';
+
+  /** Remembers the viewer's layout under this key in `localStorage`; leave empty to forget it. */
+  @property({attribute: 'store-key'}) storeKey = 'zn-translation-fields-layout';
+
+  connectedCallback() {
+    super.connectedCallback();
+    try {
+      const stored = this.storeKey ? window.localStorage.getItem(this.storeKey) : null;
+      if (stored === 'split' || stored === 'stacked') {
+        this.layout = stored;
+      }
+    } catch {
+      // Storage can be blocked; the layout then starts as set
+    }
+  }
+
+  private _choose(layout: TranslationFieldsLayout) {
+    this.layout = layout;
+    try {
+      if (this.storeKey) {
+        window.localStorage.setItem(this.storeKey, layout);
+      }
+    } catch {
+      // The choice still applies, it just isn't remembered
+    }
+    this.emit('zn-change');
+  }
+
+  render() {
+    return html`
+      <div part="base" class="translation-fields">
+        <div class="translation-fields__bar">
+          <div class="translation-fields__switch" role="group" aria-label="Layout">
+            ${LAYOUTS.map(option => html`
+              <button type="button"
+                      class=${classMap({
+                        'translation-fields__option': true,
+                        'translation-fields__option--active': option.layout === this.layout,
+                      })}
+                      aria-pressed=${option.layout === this.layout ? 'true' : 'false'}
+                      @click=${() => this._choose(option.layout)}>
+                <zn-icon src=${option.icon} size="16"></zn-icon>${option.label}
+              </button>`)}
+          </div>
+          <slot name="actions"></slot>
+        </div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/translation-fields/translation-fields.scss

@@ -0,0 +1,60 @@
+@use "../../wc";
+
+// The fields read these, so the switch changes every field at once
+:host {
+  display: block;
+}
+
+:host([layout="stacked"]) {
+  --translation-field-columns: 1;
+  --translation-field-source-offset: 0px;
+  --translation-field-source-align: start;
+}
+
+.translation-fields {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+}
+
+.translation-fields__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--zn-spacing-unit, 8px) * 1.5);
+}
+
+.translation-fields__switch {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--zn-color-neutral-100);
+}
+
+.translation-fields__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 22px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: rgb(var(--zn-color-muted-text));
+  font: inherit;
+  font-size: 12px;
+  font-weight: var(--zn-font-weight-semibold);
+  cursor: pointer;
+
+  &--active {
+    background: rgb(var(--zn-panel));
+    color: rgb(var(--zn-text));
+    box-shadow: var(--zn-shadow-small, 0 1px 3px rgba(13, 23, 56, 0.08), 0 1px 2px rgba(13, 23, 56, 0.04));
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+  }
+}

package/src/components/translation-grid/index.ts

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