@kubex/zinc 1.1.97 → 1.1.99

package/src/components/chart/builders.ts

@@ -1,7 +1,20 @@
 // src/components/chart/builders.ts
 import type { EChartsOption } from 'echarts';
 
-export type ChartType = 'area' | 'bar' | 'line' | 'sankey';
+export type ChartType =
+  | 'area'
+  | 'bar'
+  | 'donut'
+  | 'funnel'
+  | 'gauge'
+  | 'heatmap'
+  | 'line'
+  | 'pie'
+  | 'radar'
+  | 'sankey'
+  | 'scatter'
+  | 'sunburst'
+  | 'treemap';
 
 export interface SeriesItem {
   name: string;
@@ -15,6 +28,20 @@ export interface SankeyEdge {
   value: number;
 }
 
+export interface PieDataItem {
+  name?: string;
+  value: number;
+  color?: string;
+  itemStyle?: Record<string, unknown>;
+}
+
+export interface RadarIndicator {
+  name: string;
+  max?: number;
+  min?: number;
+  color?: string;
+}
+
 export interface BuilderProps {
   type: ChartType;
   data: SeriesItem[];
@@ -30,9 +57,16 @@ export interface BuilderProps {
   scale?: boolean | number;
   textColor?: string;
   borderColor?: string;
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  showLabels?: boolean;
+  yCategories?: string[];
+  indicators?: RadarIndicator[];
+  minValue?: number;
+  maxValue?: number;
 }
 
-function commonOption(props: BuilderProps): EChartsOption {
+function baseOption(props: BuilderProps, tooltipTrigger: 'axis' | 'item'): EChartsOption {
   const fallback = props.theme === 'dark' ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)';
   const textColor = props.textColor ?? fallback;
   const animEnabled = props.enableAnimations !== false && props.enableAnimations !== 0;
@@ -44,7 +78,7 @@ function commonOption(props: BuilderProps): EChartsOption {
     ...(props.colors ? { color: props.colors } : {}),
     textStyle: { color: textColor },
     tooltip: {
-      trigger: 'axis',
+      trigger: tooltipTrigger,
       appendTo: 'body',
       valueFormatter: props.yAxisAppend
         ? (v: number | string) => `${v}${props.yAxisAppend}`
@@ -56,6 +90,12 @@ function commonOption(props: BuilderProps): EChartsOption {
       icon: 'circle',
       textStyle: { color: textColor },
     },
+  };
+}
+
+function commonOption(props: BuilderProps): EChartsOption {
+  return {
+    ...baseOption(props, 'axis'),
     grid: {
       left: 40,
       right: 20,
@@ -120,7 +160,7 @@ function normalizeData(data: any[]): any[] {
 
 function seriesFromProps(
   props: BuilderProps,
-  seriesType: 'bar' | 'line',
+  seriesType: 'bar' | 'line' | 'scatter',
   extra: (s: SeriesItem) => Record<string, unknown> = () => ({}),
 ) {
   return props.data.map((s) => ({
@@ -170,6 +210,208 @@ export function buildAreaOption(props: BuilderProps): EChartsOption {
   };
 }
 
+export function buildScatterOption(props: BuilderProps): EChartsOption {
+  return {
+    ...commonOption(props),
+    xAxis: buildXAxis({ ...props, xAxisType: props.xAxisType ?? 'numeric' }),
+    yAxis: buildYAxis(props),
+    series: seriesFromProps(props, 'scatter', () => ({
+      symbolSize: props.datapointSize,
+    })),
+  };
+}
+
+function normalizePieData(data: any[], categories: string[]): PieDataItem[] {
+  return data.map((item: number | PieDataItem, index) => {
+    if (typeof item === 'number') {
+      return { name: categories[index] ?? `${index + 1}`, value: item };
+    }
+
+    const { color, itemStyle, ...rest } = item;
+    return {
+      ...rest,
+      name: item.name ?? categories[index] ?? `${index + 1}`,
+      ...(color ? { itemStyle: { ...itemStyle, color } } : itemStyle ? { itemStyle } : {}),
+    };
+  });
+}
+
+export function buildPieOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const textColor = props.textColor
+    ?? (props.theme === 'dark' ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)');
+  const innerRadius = props.type === 'donut' ? (props.innerRadius ?? '50%') : 0;
+  const outerRadius = props.outerRadius ?? '70%';
+
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'pie',
+      name: first.name,
+      data: normalizePieData(first.data ?? [], props.categories),
+      radius: [innerRadius, outerRadius],
+      center: ['50%', '55%'],
+      avoidLabelOverlap: true,
+      label: {
+        show: props.showLabels ?? false,
+        color: textColor,
+      },
+      labelLine: {
+        show: props.showLabels ?? false,
+        ...(props.borderColor ? { lineStyle: { color: props.borderColor } } : {}),
+      },
+      emphasis: {
+        label: { show: props.showLabels ?? false },
+      },
+    }],
+  };
+}
+
+export function buildRadarOption(props: BuilderProps): EChartsOption {
+  const indicators = props.indicators?.length
+    ? props.indicators
+    : props.categories.map((name) => ({ name }));
+
+  return {
+    ...baseOption(props, 'item'),
+    radar: { indicator: indicators },
+    series: [{
+      type: 'radar',
+      data: props.data.map((series) => ({
+        name: series.name,
+        value: normalizeData(series.data),
+        ...(series.color ? {
+          itemStyle: { color: series.color },
+          lineStyle: { color: series.color },
+        } : {}),
+      })),
+    }],
+  };
+}
+
+export function buildGaugeOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const [firstValue] = first.data as unknown[];
+  const data = typeof firstValue === 'number'
+    ? [{ name: first.name, value: firstValue }]
+    : normalizePieData(first.data ?? [], props.categories);
+
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'gauge',
+      name: first.name,
+      min: props.minValue ?? 0,
+      max: props.maxValue ?? 100,
+      data,
+      progress: { show: true },
+      detail: {
+        valueAnimation: props.enableAnimations !== false && props.enableAnimations !== 0,
+        formatter: props.yAxisAppend
+          ? (value: number) => `${value}${props.yAxisAppend}`
+          : '{value}',
+      },
+    }],
+  };
+}
+
+export function buildFunnelOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'funnel',
+      name: first.name,
+      min: props.minValue,
+      max: props.maxValue,
+      data: normalizePieData(first.data ?? [], props.categories),
+      label: { show: props.showLabels ?? true },
+      emphasis: { label: { fontWeight: 'bold' } },
+    }],
+  };
+}
+
+function isHeatmapPoint(item: unknown): item is [unknown, unknown, number] {
+  if (!Array.isArray(item)) return false;
+  const point = item as unknown[];
+  return typeof point[2] === 'number';
+}
+
+function heatmapExtent(data: unknown[], operation: 'max' | 'min', fallback: number): number {
+  const values = data
+    .filter(isHeatmapPoint)
+    .map((item) => item[2]);
+  return values.length ? Math[operation](...values) : fallback;
+}
+
+export function buildHeatmapOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  const data = first.data ?? [];
+  return {
+    ...baseOption(props, 'item'),
+    grid: { left: 60, right: 20, top: 40, bottom: 70 },
+    xAxis: {
+      type: 'category',
+      data: props.categories,
+      splitArea: { show: true },
+    },
+    yAxis: {
+      type: 'category',
+      data: props.yCategories ?? [],
+      splitArea: { show: true },
+    },
+    visualMap: {
+      min: props.minValue ?? heatmapExtent(data, 'min', 0),
+      max: props.maxValue ?? heatmapExtent(data, 'max', 100),
+      calculable: true,
+      orient: 'horizontal',
+      left: 'center',
+      bottom: 0,
+    },
+    series: [{
+      type: 'heatmap',
+      name: first.name,
+      data,
+      label: { show: props.showLabels ?? false },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(0, 0, 0, 0.35)',
+        },
+      },
+    }],
+  };
+}
+
+export function buildTreemapOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'treemap',
+      name: first.name,
+      data: first.data ?? [],
+      label: { show: props.showLabels ?? true },
+      upperLabel: { show: props.showLabels ?? true },
+    }],
+  };
+}
+
+export function buildSunburstOption(props: BuilderProps): EChartsOption {
+  const first = props.data[0] ?? { name: '', data: [] };
+  return {
+    ...baseOption(props, 'item'),
+    series: [{
+      type: 'sunburst',
+      name: first.name,
+      data: first.data ?? [],
+      radius: [props.innerRadius ?? 0, props.outerRadius ?? '90%'],
+      label: { show: props.showLabels ?? true },
+      emphasis: { focus: 'ancestor' },
+    }],
+  };
+}
+
 function deriveNodes(edges: SankeyEdge[]): { name: string }[] {
   const seen = new Set<string>();
   const nodes: { name: string }[] = [];

package/src/components/chart/chart.component.ts

@@ -2,9 +2,18 @@ import {
   buildAreaOption,
   buildBarOption,
   type BuilderProps,
+  buildFunnelOption,
+  buildGaugeOption,
+  buildHeatmapOption,
   buildLineOption,
+  buildPieOption,
+  buildRadarOption,
   buildSankeyOption,
+  buildScatterOption,
+  buildSunburstOption,
+  buildTreemapOption,
   type ChartType,
+  type RadarIndicator,
   type SeriesItem,
 } from './builders';
 import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
@@ -29,6 +38,8 @@ export default class ZnChart extends ZincElement {
   @property() type: ChartType = 'bar';
   @property({ type: Array }) data: SeriesItem[] = [];
   @property({ type: Array }) categories: string[] = [];
+  @property({ attribute: 'y-categories', type: Array }) yCategories: string[] = [];
+  @property({ type: Array }) indicators: RadarIndicator[] = [];
 
   @property({ attribute: 'xaxis' }) xAxis: 'datetime' | 'category' | 'numeric';
   @property({ type: Number, attribute: 'd-size' }) datapointSize: number = 1;
@@ -55,6 +66,11 @@ export default class ZnChart extends ZincElement {
   @property({ type: Array }) colors?: string[];
   @property({ attribute: 'sync-group' }) syncGroup?: string;
   @property({ type: Boolean }) smooth = false;
+  @property({ attribute: 'inner-radius' }) innerRadius?: number | string;
+  @property({ attribute: 'outer-radius' }) outerRadius?: number | string;
+  @property({ attribute: 'show-labels', type: Boolean }) showLabels?: boolean;
+  @property({ attribute: 'min-value', type: Number }) minValue?: number;
+  @property({ attribute: 'max-value', type: Number }) maxValue?: number;
   @property({
     converter: {
       fromAttribute: (value: string | null) => {
@@ -122,12 +138,28 @@ export default class ZnChart extends ZincElement {
       scale: this.scale,
       textColor: this.getTextColor(),
       borderColor: this.getBorderColor(),
+      innerRadius: this.innerRadius,
+      outerRadius: this.outerRadius,
+      showLabels: this.showLabels,
+      yCategories: Array.isArray(this.yCategories) ? this.yCategories : [],
+      indicators: Array.isArray(this.indicators) ? this.indicators : [],
+      minValue: this.minValue,
+      maxValue: this.maxValue,
     };
     switch (this.type) {
       case 'bar': return buildBarOption(props);
       case 'line': return buildLineOption(props);
       case 'area': return buildAreaOption(props);
+      case 'funnel': return buildFunnelOption(props);
+      case 'gauge': return buildGaugeOption(props);
+      case 'heatmap': return buildHeatmapOption(props);
+      case 'donut':
+      case 'pie': return buildPieOption(props);
+      case 'radar': return buildRadarOption(props);
       case 'sankey': return buildSankeyOption(props);
+      case 'scatter': return buildScatterOption(props);
+      case 'sunburst': return buildSunburstOption(props);
+      case 'treemap': return buildTreemapOption(props);
       default: return buildBarOption(props);
     }
   }
@@ -207,4 +239,4 @@ export default class ZnChart extends ZincElement {
   protected render(): unknown {
     return html`<div class="chart"><div id="chart"></div></div>`;
   }
-}
+}

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

@@ -41,6 +41,71 @@ describe('<zn-chart>', () => {
     expect(canvas).to.exist;
   });
 
+  it('renders pie and donut charts', async () => {
+    for (const type of ['pie', 'donut']) {
+      const el: any = await fixture(html`
+        <zn-chart
+          type=${type}
+          .data=${[{ name: 'Insights', data: [8, 1] }]}
+          .categories=${['Configuration suggestion', 'Insecure configuration']}
+        ></zn-chart>
+      `);
+      await el.updateComplete;
+      await new Promise((r) => setTimeout(r, 50));
+      const canvas = el.shadowRoot.querySelector('canvas');
+      expect(canvas, `${type} chart canvas`).to.exist;
+    }
+  });
+
+  it('renders the additional native chart types', async () => {
+    const cases = [
+      { type: 'scatter', data: [{ name: 'Points', data: [[1, 2], [2, 4]] }] },
+      {
+        type: 'radar',
+        data: [{ name: 'Current', data: [80, 65, 90] }],
+        categories: ['Security', 'Performance', 'Reliability'],
+      },
+      { type: 'gauge', data: [{ name: 'Health', data: [82] }] },
+      {
+        type: 'funnel',
+        data: [{ name: 'Conversion', data: [1000, 320, 85] }],
+        categories: ['Visitors', 'Trials', 'Customers'],
+      },
+      {
+        type: 'heatmap',
+        data: [{ name: 'Requests', data: [[0, 0, 5], [1, 0, 12]] }],
+        categories: ['Mon', 'Tue'],
+        yCategories: ['API'],
+      },
+      {
+        type: 'treemap',
+        data: [{ name: 'Insights', data: [{ name: 'Configuration', value: 8 }] }],
+      },
+      {
+        type: 'sunburst',
+        data: [{
+          name: 'Insights',
+          data: [{ name: 'Security', children: [{ name: 'Configuration', value: 8 }] }],
+        }],
+      },
+    ];
+
+    for (const chartCase of cases) {
+      const el: any = await fixture(html`
+        <zn-chart
+          type=${chartCase.type}
+          .data=${chartCase.data}
+          .categories=${chartCase.categories ?? []}
+          .yCategories=${chartCase.yCategories ?? []}
+        ></zn-chart>
+      `);
+      await el.updateComplete;
+      await new Promise((r) => setTimeout(r, 50));
+      const canvas = el.shadowRoot.querySelector('canvas');
+      expect(canvas, `${chartCase.type} chart canvas`).to.exist;
+    }
+  });
+
   it('joins a sync-group when the attribute is set', async () => {
     const a: any = await fixture(html`
       <zn-chart sync-group="g1" type="bar"
@@ -51,4 +116,4 @@ describe('<zn-chart>', () => {
     await new Promise((r) => setTimeout(r, 50));
     expect(a.chart?.group).to.equal('g1');
   });
-});
+});

package/src/components/chart/echarts-loader.ts

@@ -15,13 +15,23 @@ export function loadECharts(): Promise<EChartsModule> {
     ]);
     core.use([
       charts.BarChart,
+      charts.FunnelChart,
+      charts.GaugeChart,
+      charts.HeatmapChart,
       charts.LineChart,
+      charts.PieChart,
+      charts.RadarChart,
       charts.SankeyChart,
+      charts.ScatterChart,
+      charts.SunburstChart,
+      charts.TreemapChart,
       components.GridComponent,
       components.TooltipComponent,
       components.LegendComponent,
       components.TitleComponent,
       components.DataZoomComponent,
+      components.RadarComponent,
+      components.VisualMapComponent,
       renderers.CanvasRenderer,
     ]);
     return core;

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

@@ -9,6 +9,7 @@ import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
+import type {SelectionCardControlPosition, SelectionCardImagePosition} from '../../internal/selection-card';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
@@ -24,6 +25,7 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @dependency zn-icon
  *
  * @slot - The checkbox's label.
+ * @slot image - Replaces the built-in image used by contained checkboxes.
  * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
  * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
  *
@@ -40,9 +42,22 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @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 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.
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart description - The container that wraps the checkbox's description.
  * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
+ *
+ * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
+ * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
+ * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
+ * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
+ * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
+ * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
+ * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
+ * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
+ * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -53,7 +68,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     defaultValue: (control: ZnCheckbox) => control.defaultChecked,
     setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked)
   });
-  private readonly hasSlotController = new HasSlotController(this, 'description');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="checkbox"]') input: HTMLInputElement;
 
@@ -67,6 +82,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** The current value of the checkbox, submitted as a name/value pair with form data. */
   @property() value: string;
 
+  /** Title rendered inside the card. The default slot takes precedence when provided. */
+  @property({attribute: 'card-title'}) cardTitle = '';
+
   /** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
   @property({attribute: 'unchecked-value', reflect: true}) uncheckedValue: string;
 
@@ -88,6 +106,24 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   /** Draws a container around the checkbox. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /** URL for the image shown in a contained checkbox. */
+  @property() src = '';
+
+  /** Accessible text for the built-in image. Leave empty when the image is decorative. */
+  @property({attribute: 'image-alt'}) imageAlt = '';
+
+  /** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
+  @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
+
+  /**
+   * Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
+   * shows the selected state. Requires `contained`.
+   */
+  @property({attribute: 'control-position', reflect: true}) controlPosition: SelectionCardControlPosition = 'start';
+
   /** Removes a container around the checkbox. */
   @property({type: Boolean, reflect: true}) borderless = false;
 
@@ -244,6 +280,9 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
   render() {
     const hasDescriptionSlot = this.hasSlotController.test('description');
     const hasDescription = this.description ? true : hasDescriptionSlot;
+    const hasImage = this.contained && (Boolean(this.src) || this.hasSlotController.test('image'));
+    const hasDefaultSlot = this.hasSlotController.test('[default]');
+    const isCard = this.contained && (hasImage || Boolean(this.cardTitle) || this.controlPosition !== 'start');
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabelTooltip = this.hasSlotController.test('label-tooltip');
     const hasLabel = this.label || hasLabelSlot;
@@ -309,7 +348,11 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             'checkbox--warning': effectiveColor === 'warning',
             'checkbox--transparent': effectiveColor === 'transparent',
             'checkbox--has-description': hasDescription,
-            'checkbox--has-selected-content': this.hasSlotController.test('selected-content')
+            'checkbox--has-selected-content': this.hasSlotController.test('selected-content'),
+            'selection-card': isCard,
+            'selection-card--has-image': hasImage,
+            [`selection-card--image-${this.imagePosition}`]: hasImage,
+            [`selection-card--control-${this.controlPosition}`]: isCard && this.controlPosition !== 'start'
           })}>
 
           <input
@@ -323,7 +366,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             .disabled=${this.disabled}
             .required=${this.required}
             aria-checked=${this.checked ? 'true' : 'false'}
-            aria-describedby=${hasDescription ? '' : 'description'}
+            aria-describedby=${hasDescription ? 'description' : ''}
             @click=${this.handleClick}
             @input=${this.handleInput}
             @invalid=${this.handleInvalid}
@@ -334,7 +377,7 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
             part="control${this.checked ? ' control--checked' : ''}${this.indeterminate
               ? ' control--indeterminate'
               : ''}"
-            class="checkbox__control">
+            class="checkbox__control selection-card__control">
 
             ${this.checked && !this.indeterminate
               ? this.checkedIcon
@@ -367,8 +410,21 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
               : ''}
           </span>
 
-          <div part="label" class="checkbox__label">
-            <slot></slot>
+          ${hasImage
+            ? html`
+              <span part="image-container" class="selection-card__image-container">
+                <slot name="image">
+                  ${this.src
+                    ? html`<img part="image" class="selection-card__image" src=${this.src} alt=${this.imageAlt}>`
+                    : ''}
+                </slot>
+              </span>`
+            : ''}
+
+          <div part="label" class="checkbox__label selection-card__content">
+            <span part="card-title" class="selection-card__title">
+              <slot></slot>${hasDefaultSlot ? '' : this.cardTitle}
+            </span>
             <div
               aria-hidden=${hasDescription ? 'false' : 'true'}
               class="checkbox__description"

package/src/components/checkbox/checkbox.scss

@@ -1,5 +1,6 @@
 @use "../../wc";
 @use "../../form-control";
+@use "../../selection-card";
 
 :host {
   display: block;

package/src/components/checkbox/checkbox.test.ts

@@ -7,4 +7,60 @@ describe('<zn-checkbox>', () => {
 
     expect(el).to.exist;
   });
+
+  it('renders card content and a built-in image', async () => {
+    const el = await fixture(html`
+      <zn-checkbox
+        contained
+        card-title="Payroll"
+        description="Salary and pay schedule tools."
+        src="payroll.svg"
+        image-alt="Payroll illustration">
+      </zn-checkbox>
+    `);
+
+    const image = el.shadowRoot!.querySelector('[part="image"]')!;
+    expect(image.getAttribute('src')).to.equal('payroll.svg');
+    expect(image.getAttribute('alt')).to.equal('Payroll illustration');
+    expect(el.shadowRoot!.querySelector('[part="label"]')!.textContent).to.include('Payroll');
+  });
+
+  it('renders card-title when formatting whitespace is present in the default slot', async () => {
+    const el = await fixture(html`
+      <zn-checkbox contained card-title="Benefits">
+        <zn-icon slot="image" src="featured_seasonal_and_gifts"></zn-icon>
+      </zn-checkbox>
+    `);
+
+    expect(el.shadowRoot!.querySelector('[part="card-title"]')!.textContent).to.include('Benefits');
+  });
+
+  it('positions card images and controls', async () => {
+    const el = await fixture(html`
+      <zn-checkbox contained image-position="right" control-position="top-left">
+        Benefits
+        <zn-icon slot="image" src="featured_seasonal_and_gifts"></zn-icon>
+      </zn-checkbox>
+    `);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(base).to.have.class('selection-card--image-right');
+    expect(base).to.have.class('selection-card--control-top-left');
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
+  it('leaves a plain contained checkbox without card styles', async () => {
+    const el = await fixture(html`<zn-checkbox contained description="Supporting text">Payroll</zn-checkbox>`);
+
+    expect(el.shadowRoot!.querySelector('[part="base"]')).not.to.have.class('selection-card');
+    expect(el.shadowRoot!.querySelector('[part="image-container"]')).to.be.null;
+  });
+
+  it('can hide the visual control without removing the native input', async () => {
+    const el = await fixture(html`<zn-checkbox contained control-position="none">Payroll</zn-checkbox>`);
+
+    expect(el.shadowRoot!.querySelector('input[type="checkbox"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="control"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.have.class('selection-card--control-none');
+  });
 });