Label Info

<dsx-label-info> — Label Info

Label plus inline info trigger that toggles an explanatory popover.

Live Preview

Import

import '@bnotk/dsx/components/label-info.js';

Usage

<dsx-label-info text="VAT number" placement="right">
  Enter the tax ID exactly as it appears on the official document.
</dsx-label-info>

Elements

<dsx-label-info>

Shows optional label text, an inline info-icon trigger, and slotted popover content.

Properties

Property	Type	Default	Description
text	string	”	Optional bold label text shown before the trigger.
placement	’top’ | ‘bottom’ | ‘left’ | ‘right'	'right’	Controls which side the popover appears on.

Methods

None.

Events

None.

Slots

Slot	Description
default	Popover body content.

CSS Parts

This element does not expose shadow parts.

Notes

• Clicking the trigger toggles the popover open state.
• When opened, the component registers a document click handler that closes the popover if the event target is outside the host.

Behavior Notes

• The trigger uses role="button" and updates aria-expanded.
• The popover element is toggled with display: none/block rather than opacity transitions.

Styling Notes

• The trigger is a compact inline info icon that matches the field-label helper affordance used elsewhere in the system.
• Popover surface uses white background, grey border, 4px radius, and --ds2-shadow-md.