Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/headless/select.exs
[
select: [
name: "select",
category: "forms",
doc_url: "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
args: [type: ["select"], only: ["select"], helpers: [], module: ""],
optional: [],
necessary: [],
scripts: [
%{
module: "Select",
type: "file",
file: "select.js",
imports: "import Select from \"./select.js\";"
}
],
headless: [
anatomy: [
root: [
element: "div",
note: "carries the Select hook; reads name/multiple/disabled/readonly/required from data-*",
required: true
],
parts: [
label: [element: "label", note: "accessible name, wired via aria-labelledby"],
trigger: [
element: "button",
role: "combobox",
aria: ["aria-haspopup", "aria-expanded", "aria-controls", "aria-readonly", "aria-required"],
data_attributes: [
"data-popup-open",
"data-placeholder",
"data-disabled",
"data-readonly",
"data-required"
]
],
value: [element: "span", data_attributes: ["data-placeholder"], note: "selected label(s) or placeholder"],
icon: [element: "span", data_attributes: ["data-popup-open"]],
positioner: [element: "div"],
popup: [
element: "ul",
role: "listbox",
aria: ["aria-multiselectable"],
data_attributes: ["data-open", "data-closed", "data-side"]
],
group: [element: "li", role: "group", aria: ["aria-labelledby"]],
group_label: [element: "span"],
item: [
element: "li",
role: "option",
aria: ["aria-selected"],
data_attributes: ["data-selected", "data-highlighted", "data-disabled"]
],
item_indicator: [element: "span", note: "selected ✓ (shown when the item is data-selected)"],
item_text: [element: "span"],
value_inputs: [element: "span", note: "hidden input(s) carrying the value for form submission"]
]
],
aria_pattern: [
pattern: "Listbox / Combobox",
keyboard: [
"Enter/Space/Arrow: open · Arrow Up/Down + Home/End: navigate",
"Enter/Space: select · Escape/Tab: close · Type: typeahead jump"
]
],
state_attributes: [
"data-open",
"data-closed",
"data-side",
"data-highlighted",
"data-selected",
"data-disabled",
"data-readonly",
"data-required",
"data-placeholder",
"data-popup-open"
],
hooks: ["Select"]
]
]
]