@aurelia-ui-toolkits/headless 1.0.0

package/src/drawer/ui-drawer.ts

@@ -0,0 +1,219 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-drawer.html?raw';
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+
+@customElement({ name: 'ui-drawer', template })
+export class UiDrawer implements EventListenerObject {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  open: boolean = false;
+  openChanged(newValue: boolean): void {
+    if (newValue) {
+      this.startOpenState();
+      return;
+    }
+
+    this.stopOpenState();
+  }
+
+  @bindable
+  side: DrawerSide = 'right';
+
+  @bindable({ set: booleanAttr })
+  persistent: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  modal: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  closeOnOutside: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  closeOnEscape: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  focusOnOpen: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  restoreFocus: boolean = true;
+
+  @bindable
+  trigger: HTMLElement | undefined;
+
+  @bindable
+  label: string | undefined;
+
+  @bindable
+  labelledBy: string | undefined;
+
+  @bindable
+  describedBy: string | undefined;
+
+  @bindable
+  portalTarget: string | Element | null | undefined;
+
+  @bindable
+  portalPosition: InsertPosition = 'beforeend';
+
+  panelElement: HTMLElement | undefined;
+  private listening = false;
+  private previousFocus: HTMLElement | undefined;
+
+  attaching(): void {
+    if (this.open) {
+      this.startOpenState();
+    }
+  }
+
+  detaching(): void {
+    this.stopOpenState(false);
+  }
+
+  handleEvent(event: Event): void {
+    if (!this.open) {
+      return;
+    }
+
+    if (event.type === 'keydown') {
+      this.onWindowKeyDown(event as KeyboardEvent);
+      return;
+    }
+
+    if (event.type === 'pointerdown') {
+      this.onWindowPointerDown(event as PointerEvent);
+    }
+  }
+
+  private startOpenState(): void {
+    if (this.persistent) {
+      return;
+    }
+
+    this.previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    this.setListeners(true);
+    if (this.focusOnOpen) {
+      queueMicrotask(() => this.focusPanel());
+    }
+  }
+
+  private stopOpenState(restore = true): void {
+    this.setListeners(false);
+    if (!this.persistent && restore && this.restoreFocus) {
+      this.restorePreviousFocus();
+    }
+  }
+
+  private onWindowPointerDown(event: PointerEvent): void {
+    if (!this.closeOnOutside) {
+      return;
+    }
+
+    const target = event.target as Node | null;
+    if (!target || this.panelElement?.contains(target) || this.trigger?.contains(target) || this.isPortalledPopup(target)) {
+      return;
+    }
+
+    this.requestClose();
+  }
+
+  private onWindowKeyDown(event: KeyboardEvent): void {
+    if (this.closeOnEscape && event.key === Keys.Escape) {
+      event.preventDefault();
+      this.requestClose();
+      return;
+    }
+
+    if (this.modal && event.key === Keys.Tab) {
+      this.trapFocus(event);
+    }
+  }
+
+  private requestClose(): void {
+    this.open = false;
+    this.host.dispatchEvent(new CustomEvent('drawer-close', { bubbles: true }));
+  }
+
+  private setListeners(listen: boolean): void {
+    if (listen === this.listening) {
+      return;
+    }
+
+    this.listening = listen;
+    if (listen) {
+      window.addEventListener('pointerdown', this, true);
+      window.addEventListener('keydown', this, true);
+      return;
+    }
+
+    window.removeEventListener('pointerdown', this, true);
+    window.removeEventListener('keydown', this, true);
+  }
+
+  private isPortalledPopup(target: Node): boolean {
+    return target instanceof HTMLElement && !!target.closest('.ui-popup__panel');
+  }
+
+  private focusPanel(): void {
+    const focusTarget = this.getFocusableElements()[0];
+    (focusTarget ?? this.panelElement)?.focus();
+  }
+
+  private restorePreviousFocus(): void {
+    const target = this.trigger ?? this.previousFocus;
+    if (target && document.contains(target)) {
+      target.focus();
+    }
+    this.previousFocus = undefined;
+  }
+
+  private trapFocus(event: KeyboardEvent): void {
+    const focusable = this.getFocusableElements();
+    if (!focusable.length) {
+      event.preventDefault();
+      this.panelElement?.focus();
+      return;
+    }
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+
+    if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  private getFocusableElements(): HTMLElement[] {
+    const selector = [
+      'a[href]',
+      'button',
+      'input:not([type="hidden"])',
+      'select',
+      'textarea',
+      'iframe',
+      '[tabindex]',
+      '[contenteditable="true"]'
+    ].join(',');
+
+    return Array.from(this.panelElement?.querySelectorAll<HTMLElement>(selector) ?? [])
+      .filter((element) => this.isFocusable(element));
+  }
+
+  private isFocusable(element: HTMLElement): boolean {
+    if (element.tabIndex < 0 || element.hasAttribute('disabled') || element.getAttribute('aria-hidden') === 'true') {
+      return false;
+    }
+
+    const style = window.getComputedStyle(element);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+  }
+}

package/src/index.ts

@@ -0,0 +1,152 @@
+import { DialogConfigurationStandard } from '@aurelia/dialog';
+import { AppTask, IAttrMapper, IContainer, NodeObserverLocator, Registration } from 'aurelia';
+import { AlertConfiguration } from './alert-service/alert-configuration';
+import { AlertModal } from './alert-service/alert-modal/alert-modal';
+import { AlertService } from './alert-service/alert-service';
+import { ExceptionsTracker } from './alert-service/exceptions-tracker';
+import { PromptDialog } from './alert-service/prompt-dialog/prompt-dialog';
+import { UiAlert } from './alert/ui-alert';
+import { UiBadge } from './badge/ui-badge';
+import { UiBreadcrumbs } from './breadcrumbs/ui-breadcrumbs';
+import { UiButton } from './button/ui-button';
+import { UiIconButton } from './button/ui-icon-button';
+import { UiCheckbox } from './checkbox/ui-checkbox';
+import { UiChip } from './chip/ui-chip';
+import { UiCombobox } from './combobox/ui-combobox';
+import { UiDisclosure } from './disclosure/ui-disclosure';
+import { UiDrawer } from './drawer/ui-drawer';
+import { IError, UiInput } from './input/ui-input';
+import { UiMenu } from './menu/ui-menu';
+import { UiList } from './list/ui-list';
+import { UiListItem } from './list/ui-list-item';
+import { UiPopup } from './popup/ui-popup';
+import { UiProgress } from './progress/ui-progress';
+import { UiRadio } from './radio/ui-radio';
+import { UiRadioGroup } from './radio/ui-radio-group';
+import { UiSegment } from './segmented-control/ui-segment';
+import { UiSegmentedControl } from './segmented-control/ui-segmented-control';
+import { UiSelect } from './select/ui-select';
+import { UiSlider } from './slider/ui-slider';
+import { UiSplitter } from './splitter/ui-splitter';
+import { UiSwitch } from './switch/ui-switch';
+import { UiTab } from './tabs/ui-tab';
+import { UiTabs } from './tabs/ui-tabs';
+import { UiTable } from './table/ui-table';
+import { UiTableColumn } from './table/ui-table-column';
+import { UiToastRegion } from './toast/ui-toast-region';
+import { UiToastService } from './toast/ui-toast-service';
+import { UiTooltip } from './tooltip/ui-tooltip';
+import { UiTooltipService } from './tooltip/ui-tooltip-service';
+import { UiTopAppBar } from './top-app-bar/ui-top-app-bar';
+import { UiTree } from './tree/ui-tree';
+import { EnhanceUiButton } from './button/enhance-ui-button';
+import { EnhanceUiCombobox } from './combobox/enhance-ui-combobox';
+import { EnhanceUiInput } from './input/enhance-ui-input';
+import { EnhanceUiSelect } from './select/enhance-ui-select';
+import { EnhanceUiTable } from './table/enhance-ui-table';
+import { UiValidationControllerFactory } from './validation/ui-validation-controller-factory';
+
+export { UiButton };
+export { AlertConfiguration };
+export { AlertModal };
+export { AlertService };
+export { UiAlert };
+export { UiBadge };
+export { UiBreadcrumbs };
+export { UiIconButton };
+export { UiCheckbox };
+export { UiChip };
+export { UiCombobox };
+export { UiDisclosure };
+export { UiDrawer };
+export { UiInput };
+export { UiMenu };
+export { UiValidationControllerFactory };
+export type { IError };
+export { UiList };
+export { UiListItem };
+export { UiPopup };
+export { UiProgress };
+export { UiRadio };
+export { UiRadioGroup };
+export { UiSegment };
+export { UiSegmentedControl };
+export { UiSelect };
+export { UiSlider };
+export { UiSplitter };
+export { UiSwitch };
+export { UiTab };
+export { UiTabs };
+export { UiTable };
+export { UiTableColumn };
+export { UiToastRegion };
+export { UiToastService };
+export { UiTooltip };
+export { UiTooltipService };
+export { UiTopAppBar };
+export { UiTree };
+export { ExceptionsTracker };
+export { PromptDialog };
+export { confirmAction } from './alert-service/decorators/confirm-action';
+export { usingProgress } from './alert-service/decorators/using-progress';
+export type { IWithAlertService } from './alert-service/decorators/using-progress';
+export type { IAlertModalPayload } from './alert-service/alert-modal/i-alert-modal-payload';
+export type { IPromptDialogData } from './alert-service/prompt-dialog/prompt-dialog';
+export type { UiBreadcrumbItem } from './breadcrumbs/ui-breadcrumbs';
+
+let registered = false; //
+
+export const AureliaHeadlessConfiguration = {
+  register(container: IContainer): IContainer {
+    if (registered) {
+      return container;
+    }
+    registered = true;
+    AppTask.creating(IContainer, c => {
+      const attrMapper = c.get(IAttrMapper);
+      const nodeObserverLocator = c.get(NodeObserverLocator);
+
+      // attrMapper.useTwoWay((el, property) => el.tagName === 'MDC-CHECKBOX' ? property === 'checked' : false);
+      // nodeObserverLocator.useConfig('MDC-CHECKBOX', 'checked', { events: ['change'], type: CheckedObserver });
+
+      // attrMapper.useTwoWay((el, property) => el.tagName === 'MDC-CHIP' ? property === 'checked' : false);
+      // nodeObserverLocator.useConfig('MDC-CHIP', 'checked', { events: ['change'], type: CheckedObserver });
+
+      // attrMapper.useTwoWay((el, property) => el.tagName === 'MDC-RADIO' ? property === 'checked' : false);
+      // nodeObserverLocator.useConfig('MDC-RADIO', 'checked', { events: ['change'], type: CheckedObserver });
+
+      // attrMapper.useTwoWay((el, property) => el.hasAttribute('mdc-segmented-button-segment-element') ? property === 'checked' : false);
+      // nodeObserverLocator.useConfig('MDC-SEGMENTED-BUTTON-SEGMENT', 'checked', { events: [segmentedButtonEvents.SELECTED, 'unselected'], type: CheckedObserver });
+
+      // attrMapper.useTwoWay((el, property) => el.tagName === 'MDC-SELECT' ? property === 'value' : false);
+      // nodeObserverLocator.useConfig('MDC-SELECT', 'value', { events: [strings.CHANGE_EVENT], type: MdcSelectValueObserver });
+
+      // attrMapper.useTwoWay((el, property) => el.tagName === 'MDC-SLIDER' ? property === 'value' || property === 'valuestart' : false);
+      // nodeObserverLocator.useConfig({
+      //   'MDC-SLIDER': {
+      //     value: { events: [sliderEvents.CHANGE, sliderEvents.INPUT] },
+      //     valuestart: { events: [sliderEvents.CHANGE, sliderEvents.INPUT] }
+      //   }
+      // });
+
+      // attrMapper.useTwoWay((el, property) => el.hasAttribute('mdc-switch-element') ? property === 'selected' : false);
+      // nodeObserverLocator.useConfig('MDC-SWITCH', 'selected', { events: ['change'] });
+
+      attrMapper.useTwoWay((el, property) => el.hasAttribute('ui-input-element') ? property === 'value' : false);
+      nodeObserverLocator.useConfig('UI-INPUT', 'value', { events: ['input', 'change'] });
+      attrMapper.useTwoWay((el, property) => el.hasAttribute('ui-select-element') ? property === 'value' : false);
+      nodeObserverLocator.useConfig('UI-SELECT', 'value', { events: ['input', 'change'] });
+      attrMapper.useTwoWay((el, property) => el.hasAttribute('ui-combobox-element') ? property === 'value' : false);
+      nodeObserverLocator.useConfig('UI-COMBOBOX', 'value', { events: ['input', 'change'] });
+      attrMapper.useTwoWay((el, property) => el.tagName === 'UI-RADIO-GROUP' ? property === 'value' : false);
+      nodeObserverLocator.useConfig('UI-RADIO-GROUP', 'value', { events: ['input', 'change'] });
+      attrMapper.useTwoWay((el, property) => el.tagName === 'UI-SLIDER' ? property === 'value' : false);
+      nodeObserverLocator.useConfig('UI-SLIDER', 'value', { events: ['input', 'change'] });
+      attrMapper.useTwoWay((el, property) => el.tagName === 'UI-SWITCH' ? property === 'checked' : false);
+      nodeObserverLocator.useConfig('UI-SWITCH', 'checked', { events: ['input', 'change'] });
+
+    }).register(container);
+
+    return container.register(DialogConfigurationStandard, AlertModal, PromptDialog, Registration.singleton(AlertConfiguration, AlertConfiguration), Registration.singleton(AlertService, AlertService), Registration.singleton(ExceptionsTracker, ExceptionsTracker), UiAlert, UiBadge, UiBreadcrumbs, UiButton, UiIconButton, EnhanceUiButton, UiCheckbox, UiChip, UiCombobox, EnhanceUiCombobox, UiDisclosure, UiDrawer, UiInput, EnhanceUiInput, UiList, UiListItem, UiMenu, UiPopup, UiProgress, UiRadio, UiRadioGroup, UiSegment, UiSegmentedControl, UiSelect, EnhanceUiSelect, UiSlider, UiSplitter, UiSwitch, UiTab, UiTabs, UiTable, UiTableColumn, EnhanceUiTable, UiToastRegion, Registration.singleton(UiToastService, UiToastService), UiTooltip, Registration.singleton(UiTooltipService, UiTooltipService), UiTopAppBar, UiTree);
+  }
+};

package/src/input/enhance-ui-input.ts

@@ -0,0 +1,10 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceUiInput {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML
+      .replaceAll('<ui-input ', '<label as-element="ui-input" ui-input-element ')
+      .replaceAll('</ui-input>', '</label>');
+  }
+}

package/src/input/ui-input.html

@@ -0,0 +1,56 @@
+<template class="ui-input"
+  data-disabled.attr="disabled ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-inset.attr="inset ? '' : null"
+  data-has-value.attr="inputEl.value ? '' : null">
+  <label class="ui-input__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-input__control">
+    <span class="ui-input__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-input__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <input ref="inputEl"
+      class="ui-input__native"
+      id.bind="id"
+      type.bind="type || null"
+      name.attr="name || null"
+      value.bind="value"
+      placeholder.attr="inset ? null : placeholder || null"
+      autocomplete.attr="autocomplete || null"
+      disabled.bind="disabled"
+      readonly.bind="readonly"
+      required.bind="required"
+      aria-labelledby.bind="label ? labelId : null"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown()"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()">
+
+    <span class="ui-input__trailing" show.bind="trailingNodes.length">
+      <au-slot name="trailing"></au-slot>
+    </span>
+  </div>
+
+  <div class="ui-input__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-input__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-input__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-input__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>

package/src/input/ui-input.ts

@@ -0,0 +1,225 @@
+import { bindable, CustomElement, customElement, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-input.html?raw';
+import { IValidatedElement } from '../base/i-validated-element';
+
+let nextInputId = 0;
+
+export interface IError {
+  message: string | undefined;
+}
+
+@customElement({ name: 'ui-input', template })
+export class UiInput {
+  constructor() {
+    defineUiInputElementApis(resolve(Element) as HTMLElement);
+  }
+
+  errors = new Map<IError, boolean>();
+  focus: boolean = false;
+  active: boolean = false;
+  inputEl!: HTMLInputElement;
+
+  @bindable
+  label: string | undefined;
+
+  @bindable({ set: booleanAttr })
+  inset: boolean = false;
+
+  @bindable
+  helperText: string | undefined;
+
+  @bindable
+  id: string = `ui-input-${++nextInputId}`;
+
+  @bindable
+  type: string | undefined;
+
+  @bindable
+  name: string | undefined;
+
+  @bindable
+  placeholder: string | undefined;
+
+  @bindable
+  autocomplete: AutoFill | undefined;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  readonly: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  required: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  invalid: boolean = false;
+
+  @slotted({ slotName: 'helper' })
+  helperNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'leading' })
+  leadingNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'trailing' })
+  trailingNodes: readonly Node[] = [];
+
+  private initialValue: string | undefined;
+  get value(): string | undefined {
+    if (this.inputEl) {
+      return this.inputEl.value;
+    } else {
+      return this.initialValue;
+    }
+  }
+  set value(value: string) {
+    if (this.inputEl) {
+      this.inputEl.value = value;
+    } else {
+      this.initialValue = value;
+    }
+  }
+
+
+  get labelId(): string {
+    return `${this.id}-label`;
+  }
+
+  get helperId(): string {
+    return `${this.id}-helper`;
+  }
+
+  get errorsId(): string {
+    return `${this.id}-errors`;
+  }
+
+  attached() {
+    if (this.initialValue !== undefined) {
+      this.value = this.initialValue;
+    }
+  }
+
+  addError(error: IError): void {
+    if (this.findError(error)) {
+      return;
+    }
+
+    this.errors.set(error, true);
+  }
+
+  removeError(error: IError): void {
+    const existing = this.findError(error);
+    if (existing) {
+      this.errors.delete(existing);
+      return;
+    }
+
+    this.errors.delete(error);
+  }
+
+  onFocusIn(): void {
+    if (!this.disabled) {
+      this.focus = true;
+    }
+  }
+
+  onFocusOut(): void {
+    this.focus = false;
+  }
+
+  onPointerDown(): void {
+    if (!this.disabled) {
+      this.active = true;
+    }
+  }
+
+  onPointerUp(): void {
+    this.active = false;
+  }
+
+  onPointerLeave(): void {
+    this.active = false;
+  }
+
+  private findError(error: IError): IError | undefined {
+    for (const existing of this.errors.keys()) {
+      if (existing === error || existing.message === error.message) {
+        return existing;
+      }
+    }
+
+    return undefined;
+  }
+}
+
+export interface IUiInputElement extends IValidatedElement {
+  value: string;
+}
+
+function defineUiInputElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    tagName: {
+      get() {
+        return 'UI-INPUT';
+      }
+    },
+    value: {
+      get(this: IUiInputElement) {
+        return CustomElement.for<UiInput>(this).viewModel.value;
+      },
+      set(this: IUiInputElement, value: string) {
+        CustomElement.for<UiInput>(this).viewModel.value = value;
+      },
+      configurable: true
+    },
+    disabled: {
+      get(this: IUiInputElement) {
+        return CustomElement.for<UiInput>(this).viewModel.disabled;
+      },
+      set(this: IUiInputElement, value: boolean) {
+        CustomElement.for<UiInput>(this).viewModel.disabled = value;
+      },
+      configurable: true
+    },
+    readOnly: {
+      get(this: IUiInputElement) {
+        return CustomElement.for<UiInput>(this).viewModel.readonly;
+      },
+      set(this: IUiInputElement, value: boolean) {
+        CustomElement.for<UiInput>(this).viewModel.readonly = value;
+      },
+      configurable: true
+    },
+    addError: {
+      value(this: IUiInputElement, error: IError) {
+        CustomElement.for<UiInput>(this).viewModel.addError(error);
+      },
+      configurable: true
+    },
+    removeError: {
+      value(this: IUiInputElement, error: IError) {
+        CustomElement.for<UiInput>(this).viewModel.removeError(error);
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IUiInputElement) {
+        CustomElement.for<UiInput>(this).viewModel.inputEl.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IUiInputElement) {
+        CustomElement.for<UiInput>(this).viewModel.inputEl.blur();
+      },
+      configurable: true
+    },
+    isFocused: {
+      get(this: IUiInputElement) {
+        return document.activeElement === CustomElement.for<UiInput>(this).viewModel.inputEl;
+      },
+      configurable: true
+    }
+  });
+}

package/src/list/ui-list-item.html

@@ -0,0 +1,22 @@
+<template class="ui-list-item"
+  role="option"
+  aria-selected.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-active.attr="parentList.activeItem === value ? '' : null"
+  data-selected.attr="parentList.selected === value ? '' : null"
+  data-disabled.attr="disabled ? '' : null">
+  <span class="ui-list-item__leading" show.bind="leadingNodes.length">
+    <au-slot name="leading"></au-slot>
+  </span>
+  <span class="ui-list-item__content">
+    <span class="ui-list-item__primary">
+      <au-slot></au-slot>
+    </span>
+    <span class="ui-list-item__secondary" show.bind="secondaryNodes.length">
+      <au-slot name="secondary"></au-slot>
+    </span>
+  </span>
+  <span class="ui-list-item__trailing" show.bind="trailingNodes.length">
+    <au-slot name="trailing"></au-slot>
+  </span>
+</template>