jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
const ctMap = new Map([["Accordion.borderWidths.header.border", "{borderWidths.default}"], ["Accordion.radii.default", "{radii.obj.default}"], ["Accordion.spacing.content.padding.indent", "{spacing.padding.content.indent.md}"], ["Accordion.spacing.content.padding.wide", "{spacing.padding.none}"], ["Accordion.spacing.drawer.padding.horz", "{spacing.padding.obj.horz.default}"], ["Accordion.spacing.drawer.padding.vert.top", "{spacing.padding.obj.vert.loose}"], ["Accordion.spacing.drawer.padding.vert.bottom", "spacing.padding.obj.vert.loose"], ["Accordion.spacing.header.gap.label-toLeadingSlot", "{spacing.gap.obj.horz.default}"], ["Accordion.spacing.header.gap.label-toTrailingSlot", "{spacing.gap.obj.horz.default}"], ["Accordion.spacing.header.gap.trailingLabel-toIcon", "{spacing.gap.obj.horz.default}"], ["Accordion.spacing.header.padding.horz", "{spacing.padding.obj.horz.default}"], ["Accordion.spacing.header.padding.vert", "{spacing.padding.obj.vert.loose}"], ["Alert.spacing.gap.text-toActions", "{spacing.gap.obj.vert.default}"], ["Alert.spacing.gap.text-toLeading", "{spacing.gap.obj.horz.default}"], ["Alert.spacing.gap.text-toTrailing", "{spacing.gap.obj.horz.default}"], ["Alert.spacing.padding.default", "{spacing.padding.obj.default}"], ["Alert.borderWidths.default", "{borderWidths.default}"], ["Alert.radii.default", "{radii.obj.default}"], ["Avatar.spacing.xs.icon.padding", "0rem"], ["Avatar.spacing.sm.icon.padding", "0rem"], ["Avatar.spacing.md.icon.padding", "0rem"], ["Avatar.spacing.lg.icon.padding", "0rem"], ["Avatar.spacing.xl.icon.padding", "0rem"], ["Avatar.spacing.xxl.icon.padding", "0rem"], ["Avatar.borderWidths.default", "{borderWidths.default}"], ["Avatar.radii.default", "{radii.obj.ellipse}"], ["Avatar.sizes.xs.icon", "0.625rem"], ["Avatar.sizes.xs.size", "{sizes.obj.xs}"], ["Avatar.sizes.sm.icon", "0.875rem"], ["Avatar.sizes.sm.size", "{sizes.obj.sm}"], ["Avatar.sizes.md.icon", "1.3125rem"], ["Avatar.sizes.md.size", "{sizes.obj.md}"], ["Avatar.sizes.lg.icon", "1.75rem"], ["Avatar.sizes.lg.size", "{sizes.obj.lg}"], ["Avatar.sizes.xl.icon", "2.625rem"], ["Avatar.sizes.xl.size", "{sizes.obj.xl}"], ["Avatar.sizes.xxl.icon", "4.375rem"], ["Avatar.sizes.xxl.size", "{sizes.obj.xxl}"], ["AvatarBadge.borderWidths.sm", "{borderWidths.thick}"], ["AvatarBadge.borderWidths.md", "{borderWidths.thick}"], ["AvatarBadge.borderWidths.lg", "{borderWidths.thick}"], ["AvatarBadge.radii.sm", "{radii.obj.ellipse}"], ["AvatarBadge.radii.md", "{radii.obj.ellipse}"], ["AvatarBadge.radii.lg", "{radii.obj.ellipse}"], ["AvatarBadge.spacing.padding.sm.default", "{spacing.150}"], ["AvatarBadge.spacing.padding.sm.bare", "{spacing.padding.none}"], ["AvatarBadge.spacing.padding.md.default", "{spacing.250}"], ["AvatarBadge.spacing.padding.md.bare", "{spacing.padding.obj.tightest}"], ["AvatarBadge.spacing.padding.lg.default", "{spacing.250}"], ["AvatarBadge.spacing.padding.lg.bare", "{spacing.padding.obj.vert.tightest}"], ["Badge.radii.default", "{radii.obj.default}"], ["Badge.spacing.gap.label-toIcon", "{spacing.gap.obj.horz.tighter}"], ["Badge.spacing.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Badge.spacing.padding.vert", "{spacing.padding.obj.horz.tightest}"], ["Banner.radii.default", "{radii.none}"], ["Banner.spacing.gap.content-toClose", "{spacing.gap.obj.horz.default}"], ["Banner.spacing.gap.icon-toText", "{spacing.gap.obj.horz.default}"], ["Banner.spacing.gap.text-toActions.horz", "{spacing.gap.obj.horz.default}"], ["Banner.spacing.gap.text-toActions.vert", "{spacing.gap.obj.vert.default}"], ["Banner.spacing.padding", "{spacing.padding.obj.default}"], ["Button.borderWidths.default", "{borderWidths.default}"], ["Button.borderWidths.selected", "{borderWidths.selected}"], ["Button.radii.sm", "{radii.action.default}"], ["Button.radii.md", "{radii.action.default}"], ["Button.radii.lg", "{radii.action.default}"], ["Button.spacing.sm.gap.label-toIcon", "{spacing.gap.obj.horz.tight}"], ["Button.spacing.sm.padding.bare.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.sm.padding.bare.horz-narrow", "{spacing.padding.obj.horz.tighter}"], ["Button.spacing.sm.padding.bare.horz-narrowest", "{spacing.padding.none}"], ["Button.spacing.sm.padding.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.sm.padding.vert", "{spacing.padding.obj.vert.loose}"], ["Button.spacing.md.gap.label-toIcon", "{spacing.gap.obj.horz.tight}"], ["Button.spacing.md.padding.bare.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.md.padding.bare.horz-narrow", "{spacing.padding.obj.horz.tighter}"], ["Button.spacing.md.padding.bare.horz-narrowest", "{spacing.padding.none}"], ["Button.spacing.md.padding.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.md.padding.vert", "{spacing.padding.obj.vert.loose}"], ["Button.spacing.lg.gap.label-toIcon", "{spacing.gap.obj.horz.tight}"], ["Button.spacing.lg.padding.bare.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.lg.padding.bare.horz-narrow", "{spacing.padding.obj.horz.tighter}"], ["Button.spacing.lg.padding.bare.horz-narrowest", "{spacing.padding.none}"], ["Button.spacing.lg.padding.horz", "{spacing.padding.obj.horz.default}"], ["Button.spacing.lg.padding.vert", "{spacing.padding.obj.vert.loose}"], ["ButtonGroup.radii.conjoined", "{radii.none}"], ["ButtonGroup.spacing.gap.conjoined", "{spacing.gap.group.conjoined-offsetBorder}"], ["ButtonGroup.spacing.gap.horz.default", "{spacing.gap.group.horz.default}"], ["ButtonGroup.spacing.gap.horz.wide", "{spacing.gap.group.horz.loose}"], ["ButtonGroup.spacing.gap.vert.default", "{spacing.gap.group.vert.default}"], ["Card.borderWidths.default", "{borderWidths.default}"], ["Card.borderWidths.selected", "{borderWidths.selected}"], ["Card.borderWidths.decorator.height", "{sizes.pipe.weight.thicker}"], ["Card.radii.default", "{radii.obj.default}"], ["Checkbox.borderWidths.box", "{borderWidths.thick}"], ["Checkbox.sizes.box", "{sizes.control.sm}"], ["Checkbox.sizes.frame", "{sizes.control.sm}"], ["Checkbox.radii.box", "{radii.control.square}"], ["Chip.borderWidths.assist.default", "{borderWidths.default}"], ["Chip.borderWidths.assist.selected", "{borderWidths.selected}"], ["Chip.borderWidths.filter.default", "{borderWidths.default}"], ["Chip.borderWidths.filter.selected", "{borderWidths.selected}"], ["Chip.borderWidths.input.default", "{borderWidths.default}"], ["Chip.borderWidths.input.selected", "{borderWidths.selected}"], ["Chip.sizes.assist.min-height", "{sizes.obj.sm}"], ["Chip.sizes.assist.slot", "{sizes.obj.xs}"], ["Chip.sizes.filter.min-height", "{sizes.obj.sm}"], ["Chip.sizes.filter.slot", "{sizes.obj.xs}"], ["Chip.sizes.input.min-height", "{sizes.obj.sm}"], ["Chip.sizes.input.slot", "{sizes.obj.xs}"], ["Chip.radii.assist.default", "{radii.action.round}"], ["Chip.radii.filter.default", "{radii.action.round}"], ["Chip.radii.input.default", "{radii.action.round}"], ["Chip.spacing.assist.gap.label-toSlotLeading", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.assist.gap.label-toSlotTrailing", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.assist.gap.label-toSlots", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.assist.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Chip.spacing.assist.padding.vert", "{spacing.padding.obj.vert.tightest}"], ["Chip.spacing.filter.gap.chip-toMenu", "{spacing.gap.obj.vert.tight}"], ["Chip.spacing.filter.gap.label-toSlotLeading", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.filter.gap.label-toSlotTrailing", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.filter.gap.label-toSlots", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.filter.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Chip.spacing.filter.padding.vert", "{spacing.padding.obj.vert.tightest}"], ["Chip.spacing.input.gap.label-toSlotLeading", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.input.gap.label-toSlotTrailing", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.input.gap.label-toSlots", "{spacing.gap.obj.horz.tight}"], ["Chip.spacing.input.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Chip.spacing.input.padding.vert", "{spacing.padding.obj.vert.tightest}"], ["ChipGroup.spacing.gap.between-chips-horz", "{spacing.gap.group.horz.default}"], ["ChipGroup.spacing.gap.between-chips-vert", "{spacing.gap.group.vert.looser}"], ["ChipGroup.spacing.padding.elevated.offset", "{spacing.padding.none}"], ["ChipGroup.spacing.padding.horz", "{spacing.padding.none}"], ["ChipGroup.spacing.padding.vert", "{spacing.padding.none}"], ["ChipGroup.spacing.padding.screen.mobile.leading", "{spacing.padding.screen.mobile.horz}"], ["ChipGroup.spacing.padding.screen.mobile.trailing", "{spacing.padding.none}"], ["Divider.sizes.weight.default.emphasis.horizontal", "{sizes.pipe.weight.thick}"], ["Divider.sizes.weight.default.horizontal", "{sizes.pipe.weight.default}"], ["Divider.sizes.weight.default.vertical", "{sizes.pipe.weight.default}"], ["Divider.radii.default", "{radii.none}"], ["Fieldset.sizes.helperArea.icon", "{sizes.icon.sm}"], ["Fieldset.spacing.gap.controls-toHelperArea", "{spacing.gap.obj.vert.tight}"], ["Fieldset.spacing.gap.controls-toLagendArea", "{spacing.gap.obj.vert.tight}"], ["Fieldset.spacing.helperArea.gap.text-toIcon", "{spacing.gap.obj.horz.tighter}"], ["Fieldset.spacing.labelArea.gap.legend-toOptional", "{spacing.gap.obj.horz.tightest}"], ["Fieldset.spacing.labelArea.gap.legend-toRequired", "{spacing.gap.obj.horz.tightest}"], ["Fieldset.spacing.labeledControlArea.padding.left", "{spacing.padding.obj.horz.tighter}"], ["FormField.sizes.helperArea.icon", "{sizes.icon.sm}"], ["FormField.spacing.gap.field-toHelperArea", "{spacing.gap.obj.vert.tight}"], ["FormField.spacing.gap.field-toLabelArea", "{spacing.gap.obj.vert.tight}"], ["FormField.spacing.helperArea.gap.text-toCharCount", "{spacing.gap.obj.horz.tighter}"], ["FormField.spacing.helperArea.gap.text-toIcon", "{spacing.gap.obj.horz.tighter}"], ["FormField.spacing.helperArea.padding.horz", "{spacing.padding.none}"], ["FormField.spacing.labelArea.gap.label-toOptional", "{spacing.gap.obj.horz.tightest}"], ["FormField.spacing.labelArea.gap.label-toRequired", "{spacing.gap.obj.horz.tightest}"], ["FormField.spacing.labelArea.padding.horz", "{spacing.padding.none}"], ["Gleam.colors.bg.base", "{colors.bg.feedback.notify.hero-fixed}"], ["Gleam.colors.text.base", "{colors.text.onHero.neutral-fixed}"], ["Gleam.colors.info.bg.base", "{colors.bg.feedback.info.inverse}"], ["Gleam.colors.info.text.base", "{colors.text.onInverse.neutral}"], ["Gleam.colors.new.bg.base", "{colors.bg.feedback.success.hero}"], ["Gleam.colors.new.text.base", "{colors.text.onHero.neutral}"], ["Gleam.colors.onInverse.info.bg.base", "{colors.bg.feedback.info.soft}"], ["Gleam.colors.onInverse.info.text.base", "{colors.text.feedback.info.strong}"], ["Gleam.colors.onInverse.new.bg.base", "{colors.bg.feedback.success.soft}"], ["Gleam.colors.onInverse.new.text.base", "{colors.text.feedback.success.hero}"], ["Gleam.sizes.height", "{sizes.obj.xxs}"], ["Gleam.sizes.width", "{sizes.obj.xxs}"], ["Gleam.radii.default", "{radii.obj.capsule}"], ["Gleam.spacing.padding.horz", "{spacing.150}"], ["IconButton.radii.circle", "{radii.action.circle}"], ["IconButton.radii.square", "{radii.action.default}"], ["IconButton.spacing.xs", "{spacing.150}"], ["IconButton.spacing.sm", "{spacing.250}"], ["IconButton.spacing.md", "{spacing.250}"], ["IconButton.spacing.lg", "{spacing.padding.obj.default}"], ["Input.borderWidths.active", "{borderWidths.selected}"], ["Input.borderWidths.default", "{borderWidths.default}"], ["Input.sizes.sm.slot", "{sizes.obj.xs}"], ["Input.sizes.md.slot", "{sizes.obj.xs}"], ["Input.sizes.lg.slot", "{sizes.obj.xs}"], ["Input.radii.sm", "{radii.obj.default}"], ["Input.radii.md", "{radii.obj.default}"], ["Input.radii.lg", "{radii.obj.default}"], ["Input.spacing.sm.gap.input-toAdornment", "{spacing.gap.group.default}"], ["Input.spacing.sm.gap.input-toLeadingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.sm.gap.input-toTrailingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.sm.padding.horz", "{spacing.padding.obj.horz.default}"], ["Input.spacing.sm.padding.readOnly-leading", "{spacing.padding.none}"], ["Input.spacing.sm.padding.vert", "{spacing.150}"], ["Input.spacing.md.gap.input-toAdornment", "{spacing.gap.group.default}"], ["Input.spacing.md.gap.input-toLeadingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.md.gap.input-toTrailingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.md.padding.horz", "{spacing.padding.obj.horz.default}"], ["Input.spacing.md.padding.readOnly-leading", "{spacing.padding.none}"], ["Input.spacing.md.padding.vert", "{spacing.250}"], ["Input.spacing.lg.gap.input-toAdornment", "{spacing.gap.group.default}"], ["Input.spacing.lg.gap.input-toLeadingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.lg.gap.input-toTrailingSlot", "{spacing.gap.obj.horz.default}"], ["Input.spacing.lg.padding.horz", "{spacing.padding.obj.horz.default}"], ["Input.spacing.lg.padding.readOnly-leading", "{spacing.padding.none}"], ["Input.spacing.lg.padding.vert", "{spacing.padding.obj.vert.loose}"], ["LabeledControl.spacing.gap.control-toLabel", "{spacing.gap.obj.horz.tight}"], ["LabeledControl.spacing.padding.vert.default", "{spacing.250}"], ["LabeledControl.spacing.padding.vert.largeSwitch", "0.4375rem"], ["LabeledInput.radii.default", "{radii.obj.default}"], ["LabeledInput.spacing.gap.label-toInputText", "{spacing.gap.none}"], ["LabeledInput.spacing.padding.horz", "{spacing.padding.obj.horz.default}"], ["LabeledInput.spacing.padding.horz-readOnly", "{spacing.padding.none}"], ["LabeledInput.spacing.padding.vert", "{spacing.150}"], ["LabeledInput.spacing.padding.vert-readOnly", "{spacing.padding.obj.vert.loose}"], ["Link.spacing.gap.icon-toLabel", "{spacing.gap.obj.horz.tight}"], ["List.spacing.gap.default", "{spacing.gap.group.conjoined}"], ["List.spacing.decorator.padding.horz-ol", "{spacing.150}"], ["List.spacing.decorator.padding.horz-ul", "{spacing.250}"], ["List.spacing.item.gap.decorator-toText", "{spacing.gap.none}"], ["List.spacing.item.padding.horz", "{spacing.padding.none}"], ["List.spacing.item.padding.vert", "{spacing.padding.none}"], ["Popover.radii.default", "{radii.obj.default}"], ["Popover.spacing.padding.horz", "{spacing.padding.obj.horz.default}"], ["Popover.spacing.padding.vert-bottom", "{spacing.padding.obj.vert.loose}"], ["Popover.spacing.padding.vert-top", "{spacing.padding.obj.vert.loose}"], ["Popover.spacing.content.gap.content-toActions", "{spacing.gap.obj.vert.looser}"], ["Popover.spacing.content.gap.content-toIllustration", "{spacing.gap.obj.horz.tight}"], ["Popover.spacing.content.gap.content-toBody", "{spacing.gap.obj.vert.tight}"], ["Popover.spacing.content.padding.default", "{spacing.padding.obj.default}"], ["Popover.spacing.header.gap.content-toSlot", "{spacing.gap.obj.horz.tight}"], ["Popover.spacing.header.padding.default", "{spacing.padding.obj.default}"], ["ProgressMeter.borderWidths.node.active", "{borderWidths.control.selected}"], ["ProgressMeter.sizes.node.active", "{sizes.control.handle.knob.sm}"], ["ProgressMeter.sizes.node.inactive", "{sizes.control.indicator.xs}"], ["ProgressMeter.sizes.track.thickness", "{sizes.pipe.weight.thickest}"], ["ProgressMeter.opacity.node.active.focusRing", "{opacity.stateLayer.focus}"], ["ProgressMeter.radii.node.default", "{radii.control.circle}"], ["ProgressMeter.radii.track.default", "{radii.control.default}"], ["ProgressMeter.spacing.horizontal.gap.label-toMeta", "{spacing.gap.none}"], ["ProgressMeter.spacing.horizontal.gap.node-toLabel", "{spacing.gap.obj.vert.loose}"], ["ProgressMeter.spacing.vertical.gap.label-toMeta", "{spacing.gap.none}"], ["ProgressMeter.spacing.vertical.gap.node-toLabel", "{spacing.gap.obj.vert.loose}"], ["ShowHide.colors.icon.default.base", "{colors.icon.action.strong.default}"], ["ShowHide.colors.icon.hover.base", "{colors.icon.action.strong.hover}"], ["ShowHide.colors.icon.pressed.base", "{colors.icon.action.strong.pressed}"], ["ShowHide.colors.label.default.base", "{colors.text.action.strong.default}"], ["ShowHide.colors.label.hover.base", "{colors.text.action.strong.hover}"], ["ShowHide.colors.label.pressed.base", "{colors.text.action.strong.pressed}"], ["ShowHide.spacing.gap.label-toIcon", "{spacing.gap.obj.horz.tight}"], ["Tag.radii.small.default", "{radii.obj.default}"], ["Tag.radii.medium.default", "{radii.obj.default}"], ["Tag.spacing.small.gap.label-toIcon", "{spacing.gap.obj.horz.tighter}"], ["Tag.spacing.small.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Tag.spacing.small.padding.vert", "{spacing.padding.obj.vert.tightest}"], ["Tag.spacing.medium.gap.label-toIcon", "{spacing.gap.obj.horz.tighter}"], ["Tag.spacing.medium.padding.horz", "{spacing.padding.obj.horz.tighter}"], ["Tag.spacing.medium.padding.vert", "{spacing.padding.obj.vert.tightest}"], ["TextButton.spacing.gap.label-toIcon", "{spacing.gap.obj.horz.tight}"], ["Toast.spacing.gap.content-toClose", "{spacing.gap.obj.horz.default}"], ["Toast.spacing.gap.content-toLeadingSlot", "{spacing.gap.obj.horz.default}"], ["Toast.spacing.gap.content-toTrailingSlot", "{spacing.gap.obj.horz.default}"], ["Toast.spacing.padding.default", "{spacing.padding.obj.default}"], ["Toast.radii.default", "{radii.obj.default}"], ["Upsell.borderWidths.card", "{borderWidths.default}"], ["Upsell.radii.banner.default", "{radii.none}"], ["Upsell.radii.card.default", "{radii.obj.default}"], ["Upsell.radii.card.fullWidth", "{radii.none}"], ["Upsell.spacing.banner.gap.content-toActions", "{spacing.gap.none}"], ["Upsell.spacing.banner.gap.content-toClose", "{spacing.gap.obj.horz.default}"], ["Upsell.spacing.banner.gap.content-toFineprint", "{spacing.gap.obj.vert.tight}"], ["Upsell.spacing.banner.gap.icon-toContent", "{spacing.gap.obj.horz.default}"], ["Upsell.spacing.banner.gap.img-toContent", "{spacing.gap.obj.vert.default}"], ["Upsell.spacing.banner.gap.mobile.heading-toMessage", "{spacing.gap.group.vert.conjoined}"], ["Upsell.spacing.banner.gap.desktop.content-toActions", "{spacing.gap.obj.horz.default}"], ["Upsell.spacing.banner.gap.desktop.content-toMessage", "{spacing.gap.group.horz.tighter}"], ["Upsell.spacing.banner.padding.horz", "{spacing.padding.obj.default}"], ["Upsell.spacing.banner.padding.vert", "{spacing.padding.obj.default}"], ["Upsell.spacing.card.gap.actions-toLegal", "{spacing.gap.obj.vert.tight}"], ["Upsell.spacing.card.gap.content-toAction", "{spacing.gap.obj.vert.default}"], ["Upsell.spacing.card.gap.content-toClose", "{spacing.gap.obj.horz.default}"], ["Upsell.spacing.card.gap.heading-toBody", "{spacing.gap.group.vert.conjoined}"], ["Upsell.spacing.card.gap.icon-toContent", "{spacing.gap.obj.horz.default}"], ["Upsell.spacing.card.gap.img-toContent", "{spacing.gap.obj.vert.default}"], ["Upsell.spacing.card.padding.horz", "{spacing.padding.obj.default}"], ["Upsell.spacing.card.padding.vert", "{spacing.padding.obj.default}"]])
const ct = (a) => ctMap.has(a) ? ctMap.get(a) : "panda-plugin-ct_alias-not-found";
const obj = {
Accordion: {
borderWidths: { header: { border: { value: '{borderWidths.default}' } } },
radii: { default: { value: '{radii.obj.default}' } },
spacing: {
content: {
padding: {
indent: { value: '{spacing.padding.content.indent.md}' },
wide: { value: '{spacing.padding.none}' },
},
},
drawer: {
padding: {
horz: { value: '{spacing.padding.obj.horz.default}' },
vert: {
top: { value: '{spacing.padding.obj.vert.loose}' },
bottom: { value: 'spacing.padding.obj.vert.loose' },
},
},
},
header: {
gap: {
'label-toLeadingSlot': { value: '{spacing.gap.obj.horz.default}' },
'label-toTrailingSlot': { value: '{spacing.gap.obj.horz.default}' },
'trailingLabel-toIcon': { value: '{spacing.gap.obj.horz.default}' },
},
padding: {
horz: { value: '{spacing.padding.obj.horz.default}' },
vert: { value: '{spacing.padding.obj.vert.loose}' },
},
},
},
},
Alert: {
spacing: {
gap: {
'text-toActions': { value: '{spacing.gap.obj.vert.default}' },
'text-toLeading': { value: '{spacing.gap.obj.horz.default}' },
'text-toTrailing': { value: '{spacing.gap.obj.horz.default}' },
},
padding: { default: { value: '{spacing.padding.obj.default}' } },
},
borderWidths: { default: { value: '{borderWidths.default}' } },
radii: { default: { value: '{radii.obj.default}' } },
},
Avatar: {
spacing: {
xs: { icon: { padding: { value: '0rem' } } },
sm: { icon: { padding: { value: '0rem' } } },
md: { icon: { padding: { value: '0rem' } } },
lg: { icon: { padding: { value: '0rem' } } },
xl: { icon: { padding: { value: '0rem' } } },
xxl: { icon: { padding: { value: '0rem' } } },
},
borderWidths: { default: { value: '{borderWidths.default}' } },
radii: { default: { value: '{radii.obj.ellipse}' } },
sizes: {
xs: { icon: { value: '0.625rem' }, size: { value: '{sizes.obj.xs}' } },
sm: { icon: { value: '0.875rem' }, size: { value: '{sizes.obj.sm}' } },
md: { icon: { value: '1.3125rem' }, size: { value: '{sizes.obj.md}' } },
lg: { icon: { value: '1.75rem' }, size: { value: '{sizes.obj.lg}' } },
xl: { icon: { value: '2.625rem' }, size: { value: '{sizes.obj.xl}' } },
xxl: { icon: { value: '4.375rem' }, size: { value: '{sizes.obj.xxl}' } },
},
},
AvatarBadge: {
borderWidths: {
sm: { value: '{borderWidths.thick}' },
md: { value: '{borderWidths.thick}' },
lg: { value: '{borderWidths.thick}' },
},
radii: {
sm: { value: '{radii.obj.ellipse}' },
md: { value: '{radii.obj.ellipse}' },
lg: { value: '{radii.obj.ellipse}' },
},
spacing: {
padding: {
sm: { default: { value: '{spacing.150}' }, bare: { value: '{spacing.padding.none}' } },
md: {
default: { value: '{spacing.250}' },
bare: { value: '{spacing.padding.obj.tightest}' },
},
lg: {
default: { value: '{spacing.250}' },
bare: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
Badge: {
radii: { default: { value: '{radii.obj.default}' } },
spacing: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tighter}' } },
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.horz.tightest}' },
},
},
},
Banner: {
radii: { default: { value: '{radii.none}' } },
spacing: {
gap: {
'content-toClose': { value: '{spacing.gap.obj.horz.default}' },
'icon-toText': { value: '{spacing.gap.obj.horz.default}' },
'text-toActions': {
horz: { value: '{spacing.gap.obj.horz.default}' },
vert: { value: '{spacing.gap.obj.vert.default}' },
},
},
padding: { value: '{spacing.padding.obj.default}' },
},
},
Button: {
borderWidths: {
default: { value: '{borderWidths.default}' },
selected: { value: '{borderWidths.selected}' },
},
radii: {
sm: { value: '{radii.action.default}' },
md: { value: '{radii.action.default}' },
lg: { value: '{radii.action.default}' },
},
spacing: {
sm: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tight}' } },
padding: {
bare: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'horz-narrow': { value: '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest': { value: '{spacing.padding.none}' },
},
horz: { value: '{spacing.padding.obj.horz.default}' },
vert: { value: '{spacing.padding.obj.vert.loose}' },
},
},
md: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tight}' } },
padding: {
bare: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'horz-narrow': { value: '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest': { value: '{spacing.padding.none}' },
},
horz: { value: '{spacing.padding.obj.horz.default}' },
vert: { value: '{spacing.padding.obj.vert.loose}' },
},
},
lg: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tight}' } },
padding: {
bare: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'horz-narrow': { value: '{spacing.padding.obj.horz.tighter}' },
'horz-narrowest': { value: '{spacing.padding.none}' },
},
horz: { value: '{spacing.padding.obj.horz.default}' },
vert: { value: '{spacing.padding.obj.vert.loose}' },
},
},
},
},
ButtonGroup: {
radii: { conjoined: { value: '{radii.none}' } },
spacing: {
gap: {
conjoined: { value: '{spacing.gap.group.conjoined-offsetBorder}' },
horz: {
default: { value: '{spacing.gap.group.horz.default}' },
wide: { value: '{spacing.gap.group.horz.loose}' },
},
vert: { default: { value: '{spacing.gap.group.vert.default}' } },
},
},
},
Card: {
borderWidths: {
default: { value: '{borderWidths.default}' },
selected: { value: '{borderWidths.selected}' },
decorator: { height: { value: '{sizes.pipe.weight.thicker}' } },
},
radii: { default: { value: '{radii.obj.default}' } },
},
Checkbox: {
borderWidths: { box: { value: '{borderWidths.thick}' } },
sizes: { box: { value: '{sizes.control.sm}' }, frame: { value: '{sizes.control.sm}' } },
radii: { box: { value: '{radii.control.square}' } },
},
Chip: {
borderWidths: {
assist: {
default: { value: '{borderWidths.default}' },
selected: { value: '{borderWidths.selected}' },
},
filter: {
default: { value: '{borderWidths.default}' },
selected: { value: '{borderWidths.selected}' },
},
input: {
default: { value: '{borderWidths.default}' },
selected: { value: '{borderWidths.selected}' },
},
},
sizes: {
assist: { 'min-height': { value: '{sizes.obj.sm}' }, 'slot': { value: '{sizes.obj.xs}' } },
filter: { 'min-height': { value: '{sizes.obj.sm}' }, 'slot': { value: '{sizes.obj.xs}' } },
input: { 'min-height': { value: '{sizes.obj.sm}' }, 'slot': { value: '{sizes.obj.xs}' } },
},
radii: {
assist: { default: { value: '{radii.action.round}' } },
filter: { default: { value: '{radii.action.round}' } },
input: { default: { value: '{radii.action.round}' } },
},
spacing: {
assist: {
gap: {
'label-toSlotLeading': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlots': { value: '{spacing.gap.obj.horz.tight}' },
},
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
filter: {
gap: {
'chip-toMenu': { value: '{spacing.gap.obj.vert.tight}' },
'label-toSlotLeading': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlots': { value: '{spacing.gap.obj.horz.tight}' },
},
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
input: {
gap: {
'label-toSlotLeading': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlotTrailing': { value: '{spacing.gap.obj.horz.tight}' },
'label-toSlots': { value: '{spacing.gap.obj.horz.tight}' },
},
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
ChipGroup: {
spacing: {
gap: {
'between-chips-horz': { value: '{spacing.gap.group.horz.default}' },
'between-chips-vert': { value: '{spacing.gap.group.vert.looser}' },
},
padding: {
elevated: { offset: { value: '{spacing.padding.none}' } },
horz: { value: '{spacing.padding.none}' },
vert: { value: '{spacing.padding.none}' },
screen: {
mobile: {
leading: { value: '{spacing.padding.screen.mobile.horz}' },
trailing: { value: '{spacing.padding.none}' },
},
},
},
},
},
Divider: {
sizes: {
weight: {
default: {
emphasis: { horizontal: { value: '{sizes.pipe.weight.thick}' } },
horizontal: { value: '{sizes.pipe.weight.default}' },
vertical: { value: '{sizes.pipe.weight.default}' },
},
},
},
radii: { default: { value: '{radii.none}' } },
},
Fieldset: {
sizes: { helperArea: { icon: { value: '{sizes.icon.sm}' } } },
spacing: {
gap: {
'controls-toHelperArea': { value: '{spacing.gap.obj.vert.tight}' },
'controls-toLagendArea': { value: '{spacing.gap.obj.vert.tight}' },
},
helperArea: { gap: { 'text-toIcon': { value: '{spacing.gap.obj.horz.tighter}' } } },
labelArea: {
gap: {
'legend-toOptional': { value: '{spacing.gap.obj.horz.tightest}' },
'legend-toRequired': { value: '{spacing.gap.obj.horz.tightest}' },
},
},
labeledControlArea: { padding: { left: { value: '{spacing.padding.obj.horz.tighter}' } } },
},
},
FormField: {
sizes: { helperArea: { icon: { value: '{sizes.icon.sm}' } } },
spacing: {
gap: {
'field-toHelperArea': { value: '{spacing.gap.obj.vert.tight}' },
'field-toLabelArea': { value: '{spacing.gap.obj.vert.tight}' },
},
helperArea: {
gap: {
'text-toCharCount': { value: '{spacing.gap.obj.horz.tighter}' },
'text-toIcon': { value: '{spacing.gap.obj.horz.tighter}' },
},
padding: { horz: { value: '{spacing.padding.none}' } },
},
labelArea: {
gap: {
'label-toOptional': { value: '{spacing.gap.obj.horz.tightest}' },
'label-toRequired': { value: '{spacing.gap.obj.horz.tightest}' },
},
padding: { horz: { value: '{spacing.padding.none}' } },
},
},
},
Gleam: {
colors: {
bg: { base: { value: '{colors.bg.feedback.notify.hero-fixed}' } },
text: { base: { value: '{colors.text.onHero.neutral-fixed}' } },
info: {
bg: { base: { value: '{colors.bg.feedback.info.inverse}' } },
text: { base: { value: '{colors.text.onInverse.neutral}' } },
},
new: {
bg: { base: { value: '{colors.bg.feedback.success.hero}' } },
text: { base: { value: '{colors.text.onHero.neutral}' } },
},
onInverse: {
info: {
bg: { base: { value: '{colors.bg.feedback.info.soft}' } },
text: { base: { value: '{colors.text.feedback.info.strong}' } },
},
new: {
bg: { base: { value: '{colors.bg.feedback.success.soft}' } },
text: { base: { value: '{colors.text.feedback.success.hero}' } },
},
},
},
sizes: { height: { value: '{sizes.obj.xxs}' }, width: { value: '{sizes.obj.xxs}' } },
radii: { default: { value: '{radii.obj.capsule}' } },
spacing: { padding: { horz: { value: '{spacing.150}' } } },
},
IconButton: {
radii: {
circle: { value: '{radii.action.circle}' },
square: { value: '{radii.action.default}' },
},
spacing: {
xs: { value: '{spacing.150}' },
sm: { value: '{spacing.250}' },
md: { value: '{spacing.250}' },
lg: { value: '{spacing.padding.obj.default}' },
},
},
Input: {
borderWidths: {
active: { value: '{borderWidths.selected}' },
default: { value: '{borderWidths.default}' },
},
sizes: {
sm: { slot: { value: '{sizes.obj.xs}' } },
md: { slot: { value: '{sizes.obj.xs}' } },
lg: { slot: { value: '{sizes.obj.xs}' } },
},
radii: {
sm: { value: '{radii.obj.default}' },
md: { value: '{radii.obj.default}' },
lg: { value: '{radii.obj.default}' },
},
spacing: {
sm: {
gap: {
'input-toAdornment': { value: '{spacing.gap.group.default}' },
'input-toLeadingSlot': { value: '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot': { value: '{spacing.gap.obj.horz.default}' },
},
padding: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'readOnly-leading': { value: '{spacing.padding.none}' },
'vert': { value: '{spacing.150}' },
},
},
md: {
gap: {
'input-toAdornment': { value: '{spacing.gap.group.default}' },
'input-toLeadingSlot': { value: '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot': { value: '{spacing.gap.obj.horz.default}' },
},
padding: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'readOnly-leading': { value: '{spacing.padding.none}' },
'vert': { value: '{spacing.250}' },
},
},
lg: {
gap: {
'input-toAdornment': { value: '{spacing.gap.group.default}' },
'input-toLeadingSlot': { value: '{spacing.gap.obj.horz.default}' },
'input-toTrailingSlot': { value: '{spacing.gap.obj.horz.default}' },
},
padding: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'readOnly-leading': { value: '{spacing.padding.none}' },
'vert': { value: '{spacing.padding.obj.vert.loose}' },
},
},
},
},
LabeledControl: {
spacing: {
gap: { 'control-toLabel': { value: '{spacing.gap.obj.horz.tight}' } },
padding: {
vert: { default: { value: '{spacing.250}' }, largeSwitch: { value: '0.4375rem' } },
},
},
},
LabeledInput: {
radii: { default: { value: '{radii.obj.default}' } },
spacing: {
gap: { 'label-toInputText': { value: '{spacing.gap.none}' } },
padding: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'horz-readOnly': { value: '{spacing.padding.none}' },
'vert': { value: '{spacing.150}' },
'vert-readOnly': { value: '{spacing.padding.obj.vert.loose}' },
},
},
},
Link: { spacing: { gap: { 'icon-toLabel': { value: '{spacing.gap.obj.horz.tight}' } } } },
List: {
spacing: {
gap: { default: { value: '{spacing.gap.group.conjoined}' } },
decorator: {
padding: { 'horz-ol': { value: '{spacing.150}' }, 'horz-ul': { value: '{spacing.250}' } },
},
item: {
gap: { 'decorator-toText': { value: '{spacing.gap.none}' } },
padding: {
horz: { value: '{spacing.padding.none}' },
vert: { value: '{spacing.padding.none}' },
},
},
},
},
Popover: {
radii: { default: { value: '{radii.obj.default}' } },
spacing: {
padding: {
'horz': { value: '{spacing.padding.obj.horz.default}' },
'vert-bottom': { value: '{spacing.padding.obj.vert.loose}' },
'vert-top': { value: '{spacing.padding.obj.vert.loose}' },
},
content: {
gap: {
'content-toActions': { value: '{spacing.gap.obj.vert.looser}' },
'content-toIllustration': { value: '{spacing.gap.obj.horz.tight}' },
'content-toBody': { value: '{spacing.gap.obj.vert.tight}' },
},
padding: { default: { value: '{spacing.padding.obj.default}' } },
},
header: {
gap: { 'content-toSlot': { value: '{spacing.gap.obj.horz.tight}' } },
padding: { default: { value: '{spacing.padding.obj.default}' } },
},
},
},
ProgressMeter: {
borderWidths: { node: { active: { value: '{borderWidths.control.selected}' } } },
sizes: {
node: {
active: { value: '{sizes.control.handle.knob.sm}' },
inactive: { value: '{sizes.control.indicator.xs}' },
},
track: { thickness: { value: '{sizes.pipe.weight.thickest}' } },
},
opacity: { node: { active: { focusRing: { value: '{opacity.stateLayer.focus}' } } } },
radii: {
node: { default: { value: '{radii.control.circle}' } },
track: { default: { value: '{radii.control.default}' } },
},
spacing: {
horizontal: {
gap: {
'label-toMeta': { value: '{spacing.gap.none}' },
'node-toLabel': { value: '{spacing.gap.obj.vert.loose}' },
},
},
vertical: {
gap: {
'label-toMeta': { value: '{spacing.gap.none}' },
'node-toLabel': { value: '{spacing.gap.obj.vert.loose}' },
},
},
},
},
ShowHide: {
colors: {
icon: {
default: { base: { value: '{colors.icon.action.strong.default}' } },
hover: { base: { value: '{colors.icon.action.strong.hover}' } },
pressed: { base: { value: '{colors.icon.action.strong.pressed}' } },
},
label: {
default: { base: { value: '{colors.text.action.strong.default}' } },
hover: { base: { value: '{colors.text.action.strong.hover}' } },
pressed: { base: { value: '{colors.text.action.strong.pressed}' } },
},
},
spacing: { gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tight}' } } },
},
Tag: {
radii: {
small: { default: { value: '{radii.obj.default}' } },
medium: { default: { value: '{radii.obj.default}' } },
},
spacing: {
small: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tighter}' } },
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
medium: {
gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tighter}' } },
padding: {
horz: { value: '{spacing.padding.obj.horz.tighter}' },
vert: { value: '{spacing.padding.obj.vert.tightest}' },
},
},
},
},
TextButton: { spacing: { gap: { 'label-toIcon': { value: '{spacing.gap.obj.horz.tight}' } } } },
Toast: {
spacing: {
gap: {
'content-toClose': { value: '{spacing.gap.obj.horz.default}' },
'content-toLeadingSlot': { value: '{spacing.gap.obj.horz.default}' },
'content-toTrailingSlot': { value: '{spacing.gap.obj.horz.default}' },
},
padding: { default: { value: '{spacing.padding.obj.default}' } },
},
radii: { default: { value: '{radii.obj.default}' } },
},
Upsell: {
borderWidths: { card: { value: '{borderWidths.default}' } },
radii: {
banner: { default: { value: '{radii.none}' } },
card: { default: { value: '{radii.obj.default}' }, fullWidth: { value: '{radii.none}' } },
},
spacing: {
banner: {
gap: {
'content-toActions': { value: '{spacing.gap.none}' },
'content-toClose': { value: '{spacing.gap.obj.horz.default}' },
'content-toFineprint': { value: '{spacing.gap.obj.vert.tight}' },
'icon-toContent': { value: '{spacing.gap.obj.horz.default}' },
'img-toContent': { value: '{spacing.gap.obj.vert.default}' },
'mobile': { 'heading-toMessage': { value: '{spacing.gap.group.vert.conjoined}' } },
'desktop': {
'content-toActions': { value: '{spacing.gap.obj.horz.default}' },
'content-toMessage': { value: '{spacing.gap.group.horz.tighter}' },
},
},
padding: {
horz: { value: '{spacing.padding.obj.default}' },
vert: { value: '{spacing.padding.obj.default}' },
},
},
card: {
gap: {
'actions-toLegal': { value: '{spacing.gap.obj.vert.tight}' },
'content-toAction': { value: '{spacing.gap.obj.vert.default}' },
'content-toClose': { value: '{spacing.gap.obj.horz.default}' },
'heading-toBody': { value: '{spacing.gap.group.vert.conjoined}' },
'icon-toContent': { value: '{spacing.gap.obj.horz.default}' },
'img-toContent': { value: '{spacing.gap.obj.vert.default}' },
},
padding: {
horz: { value: '{spacing.padding.obj.default}' },
vert: { value: '{spacing.padding.obj.default}' },
},
},
},
},
}
const get = (path) => {
if (!path) return missing;
const parts = path.split('.');
let current = obj;
for (const part of parts) {
if (!current[part]) break;
current = current[part];
}
if (typeof current === 'string') {
return `"${current}"`;
}
if (typeof current === 'object' && 'value' in current) {
return typeof current.value === 'string'
? `"${current.value}"`
: JSON.stringify(current.value);
}
return;
}
Ready to run.
| Test | Ops/sec | |
|---|---|---|
| Map.get on all keys | | ready |
| Object lookup on all object paths | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.