k11q / noir-ui

A low-level svelte UI component library with built-in accessibility and maximum stylablity.

Warning

Deprecated: Please visit radix-svelte for the alternative

Noir-UI

Noir-UI is a low-level component library with built in accessibility, for building high quality design systems.

Installation

Noir-UI is currently in version 0.0.1 and not suitable for production. However you can try it, run:

npm install @noir-ui/svelte

# or pnpm or yarn

Documentation

Visit the official site.

Author

Khairul Haaziq

Contributing

Coming soon.

License

MIT License. Copyright Khairul Haaziq 2023.

noir-ui's Issues

Feature: Slider

Slider

Features:

• Can be controlled or uncontrolled.
• Supports multiple thumbs.
• Supports a minimum value between thumbs.
• Supports touch or click on track to update value.
• Supports Right to Left direction.
• Full keyboard navigation.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Dropdown component

Dropdown Component

Completed

• Keyboard: When focus on trigger: Press Space key to open the Menu.
• Keyboard: When focus on trigger: Press Up and Down arrow keys to open the Menu.
• Keyboard: When opened: Press Space or Enter keys to select the highlighted option.
• Keyboard: When opened: Press Esc to close the Menu.
• Keyboard: When opened: Press Up and Down arrow keys to navigate across options.
• Positioning: Default position at selected.
• Focus trap
• Block clicks outside

Todos

• Screen reader.
• Typeahead
• Collision aware.
• Scroll indicators.
• Scroll based height
• Native fallback.
• Autofill
• Scroll lock

Props

Root

• open - default: false
• defaultOpen - default: false
• dir - default: 'ltr'

Trigger

• className - default: ''

Portal

• className - default: ''

Group

• label - default: ''

Arrow

• width - default: 8
• height - default: 8

Item

Reference:

Thank you Pedro Duarte and the Radix/Modulz team for the great resources

Feature: Switch

Switch

Completed

• When focus is on the switch, changes the state of the switch via enter/space.
• The switch has role switch.
• When on, the switch element has state aria-checked set to true.
• When off, the switch element has state aria-checked set to false.
• If the switch element is an HTML input[type="checkbox"], it uses the HTML checked attribute instead of the aria-checked property.
• Accessible without javascript

Todo

• The switch has an accessible label provided by one of the following:

• Visible text content contained within the element with role switch.

• A visible label referenced by the value of aria-labelledby set on the element with role switch.
  aria-label set on the element with role switch.

• If a set of switches is presented as a logical group with a visible label, either:

• The switches are included in an element with role group that has the property aria-labelledby set to the ID of the element containing the group label.

• The set is contained in an HTML fieldset and the label for the set is contained in an HTML legend element.

• If the presentation includes additional descriptive static text relevant to a switch or switch group, the switch or switch group has the property aria-describedby set to the ID of the element containing the description.

Feature: Dialog

Dialog

Features:

• Supports modal and non-modal modes.
• Focus is automatically trapped when modal.
• Can be controlled or uncontrolled.
• Manages screen reader announcements with Title and Description components.
• Esc closes the component automatically.

Completed

• [x]

Todo

• [ ]
• [ ]

Feature: Collapsible

Collapsible

Features:

• Supports indeterminate state.
• Full keyboard navigation.
• Can be controlled or uncontrolled.

Completed

• Created

Todo

• Full keyboard navigation.
• Can be controlled or uncontrolled.

Feature: Context Menu

Context Menu

Features:

• Supports submenus with configurable reading direction.
• Supports items, labels, groups of items.
• Supports checkable items (single or multiple) with optional indeterminate state.
• Supports modal and non-modal modes.
• Customize side, alignment, offsets, collision handling.
• Focus is fully managed.
• Full keyboard navigation.
• Typeahead support.
• Dismissing and layering behavior is highly customizable.
• Triggers with a long-press on touch devices

Completed

• Created

Todo

• [ ]
• [ ]

Feature: Toggle Group

Toggle Group

Features:

• Full keyboard navigation.
• Supports horizontal/vertical orientation.
• Support single and multiple pressed buttons.
• Can be controlled or uncontrolled.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Popover

Checkbox

Features:

• Can be controlled or uncontrolled.
• Customize side, alignment, offsets, collision handling.
• Optionally render a pointing arrow.
• Focus is fully managed and customizable.
• Supports modal and non-modal modes.
• Dismissing and layering behavior is highly customizable.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Tabs

Tabs

Features:

• Can be controlled or uncontrolled.
• Supports horizontal/vertical orientation.
• Supports automatic/manual activation.
• Full keyboard navigation.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Checkbox

Checkbox

Completed

• When the checkbox has focus, pressing the Space key changes the state of the checkbox.
• The checkbox has role checkbox.
• When checked, the checkbox element has state aria-checked set to true.
• When not checked, it has state aria-checked set to false.
• If the switch element is an HTML input[type="checkbox"], it uses the HTML checked attribute instead of the aria-checked property.
• Accessible without javascript

Todo

• The checkbox has an accessible label provided by one of the following:

• Visible text content contained within the element with role checkbox.

• A visible label referenced by the value of aria-labelledby set on the element with role checkbox.

• aria-label set on the element with role checkbox.

• When partially checked, it has state aria-checked set to mixed.

• If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role group that has the property aria-labelledby set to the ID of the element containing the label.

• If the presentation includes additional descriptive static text relevant to a checkbox or checkbox group, the checkbox or checkbox group has the property aria-describedby set to the ID of the element containing the description.

Feature: Toggle

Toggle

Completed

• Keyboard: Space/Enter to toggle
• Accessible without javascript

Todo

• Make styling focus and checked state easier

Props

• defaultPressed: false
• pressed: false
• disabled: false

Feature: Toast

Toast

Features:

• Automatically closes.
• Pauses closing on hover, focus and window blur.
• Supports hotkey to jump to toast viewport.
• Supports closing via swipe gesture.
• Exposes CSS variables for swipe gesture animations.
• Can be controlled or uncontrolled.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Accordion

Accordion

Features:

• Full keyboard navigation.
• Can expand one or multiple items.
• Can be controlled or uncontrolled.

Completed

• Keyboard: Tab native behaviour.

Todo

• Keyboard: Arrow up/down to move focus/select accordion.
• Keyboard: Space/Enter to expand/close accordion.

Feature: Dropdown Menu

Dropdown Menu

Features:

• Can be controlled or uncontrolled.
• Supports submenus with configurable reading direction.
• Supports items, labels, groups of items.
• Supports checkable items (single or multiple) with optional indeterminate state.
• Supports modal and non-modal modes.
• Customize side, alignment, offsets, collision handling.
• Optionally render a pointing arrow.
• Focus is fully managed.
• Full keyboard navigation.
• Typeahead support.
• Dismissing and layering behavior is highly customizable.

Completed

• Created

Todo

• Todo1
• Todo2

Fix tabs to use radio

Feature: Radio Group

Radio Group

Features:

• Full keyboard navigation.
• Supports horizontal/vertical orientation.
• Can be controlled or uncontrolled.

Completed

• Created

Todo

• Todo1
• Todo2

Feature: Tooltip

Tooltip

Features:

• Provider to control display delay globally.
• Opens when the trigger is focused or hovered.
• Closes when the trigger is activated or when pressing escape.
• Supports custom timings.

Completed

• Supports multiple sides

Todo

• Collision aware
• Renderless wrapper component
• The element that serves as the tooltip container has role tooltip.
• The element that triggers the tooltip references the tooltip element with aria-describedby.
• Escape: Dismisses the Tooltip.
• Tapping anywhere outside the tooltip or button will close the tooltip.

Feature: Avatar

Avatar

Features:

• Automatic and manual control over when the image renders.
• Fallback part accepts any children.
• Optionally delay fallback rendering to avoid content flashing.

Completed

• [x]

Todo

• [ ]
• [ ]