@kubex/zinc 1.1.97 → 1.1.99

package/src/components/background/background.scss

@@ -0,0 +1,236 @@
+@use "../../wc";
+
+:host {
+  display: block;
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.background {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+  background-color: var(--_zn-background-color, var(--zn-background-color, transparent));
+}
+
+.background__image,
+.background__overlay,
+.background__floating-icons {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.background__image {
+  width: 108%;
+  height: 108%;
+  max-width: none;
+  inset: -4%;
+  object-fit: cover;
+  object-position: var(--zn-background-image-position, center);
+  opacity: 1;
+}
+
+:host([image-strength="soft"]) .background__image {
+  opacity: 0.3;
+}
+
+:host([image-strength="medium"]) .background__image {
+  opacity: 0.62;
+}
+
+.background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(255 255 255 / 18%),
+    rgb(255 255 255 / 4%)
+  );
+}
+
+:host([overlay="none"]) .background__overlay {
+  display: none;
+}
+
+:host([overlay="strong"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(255 255 255 / 48%),
+    rgb(255 255 255 / 18%)
+  );
+}
+
+:host([overlay-tone="dark"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(4 12 32 / 28%),
+    rgb(4 12 32 / 6%)
+  );
+}
+
+:host([overlay-tone="dark"][overlay="strong"]) .background__overlay {
+  background: linear-gradient(
+    var(--zn-background-overlay-angle, 110deg),
+    rgb(4 12 32 / 62%),
+    rgb(4 12 32 / 28%)
+  );
+}
+
+:host([motion="drift"]) .background__image {
+  animation: zn-background-drift 28s ease-in-out infinite alternate;
+}
+
+:host([motion="breathe"]) .background__image {
+  animation: zn-background-breathe 18s ease-in-out infinite;
+}
+
+:host([paused]) .background__image {
+  animation-play-state: paused;
+}
+
+.background__floating-icons {
+  overflow: hidden;
+  color: var(--zn-background-floating-icon-color, currentColor);
+}
+
+.background__floating-icon {
+  --_zn-background-icon-opacity-min: 0.01;
+  --_zn-background-icon-opacity-max: 0.18;
+  position: absolute;
+  left: 8%;
+  top: 13%;
+  opacity: var(--_zn-background-icon-opacity-min);
+  animation: zn-background-icon-float 11s ease-in-out infinite alternate both;
+}
+
+.background__floating-icon:nth-child(2) {
+  --_zn-background-icon-opacity-min: 0.08;
+  --_zn-background-icon-opacity-max: 0.34;
+  left: auto;
+  right: 9%;
+  top: 9%;
+  animation-delay: -4s;
+  animation-duration: 14s;
+}
+
+.background__floating-icon:nth-child(3) {
+  --_zn-background-icon-opacity-min: 0.03;
+  --_zn-background-icon-opacity-max: 0.5;
+  left: 2%;
+  top: 47%;
+  animation-delay: -7s;
+  animation-duration: 13s;
+}
+
+.background__floating-icon:nth-child(4) {
+  --_zn-background-icon-opacity-min: 0.12;
+  --_zn-background-icon-opacity-max: 0.38;
+  left: auto;
+  right: 12%;
+  top: 45%;
+  animation-delay: -2s;
+  animation-duration: 10s;
+}
+
+.background__floating-icon:nth-child(5) {
+  --_zn-background-icon-opacity-min: 0.05;
+  --_zn-background-icon-opacity-max: 0.29;
+  left: 21%;
+  top: auto;
+  bottom: 4%;
+  animation-delay: -5s;
+  animation-duration: 15s;
+}
+
+.background__floating-icon:nth-child(6) {
+  --_zn-background-icon-opacity-min: 0.01;
+  --_zn-background-icon-opacity-max: 0.42;
+  left: auto;
+  right: 4%;
+  top: auto;
+  bottom: 3%;
+  animation-delay: -9s;
+  animation-duration: 12s;
+}
+
+.background__floating-icon:nth-child(7) {
+  --_zn-background-icon-opacity-min: 0.09;
+  --_zn-background-icon-opacity-max: 0.31;
+  left: 42%;
+  top: 7%;
+  animation-delay: -6s;
+  animation-duration: 16s;
+}
+
+.background__floating-icon:nth-child(8) {
+  --_zn-background-icon-opacity-min: 0.04;
+  --_zn-background-icon-opacity-max: 0.46;
+  left: 54%;
+  top: auto;
+  bottom: 8%;
+  animation-delay: -11s;
+  animation-duration: 17s;
+}
+
+:host([paused]) .background__floating-icon {
+  animation-play-state: paused;
+}
+
+.background__content {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+}
+
+@keyframes zn-background-drift {
+  from {
+    transform: scale(1.04) translate3d(-1.2%, -0.6%, 0);
+  }
+
+  to {
+    transform: scale(1.04) translate3d(1.2%, 0.6%, 0);
+  }
+}
+
+@keyframes zn-background-breathe {
+  0%, 100% {
+    transform: scale(1.02);
+  }
+
+  50% {
+    transform: scale(1.07);
+  }
+}
+
+@keyframes zn-background-icon-float {
+  from {
+    opacity: var(--_zn-background-icon-opacity-min);
+    transform: translate3d(-8%, -12%, 0) scale(0.88) rotate(-8deg);
+  }
+
+  to {
+    opacity: var(--_zn-background-icon-opacity-max);
+    transform: translate3d(8%, 12%, 0) scale(1.06) rotate(8deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .background__image,
+  .background__floating-icon {
+    animation: none;
+  }
+
+  .background__floating-icon {
+    opacity: var(--_zn-background-icon-opacity-max);
+  }
+}

package/src/components/background/background.test.ts

@@ -0,0 +1,120 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html, waitUntil} from '@open-wc/testing';
+import type ZnBackground from './background.component';
+
+const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+
+describe('<zn-background>', () => {
+  it('renders slotted content above the background layers', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background><p>Lesson content</p></zn-background>`);
+
+    const content = el.shadowRoot!.querySelector<HTMLElement>('.background__content')!;
+    const slot = content.querySelector<HTMLSlotElement>('slot')!;
+
+    expect(slot.assignedElements()[0].textContent).to.equal('Lesson content');
+    expect(getComputedStyle(content).zIndex).to.equal('1');
+  });
+
+  it('composes the configured colour and decorative image', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background color="#123456" image=${transparentImage}></zn-background>`);
+
+    const base = el.shadowRoot!.querySelector<HTMLElement>('.background')!;
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(base).backgroundColor).to.equal('rgb(18, 52, 86)');
+    expect(image.src).to.equal(transparentImage);
+    expect(image.alt).to.equal('');
+    expect(image.getAttribute('part')).to.equal('image');
+  });
+
+  it('does not render an image element without an image URL', async () => {
+    const el = await fixture<ZnBackground>(html`<zn-background></zn-background>`);
+
+    expect(el.shadowRoot!.querySelector('.background__image')).to.not.exist;
+  });
+
+  it('applies soft, medium and full image strengths', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background image=${transparentImage} image-strength="soft"></zn-background>`);
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(image).opacity).to.equal('0.3');
+    el.imageStrength = 'medium';
+    await el.updateComplete;
+    expect(getComputedStyle(image).opacity).to.equal('0.62');
+    el.imageStrength = 'full';
+    await el.updateComplete;
+    expect(getComputedStyle(image).opacity).to.equal('1');
+  });
+
+  it('supports drift and breathe motion and can pause it', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background image=${transparentImage} motion="drift"></zn-background>`);
+    const image = el.shadowRoot!.querySelector<HTMLImageElement>('.background__image')!;
+
+    expect(getComputedStyle(image).animationName).to.equal('zn-background-drift');
+    el.motion = 'breathe';
+    el.paused = true;
+    await el.updateComplete;
+    expect(getComputedStyle(image).animationName).to.equal('zn-background-breathe');
+    expect(getComputedStyle(image).animationPlayState).to.equal('paused');
+  });
+
+  it('supports none, soft and strong light or dark overlays', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background overlay="none"></zn-background>`);
+    const overlay = el.shadowRoot!.querySelector<HTMLElement>('.background__overlay')!;
+
+    expect(getComputedStyle(overlay).display).to.equal('none');
+    el.overlay = 'soft';
+    await el.updateComplete;
+    const lightGradient = getComputedStyle(overlay).backgroundImage;
+    expect(lightGradient).to.contain('255, 255, 255');
+
+    el.overlay = 'strong';
+    el.overlayTone = 'dark';
+    await el.updateComplete;
+    const darkGradient = getComputedStyle(overlay).backgroundImage;
+    expect(darkGradient).to.contain('4, 12, 32');
+    expect(darkGradient).to.not.equal(lightGradient);
+  });
+
+  it('renders up to eight comma-separated floating Zinc icons', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background
+        floating-icons="school, lightbulb, quiz, psychology, star, rocket, science, public, hidden">
+      </zn-background>`);
+    const icons = el.shadowRoot!.querySelectorAll<HTMLElement>('.background__floating-icon');
+
+    expect(icons).to.have.lengthOf(8);
+    expect(icons[0].getAttribute('src')).to.equal('school');
+    expect(icons[7].getAttribute('src')).to.equal('public');
+    expect(el.shadowRoot!.querySelector('.background__floating-icons')!.getAttribute('aria-hidden')).to.equal('true');
+  });
+
+  it('sizes floating icons to five percent of the background width', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background floating-icons="school" style="width: 1000px;"></zn-background>`);
+    const icon = el.shadowRoot!.querySelector<HTMLElement & {size: number}>('.background__floating-icon')!;
+
+    await waitUntil(() => icon.size === 50);
+    expect(icon.size).to.equal(50);
+  });
+
+  it('caps floating icons at 150 pixels and keeps opacity within one to fifty percent', async () => {
+    const el = await fixture<ZnBackground>(html`
+      <zn-background floating-icons="school,lightbulb" style="width: 4000px;"></zn-background>`);
+    const icons = [...el.shadowRoot!.querySelectorAll<HTMLElement & {size: number}>('.background__floating-icon')];
+
+    await waitUntil(() => icons[0].size === 150);
+    expect(icons[0].size).to.equal(150);
+    icons.forEach(icon => {
+      const styles = getComputedStyle(icon);
+      expect(Number(styles.getPropertyValue('--_zn-background-icon-opacity-min'))).to.be.at.least(0.01);
+      expect(Number(styles.getPropertyValue('--_zn-background-icon-opacity-max'))).to.be.at.most(0.5);
+      expect(styles.animationName).to.equal('zn-background-icon-float');
+    });
+  });
+});

package/src/components/background/index.ts

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

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

@@ -121,6 +121,9 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   // Tooltip Specific
   @property() tooltip: string;
 
+  /** Accessible name for the button. Icon-only buttons fall back to `tooltip`. */
+  @property() label: string;
+
   // Auto Click Specific
   @property({type: Boolean, attribute: 'auto-click'}) autoClick = false;
   @property({type: Number, attribute: 'auto-click-delay'}) autoClickDelay = 2000;
@@ -369,6 +372,10 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
                  library="${ifDefined(this.iconLibrary)}"></zn-icon>`
       : '';
     const tag = isLink ? literal`a` : literal`button`;
+    // An icon-only button has no text to name it, so the tooltip doubles as the
+    // accessible name. Buttons with content keep their text as the name.
+    const hasContent = this.hasSlotController.test('[default]') || !!this.content;
+    const ariaLabel = this.label || (hasContent ? undefined : this.tooltip);
     const iconButtonStyles = this.iconButton ? {
       '--icon-button-color': this.getIconButtonColor(this.color),
       '--icon-button-hover-color': this.getIconButtonColor(this.hoverColor || 'primary')
@@ -412,6 +419,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         data-target="${ifDefined(isLink ? this.dataTarget : undefined)}"
         rel="${ifDefined(isLink ? this.rel : undefined)}"
         gaid="${ifDefined(this.gaid)}"
+        aria-label="${ifDefined(ariaLabel)}"
         data-notification="${ifDefined(this.notification)}"
         disabled="${this.disabled || nothing}"
         style=${styleMap(iconButtonStyles)}

package/src/components/chart/builders.test.ts

@@ -3,8 +3,16 @@ import {
   buildAreaOption,
   buildBarOption,
   type BuilderProps,
+  buildFunnelOption,
+  buildGaugeOption,
+  buildHeatmapOption,
   buildLineOption,
+  buildPieOption,
+  buildRadarOption,
   buildSankeyOption,
+  buildScatterOption,
+  buildSunburstOption,
+  buildTreemapOption,
 } from './builders';
 import { expect } from '@open-wc/testing';
 
@@ -145,6 +153,187 @@ describe('buildAreaOption', () => {
   });
 });
 
+describe('buildPieOption', () => {
+  const pieProps: BuilderProps = {
+    type: 'pie',
+    data: [{ name: 'Insights', data: [8, 1] }],
+    categories: ['Configuration suggestion', 'Insecure configuration'],
+    stacked: false,
+    enableAnimations: false,
+    datapointSize: 1,
+    theme: 'light',
+  };
+
+  it('maps categories and numeric values into pie slices', () => {
+    const opt = buildPieOption(pieProps);
+    const series = (opt.series as any[])[0];
+    expect(series.type).to.equal('pie');
+    expect(series.name).to.equal('Insights');
+    expect(series.data).to.deep.equal([
+      { name: 'Configuration suggestion', value: 8 },
+      { name: 'Insecure configuration', value: 1 },
+    ]);
+    expect(series.radius).to.deep.equal([0, '70%']);
+  });
+
+  it('uses inner and outer radii for a donut', () => {
+    const opt = buildPieOption({
+      ...pieProps,
+      type: 'donut',
+      innerRadius: '45%',
+      outerRadius: '80%',
+    });
+    expect((opt.series as any[])[0].radius).to.deep.equal(['45%', '80%']);
+  });
+
+  it('accepts named ECharts-style slices and maps their colors', () => {
+    const opt = buildPieOption({
+      ...pieProps,
+      data: [{
+        name: 'Insights',
+        data: [
+          { name: 'Moderate', value: 4, color: '#f5a623' },
+          { name: 'Low', value: 5 },
+        ],
+      }],
+    });
+    expect((opt.series as any[])[0].data).to.deep.equal([
+      { name: 'Moderate', value: 4, itemStyle: { color: '#f5a623' } },
+      { name: 'Low', value: 5 },
+    ]);
+  });
+
+  it('uses item tooltips, optional labels, and value suffixes', () => {
+    const opt = buildPieOption({ ...pieProps, showLabels: true, yAxisAppend: '%' });
+    const formatter = (opt.tooltip as any).valueFormatter as (value: number) => string;
+    expect((opt.tooltip as any).trigger).to.equal('item');
+    expect((opt.series as any[])[0].label.show).to.equal(true);
+    expect(formatter(42)).to.equal('42%');
+  });
+
+  it('has no cartesian axes or grid', () => {
+    const opt = buildPieOption(pieProps);
+    expect(opt.xAxis).to.be.undefined;
+    expect(opt.yAxis).to.be.undefined;
+    expect(opt.grid).to.be.undefined;
+  });
+});
+
+describe('additional native chart builders', () => {
+  it('builds a scatter chart with numeric axes and coordinate normalization', () => {
+    const opt = buildScatterOption({
+      ...baseProps,
+      type: 'scatter',
+      datapointSize: 12,
+      data: [{ name: 'Latency', data: [[1, 20], { x: 2, y: 35 }] }],
+    });
+    expect((opt.series as any[])[0]).to.include({ type: 'scatter', symbolSize: 12 });
+    expect((opt.series as any[])[0].data).to.deep.equal([[1, 20], [2, 35]]);
+    expect((opt.xAxis as any).type).to.equal('value');
+    expect((opt.yAxis as any).type).to.equal('value');
+  });
+
+  it('builds radar indicators and values from categories and series', () => {
+    const opt = buildRadarOption({
+      ...baseProps,
+      type: 'radar',
+      categories: ['Security', 'Performance', 'Reliability'],
+      data: [
+        { name: 'Current', data: [80, 65, 90] },
+        { name: 'Target', data: [90, 90, 95] },
+      ],
+    });
+    expect((opt.radar as any).indicator).to.deep.equal([
+      { name: 'Security' },
+      { name: 'Performance' },
+      { name: 'Reliability' },
+    ]);
+    expect((opt.series as any[])[0].data[0]).to.deep.equal({
+      name: 'Current',
+      value: [80, 65, 90],
+    });
+  });
+
+  it('uses explicit radar indicators when supplied', () => {
+    const indicators = [
+      { name: 'Security', max: 100 },
+      { name: 'Latency', max: 500, min: 0 },
+    ];
+    const opt = buildRadarOption({ ...baseProps, type: 'radar', indicators });
+    expect((opt.radar as any).indicator).to.deep.equal(indicators);
+  });
+
+  it('builds a gauge with bounds, progress, and a value suffix', () => {
+    const opt = buildGaugeOption({
+      ...baseProps,
+      type: 'gauge',
+      data: [{ name: 'Health', data: [82] }],
+      minValue: 20,
+      maxValue: 120,
+      yAxisAppend: '%',
+    });
+    const series = (opt.series as any[])[0];
+    expect(series).to.include({ type: 'gauge', min: 20, max: 120 });
+    expect(series.data).to.deep.equal([{ name: 'Health', value: 82 }]);
+    expect(series.detail.formatter(82)).to.equal('82%');
+  });
+
+  it('builds funnel stages from categories and numeric values', () => {
+    const opt = buildFunnelOption({
+      ...baseProps,
+      type: 'funnel',
+      categories: ['Visitors', 'Trials', 'Customers'],
+      data: [{ name: 'Conversion', data: [1000, 320, 85] }],
+    });
+    const series = (opt.series as any[])[0];
+    expect(series.type).to.equal('funnel');
+    expect(series.data).to.deep.equal([
+      { name: 'Visitors', value: 1000 },
+      { name: 'Trials', value: 320 },
+      { name: 'Customers', value: 85 },
+    ]);
+    expect(series.label.show).to.equal(true);
+  });
+
+  it('builds a categorical heatmap and derives its visual range', () => {
+    const data = [[0, 0, 5], [1, 0, 12], [0, 1, 3], [1, 1, 9]];
+    const opt = buildHeatmapOption({
+      ...baseProps,
+      type: 'heatmap',
+      categories: ['Mon', 'Tue'],
+      yCategories: ['API', 'Web'],
+      data: [{ name: 'Requests', data }],
+    });
+    expect((opt.xAxis as any).data).to.deep.equal(['Mon', 'Tue']);
+    expect((opt.yAxis as any).data).to.deep.equal(['API', 'Web']);
+    expect((opt.visualMap as any)).to.include({ min: 3, max: 12 });
+    expect((opt.series as any[])[0].data).to.equal(data);
+  });
+
+  it('passes hierarchical data to treemap and sunburst charts', () => {
+    const hierarchy = [{
+      name: 'Security',
+      children: [
+        { name: 'Configuration', value: 8 },
+        { name: 'Insecure', value: 1 },
+      ],
+    }];
+    const data = [{ name: 'Insights', data: hierarchy }];
+    const treemap = buildTreemapOption({ ...baseProps, type: 'treemap', data });
+    const sunburst = buildSunburstOption({
+      ...baseProps,
+      type: 'sunburst',
+      data,
+      innerRadius: '10%',
+      outerRadius: '85%',
+    });
+    expect((treemap.series as any[])[0].data).to.equal(hierarchy);
+    expect((treemap.series as any[])[0].label.show).to.equal(true);
+    expect((sunburst.series as any[])[0].data).to.equal(hierarchy);
+    expect((sunburst.series as any[])[0].radius).to.deep.equal(['10%', '85%']);
+  });
+});
+
 describe('buildSankeyOption', () => {
   const sankeyProps: BuilderProps = {
     type: 'sankey',
@@ -208,4 +397,4 @@ describe('buildSankeyOption', () => {
     const opt = buildSankeyOption(sankeyProps);
     expect((opt.tooltip as any).trigger).to.equal('item');
   });
-});
+});