GLUON / DOCS

@gluonjs/core / packages/molecules/src / OneTimePasswordFieldProps

Interface: OneTimePasswordFieldProps ​

Properties ​

attributes? ​

readonly optional attributes?: OneTimePasswordFieldAttributes

disabled? ​

readonly optional disabled?: boolean

error? ​

readonly optional error?: string

helper? ​

readonly optional helper?: string

id ​

readonly id: string

inputAttributes? ​

readonly optional inputAttributes?: OneTimePasswordFieldInputAttributes

invalid? ​

readonly optional invalid?: boolean

label ​

readonly label: string

length? ​

readonly optional length?: number

mode? ​

readonly optional mode?: OneTimePasswordFieldMode

name? ​

readonly optional name?: string

onValueChange? ​

readonly optional onValueChange?: (value, event) => void

Parameters ​

value ​

string

event ​

InputEvent | CompositionEvent | ClipboardEvent | KeyboardEvent

Returns ​

void

readOnly? ​

readonly optional readOnly?: boolean

required? ​

readonly optional required?: boolean

value? ​

readonly optional value?: string

Example ​

Configure a controlled bounded one-time-code field while keeping validation and transport in the caller:

ts
import { Button, Input, Radio } from '@gluonjs/atoms';
import { html } from '@gluonjs/core';
import { q } from '@gluonjs/quarks';
import {
  Accordion,
  Breadcrumbs,
  ButtonGroup,
  Card,
  ChoiceGroup,
  ControlField,
  ContextMenu,
  DialogSurface,
  Popover,
  Sheet,
  Disclosure,
  ResponsiveDisclosure,
  DropdownMenu,
  EmptyState,
  FormField,
  InlineNotice,
  ListboxField,
  ComboboxField,
  comboboxFieldStyles,
  CommandPalette,
  commandPaletteStyles,
  TreeView,
  treeViewStyles,
  SortControl,
  sortControlStyles,
  NavigationMenu,
  NavigationStrip,
  Pagination,
  SearchField,
  SearchResults,
  Menubar,
  OneTimePasswordField,
  PasswordToggleField,
  SegmentedControl,
  TableRegion,
  Tabs,
  Toolbar,
  Tooltip,
  Stepper,
  FilterBar,
  DataList,
  createDialogSurfaceController,
  moleculeManifest,
  moleculeStyles,
  passwordToggleFieldStyles,
  breadcrumbsStyles,
  paginationStyles,
  popoverStyles,
  sheetStyles,
  searchFieldStyles,
  searchResultsStyles,
  oneTimePasswordFieldStyles,
  type AccordionAccessibleName,
  type AccordionAttributes,
  type AccordionChangeEvent,
  type AccordionHeadingLevel,
  type AccordionItem,
  type AccordionMultipleProps,
  type AccordionProps,
  type AccordionSingleProps,
  type ButtonGroupAccessibleName,
  type ButtonGroupAttributes,
  type ButtonGroupOrientation,
  type ButtonGroupPresentation,
  type ButtonGroupProps,
  type CardProps,
  type CardTone,
  type ChoiceGroupAttributes,
  type ChoiceGroupOrientation,
  type ChoiceGroupProps,
  type ControlFieldAttributes,
  type ControlFieldProps,
  type ControlFieldRelationships,
  type ControlFieldRenderer,
  type ContextMenuProps,
  type DropdownMenuProps,
  type DialogSurfaceAccessibleName,
  type DialogSurfaceAttributes,
  type DialogSurfaceController,
  type DialogSurfaceControllerOptions,
  type DialogSurfacePlacement,
  type DialogSurfaceProps,
  type DialogSurfaceSectionAttributes,
  type PopoverAccessibleName,
  type PopoverAttributes,
  type PopoverPlacement,
  type PopoverProps,
  type PopoverTriggerAttributes,
  type SheetAccessibleName,
  type SheetAttributes,
  type SheetPlacement,
  type SheetProps,
  type SheetSectionAttributes,
  type DisclosureAttributes,
  type DisclosureAvailability,
  type DisclosureProps,
  type DisclosureState,
  type DisclosureSummaryAttributes,
  type ResponsiveDisclosureAttributes,
  type ResponsiveDisclosureProps,
  type EmptyStateAttributes,
  type EmptyStateHeadingLevel,
  type EmptyStatePresentation,
  type EmptyStateProps,
  type FormFieldProps,
  type InlineNoticeAnnouncement,
  type InlineNoticeAttributes,
  type InlineNoticeProps,
  type InlineNoticeTone,
  type ListboxFieldAttributes,
  type ListboxFieldListboxAttributes,
  type ListboxFieldProps,
  type ComboboxFieldAttributes,
  type ComboboxFieldInputAttributes,
  type ComboboxFieldListboxAttributes,
  type ComboboxFieldProps,
  type CommandPaletteAttributes,
  type CommandPaletteCommand,
  type CommandPaletteGroup,
  type CommandPaletteInputAttributes,
  type CommandPaletteListboxAttributes,
  type CommandPaletteProps,
  type TreeViewAttributes,
  type TreeViewNode,
  type TreeViewProps,
  type SortControlAttributes,
  type SortControlOption,
  type SortControlProps,
  type NavigationMenuAttributes,
  type NavigationMenuItem,
  type NavigationMenuItemAttributes,
  type NavigationMenuLinkAttributes,
  type NavigationMenuOpenChangeEvent,
  type NavigationMenuProps,
  type NavigationMenuTriggerAttributes,
  type NavigationStripProps,
  type BreadcrumbItem,
  type BreadcrumbItemAttributes,
  type BreadcrumbLinkAttributes,
  type BreadcrumbsAttributes,
  type BreadcrumbsProps,
  type PaginationAttributes,
  type PaginationLinkAttributes,
  type PaginationProps,
  type SearchFieldAttributes,
  type SearchFieldInputAttributes,
  type SearchFieldProps,
  type SearchResultGroup,
  type SearchResultsAttributes,
  type SearchResultsHeadingLevel,
  type SearchResultsProps,
  type SearchResultsState,
  type MenuActionItem,
  type MenuAttributes,
  type MenuCheckboxItem,
  type MenuCheckedChange,
  type MenuItem,
  type MenuItemKind,
  type MenuProps,
  type MenuRadioItem,
  type MenuSeparatorItem,
  type MenubarProps,
  type OneTimePasswordFieldAttributes,
  type OneTimePasswordFieldInputAttributes,
  type OneTimePasswordFieldMode,
  type OneTimePasswordFieldProps,
  type PasswordToggleFieldAttributes,
  type PasswordToggleFieldInputAttributes,
  type PasswordToggleFieldProps,
  type SegmentedControlAccessibleName,
  type SegmentedControlAttributes,
  type SegmentedControlChangeEvent,
  type SegmentedControlOption,
  type SegmentedControlOrientation,
  type SegmentedControlProps,
  type TableRegionAccessibleName,
  type TableRegionAttributes,
  type TableRegionContent,
  type TableRegionProps,
  type TabsAccessibleName,
  type TabsActivation,
  type TabsAttributes,
  type TabsChangeEvent,
  type TabsItem,
  type TabsOrientation,
  type TabsProps,
  type ToolbarButtonItem,
  type ToolbarItem,
  type ToolbarLinkItem,
  type ToolbarProps,
  type ToolbarSeparatorItem,
  type TooltipAttributes,
  type TooltipPlacement,
  type TooltipProps,
  type StepperAttributes,
  type StepperProps,
  type StepperStep,
  type StepperStepStatus,
  type FilterBarAttributes,
  type FilterBarProps,
  type DataListAttributes,
  type DataListItem,
  type DataListProps,
} from '@gluonjs/molecules';

const email = { label: 'Email', name: 'email', type: 'email', helper: 'Order updates go here.' } satisfies FormFieldProps;
const tooltipPlacement: TooltipPlacement = 'block-end';
const helpTooltip = { id: 'delivery-help', content: 'Choose a saved delivery preference.', placement: tooltipPlacement, children: Button({ label: 'Help', variant: 'ghost' }) } satisfies TooltipProps;
const stepStatus: StepperStepStatus = 'current';
const steps = [{ id: 'configure', label: 'Configure', status: 'complete', href: '/configure' }, { id: 'review', label: 'Review', status: stepStatus, description: 'Check the exact order.' }, { id: 'complete', label: 'Complete', status: 'upcoming' }] satisfies readonly StepperStep[];
const stepper = { id: 'checkout-steps', label: 'Checkout progress', steps, attributes: { class: 'checkout-steps' } satisfies StepperAttributes } satisfies StepperProps;
const filters = { id: 'catalog-filters', label: 'Catalog filters', activeCount: 2, summary: 'Two filters are active.', children: html`<label>Category <select><option>Lighting</option></select></label>`, clearAction: Button({ label: 'Clear filters', variant: 'ghost' }) } satisfies FilterBarProps;
const listItems = [{ id: 'status', label: 'Status', value: 'Ready', description: 'Available to ship.' }, { id: 'delivery', label: 'Delivery', value: '2–4 working days' }] satisfies readonly DataListItem[];
const orderData = { id: 'order-summary', items: listItems, columns: 2, attributes: { class: 'order-summary' } satisfies DataListAttributes } satisfies DataListProps;
const deliveryOptions = [{ value: 'standard', label: 'Standard · 2–4 days' }, { value: 'express', label: 'Express · next day' }, { value: 'pickup', label: 'Pickup', disabled: true }] as const;
const deliveryField = { id: 'delivery-method', label: 'Delivery method', options: deliveryOptions, value: 'standard', helper: 'Choose the delivery speed for this order.', attributes: { class: 'checkout-delivery' } satisfies ListboxFieldAttributes, listboxAttributes: { class: 'delivery-options' } satisfies ListboxFieldListboxAttributes } satisfies ListboxFieldProps;
const comboboxOptions = [{ value: 'orbit-lamp', label: 'Orbit lamp' }, { value: 'orbit-cable', label: 'Orbit cable' }, { value: 'orbit-shade', label: 'Orbit shade', disabled: true }] as const;
const comboboxField = { id: 'product-search', label: 'Product search', options: comboboxOptions, value: 'orbit-lamp', inputValue: 'Orbit', open: true, placeholder: 'Search products', helper: 'Search the current catalog.', attributes: { class: 'catalog-product-search' } satisfies ComboboxFieldAttributes, inputAttributes: {} satisfies ComboboxFieldInputAttributes, listboxAttributes: { class: 'catalog-suggestions' } satisfies ComboboxFieldListboxAttributes, onActiveChange: (value) => console.log('active suggestion', value), onSelect: (value) => console.log('selected suggestion', value) } satisfies ComboboxFieldProps;
const treeNode: TreeViewNode = { id: 'shop', label: 'Shop', children: [{ id: 'lighting', label: 'Lighting' }, { id: 'archived', label: 'Archived', disabled: true }] };
const treeAttributes = { class: 'catalog-tree' } satisfies TreeViewAttributes;
const catalogTree = { id: 'catalog-tree', label: 'Catalog navigation', nodes: [treeNode, { id: 'settings', label: 'Settings' }], expanded: ['shop'], selected: 'lighting', attributes: treeAttributes, onExpandedChange: (id, expanded) => console.log(id, expanded), onSelect: (id) => console.log('selected node', id) } satisfies TreeViewProps;
const sortOptions = [{ value: 'featured', label: 'Featured' }, { value: 'price-low', label: 'Price: low to high' }, { value: 'newest', label: 'Newest' }] satisfies readonly SortControlOption[];
const sortAttributes = { class: 'catalog-sort' } satisfies SortControlAttributes;
const sortSelectAttributes = { autocomplete: 'off' } satisfies Omit<import('@gluonjs/atoms').SelectAttributes, 'id'>;
const sortControl = { id: 'catalog-sort', label: 'Sort products', options: sortOptions, value: 'featured', helper: 'Choose the catalog order.', attributes: sortAttributes, selectAttributes: sortSelectAttributes, onChange: (value, event) => console.log('sort changed', value, event.type) } satisfies SortControlProps;
const commandGroups = [{ id: 'navigation', label: 'Navigation', commands: [{ id: 'dashboard', label: 'Open dashboard', description: 'View today’s activity.', shortcut: '⌘K' }, { id: 'orders', label: 'Search orders', shortcut: '↵' }] }] satisfies readonly CommandPaletteGroup[];
const commandPalette = { id: 'quick-actions', label: 'Quick actions', groups: commandGroups, query: '', activeId: 'dashboard', open: true, attributes: { class: 'quick-actions' } satisfies CommandPaletteAttributes, inputAttributes: {} satisfies CommandPaletteInputAttributes, listboxAttributes: {} satisfies CommandPaletteListboxAttributes, onActiveChange: (id) => console.log('active command', id), onSelect: (id) => console.log('selected command', id) } satisfies CommandPaletteProps;
const buttonGroupName = { label: 'Order actions' } satisfies ButtonGroupAccessibleName;
const buttonGroupAttributes = { class: 'order-actions' } satisfies ButtonGroupAttributes;
const buttonGroupOrientation: ButtonGroupOrientation = 'horizontal';
const buttonGroupPresentation: ButtonGroupPresentation = 'attached';
const orderActions = { ...buttonGroupName, orientation: buttonGroupOrientation, presentation: buttonGroupPresentation, attributes: buttonGroupAttributes, children: [Button({ label: 'Save' }), Button({ label: 'Share' })] } satisfies ButtonGroupProps;
const fieldAttributes = { class: 'order-reference-field' } satisfies ControlFieldAttributes;
const renderOrderReference: ControlFieldRenderer = (relationships: ControlFieldRelationships) => Input({ attributes: { id: relationships.controlId, aria: relationships.aria } });
const orderReference = { id: 'order-reference', label: 'Order reference', helper: 'Optional internal reference.', attributes: fieldAttributes, control: renderOrderReference } satisfies ControlFieldProps;
const dialogName = { labelledBy: 'archive-title' } satisfies DialogSurfaceAccessibleName;
const dialogAttributes = { class: 'archive-dialog' } satisfies DialogSurfaceAttributes;
const dialogSectionAttributes = { class: 'archive-actions' } satisfies DialogSurfaceSectionAttributes;
const dialogPlacement: DialogSurfacePlacement = 'center';
const dialogControllerOptions = { initialFocus: '[data-dialog-initial-focus]' } satisfies DialogSurfaceControllerOptions;
const dialogController: DialogSurfaceController = createDialogSurfaceController(dialogControllerOptions);
const archiveDialog = { ...dialogName, id: 'archive-dialog', title: 'Archive order?', description: 'The order remains available.', placement: dialogPlacement, controller: dialogController, attributes: dialogAttributes, footerAttributes: dialogSectionAttributes, closeAction: Button({ label: 'Close', attributes: { data: { dialogInitialFocus: true } } }), children: 'Archive this order?', footer: Button({ label: 'Archive' }), onDismiss: () => dialogController.deactivate() } satisfies DialogSurfaceProps;
const popoverName = { label: 'Finish help' } satisfies PopoverAccessibleName;
const popoverPlacement: PopoverPlacement = 'block-end';
const popoverAttributes = { class: 'finish-help' } satisfies PopoverAttributes;
const popoverTriggerAttributes = {} satisfies PopoverTriggerAttributes;
const popover = { ...popoverName, id: 'finish-help', placement: popoverPlacement, open: true, attributes: popoverAttributes, trigger: (attributes) => q.button({ ...attributes, ...popoverTriggerAttributes, children: 'Help' }), children: html`<p>Choose a saved finish.</p>` } satisfies PopoverProps;
const sheetName = { label: 'Catalog filters' } satisfies SheetAccessibleName;
const sheetPlacement: SheetPlacement = 'inline-end';
const sheetAttributes = { class: 'catalog-filters-sheet' } satisfies SheetAttributes;
const sheetSectionAttributes = { class: 'sheet-section' } satisfies SheetSectionAttributes;
const sheet = { ...sheetName, id: 'catalog-filters-sheet', placement: sheetPlacement, open: true, title: 'Filter products', description: 'Narrow the catalog.', attributes: sheetAttributes, headerAttributes: sheetSectionAttributes, children: html`<label>Availability <select><option>In stock</option></select></label>`, footer: Button({ label: 'Apply filters' }) } satisfies SheetProps;
const disclosureAttributes = { class: 'delivery-details' } satisfies DisclosureAttributes;
const disclosureSummaryAttributes = { class: 'delivery-summary' } satisfies DisclosureSummaryAttributes;
const disclosureState = { defaultOpen: false } satisfies DisclosureState;
const disclosureAvailability = { unavailable: false } satisfies DisclosureAvailability;
const deliveryDisclosure = { ...disclosureState, ...disclosureAvailability, id: 'delivery-details', summary: 'Delivery details', children: 'Tracked delivery in 2–3 working days.', attributes: disclosureAttributes, summaryAttributes: disclosureSummaryAttributes } satisfies DisclosureProps;
const responsiveAttributes = { class: 'catalog-filters' } satisfies ResponsiveDisclosureAttributes;
const responsiveDisclosure = { id: 'catalog-filters', summary: 'Filters', compactBreakpoint: '(max-width: 48rem)', compactInitialOpen: false, children: 'Availability and finish filters.', attributes: responsiveAttributes } satisfies ResponsiveDisclosureProps;
const accordionName = { label: 'Shipping topics' } satisfies AccordionAccessibleName;
const accordionAttributes = { class: 'shipping-topics' } satisfies AccordionAttributes;
const accordionHeadingLevel: AccordionHeadingLevel = 3;
const accordionItems = [{ id: 'shipping-tracking', value: 'tracking', summary: 'Tracking', children: 'Sent after dispatch.' }] satisfies readonly AccordionItem[];
const handleAccordion = (value: string | undefined, event: AccordionChangeEvent) => console.log(value, event.type);
const accordionSingle = { ...accordionName, value: 'tracking', onChange: handleAccordion } satisfies AccordionSingleProps;
const accordionMultiple = { ...accordionName, mode: 'multiple', value: ['tracking'] } satisfies AccordionMultipleProps;
const accordionProps = { ...accordionSingle, items: accordionItems, headingLevel: accordionHeadingLevel, attributes: accordionAttributes } satisfies AccordionProps;
const multipleAccordionProps = { ...accordionMultiple, items: accordionItems } satisfies AccordionProps;
const noticeTone: InlineNoticeTone = 'success';
const noticeAnnouncement: InlineNoticeAnnouncement = 'polite';
const noticeAttributes = { class: 'order-notice' } satisfies InlineNoticeAttributes;
const orderNotice = { tone: noticeTone, announcement: noticeAnnouncement, title: 'Order confirmed', children: 'Delivery details were sent.', action: Button({ label: 'View order' }), attributes: noticeAttributes } satisfies InlineNoticeProps;
const emptyPresentation: EmptyStatePresentation = 'compact';
const emptyHeadingLevel: EmptyStateHeadingLevel = 3;
const emptyAttributes = { class: 'empty-bag' } satisfies EmptyStateAttributes;
const emptyBag = { presentation: emptyPresentation, heading: 'Your bag is empty', headingLevel: emptyHeadingLevel, children: 'Choose something useful.', action: Button({ label: 'Shop objects' }), attributes: emptyAttributes } satisfies EmptyStateProps;
const tableName = { label: 'Recent orders' } satisfies TableRegionAccessibleName;
const tableAttributes = { class: 'recent-orders' } satisfies TableRegionAttributes;
const tableContent = { children: html`<table><caption>Recent orders</caption><tbody><tr><th scope="row">A-101</th><td>Ready</td></tr></tbody></table>` } satisfies TableRegionContent;
const recentOrders = { ...tableName, ...tableContent, id: 'recent-orders', summary: 'One recent order.', scrollHint: 'Scroll horizontally to review every column.', attributes: tableAttributes } satisfies TableRegionProps;
const choiceAttributes = { data: { owner: 'settings' } } satisfies ChoiceGroupAttributes;
const choiceOrientation: ChoiceGroupOrientation = 'horizontal';
const visibility = { id: 'visibility', legend: 'Visibility', orientation: choiceOrientation, attributes: choiceAttributes, children: html`<label>${Radio({ name: 'visibility', checked: true })} Team</label><label>${Radio({ name: 'visibility' })} Private</label>` } satisfies ChoiceGroupProps;
const tone: CardTone = 'success';
const order = {
  title: 'Order confirmed',
  subtitle: '#GL-1042',
  tone,
  children: html`${FormField(email)}${ControlField(orderReference)}${ChoiceGroup(visibility)}` ,
  actions: Button({ label: 'View order' }),
} satisfies CardProps;
const sections = {
  label: 'Order sections',
  children: html`<a href="#summary" aria-current="page">Summary</a><a href="#delivery">Delivery</a>`,
} satisfies NavigationStripProps;
const breadcrumbItemAttributes = { class: 'breadcrumb-segment' } satisfies BreadcrumbItemAttributes;
const breadcrumbLinkAttributes = { data: { owner: 'catalog' } } satisfies BreadcrumbLinkAttributes;
const breadcrumbItems = [{ label: 'Catalog', href: '/catalog', attributes: breadcrumbItemAttributes, linkAttributes: breadcrumbLinkAttributes }, { label: 'Lighting', href: '/catalog/lighting' }, { label: 'Orbit lamp', current: true }] satisfies readonly BreadcrumbItem[];
const breadcrumbAttributes = { class: 'catalog-breadcrumbs' } satisfies BreadcrumbsAttributes;
const breadcrumbProps = { label: 'Catalog breadcrumb', items: breadcrumbItems, attributes: breadcrumbAttributes } satisfies BreadcrumbsProps;
const paginationLinkAttributes = { data: { owner: 'catalog-pagination' } } satisfies PaginationLinkAttributes;
const paginationAttributes = { class: 'catalog-pagination' } satisfies PaginationAttributes;
const pagination = { currentPage: 2, totalPages: 8, siblingCount: 1, getPageHref: (page: number) => `/catalog?page=${page}`, linkAttributes: paginationLinkAttributes, attributes: paginationAttributes } satisfies PaginationProps;
const navigationMenu = { id: 'primary-navigation', label: 'Primary navigation', open: ['shop'], items: [{ id: 'shop', label: 'Shop', accessibleLabel: 'Open Shop navigation', href: '/shop', active: true, children: [{ id: 'new', label: 'New arrivals', href: '/shop?sort=new' }] }] } satisfies NavigationMenuProps;
const searchFieldAttributes = { class: 'catalog-search' } satisfies SearchFieldAttributes;
const searchInputAttributes = { autocomplete: 'off' } satisfies SearchFieldInputAttributes;
const searchField = { id: 'catalog-search', label: 'Search products', query: 'cable', inputAttributes: searchInputAttributes, attributes: searchFieldAttributes } satisfies SearchFieldProps;
const searchGroup = { id: 'products', heading: 'Products', count: 1, children: html`<li><a href="/products/cable">Cobalt cable</a></li>` } satisfies SearchResultGroup;
const searchResultsAttributes = { class: 'catalog-results' } satisfies SearchResultsAttributes;
const searchHeadingLevel: SearchResultsHeadingLevel = 2;
const searchState: SearchResultsState = 'ready';
const searchResults = { id: 'catalog-results', heading: 'Results', headingLevel: searchHeadingLevel, state: searchState, groups: [searchGroup], attributes: searchResultsAttributes } satisfies SearchResultsProps;
const menuAttributes = { class: 'order-menu' } satisfies MenuAttributes;
const actionItem = { id: 'view', label: 'View order', href: '/orders/GL-1042' } satisfies MenuActionItem;
const checkboxItem = { id: 'compact', kind: 'checkbox', label: 'Compact rows', checked: false } satisfies MenuCheckboxItem;
const radioItem = { id: 'comfortable', kind: 'radio', group: 'density', label: 'Comfortable', checked: true } satisfies MenuRadioItem;
const separatorItem = { id: 'view-separator', kind: 'separator' } satisfies MenuSeparatorItem;
const menuKind: MenuItemKind = 'checkbox';
const menuItems = [actionItem, checkboxItem, radioItem, separatorItem] satisfies readonly MenuItem[];
const checkedChange: MenuCheckedChange = { id: checkboxItem.id, kind: 'checkbox', checked: true };
const dropdown = { id: 'order-menu', label: 'Order actions', trigger: 'Actions', open: false, onOpenChange: () => {}, attributes: menuAttributes, items: menuItems, onCheckedChange: (change: MenuCheckedChange) => console.log(change.checked) } satisfies DropdownMenuProps;
const retainedMenuProps: MenuProps = dropdown;
const contextMenu = { id: 'order-context', label: 'Order actions', children: 'Order GL-1042', open: false, onOpenChange: () => {}, items: menuItems } satisfies ContextMenuProps;
const menubar = { id: 'order-menubar', label: 'Order menu', items: menuItems } satisfies MenubarProps;
const toolbarButton = { id: 'save', label: 'Save' } satisfies ToolbarButtonItem;
const toolbarLink = { id: 'help', kind: 'link', label: 'Help', href: '/help' } satisfies ToolbarLinkItem;
const toolbarSeparator = { id: 'actions-separator', kind: 'separator' } satisfies ToolbarSeparatorItem;
const toolbarItems = [toolbarButton, toolbarLink, toolbarSeparator] satisfies readonly ToolbarItem[];
const toolbar = { id: 'order-toolbar', label: 'Order tools', items: toolbarItems } satisfies ToolbarProps;
const otpMode: OneTimePasswordFieldMode = 'numeric';
const otpAttributes = { class: 'checkout-code' } satisfies OneTimePasswordFieldAttributes;
const otpInputAttributes = { title: 'One-time code digit' } satisfies OneTimePasswordFieldInputAttributes;
const otpChange = (value: string) => console.log('code length', value.length);
const checkoutCode = { id: 'checkout-code', label: 'One-time code', length: 6, mode: otpMode, value: '123', name: 'code', helper: 'Enter the code from the device.', inputAttributes: otpInputAttributes, attributes: otpAttributes, onValueChange: otpChange } satisfies OneTimePasswordFieldProps;
const passwordToggle = { id: 'account-password', label: 'Password', value: 'secret', visible: false, showLabel: 'Show password', hideLabel: 'Hide password', autocomplete: 'current-password' } satisfies PasswordToggleFieldProps;
const segmentName = { label: 'Order view' } satisfies SegmentedControlAccessibleName;
const segmentAttributes = { class: 'order-view' } satisfies SegmentedControlAttributes;
const segmentOptions = [{ value: 'summary', label: 'Summary' }, { value: 'details', label: 'Details' }] satisfies readonly SegmentedControlOption[];
const segmentOrientation: SegmentedControlOrientation = 'horizontal';
const handleSegment = (value: string, event: SegmentedControlChangeEvent) => console.log(value, event.type);
const orderView = { ...segmentName, value: 'summary', options: segmentOptions, orientation: segmentOrientation, attributes: segmentAttributes, onChange: handleSegment } satisfies SegmentedControlProps;
const tabsName = { label: 'Order information' } satisfies TabsAccessibleName;
const tabsActivation: TabsActivation = 'automatic';
const tabsOrientation: TabsOrientation = 'horizontal';
const tabsAttributes = { class: 'order-information' } satisfies TabsAttributes;
const tabsItems = [{ id: 'order-summary', value: 'summary', label: 'Summary', panel: 'Order summary' }, { id: 'order-delivery', value: 'delivery', label: 'Delivery', panel: 'Delivery details' }] satisfies readonly TabsItem[];
const handleTab = (value: string, event: TabsChangeEvent) => console.log(value, event.type);
const orderTabs = { ...tabsName, value: 'summary', items: tabsItems, activation: tabsActivation, orientation: tabsOrientation, attributes: tabsAttributes, onChange: handleTab } satisfies TabsProps;
console.log(html`${Breadcrumbs(breadcrumbProps)}${Pagination(pagination)}${NavigationStrip(sections)}${NavigationMenu(navigationMenu)}${SearchField(searchField)}${SearchResults(searchResults)}${OneTimePasswordField(checkoutCode)}${PasswordToggleField(passwordToggle)}${ComboboxField(comboboxField)}${CommandPalette(commandPalette)}${TreeView(catalogTree)}${SortControl(sortControl)}${Card(order)}${ButtonGroup(orderActions)}${DropdownMenu(dropdown)}${ContextMenu(contextMenu)}${Menubar(menubar)}${Toolbar(toolbar)}${SegmentedControl(orderView)}${Tabs(orderTabs)}${DialogSurface(archiveDialog)}${Popover(popover)}${Sheet(sheet)}${Disclosure(deliveryDisclosure)}${Accordion(accordionProps)}${Accordion(multipleAccordionProps)}${InlineNotice(orderNotice)}${EmptyState(emptyBag)}${TableRegion(recentOrders)}`, moleculeStyles, breadcrumbsStyles, paginationStyles, searchFieldStyles, searchResultsStyles, passwordToggleFieldStyles, comboboxFieldStyles, commandPaletteStyles, treeViewStyles, sortControlStyles, popoverStyles, sheetStyles, retainedMenuProps, menuKind, checkedChange, moleculeManifest.entries);

Version-matched documentation. Examples are checked against the public package contracts.

Copyright © 2026 Marc Malerei