@ponchia/ui 0.3.4 → 0.3.6

package/behaviors/index.js

@@ -14,6 +14,8 @@
  *   const stop = initThemeToggle();     // wire [data-bronto-theme-toggle]
  */
 
+import { GLYPH_SIZE, glyphCells } from '../glyphs/glyphs.js';
+
 const THEMES = ['light', 'dark'];
 const noop = () => {};
 const hasDom = () => typeof document !== 'undefined';
@@ -1044,3 +1046,306 @@ export function initTableSort({ root } = {}) {
 
   return () => cleanups.forEach((fn) => fn());
 }
+
+/**
+ * Image carousel / gallery, built on CSS scroll-snap so touch + trackpad
+ * swipe (and momentum) are the browser's, not hand-rolled. This wires the
+ * parts scroll-snap can't do alone: prev/next buttons, keyboard nav, a
+ * thumbnail strip, the position counter, and ARIA — keeping a JS index in
+ * sync with the scroll position both ways.
+ *
+ * Markup: `[data-bronto-carousel]` containing a `.ui-carousel__viewport`
+ * of `.ui-carousel__slide` children; optionally
+ * `[data-bronto-carousel-prev]` / `[data-bronto-carousel-next]` controls,
+ * a `.ui-carousel__thumbs` list of `.ui-carousel__thumb` buttons, and a
+ * `.ui-carousel__status` counter slot. Add `data-bronto-carousel-loop` to
+ * wrap at the ends, `data-bronto-carousel-label` to name the region.
+ *
+ * A full-screen **lightbox** is the same markup inside a native
+ * `<dialog class="ui-lightbox">` opened by {@link initDialog}: the
+ * `<dialog>` provides the top layer, focus-trap, Escape and focus-return,
+ * so this behavior never touches focus management.
+ *
+ * Emits `bronto:change` ({ detail: { index } }) on every index change
+ * (button, key, thumbnail, or swipe). SSR-safe, idempotent per carousel;
+ * returns a cleanup function.
+ */
+export function initCarousel({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const boxes = [];
+  if (host !== document && host.matches?.('[data-bronto-carousel]')) boxes.push(host);
+  boxes.push(...(host.querySelectorAll?.('[data-bronto-carousel]') ?? []));
+  const cleanups = [];
+
+  for (const box of boxes) {
+    const viewport = box.querySelector('.ui-carousel__viewport');
+    if (!viewport) continue;
+    const slides = [...viewport.children].filter((el) =>
+      el.classList.contains('ui-carousel__slide'),
+    );
+    if (!slides.length) continue;
+    const n = slides.length;
+    const thumbs = [...box.querySelectorAll('.ui-carousel__thumb')];
+    const status = box.querySelector('.ui-carousel__status');
+    const prevBtn = box.querySelector('[data-bronto-carousel-prev]');
+    const nextBtn = box.querySelector('[data-bronto-carousel-next]');
+    const loop = box.hasAttribute('data-bronto-carousel-loop');
+
+    // ARIA scaffolding — pragmatic carousel semantics (not the full APG
+    // tablist), the same restraint initMenu takes.
+    viewport.setAttribute('role', 'group');
+    viewport.setAttribute('aria-roledescription', 'carousel');
+    if (!viewport.hasAttribute('aria-label'))
+      viewport.setAttribute(
+        'aria-label',
+        box.getAttribute('data-bronto-carousel-label') || 'Carousel',
+      );
+    if (!viewport.hasAttribute('tabindex')) viewport.tabIndex = 0;
+    slides.forEach((s, i) => {
+      s.setAttribute('role', 'group');
+      s.setAttribute('aria-roledescription', 'slide');
+      if (!s.hasAttribute('aria-label')) s.setAttribute('aria-label', `${i + 1} of ${n}`);
+    });
+    if (status) status.setAttribute('aria-live', 'polite');
+    for (const b of [prevBtn, nextBtn]) {
+      if (!b) continue;
+      if (b.tagName === 'BUTTON' && !b.hasAttribute('type')) b.type = 'button';
+    }
+    if (prevBtn && !prevBtn.hasAttribute('aria-label'))
+      prevBtn.setAttribute('aria-label', 'Previous');
+    if (nextBtn && !nextBtn.hasAttribute('aria-label')) nextBtn.setAttribute('aria-label', 'Next');
+
+    let index = Math.max(
+      0,
+      slides.findIndex((s) => s.hasAttribute('data-bronto-carousel-current')),
+    );
+
+    // While a button/keyboard nav is smooth-scrolling, the IntersectionObserver
+    // would observe the intermediate slides crossing its threshold and re-fire
+    // `bronto:change` for each — a feedback burst on a single Home→End jump.
+    // This flag makes the IO drive the index on *user* swipes only; a timeout
+    // (not the patchy `scrollend` event) releases it once the scroll settles.
+    let programmatic = false;
+    let progTimer = null;
+    const holdProgrammatic = () => {
+      programmatic = true;
+      if (progTimer) clearTimeout(progTimer);
+      progTimer = setTimeout(() => {
+        programmatic = false;
+      }, 500);
+      progTimer?.unref?.(); // don't keep a Node test process alive
+    };
+
+    const render = () => {
+      if (status) status.textContent = `${index + 1} / ${n}`;
+      thumbs.forEach((t, i) => {
+        if (i === index) t.setAttribute('aria-current', 'true');
+        else t.removeAttribute('aria-current');
+      });
+      if (prevBtn && !loop) prevBtn.disabled = index === 0;
+      if (nextBtn && !loop) nextBtn.disabled = index === n - 1;
+    };
+
+    const emit = () =>
+      box.dispatchEvent(new CustomEvent('bronto:change', { detail: { index }, bubbles: true }));
+
+    // jsdom (and any layout-less env) has no scrollIntoView; it's a pure
+    // affordance, so never let it break index/aria sync — same guard as
+    // initCombobox.
+    const reveal = (el) => {
+      try {
+        el?.scrollIntoView({ block: 'nearest', inline: 'center' });
+      } catch {
+        /* no layout — ignore */
+      }
+    };
+
+    const goTo = (i, { emitChange = true } = {}) => {
+      const next = loop ? (i + n) % n : Math.max(0, Math.min(n - 1, i));
+      const changed = next !== index;
+      index = next;
+      holdProgrammatic(); // suppress IO echo from the smooth-scroll this triggers
+      reveal(slides[index]);
+      reveal(thumbs[index]);
+      render();
+      if (changed && emitChange) emit();
+    };
+
+    const onKey = (e) => {
+      let target = null;
+      if (e.key === 'ArrowRight') target = index + 1;
+      else if (e.key === 'ArrowLeft') target = index - 1;
+      else if (e.key === 'Home') target = 0;
+      else if (e.key === 'End') target = n - 1;
+      else return;
+      e.preventDefault();
+      goTo(target);
+    };
+    const onClick = (e) => {
+      if (prevBtn && e.target.closest('[data-bronto-carousel-prev]')) {
+        goTo(index - 1);
+        return;
+      }
+      if (nextBtn && e.target.closest('[data-bronto-carousel-next]')) {
+        goTo(index + 1);
+        return;
+      }
+      const thumb = e.target.closest('.ui-carousel__thumb');
+      if (thumb) {
+        const i = thumbs.indexOf(thumb);
+        if (i >= 0) goTo(i);
+      }
+    };
+
+    // Swipe sync (enhancement): when the user scrolls the viewport, snap
+    // the JS index to the slide that's settled into view. Feature-detected
+    // so the buttons/keyboard still work where IntersectionObserver is
+    // absent (jsdom, older engines).
+    let io = null;
+    if (typeof IntersectionObserver === 'function') {
+      io = new IntersectionObserver(
+        (entries) => {
+          if (programmatic) return; // ignore the echo of a button/key-driven scroll
+          let best = null;
+          for (const ent of entries) {
+            if (ent.isIntersecting && (!best || ent.intersectionRatio > best.intersectionRatio))
+              best = ent;
+          }
+          if (!best) return;
+          const i = slides.indexOf(best.target);
+          if (i >= 0 && i !== index) {
+            index = i;
+            render();
+            reveal(thumbs[index]);
+            emit();
+          }
+        },
+        { root: viewport, threshold: 0.6 },
+      );
+      slides.forEach((s) => io.observe(s));
+    }
+
+    render();
+    const bound = bindOnce(box, 'carousel', () => {
+      viewport.addEventListener('keydown', onKey);
+      box.addEventListener('click', onClick);
+      return () => {
+        viewport.removeEventListener('keydown', onKey);
+        box.removeEventListener('click', onClick);
+        io?.disconnect();
+        if (progTimer) clearTimeout(progTimer);
+      };
+    });
+    cleanups.push(bound);
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}
+
+function restoreAttr(el, name, prev) {
+  if (prev === null) el.removeAttribute(name);
+  else el.setAttribute(name, prev);
+}
+
+/**
+ * Expand `[data-bronto-glyph="name"]` placeholders into a `.ui-dotmatrix`
+ * grid of GLYPH_SIZE² cells — the DOM counterpart to renderGlyph() from
+ * `@ponchia/ui/glyphs`, for when you'd rather drop a placeholder than inline
+ * the markup. Decorative by default (`aria-hidden`); add
+ * `data-bronto-glyph-label` to expose it as `role="img"`. An unknown glyph
+ * name is left untouched. Idempotent (skips an already-expanded host); the
+ * returned cleanup removes the cells and restores the original attributes.
+ */
+export function initDotGlyph({ root } = {}) {
+  if (!hasDom()) return noop;
+  const host = root || document;
+  const els = [];
+  if (host !== document && host.matches?.('[data-bronto-glyph]')) els.push(host);
+  els.push(...(host.querySelectorAll?.('[data-bronto-glyph]') ?? []));
+  const cleanups = [];
+
+  for (const el of els) {
+    // Scope to DIRECT-child cells (the ones we append) — so a placeholder that
+    // legitimately nests its own .ui-dotmatrix is neither mis-read as already
+    // expanded here nor have its inner cells removed by cleanup below.
+    if (el.querySelector(':scope > .ui-dotmatrix__cell')) continue; // already expanded
+    const cells = glyphCells(el.getAttribute('data-bronto-glyph'));
+    if (!cells.length) continue; // unknown glyph — leave the placeholder as-is
+
+    const label = el.getAttribute('data-bronto-glyph-label');
+    // `data-bronto-glyph-solid` → square, gapless pixel glyph (legible small),
+    // the DOM counterpart to renderGlyph's `solid` option. Implies glyph-only.
+    const solid = el.hasAttribute('data-bronto-glyph-solid');
+    // `data-bronto-glyph-anim="reveal|pulse"` → decorative animation (the DOM
+    // counterpart to renderGlyph's `anim`; reduced-motion-safe via CSS).
+    const animAttr = el.getAttribute('data-bronto-glyph-anim');
+    const animClass =
+      animAttr === 'reveal'
+        ? 'ui-dotmatrix--reveal'
+        : animAttr === 'pulse'
+          ? 'ui-dotmatrix--pulse'
+          : null;
+    const hadAnimClass = animClass ? el.classList.contains(animClass) : false;
+    const hadMatrix = el.classList.contains('ui-dotmatrix');
+    const hadCols = el.style.getPropertyValue('--dotmatrix-cols');
+    const hadRadius = el.style.getPropertyValue('--dotmatrix-dot-radius');
+    const hadGap = el.style.getPropertyValue('--dotmatrix-gap');
+    const hadAriaHidden = el.getAttribute('aria-hidden');
+    const hadRole = el.getAttribute('role');
+    const hadAriaLabel = el.getAttribute('aria-label');
+
+    el.classList.add('ui-dotmatrix');
+    if (animClass) el.classList.add(animClass);
+    el.style.setProperty('--dotmatrix-cols', String(GLYPH_SIZE));
+    if (solid) {
+      el.style.setProperty('--dotmatrix-dot-radius', '0');
+      el.style.setProperty('--dotmatrix-gap', '0');
+    }
+    if (label) {
+      el.setAttribute('role', 'img');
+      el.setAttribute('aria-label', label);
+      el.removeAttribute('aria-hidden'); // a labelled img must not also be hidden
+    } else {
+      el.setAttribute('aria-hidden', 'true');
+    }
+
+    const frag = document.createDocumentFragment();
+    cells.forEach((c, i) => {
+      const span = document.createElement('span');
+      span.className = !c.on
+        ? 'ui-dotmatrix__cell'
+        : c.tone === 'hot'
+          ? 'ui-dotmatrix__cell ui-dotmatrix__cell--hot'
+          : c.tone === 'accent'
+            ? 'ui-dotmatrix__cell ui-dotmatrix__cell--accent'
+            : 'ui-dotmatrix__cell';
+      if (!c.on && solid) span.style.background = 'transparent'; // glyph-only
+      if (animAttr === 'reveal') span.style.setProperty('--i', String(i)); // scan stagger
+      frag.appendChild(span);
+    });
+    el.appendChild(frag);
+
+    cleanups.push(() => {
+      el.querySelectorAll(':scope > .ui-dotmatrix__cell').forEach((n) => n.remove());
+      if (!hadMatrix) el.classList.remove('ui-dotmatrix');
+      if (animClass && !hadAnimClass) el.classList.remove(animClass);
+      if (solid) {
+        if (hadRadius) el.style.setProperty('--dotmatrix-dot-radius', hadRadius);
+        else el.style.removeProperty('--dotmatrix-dot-radius');
+        if (hadGap) el.style.setProperty('--dotmatrix-gap', hadGap);
+        else el.style.removeProperty('--dotmatrix-gap');
+      }
+      if (hadCols) el.style.setProperty('--dotmatrix-cols', hadCols);
+      else el.style.removeProperty('--dotmatrix-cols');
+      restoreAttr(el, 'aria-hidden', hadAriaHidden);
+      restoreAttr(el, 'role', hadRole);
+      restoreAttr(el, 'aria-label', hadAriaLabel);
+      // Don't leave behind empty class=""/style="" we ourselves created.
+      if (el.getAttribute('class') === '') el.removeAttribute('class');
+      if (el.getAttribute('style') === '') el.removeAttribute('style');
+    });
+  }
+
+  return () => cleanups.forEach((fn) => fn());
+}

package/classes/index.d.ts

@@ -63,6 +63,8 @@ export declare const cls: {
   readonly dotmatrixCell: 'ui-dotmatrix__cell';
   readonly dotmatrixCellHot: 'ui-dotmatrix__cell--hot';
   readonly dotmatrixCellAccent: 'ui-dotmatrix__cell--accent';
+  readonly dotmatrixReveal: 'ui-dotmatrix--reveal';
+  readonly dotmatrixPulse: 'ui-dotmatrix--pulse';
   readonly dotfield: 'ui-dotfield';
   readonly dotrule: 'ui-dotrule';
   readonly dotbar: 'ui-dotbar';
@@ -85,6 +87,9 @@ export declare const cls: {
   readonly hintError: 'ui-hint--error';
   readonly inputGroup: 'ui-input-group';
   readonly inputGroupAddon: 'ui-input-group__addon';
+  readonly inputIcon: 'ui-input-icon';
+  readonly inputIconSlot: 'ui-input-icon__icon';
+  readonly inputIconEnd: 'ui-input-icon--end';
   readonly file: 'ui-file';
   readonly range: 'ui-range';
   readonly errorSummary: 'ui-error-summary';
@@ -115,6 +120,15 @@ export declare const cls: {
   readonly progress: 'ui-progress';
   readonly progressBar: 'ui-progress__bar';
   readonly progressIndeterminate: 'ui-progress--indeterminate';
+  readonly meter: 'ui-meter';
+  readonly meterFill: 'ui-meter__fill';
+  readonly meterAccent: 'ui-meter--accent';
+  readonly meterSuccess: 'ui-meter--success';
+  readonly meterWarning: 'ui-meter--warning';
+  readonly meterDanger: 'ui-meter--danger';
+  readonly steps: 'ui-steps';
+  readonly stepsItem: 'ui-steps__item';
+  readonly stepsItemDone: 'ui-steps__item--done';
   readonly modal: 'ui-modal';
   readonly modalHead: 'ui-modal__head';
   readonly modalTitle: 'ui-modal__title';
@@ -132,6 +146,8 @@ export declare const cls: {
   readonly comboboxList: 'ui-combobox__list';
   readonly comboboxOption: 'ui-combobox__option';
   readonly comboboxEmpty: 'ui-combobox__empty';
+  readonly lightbox: 'ui-lightbox';
+  readonly lightboxClose: 'ui-lightbox__close';
   readonly tabs: 'ui-tabs';
   readonly tabsList: 'ui-tabs__list';
   readonly tab: 'ui-tab';
@@ -150,6 +166,15 @@ export declare const cls: {
   readonly avatarSm: 'ui-avatar--sm';
   readonly avatarLg: 'ui-avatar--lg';
   readonly avatarGroup: 'ui-avatar-group';
+  readonly carousel: 'ui-carousel';
+  readonly carouselStage: 'ui-carousel__stage';
+  readonly carouselViewport: 'ui-carousel__viewport';
+  readonly carouselSlide: 'ui-carousel__slide';
+  readonly carouselPrev: 'ui-carousel__prev';
+  readonly carouselNext: 'ui-carousel__next';
+  readonly carouselStatus: 'ui-carousel__status';
+  readonly carouselThumbs: 'ui-carousel__thumbs';
+  readonly carouselThumb: 'ui-carousel__thumb';
   readonly table: 'ui-table';
   readonly tableDense: 'ui-table--dense';
   readonly tableComfortable: 'ui-table--comfortable';
@@ -190,6 +215,9 @@ export declare const cls: {
   readonly siteheaderSticky: 'ui-siteheader--sticky';
   readonly siteheaderBrand: 'ui-siteheader__brand';
   readonly siteheaderActions: 'ui-siteheader__actions';
+  readonly pagehead: 'ui-pagehead';
+  readonly pageheadTitle: 'ui-pagehead__title';
+  readonly pageheadActions: 'ui-pagehead__actions';
   readonly sitenav: 'ui-sitenav';
   readonly sitemenu: 'ui-sitemenu';
   readonly sitemenuPanel: 'ui-sitemenu__panel';
@@ -200,6 +228,10 @@ export declare const cls: {
   readonly tagAccent: 'ui-tag--accent';
   readonly meta: 'ui-meta';
   readonly metaItem: 'ui-meta__item';
+  readonly timeline: 'ui-timeline';
+  readonly timelineItem: 'ui-timeline__item';
+  readonly timelineTime: 'ui-timeline__time';
+  readonly kbd: 'ui-kbd';
   readonly display: 'ui-display';
   readonly mono: 'ui-mono';
   readonly muted: 'ui-muted';
@@ -307,6 +339,9 @@ export interface ToastOpts {
 export interface ProgressOpts {
   indeterminate?: boolean;
 }
+export interface MeterOpts {
+  tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
 export interface DotspinnerOpts {
   size?: 'sm' | 'lg';
 }
@@ -334,6 +369,10 @@ export interface ContainerOpts {
 export interface TagOpts {
   accent?: boolean;
 }
+export interface InputIconOpts {
+  /** Place the icon at the inline-end instead of the start. */
+  end?: boolean;
+}
 
 export interface Ui {
   button(opts?: ButtonOpts): string;
@@ -352,6 +391,7 @@ export interface Ui {
   alert(opts?: AlertOpts): string;
   toast(opts?: ToastOpts): string;
   progress(opts?: ProgressOpts): string;
+  meter(opts?: MeterOpts): string;
   dotspinner(opts?: DotspinnerOpts): string;
   dotbar(opts?: DotbarOpts): string;
   modal(opts?: ModalOpts): string;
@@ -360,6 +400,7 @@ export interface Ui {
   prose(opts?: ProseOpts): string;
   container(opts?: ContainerOpts): string;
   tag(opts?: TagOpts): string;
+  inputIcon(opts?: InputIconOpts): string;
 }
 
 export declare const ui: Ui;

package/classes/index.js

@@ -68,6 +68,8 @@ export const cls = Object.freeze({
   dotmatrixCell: 'ui-dotmatrix__cell',
   dotmatrixCellHot: 'ui-dotmatrix__cell--hot',
   dotmatrixCellAccent: 'ui-dotmatrix__cell--accent',
+  dotmatrixReveal: 'ui-dotmatrix--reveal',
+  dotmatrixPulse: 'ui-dotmatrix--pulse',
   dotfield: 'ui-dotfield',
   dotrule: 'ui-dotrule',
   dotbar: 'ui-dotbar',
@@ -91,6 +93,9 @@ export const cls = Object.freeze({
   hintError: 'ui-hint--error',
   inputGroup: 'ui-input-group',
   inputGroupAddon: 'ui-input-group__addon',
+  inputIcon: 'ui-input-icon',
+  inputIconSlot: 'ui-input-icon__icon',
+  inputIconEnd: 'ui-input-icon--end',
   file: 'ui-file',
   range: 'ui-range',
   errorSummary: 'ui-error-summary',
@@ -122,6 +127,15 @@ export const cls = Object.freeze({
   progress: 'ui-progress',
   progressBar: 'ui-progress__bar',
   progressIndeterminate: 'ui-progress--indeterminate',
+  meter: 'ui-meter',
+  meterFill: 'ui-meter__fill',
+  meterAccent: 'ui-meter--accent',
+  meterSuccess: 'ui-meter--success',
+  meterWarning: 'ui-meter--warning',
+  meterDanger: 'ui-meter--danger',
+  steps: 'ui-steps',
+  stepsItem: 'ui-steps__item',
+  stepsItemDone: 'ui-steps__item--done',
   // overlay
   modal: 'ui-modal',
   modalHead: 'ui-modal__head',
@@ -140,6 +154,8 @@ export const cls = Object.freeze({
   comboboxList: 'ui-combobox__list',
   comboboxOption: 'ui-combobox__option',
   comboboxEmpty: 'ui-combobox__empty',
+  lightbox: 'ui-lightbox',
+  lightboxClose: 'ui-lightbox__close',
   // disclosure
   tabs: 'ui-tabs',
   tabsList: 'ui-tabs__list',
@@ -159,6 +175,15 @@ export const cls = Object.freeze({
   avatarSm: 'ui-avatar--sm',
   avatarLg: 'ui-avatar--lg',
   avatarGroup: 'ui-avatar-group',
+  carousel: 'ui-carousel',
+  carouselStage: 'ui-carousel__stage',
+  carouselViewport: 'ui-carousel__viewport',
+  carouselSlide: 'ui-carousel__slide',
+  carouselPrev: 'ui-carousel__prev',
+  carouselNext: 'ui-carousel__next',
+  carouselStatus: 'ui-carousel__status',
+  carouselThumbs: 'ui-carousel__thumbs',
+  carouselThumb: 'ui-carousel__thumb',
   // table
   table: 'ui-table',
   tableDense: 'ui-table--dense',
@@ -203,6 +228,9 @@ export const cls = Object.freeze({
   siteheaderSticky: 'ui-siteheader--sticky',
   siteheaderBrand: 'ui-siteheader__brand',
   siteheaderActions: 'ui-siteheader__actions',
+  pagehead: 'ui-pagehead',
+  pageheadTitle: 'ui-pagehead__title',
+  pageheadActions: 'ui-pagehead__actions',
   sitenav: 'ui-sitenav',
   sitemenu: 'ui-sitemenu',
   sitemenuPanel: 'ui-sitemenu__panel',
@@ -213,6 +241,10 @@ export const cls = Object.freeze({
   tagAccent: 'ui-tag--accent',
   meta: 'ui-meta',
   metaItem: 'ui-meta__item',
+  timeline: 'ui-timeline',
+  timelineItem: 'ui-timeline__item',
+  timelineTime: 'ui-timeline__time',
+  kbd: 'ui-kbd',
   display: 'ui-display',
   mono: 'ui-mono',
   muted: 'ui-muted',
@@ -346,6 +378,14 @@ export const ui = {
       tone === 'info' && cls.toastInfo,
     ),
   progress: ({ indeterminate } = {}) => j(cls.progress, indeterminate && cls.progressIndeterminate),
+  meter: ({ tone } = {}) =>
+    j(
+      cls.meter,
+      tone === 'accent' && cls.meterAccent,
+      tone === 'success' && cls.meterSuccess,
+      tone === 'warning' && cls.meterWarning,
+      tone === 'danger' && cls.meterDanger,
+    ),
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
@@ -357,6 +397,7 @@ export const ui = {
   container: ({ narrow, wide } = {}) =>
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),
+  inputIcon: ({ end } = {}) => j(cls.inputIcon, end && cls.inputIconEnd),
 };
 
 export default ui;