@kubex/zinc 1.1.98 → 1.1.99

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');
+  });
 });

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

@@ -34,6 +34,8 @@ import styles from './checkbox-group.scss';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnCheckboxGroup extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -75,6 +77,15 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
   /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /**
+   * Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
+   * `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+   */
+  @property({type: Boolean, reflect: true}) wrap = false;
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -158,6 +169,10 @@ export default class ZnCheckboxGroup extends ZincElement implements ZincFormCont
         checkbox.size = this.size;
         checkbox.horizontal = this.horizontal;
 
+        if (this.square) {
+          checkbox.square = true;
+        }
+
         // Add class to checkboxes in a Checkbox Group so that we can style them without using :slotted
         checkbox.classList.add('groupedCheckbox');
 

package/src/components/checkbox-group/checkbox-group.scss

@@ -8,8 +8,9 @@
 
 :host([horizontal]) .form-control-input {
   display: flex;
-  column-gap: var(--zn-spacing-2x-large);
   flex-wrap: wrap;
+  column-gap: var(--zn-spacing-2x-large);
+  row-gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox[horizontal]) {
@@ -17,15 +18,16 @@
   min-width: 100px;
 }
 
-:host([contained]) .form-control-input {
+/* The label supplies the gap above the options, so a group without one starts flush. */
+:host([contained]) .form-control--has-label .form-control-input {
   margin-top: var(--zn-spacing-medium);
 }
 
 :host([horizontal][contained]) .form-control-input {
-  margin-top: var(--zn-spacing-medium);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
-  gap: var(--zn-spacing-x-small);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zn-checkbox-group-column-width, 152px)), 1fr));
+  align-items: stretch;
+  gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-checkbox) {
@@ -42,6 +44,22 @@
   height: 100%;
 }
 
+/* `wrap` swaps the equal-width grid for a flex row: cards start from their basis and wrap onto new lines. */
+:host([horizontal][contained][wrap]) .form-control-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--zn-spacing-x-small);
+}
+
+:host([wrap]) ::slotted(zn-checkbox[horizontal][contained]) {
+  flex: 1 1 var(--zn-checkbox-group-column-width, 152px);
+  min-width: 0;
+
+  /* A percentage height would resolve against every line, not the card's own. */
+  height: auto;
+}
+
 
 .form-control {
   position: relative;

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

@@ -7,4 +7,19 @@ describe('<zn-checkbox-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('propagates contained and square to its checkboxs', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-checkbox-group contained square>
+        <zn-checkbox value="one">One</zn-checkbox>
+        <zn-checkbox value="two">Two</zn-checkbox>
+      </zn-checkbox-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    el.querySelectorAll('zn-checkbox').forEach(child => {
+      expect(child).to.have.attribute('contained');
+      expect(child).to.have.attribute('square');
+    });
+  });
 });

package/src/components/confirm/confirm.component.ts

@@ -1,6 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query, state} from 'lit/decorators.js';
@@ -97,7 +97,7 @@ export default class ZnConfirm extends ZincElement {
       const trigger = this.hasSlotController.getSlot('trigger');
       trigger?.addEventListener('click', this.show);
     } else if (this.trigger) {
-      const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+      const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
       triggers.forEach((el: HTMLButtonElement) => {
         el.addEventListener('click', this.show);
       });
@@ -105,7 +105,7 @@ export default class ZnConfirm extends ZincElement {
   }
 
   updateTriggers() {
-    const triggers = deepQuerySelectorAll('#' + this.trigger, this.parentElement as Element, '');
+    const triggers = deepQuerySelectorAll(idSelector(this.trigger), this.parentElement as Element, '');
     triggers.forEach((el: HTMLButtonElement) => {
       // if already has a click listener, remove it
       el.removeEventListener('click', this.show);

package/src/components/confirm/confirm.test.ts

@@ -7,4 +7,19 @@ describe('<zn-confirm-modal>', () => {
 
     expect(el).to.exist;
   });
+
+  it('connects a trigger whose id contains CSS syntax characters', async () => {
+    const id = 'delete-enum-cloud_hosting_&_infrastructure';
+    const el = await fixture<HTMLElement>(html`
+      <div>
+        <button id="${id}">Delete</button>
+        <zn-confirm trigger="${id}" caption="Delete"></zn-confirm>
+      </div>
+    `);
+    const confirm = el.querySelector<HTMLElement & {updateComplete: Promise<void>}>('zn-confirm')!;
+    await confirm.updateComplete;
+
+    // An unescaped `#id` selector throws a SyntaxError here, leaving the component unrendered.
+    expect(confirm.shadowRoot!.querySelector('zn-dialog')).to.exist;
+  });
 });

package/src/components/dialog/dialog.component.ts

@@ -1,6 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
+import {idSelector} from "../../utilities/query";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
 import {unlockBodyScrolling} from "../../internal/scroll";
@@ -105,7 +106,7 @@ export default class ZnDialog extends ZincElement {
     this.shadowRoot?.addEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentNode?.querySelector('#' + this.trigger);
+      const trigger = this.parentNode?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.addEventListener('click', () => this.show());
       }
@@ -132,7 +133,7 @@ export default class ZnDialog extends ZincElement {
     this.removeEventListener('click', this.closeClickHandler);
 
     if (this.trigger) {
-      const trigger = this.parentElement?.querySelector('#' + this.trigger);
+      const trigger = this.parentElement?.querySelector(idSelector(this.trigger));
       if (trigger) {
         trigger.removeEventListener('click', () => this.show());
       }

package/src/components/editor/editor.component.ts

@@ -1,5 +1,5 @@
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {deepQuerySelectorAll, idSelector} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
@@ -489,12 +489,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     // Find which element contains the content to insert
     // Priority: currentTarget > selectedTarget > target > composedPath > querySelector
+    const contentSelector = idSelector(contentContainer);
     const contentElement: Element | null =
-      (e.currentTarget instanceof Element && e.currentTarget.closest('#' + contentContainer)) ||
-      (e.selectedTarget instanceof Element && e.selectedTarget.closest('#' + contentContainer)) ||
-      (e.target instanceof Element && e.target.closest('#' + contentContainer)) ||
-      ((e.composedPath()[0] as Element)?.closest('#' + contentContainer)) ||
-      deepQuerySelectorAll(`#${contentContainer}`, document.documentElement, '')[0];
+      (e.currentTarget instanceof Element && e.currentTarget.closest(contentSelector)) ||
+      (e.selectedTarget instanceof Element && e.selectedTarget.closest(contentSelector)) ||
+      (e.target instanceof Element && e.target.closest(contentSelector)) ||
+      ((e.composedPath()[0] as Element)?.closest(contentSelector)) ||
+      deepQuerySelectorAll(contentSelector, document.documentElement, '')[0];
     if (!contentElement) return;
 
     let content = contentElement.textContent;

package/src/components/header/header.scss

@@ -110,6 +110,7 @@
     width: 100%;
     max-width: 100%;
     height: fit-content;
+    min-height: var(--zn-input-height-medium, 36px);
     gap: 10px;
     margin: 0 auto;
     padding: var(--zn-base-gap);
@@ -226,7 +227,6 @@
   slot[name="actions"] {
     justify-content: end;
     flex-wrap: nowrap;
-    height: var(--zn-icon-size, 20px);
   }
 
   slot[name="actions"]::slotted(zn-button-menu) {

package/src/components/navbar/navbar.scss

@@ -303,6 +303,17 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
   }
 }
 
+// Icon-bar items are standalone pills, not tabs — the tab-strip rule above
+// leaves them with a top+right border only, which reads as an unfinished box
+:host([icon-bar]:not([stacked])) {
+  ul.navbar {
+    > li {
+      border-width: 1px;
+      border-radius: 6px;
+    }
+  }
+}
+
 :host {
   display: block;
   width: 100%;

package/src/components/radio/radio.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 './radio.scss';
@@ -22,6 +23,7 @@ import styles from './radio.scss';
  * @dependency zn-icon
  *
  * @slot - The radio's label.
+ * @slot image - Replaces the built-in image used by contained radios.
  * @slot description - A description of the radio's label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.
  * @slot selected-content - Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.
  *
@@ -35,9 +37,22 @@ import styles from './radio.scss';
  * @csspart control - The square container that wraps the radio's checked state.
  * @csspart control--checked - Matches the control part when the radio is checked.
  * @csspart checked-icon - The checked 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 radio's label.
  * @csspart description - The container that wraps the radio's description.
  * @csspart selected-content - The container that wraps optional content that appears when a radio 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 radio 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 ZnRadio extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -48,7 +63,7 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
     defaultValue: (control: ZnRadio) => control.defaultChecked,
     setValue: (control: ZnRadio, checked: boolean) => (control.checked = checked)
   });
-  private readonly hasSlotController = new HasSlotController(this, 'description');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'description', 'image');
 
   @query('input[type="radio"]') input: HTMLInputElement;
 
@@ -62,6 +77,9 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   /** The current value of the radio, 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 radio's size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -74,6 +92,24 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
   /** Draws a container around the radio. */
   @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 radio. */
+  @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 radio's text. Requires `contained`. */
+  @property({attribute: 'image-position', reflect: true}) imagePosition: SelectionCardImagePosition = 'left';
+
+  /**
+   * Places the radio 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';
+
   /** Applies styles relevant to radios in a horizontal layout. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
@@ -198,6 +234,9 @@ export default class ZnRadio 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;
@@ -248,7 +287,11 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
             'radio--medium': this.size === 'medium',
             'radio--large': this.size === 'large',
             'radio--has-description': hasDescription,
-            'radio--has-selected-content': this.hasSlotController.test('selected-content')
+            'radio--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
@@ -261,7 +304,7 @@ export default class ZnRadio 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}
@@ -270,16 +313,29 @@ export default class ZnRadio extends ZincElement implements ZincFormControl {
           />
           <span
             part="control${this.checked ? ' control--checked' : ''}"
-            class="radio__control">
+            class="radio__control selection-card__control">
             ${this.checked
               ? html`
                 <zn-icon part="checked-icon" size="18" class="radio__checked-icon"
                          src="radio_button_checked"></zn-icon>`
               : ''}
-        </span>
+          </span>
+
+          ${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="radio__label">
-            <slot></slot>
+          <div part="label" class="radio__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="radio__description"

package/src/components/radio/radio.scss

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

package/src/components/radio/radio.test.ts

@@ -7,4 +7,60 @@ describe('<zn-radio>', () => {
 
     expect(el).to.exist;
   });
+
+  it('renders card content and a built-in image', async () => {
+    const el = await fixture(html`
+      <zn-radio
+        contained
+        card-title="Basic"
+        description="For smaller businesses."
+        src="plan.svg"
+        image-alt="Basic plan">
+      </zn-radio>
+    `);
+
+    const image = el.shadowRoot!.querySelector('[part="image"]')!;
+    expect(image.getAttribute('src')).to.equal('plan.svg');
+    expect(image.getAttribute('alt')).to.equal('Basic plan');
+    expect(el.shadowRoot!.querySelector('[part="label"]')!.textContent).to.include('Basic');
+  });
+
+  it('renders card-title when formatting whitespace is present in the default slot', async () => {
+    const el = await fixture(html`
+      <zn-radio contained card-title="Complete">
+        <zn-icon slot="image" src="potted_plant"></zn-icon>
+      </zn-radio>
+    `);
+
+    expect(el.shadowRoot!.querySelector('[part="card-title"]')!.textContent).to.include('Complete');
+  });
+
+  it('positions card images and controls', async () => {
+    const el = await fixture(html`
+      <zn-radio contained image-position="top" control-position="bottom-right">
+        Complete
+        <zn-icon slot="image" src="potted_plant"></zn-icon>
+      </zn-radio>
+    `);
+    const base = el.shadowRoot!.querySelector('[part="base"]')!;
+
+    expect(base).to.have.class('selection-card--image-top');
+    expect(base).to.have.class('selection-card--control-bottom-right');
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
+  it('leaves a plain contained radio without card styles', async () => {
+    const el = await fixture(html`<zn-radio contained description="Supporting text">Basic</zn-radio>`);
+
+    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-radio contained control-position="none">Basic</zn-radio>`);
+
+    expect(el.shadowRoot!.querySelector('input[type="radio"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part~="control"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('[part="base"]')).to.have.class('selection-card--control-none');
+  });
 });

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

@@ -30,7 +30,7 @@ import styles from './radio-group.scss';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-radio-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnRadioGroup extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -67,12 +67,21 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
   /** The radio group's size. This size will be applied to all child radios */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
 
-  /** The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
+  /** The radio group's orientation. Changes the group's layout from the default (vertical) to horizontal. */
   @property({type: Boolean, reflect: true}) horizontal = false;
 
-  /** The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes. */
+  /** The radio group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child radios. */
   @property({type: Boolean, reflect: true}) contained = false;
 
+  /** Squares off the corners of every contained radio in the group, which are rounded by default. */
+  @property({type: Boolean, reflect: true}) square = false;
+
+  /**
+   * Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
+   * `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
+   */
+  @property({type: Boolean, reflect: true}) wrap = false;
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be in
@@ -190,6 +199,10 @@ export default class ZnRadioGroup extends ZincElement implements ZincFormControl
         radio.size = this.size;
         radio.horizontal = this.horizontal;
         radio.contained = this.contained;
+
+        if (this.square) {
+          radio.square = true;
+        }
       })
     );
 

package/src/components/radio-group/radio-group.scss

@@ -8,18 +8,21 @@
 
 :host([horizontal]) .form-control-input {
   display: flex;
+  flex-wrap: wrap;
   column-gap: var(--zn-spacing-2x-large);
+  row-gap: var(--zn-spacing-small);
 }
 
-:host([contained]) .form-control-input {
+/* The label supplies the gap above the options, so a group without one starts flush. */
+:host([contained]) .form-control--has-label .form-control-input {
   margin-top: var(--zn-spacing-medium);
 }
 
 :host([horizontal][contained]) .form-control-input {
-  margin-top: var(--zn-spacing-medium);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
-  gap: var(--zn-spacing-x-small);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zn-radio-group-column-width, 152px)), 1fr));
+  align-items: stretch;
+  gap: var(--zn-spacing-small);
 }
 
 ::slotted(zn-radio) {
@@ -36,6 +39,22 @@
   height: 100%;
 }
 
+/* `wrap` swaps the equal-width grid for a flex row: cards start from their basis and wrap onto new lines. */
+:host([horizontal][contained][wrap]) .form-control-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: var(--zn-base-gap);
+}
+
+:host([wrap]) ::slotted(zn-radio[horizontal][contained]) {
+  flex: 1 1 var(--zn-radio-group-column-width, 152px);
+  min-width: 0;
+
+  /* A percentage height would resolve against every line, not the card's own. */
+  height: auto;
+}
+
 .form-control {
   position: relative;
   border: none;

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

@@ -7,4 +7,19 @@ describe('<zn-radio-group>', () => {
 
     expect(el).to.exist;
   });
+
+  it('propagates contained and square to its radios', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-radio-group contained square>
+        <zn-radio value="one">One</zn-radio>
+        <zn-radio value="two">Two</zn-radio>
+      </zn-radio-group>
+    `);
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    el.querySelectorAll('zn-radio').forEach(child => {
+      expect(child).to.have.attribute('contained');
+      expect(child).to.have.attribute('square');
+    });
+  });
 });