Closed novacbn closed 3 years ago
Added the following Components / Component Features
Disclosure
Tab
<Tab.Container> — Wrapper Component which provides stylings and Svelte Contexts for radio button functionality.
<Tab.Container>
<Tab.Container logic_name="XXX">
<Tab.Container logic_state="XXX">
<Tab.Container sizing="tiny/small/medium/large/huge">
<Tab.Group> — Used for grouping together <Tab.Label> / <Tab.Section> Components.
<Tab.Group>
<Tab.Label>
<Tab.Section>
<Tab.Group logic_id="XXX">
<Tab.Label> — Used for providing radio buttons for navigating tabs without Javascript.
<Tab.Label state>
<input type="radio" checked={false/true}>
<Tab.Anchor> — Used for providing page-based navigation buttons.
<Tab.Anchor>
<Tab.Anchor current="XXX">
aria-current
<Tab.Anchor> / <Tab.Label>
<Tab.XXX palette="accent/dark/light/alert/affirmative/negative">
<Tab.Section> — Used for wrapping tab content that will render when active.
<Tab.Section loading="lazy">
CHANGELOG
Added the following Components / Component Features
Disclosure
Tab
<Tab.Container>
— Wrapper Component which provides stylings and Svelte Contexts for radio button functionality.<Tab.Container logic_name="XXX">
— Used to synchronize the form name between each radio button.<Tab.Container logic_state="XXX">
— Used to set which form ID is the current active tab.<Tab.Container sizing="tiny/small/medium/large/huge">
— Used to change how large the children buttons renders as.<Tab.Group>
— Used for grouping together<Tab.Label>
/<Tab.Section>
Components.<Tab.Group logic_id="XXX">
— Used to synchronize the form IDs between the radio buttons, tab content, and Svelte Contexts.<Tab.Label>
— Used for providing radio buttons for navigating tabs without Javascript.<Tab.Label state>
— Wrapper around<input type="radio" checked={false/true}>
, used to make the tab active.<Tab.Anchor>
— Used for providing page-based navigation buttons.<Tab.Anchor current="XXX">
— Wrapper aroundaria-current
, used to make the tab active.<Tab.Anchor>
/<Tab.Label>
<Tab.XXX palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.<Tab.Section>
— Used for wrapping tab content that will render when active.<Tab.Section loading="lazy">
— When paired with<Tab.Group>
/<Tab.Label>
, disables rendering of tab content to DOM when not active.