@zeyos/zx 2.1.0 → 2.2.1

package/src/compat/map/select.js

@@ -0,0 +1,198 @@
+import { Http, Select as ZxSelect, zeyosService } from '../../index.js';
+import { GxWrapper } from '../base.js';
+import { LEGACY_EVENT_ARGS, translateSelectOptions } from './options.js';
+
+/** Shared Select facade; concrete subclasses choose filtering and warning identity. */
+class SelectBase extends GxWrapper {
+  static legacyName = 'gx.zeyos.Select';
+  /*
+   * Widened deliberately: the subclasses below set `'local' | 'async' | 'priority' | 'rest'`, and
+   * a static field annotated with that union would still clash with the `string` each subclass
+   * infers from its own literal. The static sides have to agree or the emitted declarations do
+   * not type-check for a consumer running without `skipLibCheck`.
+   */
+  /** @type {string|false} */
+  static filterMode = false;
+
+  /** @param {Element|string|null} display @param {Record<string, any>} [options={}] */
+  constructor(display, options = {}) {
+    super(options, { data: [], elementIndex: 'ID', elementLabel: 'name', elementSelect: 'name', value: null });
+    const translated = translateSelectOptions(options);
+    translated.items = initialItems(options);
+    translated.valueKey = valueReader(options.elementIndex ?? 'ID');
+    translated.labelKey = labelReader(options.elementLabel ?? 'name');
+    translated.renderItem = typeof options.elementLabel === 'function' ? options.elementLabel : null;
+    translated.renderValue = selectionReader(options.elementSelect ?? options.elementLabel ?? 'name');
+    translated.value = options.value ?? null;
+    translated.filter = this.constructor.filterMode === 'local' ? 'local' :
+      (['async', 'rest'].includes(this.constructor.filterMode) ? (query) => this._load(query) : false);
+    translated.debounce = options.debounce ?? 200;
+    const component = this.constructor.filterMode === 'priority'
+      ? ZxSelect.priority(display, translated)
+      : new ZxSelect(display, translated);
+    this._attach(component, {
+      events: {
+        select: {
+          type: 'change', filter: (detail) => detail.item != null,
+          args: (detail) => LEGACY_EVENT_ARGS.select(detail, this)
+        },
+        noselect: {
+          type: 'change', filter: (detail) => detail.item == null,
+          args: (detail) => LEGACY_EVENT_ARGS.noselect(detail, this)
+        },
+        show: { type: 'open', args: () => [this] },
+        hide: { type: 'close', args: () => [this] },
+        requestSuccess: { type: 'loaded', args: (detail) => [detail.items] }
+      },
+      ui: { fieldset: 'control', textbox: 'input', dropdown: 'list', icon: 'toggle' },
+      setters: { data: 'setData', value: 'setId', disabled: (value) => value ? this.disable() : this.enable() }
+    });
+    this._http = null;
+    this.data = translated.items;
+  }
+
+  /** @param {unknown} selection @param {boolean} [noEvents=false] @returns {this} */
+  set(selection, noEvents = false) { this._zx.set(selection, { silent: Boolean(noEvents) }); return this; }
+  /** @param {unknown} id @param {boolean} [noEvents=false] @returns {this} */
+  setId(id, noEvents = false) {
+    const item = this.data?.find((candidate) => readValue(candidate, this.options.elementIndex ?? 'ID') == id);
+    this._zx.set(item ?? id, { silent: Boolean(noEvents) }); return this;
+  }
+  /** @param {unknown} [item] @returns {unknown} */
+  getId(item) { return item == null ? this._zx.value : readValue(item, this.options.elementIndex ?? 'ID'); }
+  /** @returns {unknown} */
+  getValue() { return this._zx.value; }
+  /** @returns {unknown} */
+  getSelected() { return this._zx.selected; }
+  /** @param {unknown[]} data @returns {this} */
+  setData(data) { this.data = Array.isArray(data) ? data.slice() : []; this._zx.setItems(this.data); return this; }
+  /** @returns {Element[]} */
+  getRows() { return Array.from(this.display('dropdown')?.querySelectorAll?.('[role="option"]') ?? []); }
+  /** @param {boolean} [noEvents=false] @returns {this} */
+  reset(noEvents = false) { this._zx.set(null, { silent: Boolean(noEvents) }); return this; }
+  /** @returns {this} */
+  enable() { this._zx.enable(); return this; }
+  /** @returns {this} */
+  disable() { this._zx.disable(); return this; }
+  /** @returns {this} */
+  show() { this._zx.open(); return this; }
+  /** @returns {this} */
+  hide() { this._zx.close(); return this; }
+  /** @returns {boolean} */
+  isOpen() { return this.toElement().getAttribute('data-state') === 'open'; }
+  /** @returns {this} */
+  search() { this._zx.open(); return this; }
+  /** @returns {this} */
+  showLoader() { return this; }
+  /** @returns {this} */
+  hideLoader() { return this; }
+
+  /** @param {string} query @returns {Promise<unknown[]>} */
+  async _load(query) {
+    try {
+      const result = this.constructor.filterMode === 'rest'
+        ? await this._loadRest(query)
+        : await this._loadUrl(query);
+      const rows = Array.isArray(result) ? result : [];
+      this.data = rows;
+      return rows;
+    } catch (error) {
+      this.fireEvent('requestFailure', [error]);
+      throw error;
+    }
+  }
+
+  /** @param {string} query @returns {Promise<unknown>} */
+  _loadUrl(query) {
+    this._http ??= new Http({ headers: this.options.requestHeader ?? {} });
+    const requestData = { ...(this.options.requestData ?? {}) };
+    const queryData = typeof this.options.queryParam === 'function'
+      ? this.options.queryParam(query, requestData)
+      : { ...requestData, [this.options.queryParam ?? 'query']: query };
+    const method = String(this.options.method ?? 'GET').toUpperCase();
+    return this._http.request(String(this.options.url ?? './'), method === 'GET'
+      ? { method, query: queryData }
+      : { method, data: queryData });
+  }
+
+  /** @param {string} query @returns {Promise<unknown>} */
+  _loadRest(query) {
+    this._http ??= zeyosService(String(this.options.entity ?? ''), String(this.options.accesskey ?? ''), {
+      apiBase: this.options.apiBase ?? '../remotecall/'
+    });
+    return this._http.get('', { ...(this.options.requestData ?? {}), search: query, limit: this.options.limit ?? 50 });
+  }
+}
+
+/** Legacy ZeyOS select. */
+export class Select extends SelectBase { static legacyName = 'gx.zeyos.Select'; }
+/** Legacy ZeyOS locally filterable select. */
+export class SelectFilter extends SelectBase { static legacyName = 'gx.zeyos.SelectFilter'; static filterMode = 'local'; }
+/** Legacy ZeyOS HTTP-backed select. */
+export class SelectDyn extends SelectBase { static legacyName = 'gx.zeyos.SelectDyn'; static filterMode = 'async'; }
+/** Legacy ZeyOS priority select. */
+export class SelectPrio extends SelectBase { static legacyName = 'gx.zeyos.SelectPrio'; static filterMode = 'priority'; }
+
+/** Legacy bootstrap select. */
+export class BootstrapSelect extends SelectBase { static legacyName = 'gx.bootstrap.Select'; }
+/** Legacy bootstrap locally filterable select. */
+export class BootstrapSelectFilter extends SelectBase { static legacyName = 'gx.bootstrap.SelectFilter'; static filterMode = 'local'; }
+/** Legacy bootstrap HTTP-backed select. */
+export class BootstrapSelectDyn extends SelectBase { static legacyName = 'gx.bootstrap.SelectDyn'; static filterMode = 'async'; }
+/** Legacy bootstrap REST-backed select. */
+export class SelectDynREST extends SelectBase {
+  static legacyName = 'gx.bootstrap.SelectDynREST';
+  static filterMode = 'rest';
+
+  /** Loads and selects a REST item by ID when it is not already cached. @param {unknown} id @returns {Promise<void>} */
+  async setEntityId(id) {
+    const cached = this.data?.find((item) => Object.is(readValue(item, this.options.elementIndex ?? 'ID'), id));
+    if (cached) { this.set(cached); return; }
+    if (id == null || id === '') return;
+    try {
+      this._http ??= zeyosService(String(this.options.entity ?? ''), String(this.options.accesskey ?? ''), {
+        apiBase: this.options.apiBase ?? '../remotecall/'
+      });
+      const item = await this._http.get(String(id));
+      if (item) this.set(item);
+    } catch (error) {
+      this.fireEvent('requestFailure', [error]);
+      throw error;
+    }
+  }
+}
+/** Legacy bootstrap priority select. */
+export class BootstrapSelectPrio extends SelectBase { static legacyName = 'gx.bootstrap.SelectPrio'; static filterMode = 'priority'; }
+
+/** @param {Record<string, any>} options @returns {unknown[]} */
+function initialItems(options) {
+  const items = Array.isArray(options.data) ? options.data.slice() : [];
+  return options.elementDefault == null ? items : [options.elementDefault, ...items];
+}
+
+/** @param {string|Function} reader @returns {string|Function} */
+function valueReader(reader) {
+  return typeof reader === 'function' ? reader : String(reader);
+}
+
+/** @param {string|Function} reader @returns {string|Function} */
+function labelReader(reader) {
+  if (typeof reader !== 'function') return String(reader);
+  return (item) => renderedText(reader(item));
+}
+
+/** @param {string|Function} reader @returns {(item: unknown) => string} */
+function selectionReader(reader) {
+  return (item) => renderedText(readValue(item, reader));
+}
+
+/** @param {unknown} item @param {string|Function} reader @returns {unknown} */
+function readValue(item, reader) {
+  return typeof reader === 'function' ? reader(item) : item?.[reader];
+}
+
+/** @param {unknown} value @returns {string} */
+function renderedText(value) {
+  if (value?.nodeType) return value.textContent ?? '';
+  return String(value ?? '');
+}

package/src/compat/map/stubs.js

@@ -0,0 +1,26 @@
+/** Creates a direct-construction stub with an actionable migration error. */
+function migrationStub(legacyName, replacement) {
+  return class LegacyMigrationStub {
+    /** @throws {Error} Always; this API needs an explicit migration. */
+    constructor() {
+      throw new Error(`${legacyName} is not emulated by Zx; migrate to ${replacement}`);
+    }
+  };
+}
+
+/** Direct Settings subclassing is intentionally outside the compatibility contract. */
+export const Settings = migrationStub('gx.core.Settings', 'plain option objects');
+/** Direct Container subclassing is intentionally outside the compatibility contract. */
+export const Container = migrationStub('gx.ui.Container', 'zx.Component');
+/** Legacy collapse animation stub. */
+export const Collapse = migrationStub('gx.ui.Collapse', 'CSS transitions');
+/** Legacy blend animation stub. */
+export const Blend = migrationStub('gx.ui.Blend', 'CSS transitions');
+/** Legacy HUD stub. */
+export const Hud = migrationStub('gx.ui.Hud', 'zx.Dialog');
+/** Legacy toggling helper stub. */
+export const Toggling = migrationStub('gx.ui.Toggling', 'zx.Toggle');
+/** Legacy horizontal group stub. */
+export const HGroup = migrationStub('gx.ui.HGroup', 'CSS layout');
+/** Legacy templates stub. */
+export const Templates = migrationStub('gx.ui.Templates', 'native template elements');

package/src/compat/map/utilities.js

@@ -0,0 +1,113 @@
+import { parse } from '../globals.js';
+
+/** Legacy utility namespace backed by dependency-free implementations. */
+export const util = Object.freeze({
+  initValue,
+  initNum,
+  formatTime,
+  getMinutes,
+  formatNum,
+  getNumber,
+  printf,
+  parseResult,
+  Parse: parse,
+  isArray: Array.isArray,
+  isObject: (value) => value !== null && typeof value === 'object' && !Array.isArray(value) &&
+    !(typeof Node !== 'undefined' && value instanceof Node) && !(value instanceof Date),
+  isFunction: (value) => typeof value === 'function',
+  isString: (value) => typeof value === 'string',
+  isNumber: (value) => typeof value === 'number' && Number.isFinite(value),
+  isElement: (value) => typeof Element !== 'undefined' && value instanceof Element,
+  isNode: (value) => typeof Node !== 'undefined' && value instanceof Node,
+  Console: (source, message) => {
+    if (typeof console === 'undefined') return;
+    if (message instanceof Error) console.error(source, message.stack);
+    else console.log(`${source}: ${message}`);
+  }
+});
+
+/** @param {Record<string, unknown>} object @param {string} key @param {unknown} fallback @returns {unknown} */
+export function initValue(object, key, fallback) {
+  return object?.[key] == null ? fallback : object[key];
+}
+
+/** @param {unknown} value @returns {number} */
+export function initNum(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'string') return Number.parseFloat(value);
+  return 0;
+}
+
+/** @param {unknown} value @returns {string} */
+export function formatTime(value) {
+  let minutes = value;
+  if (typeof minutes === 'string') {
+    if (/^[0-9]+:[0-9]{2}$/.test(minutes)) return minutes;
+    if (/^[0-9]+:[0-9]{2,}$/.test(minutes)) {
+      const digits = minutes.replace(/[^0-9]/g, '');
+      return digits.replace(/([0-9]{2})$/, ':$1');
+    }
+    minutes = Number.parseInt(minutes.replace(/[^0-9]/g, ''), 10);
+  }
+  if (minutes == null || Number.isNaN(Number(minutes))) return '0:00';
+  let number = Number(minutes);
+  const prefix = number < 0 ? '-' : '';
+  number = Math.abs(number);
+  return `${prefix}${Math.floor(number / 60)}:${pad(number % 60)}`;
+}
+
+/** @param {unknown} value @returns {number} */
+export function getMinutes(value) {
+  const parts = String(value ?? '').replace(/[^0-9:]/, '').split(':');
+  if (parts.length === 1) return Number.parseInt(parts[0], 10);
+  return Number.parseInt(parts[0], 10) * 60 + Number.parseInt(parts[1], 10);
+}
+
+/** @param {unknown} value @param {string} [decimal='.'] @param {string} [thousands=','] @param {number} [decimals=2] @returns {string} */
+export function formatNum(value, decimal = '.', thousands = ',', decimals = 2) {
+  let number = value;
+  if (typeof number === 'string') {
+    number = Number.parseFloat(number.replace(new RegExp(`[^0-9${escapeRegExp(decimal)}]`), '').replace(decimal, '.'));
+  }
+  if (Number.isNaN(Number(number))) number = 0;
+  const precision = typeof decimals === 'number' ? decimals : 2;
+  let formatted = Math.round(Number(number) * (10 ** precision)).toString();
+  for (let index = formatted.length; index <= precision; index += 1) formatted = `0${formatted}`;
+  const position = formatted.length - precision;
+  if (precision > 0) formatted = `${formatted.slice(0, position)}${decimal}${formatted.slice(position)}`;
+  for (let index = position - 3; index > 0; index -= 3) {
+    formatted = `${formatted.slice(0, index)}${thousands}${formatted.slice(index)}`;
+  }
+  return formatted;
+}
+
+/** @param {unknown} value @param {string} [decimal=','] @returns {number} */
+export function getNumber(value, decimal = '.') {
+  return Number.parseFloat(String(value ?? '').replace(new RegExp(`[^0-9${escapeRegExp(decimal)}]`), '').replace(decimal, '.'));
+}
+
+/** @param {unknown} template @param {unknown|unknown[]} [values=[]] @returns {string} */
+export function printf(template, values = []) {
+  const replacements = Array.isArray(values) ? values : [values];
+  let index = 0;
+  return String(template ?? '').replace(/%arg%/g, (match) => index < replacements.length ? String(replacements[index++]) : match);
+}
+
+/** @param {unknown} response @returns {unknown} */
+export function parseResult(response) {
+  const data = typeof response === 'string' ? JSON.parse(response) : response;
+  if (!data || typeof data !== 'object') throw new Error('Invalid server response');
+  if (data.error) throw new Error(String(data.error.message ?? data.error));
+  if (!Object.hasOwn(data, 'result') || data.result == null) throw new Error('Undefined result');
+  return data.result;
+}
+
+/** @param {number} value @returns {string} */
+function pad(value) {
+  return String(value).padStart(2, '0');
+}
+
+/** @param {string} value @returns {string} */
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/src/compat-entry.js

@@ -0,0 +1,11 @@
+/** Browser entry point for the gx compatibility bundle. */
+import * as zx from './index.js';
+import gx, { install, installElementStorage } from './compat/index.js';
+
+const host = typeof window === 'undefined' ? globalThis : window;
+installElementStorage(host);
+install(host);
+host.zx = zx;
+
+export { gx, zx };
+export default gx;

package/src/components/badge/badge.css

@@ -0,0 +1,147 @@
+.zx-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  max-inline-size: 100%;
+  border: 1px solid transparent;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-muted);
+  padding-block: 2px;
+  padding-inline: var(--zx-space-2);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.zx-badge__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.zx-badge__dot {
+  flex: none;
+  inline-size: 6px;
+  block-size: 6px;
+  border-radius: var(--zx-radius-full);
+  background: currentColor;
+}
+
+.zx-badge .zx-icon {
+  flex: none;
+}
+
+/* Soft — the default: a tinted fill with the intent colour as text. */
+.zx-badge[data-kind="accent"] {
+  background: var(--zx-color-accent-subtle);
+  color: var(--zx-color-accent);
+}
+
+.zx-badge[data-kind="success"] {
+  background: var(--zx-color-success-bg);
+  color: var(--zx-color-success);
+}
+
+.zx-badge[data-kind="warning"] {
+  background: var(--zx-color-warning-bg);
+  color: var(--zx-color-warning);
+}
+
+.zx-badge[data-kind="danger"] {
+  background: var(--zx-color-danger-bg);
+  color: var(--zx-color-danger);
+}
+
+.zx-badge[data-kind="info"] {
+  background: var(--zx-color-info-bg);
+  color: var(--zx-color-info);
+}
+
+/* Solid — the intent colour as fill, with the on-accent text colour of the active theme. */
+.zx-badge[data-variant="solid"] {
+  background: var(--zx-color-text-muted);
+  color: var(--zx-color-bg-surface);
+}
+
+.zx-badge[data-variant="solid"][data-kind="accent"] {
+  background: var(--zx-color-accent);
+  color: var(--zx-color-on-accent);
+}
+
+.zx-badge[data-variant="solid"][data-kind="success"] {
+  background: var(--zx-color-success);
+  color: var(--zx-color-on-accent);
+}
+
+.zx-badge[data-variant="solid"][data-kind="warning"] {
+  background: var(--zx-color-warning);
+  color: var(--zx-color-on-accent);
+}
+
+.zx-badge[data-variant="solid"][data-kind="danger"] {
+  background: var(--zx-color-danger);
+  color: var(--zx-color-on-accent);
+}
+
+.zx-badge[data-variant="solid"][data-kind="info"] {
+  background: var(--zx-color-info);
+  color: var(--zx-color-on-accent);
+}
+
+/* Outline — no fill, the intent colour on the border and the text. */
+.zx-badge[data-variant="outline"] {
+  border-color: var(--zx-color-border-strong);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+}
+
+.zx-badge[data-variant="outline"][data-kind="accent"],
+.zx-badge[data-variant="outline"][data-kind="success"],
+.zx-badge[data-variant="outline"][data-kind="warning"],
+.zx-badge[data-variant="outline"][data-kind="danger"],
+.zx-badge[data-variant="outline"][data-kind="info"] {
+  border-color: currentColor;
+  background: transparent;
+}
+
+.zx-badge[data-variant="outline"][data-kind="accent"] {
+  color: var(--zx-color-accent);
+}
+
+.zx-badge[data-variant="outline"][data-kind="success"] {
+  color: var(--zx-color-success);
+}
+
+.zx-badge[data-variant="outline"][data-kind="warning"] {
+  color: var(--zx-color-warning);
+}
+
+.zx-badge[data-variant="outline"][data-kind="danger"] {
+  color: var(--zx-color-danger);
+}
+
+.zx-badge[data-variant="outline"][data-kind="info"] {
+  color: var(--zx-color-info);
+}
+
+.zx-badge[data-size="sm"] {
+  gap: calc(var(--zx-space-1) / 2);
+  padding-block: 1px;
+  padding-inline: var(--zx-space-1);
+  font-size: calc(var(--zx-text-xs) - 1px);
+}
+
+.zx-badge[data-size="sm"] .zx-badge__dot {
+  inline-size: 5px;
+  block-size: 5px;
+}
+
+.zx-badge-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-1);
+}

package/src/components/badge/badge.js

@@ -0,0 +1,92 @@
+import { h } from '../../core/dom.js';
+import { icon as createIcon } from '../../core/icons.js';
+
+/**
+ * @typedef {Object} BadgeOptions
+ * @property {string} [label=''] Visible badge text.
+ * @property {string|null} [icon=null] Icon name from `icons.js`, rendered before the label.
+ * @property {'neutral'|'accent'|'success'|'warning'|'danger'|'info'} [kind='neutral'] Semantic intent.
+ * @property {'soft'|'solid'|'outline'} [variant='soft'] Fill treatment.
+ * @property {'md'|'sm'} [size='md'] Badge size.
+ * @property {boolean} [dot=false] Renders a small leading status dot instead of an icon.
+ * @property {string} [title] Native title text; also names an icon-only or dot-only badge.
+ */
+
+/** Badge intents, in the order they are documented. */
+const KINDS = Object.freeze(['neutral', 'accent', 'success', 'warning', 'danger', 'info']);
+
+/** Fill treatments. */
+const VARIANTS = Object.freeze(['soft', 'solid', 'outline']);
+
+/** @type {Readonly<BadgeOptions>} */
+const defaults = Object.freeze({
+  label: '',
+  icon: null,
+  kind: 'neutral',
+  variant: 'soft',
+  size: 'md',
+  dot: false
+});
+
+/**
+ * Creates a status pill: a small, non-interactive label carrying a semantic colour.
+ *
+ * The badge is plain text content, so it needs no ARIA of its own. A badge without a label but
+ * with a `title` is named for assistive technology through `role="img"`.
+ *
+ * @param {BadgeOptions} [opts={}] Badge options.
+ * @returns {HTMLSpanElement}
+ */
+export function badge(opts = {}) {
+  const options = { ...defaults, ...opts };
+  const element = /** @type {HTMLSpanElement} */ (h('span', {
+    class: 'zx-badge',
+    title: options.title,
+    dataset: {
+      kind: normalizeKind(options.kind),
+      variant: normalizeVariant(options.variant),
+      size: normalizeSize(options.size)
+    }
+  }));
+
+  if (options.dot) {
+    element.append(h('span', { class: 'zx-badge__dot', ariaHidden: 'true' }));
+  } else if (options.icon) {
+    element.append(createIcon(options.icon, { size: 12, class: 'zx-badge__icon' }));
+  }
+  if (options.label !== '' && options.label != null) {
+    element.append(h('span', { class: 'zx-badge__label' }, String(options.label)));
+  } else if (options.title) {
+    element.setAttribute('role', 'img');
+    element.setAttribute('aria-label', options.title);
+  }
+  return element;
+}
+
+/**
+ * Groups badges into a wrapping row.
+ * @param {HTMLSpanElement[]} badges Badges to group.
+ * @returns {HTMLSpanElement}
+ */
+export function badgeGroup(badges) {
+  const group = /** @type {HTMLSpanElement} */ (h('span', { class: 'zx-badge-group' }));
+  group.append(...badges);
+  return group;
+}
+
+/** @param {unknown} value @returns {'neutral'|'accent'|'success'|'warning'|'danger'|'info'} */
+function normalizeKind(value) {
+  return KINDS.includes(/** @type {string} */ (value)) ?
+    /** @type {'neutral'|'accent'|'success'|'warning'|'danger'|'info'} */ (value) : 'neutral';
+}
+
+/** @param {unknown} value @returns {'soft'|'solid'|'outline'} */
+function normalizeVariant(value) {
+  return VARIANTS.includes(/** @type {string} */ (value)) ?
+    /** @type {'soft'|'solid'|'outline'} */ (value) : 'soft';
+}
+
+/** @param {unknown} value @returns {'md'|'sm'} */
+function normalizeSize(value) {
+  return value === 'sm' ? 'sm' : 'md';
+}