[{"data":1,"prerenderedAt":3892},["ShallowReactive",2],{"cmdk-index":3,"content:\u002Fcomponents\u002Fselect":236},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232],{"path":5,"title":6,"description":7},"\u002Fcomponents\u002Faccordion","Accordion","A disclosure list built entirely on native \u003Cdetails>\u002F\u003Csummary> elements — zero JavaScript, zero\nARIA reinvention. The browser supplies the disclosure role, aria-expanded, Enter\u002FSpace toggling,\nfocus, and find-in-page expansion for free. Single-open (exclusive) mode uses the platform\nexclusive-accordion feature (Baseline 2024): every \u003Cdetails> shares one auto-generated name, so\nthe browser closes siblings when one opens. multiple drops the shared name so each item opens\nindependently.",{"path":9,"title":10,"description":11},"\u002Fcomponents\u002Falert","Alert","A styled, accessible notification banner. Its live-region politeness is derived from the color —\nurgent danger \u002F warn render role=\"alert\" (assertive), everything else role=\"status\" (polite) —\nso a non-urgent banner isn't announced assertively (override with the live prop). It supports an\noptional icon, a title, body text, an actions row, and a dismiss button.",{"path":13,"title":14,"description":15},"\u002Fcomponents\u002Favatar","Avatar","A data-display component that shows an image, or initials derived from text when there is no\nimage (or while it loads). Supports a title \u002F subtitle column for list and profile UIs.",{"path":17,"title":18,"description":19},"\u002Fcomponents\u002Fbadge","Badge","A small status or count indicator. Attach it to any element as a floating pip, drop it inline next\nto text, or render it standalone — all three modes share the same class surface.",{"path":21,"title":22,"description":23},"\u002Fcomponents\u002Fbutton","Button","A styled, accessible button. Dynamic state is expressed through real attributes — disabled becomes\na true disabled (or aria-disabled for link buttons), loading sets aria-busy, and it ships a\nvisible :focus-visible ring.",{"path":25,"title":26,"description":27},"\u002Fcomponents\u002Fcard","Card","A surface container for grouping related content — a header (prepend slot · title · subtitle ·\nappend slot), a body, and optional action rows. It is the most composed styled component, yet the\nstandalone markup is just nested .ori-card__* elements, so it works without Vue.",{"path":29,"title":30,"description":31},"\u002Fcomponents\u002Fcheckbox","Checkbox","A styled, accessible checkbox built on a real \u003Cinput type=\"checkbox\"> — kept in the DOM\n(visually hidden over a custom box) so keyboard, focus, and native form submission work for free.\nThe accent color and :focus-visible ring are driven by the ori-color token; invalid sets\naria-invalid; disabled is the native attribute.",{"path":33,"title":34,"description":35},"\u002Fcomponents\u002Fcolor-picker","Color picker","An accessible color picker: a 2D saturation × brightness area, a hue slider, a hex field, and\noptional preset swatches — an inline panel you compose into an OriPopover for a\nswatch-triggered flow. Behaviour lives in the framework-agnostic useColorPicker (a zero-dependency sRGB +\n2D-area engine, no adapter or machine); the styled component reuses OriSlider for the\nhue channel and OriInput for the hex field. v-model carries a lowercase color\nstring; the internal working model is HSVA, so the hue survives when you drag into a corner and back.",{"path":37,"title":38,"description":39},"\u002Fcomponents\u002Fcombobox","Combobox","A filterable single-select listbox — type to filter, navigate with the keyboard, pick one. It is the\nfirst component driven end-to-end by @oriui\u002Fheadless: the state machine + prop-getters own the\nbehaviour (open\u002Fclose, filtering, the active-descendant highlight, selection, and the full\nWAI-ARIA keyboard), and OriCombobox renders the styled shell on top. Unlike the pure-CSS\ncomponents, the behaviour needs JavaScript — the standalone classes give you the look, and\nuseCombobox gives you the behaviour for any UI.",{"path":41,"title":42,"description":43},"\u002Fcomponents\u002Fdialog","Dialog","A modal dialog — the library's first genuinely interactive component, built on the native\n\u003Cdialog> element. Unlike the styled-only components, a dialog needs behaviour: focus trap, scroll\nlock, Esc-to-close, click-outside dismissal, and the full WAI-ARIA keyboard contract. All of it comes\nfrom the platform via showModal() — no state-machine dependency and no adapter to wire. The styled\nOriDialog supplies only the markup and tokens.",{"path":45,"title":46,"description":47},"\u002Fcomponents\u002Fdivider","Divider","A horizontal (default) or vertical rule that separates content. An optional centered label turns it\ninto a visual break like the classic \"OR\" between form sections. A pure layout\u002Fstructure primitive —\nno interactive behaviour, no variants, no size scale.",{"path":49,"title":50,"description":51},"\u002Fcomponents\u002Ffield","Field","The shared shell for form controls — one source of truth for the label \u002F hint \u002F error \u002F\nrequired contract that Input, Select,\nTextarea, Combobox, Slider,\nRadioGroup, and ColorPicker otherwise each wire\nby hand. Wrap a control in OriField and it adopts the field's id, aria-describedby,\naria-invalid, required, disabled, and size — and stops rendering its own label and helper, so\nthere is exactly one of each, wired identically every time. Group and composite controls (RadioGroup,\nCombobox's listbox, ColorPicker) name themselves via aria-labelledby pointing at the field's label.",{"path":53,"title":54,"description":55},"\u002Fcomponents\u002Ficon","Icon","A styled, accessible SVG icon. Decorative by default — renders with aria-hidden=\"true\" and no\nrole. Pass a label to expose it to assistive technology as an image: the icon switches to\nrole=\"img\" + aria-label automatically.",{"path":57,"title":58,"description":59},"\u002Fcomponents\u002Finput","Input","A labelled, accessible text field with v-model. State is expressed through real attributes — the\nnative disabled, aria-invalid when there is an error, and an aria-describedby that points at\nthe rendered hint or error. The label is wired to the field with for\u002Fid (auto-generated via\nuseId when you don't pass one), and arbitrary native attributes (name, autocomplete,\ninputmode, …) fall through to the underlying \u003Cinput>.",{"path":61,"title":62,"description":63},"\u002Fcomponents\u002Fjoin","Join","A thin wrapper that collapses the shared radii and borders of adjacent controls so they read as one\nsegmented unit — button groups, input+button combos, segmented toolbars. No visual styling of its\nown: all colour, size, and variant tokens live on the children.",{"path":65,"title":66,"description":67},"\u002Fcomponents\u002Fkbd","Kbd","A keyboard-key chip — a semantic \u003Ckbd> element styled as a monospace bordered chip. Use it to\nrepresent individual keys, modifier keys, or multi-key shortcuts inline in prose or UI hints.",{"path":69,"title":70,"description":71},"\u002Fcomponents\u002Flink","Link","An inline prose link — the right choice when a destination lives in running text. Distinct from\nOriButton rendered as=\"a\": a button that navigates is still a button; a link in a sentence is\nOriLink. Underlined by default (the affordance survives without color), with a _hover mode that\nhides the underline at rest and reveals it on hover. A visible :focus-visible ring uses the same\ncolor as the text.",{"path":73,"title":74,"description":75},"\u002Fcomponents\u002Fmenu","Menu","A WAI-ARIA menu button: a trigger opens a roving-tabindex action list. Unlike the Popover, open\u002Fclose,\nfocus movement, and click-outside dismissal are driven entirely by the @oriui\u002Fheadless menu\nmachine in JavaScript, not the Popover API — so the panel is not top-layer and carries a z-index. The\npanel is still placed with the same CSS Anchor Positioning primitive as the Popover (ori-anchored),\nzero positioning JS.",{"path":77,"title":78,"description":79},"\u002Fcomponents\u002Fpopover","Popover","A positioned overlay for supplementary content — a menu, a filter panel, a rich hint — tethered to a\ntrigger. It runs entirely on the platform: the trigger opens the panel through the Popover API\n(top-layer, light-dismiss, Esc — zero JS), and the panel is placed with CSS Anchor Positioning\n(anchor-name \u002F position-anchor + position-area, with a collision flip via\nposition-try-fallbacks) — zero positioning JS, no scroll\u002Fresize listeners. Baseline 2026, with\ngraceful degradation: an older engine still opens the panel and places it, just without the\ncollision-aware flip.",{"path":81,"title":82,"description":83},"\u002Fcomponents\u002Fprogress","Progress","A horizontal progress bar that communicates task completion. It supports a determinate mode (a\nknown value out of a max) and an indeterminate mode (animated sweep) for tasks with no\nmeasurable progress. State is expressed through ARIA attributes — aria-valuenow is omitted when\nindeterminate, giving screen readers the correct cue automatically.",{"path":85,"title":86,"description":87},"\u002Fcomponents\u002Fradio","Radio","A \"choose one\" compound control. A role=\"radiogroup\" container names the set via\naria-labelledby; each option is a real \u003Cinput type=\"radio\"> sharing a single name — so the\nbrowser enforces single-select and native form submission — visually hidden behind a styled circle.\nPass the options as an array; per-option disabled is supported.",{"path":89,"title":90,"description":91},"\u002Fcomponents\u002Fselect","Select","A native-first styled select control with v-model. The browser owns the dropdown, full keyboard\ninteraction, type-ahead, and all ARIA semantics — oriUI only styles the closed control and draws a\ndecorative chevron. It shares the form-control contract of Input and\nTextarea: a built-in label, hint, error, and required asterisk, all\nwired for accessibility. State is expressed through real attributes — native disabled and\naria-invalid=\"true\" (not classes) — and arbitrary native attrs (name, autocomplete, …) fall\nthrough to the \u003Cselect> via inheritAttrs:false.",{"path":93,"title":94,"description":95},"\u002Fcomponents\u002Fskeleton","Skeleton","A loading placeholder that signals content is on its way. An animated shimmer sweep sweeps across the\nblock; on devices that request reduced motion the shimmer stops and the tinted block alone signals the\nloading state. Size it with an inline style or a utility class — the skeleton itself carries no\nintrinsic width or height beyond a 1em minimum height.",{"path":97,"title":98,"description":99},"\u002Fcomponents\u002Fslider","Slider","A styled, accessible range control built on a native \u003Cinput type=\"range\">. Because the\nunderlying element is real HTML, the browser supplies role=\"slider\", the full keyboard contract\n(arrow keys, Home\u002FEnd, PageUp\u002FPageDown), and screen-reader value announcements for free — no\nJavaScript bridge needed. Colour and the filled-track portion are driven by CSS custom properties;\nv-model carries a number.",{"path":101,"title":102,"description":103},"\u002Fcomponents\u002Fspinner","Spinner","An accessible loading indicator — renders role=\"status\" with an aria-label (default \"Loading\")\nso assistive technology announces the busy state without any extra work. Use it standalone for a\npage-level or section-level loader, or embed it inline inside a button or label.",{"path":105,"title":106,"description":107},"\u002Fcomponents\u002Fstack","Stack","The workhorse layout primitive — two flex modes in one component. A stack (ori-stack) is a\nflex column: children flow top-to-bottom with a consistent gap. A cluster (ori-cluster) is a\nwrapping flex row: children flow left-to-right, wrap onto new lines, and are centered on the\ncross-axis — ideal for tag clouds, button groups, and badge sets.",{"path":109,"title":110,"description":111},"\u002Fcomponents\u002Fsurface","Surface","An elevated floating surface — a lifted panel with a surface background, an optional hairline, a\ncorner radius, and a mode-aware shadow, and nothing else. No padding, no header\u002Ftitle semantics: it\nis just the box, and the caller owns the layout inside. It's the building block for chrome that floats\nover content — a toolbar island, a zoom control, a side panel, a menu popout's container — and the\nelevation counterpart to Card, which is a content card (padding + header \u002F\ntitle \u002F body \u002F actions).",{"path":113,"title":114,"description":115},"\u002Fcomponents\u002Fswitch","Switch","An on\u002Foff toggle built on a real \u003Cinput type=\"checkbox\" role=\"switch\"> — kept in the DOM\n(visually hidden over a track + thumb) so keyboard, focus, and form submission work for free, and\nassistive technology announces it as a switch. v-model is a boolean. The \"on\" track color and the\n:focus-visible ring both come from the ori-color token; the track and thumb scale with\nori-font-size so size is a single prop.",{"path":117,"title":118,"description":119},"\u002Fcomponents\u002Ftabs","Tabs","An accessible tabs widget with automatic activation. The tablist holds a roving tabindex so\nTab \u002F Shift+Tab enter and leave the group as a single keyboard stop; arrow keys move between\ntabs and immediately select them. State is expressed through real ARIA attributes — aria-selected\ndrives both the active indicator and the label colour; disabled is the native button attribute.",{"path":121,"title":122,"description":123},"\u002Fcomponents\u002Ftag","Tag","A compact label for categorising, filtering, or annotating content — status chips, keyword\nbadges, and removable filter pills. State is expressed through real attributes: aria-disabled\ndisables the tag and its close button without removing it from the DOM.",{"path":125,"title":126,"description":127},"\u002Fcomponents\u002Ftextarea","Textarea","A labelled, accessible multiline text field with v-model. State is expressed through real\nattributes — the native disabled, aria-invalid when there is an error, and an aria-describedby\nthat points at the rendered hint or error. The label is wired to the field with for\u002Fid\n(auto-generated via useId when you don't pass one). Unlike a single-line input the field has no\nfixed height — it grows from a rows-based min-height and stays user-resizable.",{"path":129,"title":130,"description":131},"\u002Fcomponents\u002Ftoast","Toast","An imperative notification system. Push a toast from anywhere with useToast() and render\n\u003COriToaster \u002F> once near the app root to display the queue. No event bus, no Vuex, no provide\u002Finject —\njust a module-level reactive queue that every call site shares.",{"path":133,"title":134,"description":135},"\u002Fcomponents\u002Ftoolbar","Toolbar","A WAI-ARIA toolbar: a set of related controls that share a single Tab stop, navigated internally\nwith the arrow keys via roving tabindex (real DOM focus, not aria-activedescendant). Five\ncomponents make it up — OriToolbar (the root, role=\"toolbar\"), OriToolbarButton (an item —\ncomposes OriButton), OriToolbarSeparator (a perpendicular divider), and a paired\nOriToolbarToggleGroup \u002F OriToolbarToggleItem for a segmented single- or multi-select toggle.\nUnlike the data-driven OriMenu (an items array plus a machine), a toolbar is compositional —\nyou assemble it from slotted components in whatever order and combination you need — so the behaviour\nunderneath, useToolbar from @oriui\u002Fheadless, is a provide\u002Finject\nroving-focus context rather than a state machine over an array.",{"path":137,"title":138,"description":139},"\u002Fcomponents\u002Ftooltip","Tooltip","A CSS-driven tooltip that shows additional context when a control is focused or hovered. The bubble\nis always in the DOM (so the aria-describedby reference is never dangling) and shown\u002Fhidden\nentirely in CSS — no JS state machine, no positioning engine. Show is pure :focus-within (keyboard)\nand :hover wrapped in @media (hover: hover) (pointer, without sticking open on touch).",{"path":141,"title":142,"description":143},"\u002Fguides\u002Fcss","Using the CSS layer","oriUI is three independent layers woven around one set of design tokens. The @oriui\u002Fcss layer is\njust standalone .ori-* classes plus the token theming — no Vue, no build step, no Tailwind. You\nship the stylesheet and write classes. This is how oriUI works with htmx, Astro, or plain HTML —\nthe DaisyUI niche, minus Tailwind.",{"path":145,"title":146,"description":147},"\u002Fguides\u002Fcustomization","Customization","Make it yours — without authoring a whole skin. Most products need one thing: their brand color and\ntheir corner radius on top of accessible, ready-made components. oriUI lets you do that by repointing\na handful of design tokens — a few CSS custom properties in your own stylesheet, no rewrite, no fork.\nThis is the prototype fast, scale without rewriting payoff: the same \u003COriButton> you shipped on\nday one becomes on-brand by the time you ship to users, and nothing about the component changes.",{"path":149,"title":150,"description":151},"\u002Fguides\u002Fdesign-tokens","Design tokens","oriUI is three independent layers woven around one set of design tokens. This page is the\ncatalog — every token, and the resolution model that turns a raw value into the colour a component\npaints. The chain is short and deliberate: a primitive feeds a semantic role, a role feeds a\nper-instance alias, and components read only the alias. That indirection is what lets a single\nclass repoint a single token — the whole zero-runtime theming story rests on it.",{"path":153,"title":154,"description":155},"\u002Fguides\u002Fskins","Skin gallery","A skin is a named palette — a set of token overrides applied with one attribute on \u003Chtml>\n(data-ori-skin). Every skin repoints only the four skinnable roles (primary · secondary ·\nsurface · background, each with a -light and -dark source); the status hues (success ·\nwarn · danger · info) stay shared, and every pairing targets WCAG AA for body text. Switching\na skin is a single attribute write — zero runtime, no recompute, no flash.",{"path":157,"title":158,"description":159},"\u002Fguides\u002Ftheming","Theming","A theme is a mode (light or dark) layered over a skin (a named palette). Both are pure\nattribute toggles on \u003Chtml> — flipping either repoints the active --ori-color-* aliases through\nCSS custom properties, so everything reskins at once with no JavaScript, no recompute, no flash.\nThis is the same zero-runtime story across every layer: a Vue app, the standalone @oriui\u002Fcss\nclasses, htmx fragments, or hand-written HTML all theme identically.",{"path":161,"title":162,"description":163},"\u002Fheadless\u002Fcore","Core","The framework-agnostic heart of the headless layer: a behaviour contract plus a zero-dependency\nnative engine, written in vanilla TypeScript. Every framework binding consumes the same contract,\nso a primitive behaves identically wherever it runs — and the behaviour stays swappable per primitive,\nwithout touching markup.",{"path":165,"title":166,"description":167},"\u002Fheadless\u002Fuse-color-picker","useColorPicker","A headless sRGB color picker — a 2D saturation × brightness area, a hue channel, an optional\nalpha channel, a hex field, and optional preset swatches, assembled from ready-to-bind\nprop-getters. It owns the working color as an internal HSVA object (so the hue survives a grayscale\nround-trip when you drag into a corner and back) and composes a zero-dependency sRGB engine plus pure\n2D-area math from the core: parseColor \u002F formatColor (loose parse in, lowercase string out),\nhsvToRgb \u002F rgbToHex \u002F rgbToHsl (hex \u002F rgb \u002F hsv \u002F hsl conversion), readableInk (WCAG-luminance\nink over a swatch), and resolveAreaPosition \u002F stepAreaPosition (pointer → coordinate and keyboard\nstepping across the two axes).",{"path":169,"title":170,"description":171},"\u002Fheadless\u002Fuse-combobox","useCombobox","A headless combobox primitive — an editable text input paired with a popup listbox — implementing\nthe WAI-ARIA combobox with listbox popup pattern: type to filter, navigate with the keyboard via\nactive-descendant, and pick a single option. It owns the behaviour (open\u002Fclose, filtering, the\nhighlight, selection, and the full keyboard) and the ARIA wiring as ready-to-bind prop bags; you own\nthe markup and styles.",{"path":173,"title":174,"description":175},"\u002Fheadless\u002Fuse-dialog","useDialog","A headless modal dialog primitive built on the native \u003Cdialog> element — focus trap, scroll lock,\nEscape to close, focus return, and aria-modal semantics all come from the platform via\nshowModal(). It owns the open state and the ARIA wiring as ready-to-bind prop bags; you own the\nmarkup and styles (you render the \u003Cdialog> and drive showModal() \u002F close() from open).",{"path":177,"title":178,"description":179},"\u002Fheadless\u002Fuse-disclosure","useDisclosure","A headless show \u002F hide primitive for disclosure widgets — expandable panels, accordions, menus,\nthe collapsible sidebar groups on this very site. It owns the open state, the WAI-ARIA wiring, and the\ntoggle handler; you own the markup and the styles.",{"path":181,"title":182,"description":183},"\u002Fheadless\u002Fuse-dismissable","useDismissable","A headless dismiss layer — the \"close the overlay on an outside interaction\" glue a non-platform\noverlay needs, the pattern Radix DismissableLayer \u002F Floating-UI useDismiss standardise. While\nenabled, it attaches document listeners and calls onDismiss() when an interaction lands outside\nthe overlay's own elements. Each overlay picks the strategy that fits it:",{"path":185,"title":186,"description":187},"\u002Fheadless\u002Fuse-menu","useMenu","A headless menu button primitive built on the WAI-ARIA menu-button pattern — a trigger that opens a\npopup menu of actions, with roving tabindex, arrow \u002F Home \u002F End navigation, and Enter \u002F Space\nactivation. It owns the open state and the highlighted item and exposes the ARIA wiring as ready-to-bind\nprop bags; you own the markup, the styles, and the DOM focus (roving needs real focus, and\nclick-outside \u002F focus-return are host concerns a state projection can't reach).",{"path":189,"title":190,"description":191},"\u002Fheadless\u002Fuse-tabs","useTabs","A headless WAI-ARIA tabs widget with automatic activation — a tablist of tabs behind a single\nTab stop, navigated with the arrow keys via roving tabindex (real DOM focus, not\naria-activedescendant), where moving focus also selects. It is data-driven: you pass the tabs\narray plus the selected value, and it returns the tablist prop bag plus per-tab and per-panel\nprop-getters (ids, aria-selected, aria-controls, aria-labelledby, roving tabindex, hidden).",{"path":193,"title":194,"description":195},"\u002Fheadless\u002Fuse-theme","useTheme","A headless light \u002F dark theme controller — it owns the mode setting, resolves auto against the OS\nscheme live, persists the choice, and applies it to the DOM. It applies through applyTheme, which sets\nthe ori-theme_{light,dark} class (removing the opposite — exactly one is on at a time) and works\naround a bug in current Chromium where a runtime theme toggle otherwise leaves styled components\npainting the previous theme's colours until they re-render.",{"path":197,"title":198,"description":199},"\u002Fheadless\u002Fuse-toast","useToast","A headless toast queue — an imperative notification store you call from anywhere (toast('Saved'))\nand render once near the app root. The behaviour is a framework-agnostic engine (a plain array + a Set\nof listeners + auto-dismiss timers) projected into the host framework's reactivity: a Vue reactive\narray and a Svelte readable store. It is a client-side singleton — every useToast() call\nshares the one queue, so a push from anywhere reaches the single renderer.",{"path":201,"title":202,"description":203},"\u002Fheadless\u002Fuse-token","useToken","A reactive token bridge — it resolves an --ori-* design token to its computed value in JS, for\ncanvas \u002F WebGL \u002F chart painters (Konva, ECharts, …) that draw outside the CSS cascade yet must follow the\nactive skin. It reads through a hidden probe, because the obvious API is a trap: getComputedStyle(el).getPropertyValue('--x') hands back the unresolved var() chain (oriUI aliases chain), not a color —\nsubstitution only happens at a real property's computed-value time.",{"path":205,"title":206,"description":207},"\u002Fheadless\u002Fuse-toolbar","useToolbar","A headless WAI-ARIA toolbar — a set of related controls behind a single Tab stop, navigated\ninternally with the arrow keys via roving tabindex (real DOM focus, not aria-activedescendant).\nThe root owns orientation \u002F loop \u002F direction and a single keydown handler; each item registers itself\nand receives its roving tabindex, so a toolbar is assembled from arbitrary slotted components\nrather than a fixed data array.",{"path":209,"title":210,"description":211},"\u002Foverview\u002Faccessibility","Accessibility","Accessibility in oriUI is structural, not a coat of polish on top. The same decisions that make\nthe components correct for assistive technology also make them themeable and framework-agnostic — they\nare the same source of truth, not a separate effort.",{"path":213,"title":214,"description":215},"\u002Foverview\u002Fapplicability","Applicability","oriUI is three independently-consumable layers woven around one token contract. The promise is\nprototype fast, scale without rewriting: reach for the styled Vue components first, drop to the\nheadless behaviour when you need control, or drop to the standalone CSS when you leave Vue entirely —\nwithout changing your design tokens. This page maps each layer to where it runs.",{"path":217,"title":218,"description":219},"\u002Foverview\u002Fcheat-sheet","Cheat sheet","Everything in one page — install, the class model, every component, and the design tokens. For the\nmachine-readable version (e.g. to paste into an AI), fetch \u002Fllms.txt (index) or\n\u002Fllms-full.txt (every page concatenated).",{"path":221,"title":222,"description":223},"\u002Foverview\u002Fcomparisons","Idea & comparisons","oriUI's one-line idea — prototype fast, scale without rewriting — falls out of a single\narchitectural choice: three layers woven around one token contract, so you can change depth\n(styled → headless → CSS) without changing your design system. This page sets that idea next to the\nlibraries oriUI learns from, and is honest about where it does and doesn't compete.",{"path":225,"title":226,"description":227},"\u002Foverview\u002Fget-started","Get started","oriUI is a layered Vue 3 UI library. Install it and import only what you need.",{"path":229,"title":230,"description":231},"\u002Foverview\u002Finstallation","Installation","oriUI is three layers in two packages. Install only the layer you need — they share one token\ncontract, so you can add another later without reworking what you built.",{"path":233,"title":234,"description":235},"\u002Foverview\u002Fintroduction","Introduction","oriUI (織り, ori — \"weaving\") is a layered Vue 3 UI library. The idea in one line:\nprototype fast, scale without rewriting. Start with ready-made styled components; when you need\nmore control, drop down to the behavior or the raw CSS — without throwing away your work, because\nevery layer is woven around the same design tokens.",{"id":237,"title":90,"body":238,"description":91,"extension":722,"meta":3888,"navigation":2160,"path":89,"seo":3889,"stem":3890,"__hash__":3891},"docs\u002Fcomponents\u002Fselect.md",{"type":239,"value":240,"toc":3870},"minimark",[241,245,298,336,341,351,355,359,365,688,692,710,939,943,957,1088,1092,1101,1408,1412,1423,1650,1654,1667,2012,2016,2028,2200,2204,2241,2597,2601,2604,3122,3125,3128,3271,3361,3364,3373,3378,3720,3724,3744,3780,3797,3825,3829,3866],[242,243,90],"h1",{"id":244},"select",[246,247,248,249,253,254,257,258,260,261,264,265,264,268,271,272,275,276,257,279,282,283,264,286,289,290,293,294,297],"p",{},"A native-first styled select control with ",[250,251,252],"code",{},"v-model",". The browser owns the dropdown, full keyboard\ninteraction, type-ahead, and all ARIA semantics — oriUI only styles the closed control and draws a\ndecorative chevron. It shares the form-control contract of ",[255,256,58],"a",{"href":57}," and\n",[255,259,126],{"href":125},": a built-in ",[250,262,263],{},"label",", ",[250,266,267],{},"hint",[250,269,270],{},"error",", and ",[250,273,274],{},"required"," asterisk, all\nwired for accessibility. State is expressed through real attributes — native ",[250,277,278],{},"disabled",[250,280,281],{},"aria-invalid=\"true\""," (not classes) — and arbitrary native attrs (",[250,284,285],{},"name",[250,287,288],{},"autocomplete",", …) fall\nthrough to the ",[250,291,292],{},"\u003Cselect>"," via ",[250,295,296],{},"inheritAttrs:false",".",[246,299,300,301,305,306,310,311,316,317,321,322,327,328,331,332,335],{},"The examples are organised by ",[302,303,304],"strong",{},"layer",": the ",[255,307,309],{"href":308},"#classes","class reference"," is the standalone\n",[302,312,313],{},[250,314,315],{},"@oriui\u002Fcss"," layer, and the ",[255,318,320],{"href":319},"#framework-api","Framework API"," is the ",[302,323,324],{},[250,325,326],{},"@oriui\u002Fvue"," component. Every\nexample is live — flip its code between ",[302,329,330],{},"HTML"," (the standalone classes, also your htmx \u002F Astro \u002F Svelte \u002F\nplain-HTML usage), ",[302,333,334],{},"Vue","; HTML is the default.",[337,338,340],"h2",{"id":339},"classes","Classes",[246,342,343,344,347,348,350],{},"A select is a block wrapper plus single-class token utilities — one class repoints one token, no base\nclass needed. The ",[250,345,346],{},"ori-color_*"," accent drives the focus ring; the idle border is a neutral,\ntheme-aware blend. The Vue props in ",[255,349,320],{"href":319}," map 1:1 to these.",[352,353],"class-table",{":rows":354},"[{\"class\":\"ori-select\",\"type\":\"Block\",\"description\":\"Column wrapper (label, control, hint\u002Ferror); carries the ori-color and ori-font-size utility classes.\"},{\"class\":\"ori-color_*\",\"type\":\"Color\",\"description\":\"primary (default) · secondary · success · warn · danger · info · surface (focus ring accent).\"},{\"class\":\"ori-select_* (size)\",\"type\":\"Size\",\"description\":\"xs · sm · md (default) · lg · xl · xxl (control height sugar on the wrapper).\"},{\"class\":\"ori-size-radius_*\",\"type\":\"Radius\",\"description\":\"zero · xs · sm · md (default) · lg · xl · rounded (control corners, on the inner select element).\"},{\"class\":\"ori-font-size_*\",\"type\":\"Font\",\"description\":\"xs · sm · md (default) · lg · xl · xxl (text scale, driven by size prop).\"},{\"class\":\"ori-select__control\",\"type\":\"Part\",\"description\":\"The native select element; carries ori-size-radius utility.\"},{\"class\":\"ori-select__chevron\",\"type\":\"Part\",\"description\":\"Decorative aria-hidden chevron (inline SVG), absolutely positioned at inset-inline-end.\"},{\"class\":\"ori-select__label · ori-select__required · ori-select__control-wrap · ori-select__hint · ori-select__error\",\"type\":\"Part\",\"description\":\"label \u002F required asterisk \u002F control+chevron wrapper \u002F helper text \u002F error message (role=alert).\"},{\"class\":\"ori-select_fluid\",\"type\":\"Layout\",\"description\":\"Stretches the wrapper to full width of its container.\"},{\"class\":\"disabled · aria-invalid\",\"type\":\"State\",\"description\":\"real attributes, not classes\"}]",[337,356,358],{"id":357},"colors","Colors",[246,360,361,362,364],{},"The ",[250,363,346],{}," class controls the focus ring accent.",[366,367,368,373,377,381,385,389,393,535],"example",{},[369,370],"ori-select",{":options":371,"color":372},"[{\"label\":\"Primary\",\"value\":\"primary\"}]","primary",[369,374],{":options":375,"color":376},"[{\"label\":\"Secondary\",\"value\":\"secondary\"}]","secondary",[369,378],{":options":379,"color":380},"[{\"label\":\"Success\",\"value\":\"success\"}]","success",[369,382],{":options":383,"color":384},"[{\"label\":\"Warn\",\"value\":\"warn\"}]","warn",[369,386],{":options":387,"color":388},"[{\"label\":\"Danger\",\"value\":\"danger\"}]","danger",[369,390],{":options":391,"color":392},"[{\"label\":\"Info\",\"value\":\"info\"}]","info",[394,395,397],"template",{"v-slot:vue":396},"",[398,399,403],"pre",{"className":400,"code":401,"language":402,"meta":396,"style":396},"language-vue shiki shiki-themes github-light github-dark","\u003COriSelect v-model=\"value\" color=\"primary\" :options=\"options\" \u002F>\n\u003COriSelect v-model=\"value\" color=\"danger\" :options=\"options\" \u002F>\n\u003COriSelect v-model=\"value\" color=\"info\" :options=\"options\" \u002F>\n","vue",[250,404,405,459,497],{"__ignoreMap":396},[406,407,410,414,418,422,425,429,432,434,437,439,442,445,448,450,452,454,456],"span",{"class":408,"line":409},"line",1,[406,411,413],{"class":412},"sVt8B","\u003C",[406,415,417],{"class":416},"s9eBZ","OriSelect",[406,419,421],{"class":420},"sScJk"," v-model",[406,423,424],{"class":412},"=",[406,426,428],{"class":427},"sZZnC","\"",[406,430,431],{"class":412},"value",[406,433,428],{"class":427},[406,435,436],{"class":420}," color",[406,438,424],{"class":412},[406,440,441],{"class":427},"\"primary\"",[406,443,444],{"class":412}," :",[406,446,447],{"class":420},"options",[406,449,424],{"class":412},[406,451,428],{"class":427},[406,453,447],{"class":412},[406,455,428],{"class":427},[406,457,458],{"class":412}," \u002F>\n",[406,460,462,464,466,468,470,472,474,476,478,480,483,485,487,489,491,493,495],{"class":408,"line":461},2,[406,463,413],{"class":412},[406,465,417],{"class":416},[406,467,421],{"class":420},[406,469,424],{"class":412},[406,471,428],{"class":427},[406,473,431],{"class":412},[406,475,428],{"class":427},[406,477,436],{"class":420},[406,479,424],{"class":412},[406,481,482],{"class":427},"\"danger\"",[406,484,444],{"class":412},[406,486,447],{"class":420},[406,488,424],{"class":412},[406,490,428],{"class":427},[406,492,447],{"class":412},[406,494,428],{"class":427},[406,496,458],{"class":412},[406,498,500,502,504,506,508,510,512,514,516,518,521,523,525,527,529,531,533],{"class":408,"line":499},3,[406,501,413],{"class":412},[406,503,417],{"class":416},[406,505,421],{"class":420},[406,507,424],{"class":412},[406,509,428],{"class":427},[406,511,431],{"class":412},[406,513,428],{"class":427},[406,515,436],{"class":420},[406,517,424],{"class":412},[406,519,520],{"class":427},"\"info\"",[406,522,444],{"class":412},[406,524,447],{"class":420},[406,526,424],{"class":412},[406,528,428],{"class":427},[406,530,447],{"class":412},[406,532,428],{"class":427},[406,534,458],{"class":412},[394,536,537],{"v-slot:html":396},[398,538,542],{"className":539,"code":540,"language":541,"meta":396,"style":396},"language-html shiki shiki-themes github-light github-dark","\u003C!-- swap the color: ori-color_primary → _secondary \u002F _success \u002F _warn \u002F _danger \u002F _info -->\n\u003Cdiv class=\"ori-select ori-color_danger\">\n    \u003Cdiv class=\"ori-select__control-wrap\">\n        \u003Cselect class=\"ori-select__control ori-size-radius_md\">\n            \u003Coption value=\"danger\">Danger\u003C\u002Foption>\n        \u003C\u002Fselect>\n        \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html",[250,543,544,550,568,584,601,624,634,669,679],{"__ignoreMap":396},[406,545,546],{"class":408,"line":409},[406,547,549],{"class":548},"sJ8bj","\u003C!-- swap the color: ori-color_primary → _secondary \u002F _success \u002F _warn \u002F _danger \u002F _info -->\n",[406,551,552,554,557,560,562,565],{"class":408,"line":461},[406,553,413],{"class":412},[406,555,556],{"class":416},"div",[406,558,559],{"class":420}," class",[406,561,424],{"class":412},[406,563,564],{"class":427},"\"ori-select ori-color_danger\"",[406,566,567],{"class":412},">\n",[406,569,570,573,575,577,579,582],{"class":408,"line":499},[406,571,572],{"class":412},"    \u003C",[406,574,556],{"class":416},[406,576,559],{"class":420},[406,578,424],{"class":412},[406,580,581],{"class":427},"\"ori-select__control-wrap\"",[406,583,567],{"class":412},[406,585,587,590,592,594,596,599],{"class":408,"line":586},4,[406,588,589],{"class":412},"        \u003C",[406,591,244],{"class":416},[406,593,559],{"class":420},[406,595,424],{"class":412},[406,597,598],{"class":427},"\"ori-select__control ori-size-radius_md\"",[406,600,567],{"class":412},[406,602,604,607,610,613,615,617,620,622],{"class":408,"line":603},5,[406,605,606],{"class":412},"            \u003C",[406,608,609],{"class":416},"option",[406,611,612],{"class":420}," value",[406,614,424],{"class":412},[406,616,482],{"class":427},[406,618,619],{"class":412},">Danger\u003C\u002F",[406,621,609],{"class":416},[406,623,567],{"class":412},[406,625,627,630,632],{"class":408,"line":626},6,[406,628,629],{"class":412},"        \u003C\u002F",[406,631,244],{"class":416},[406,633,567],{"class":412},[406,635,637,639,641,643,645,648,651,653,656,659,662,665,667],{"class":408,"line":636},7,[406,638,589],{"class":412},[406,640,406],{"class":416},[406,642,559],{"class":420},[406,644,424],{"class":412},[406,646,647],{"class":427},"\"ori-select__chevron\"",[406,649,650],{"class":420}," aria-hidden",[406,652,424],{"class":412},[406,654,655],{"class":427},"\"true\"",[406,657,658],{"class":412},">",[406,660,661],{"class":548},"\u003C!-- chevron SVG -->",[406,663,664],{"class":412},"\u003C\u002F",[406,666,406],{"class":416},[406,668,567],{"class":412},[406,670,672,675,677],{"class":408,"line":671},8,[406,673,674],{"class":412},"    \u003C\u002F",[406,676,556],{"class":416},[406,678,567],{"class":412},[406,680,682,684,686],{"class":408,"line":681},9,[406,683,664],{"class":412},[406,685,556],{"class":416},[406,687,567],{"class":412},[337,689,691],{"id":690},"sizes","Sizes",[246,693,694,697,698,701,702,705,706,709],{},[250,695,696],{},"xs"," → ",[250,699,700],{},"xxl",". The size drives both the control height (",[250,703,704],{},"ori-select_*"," sugar on the wrapper) and the\ntext scale (",[250,707,708],{},"ori-font-size_*",").",[366,711,712,715,719,723,727,731,813],{},[369,713],{":options":714,"size":696},"[{\"label\":\"Extra small\",\"value\":\"xs\"}]",[369,716],{":options":717,"size":718},"[{\"label\":\"Small\",\"value\":\"sm\"}]","sm",[369,720],{":options":721,"size":722},"[{\"label\":\"Medium\",\"value\":\"md\"}]","md",[369,724],{":options":725,"size":726},"[{\"label\":\"Large\",\"value\":\"lg\"}]","lg",[369,728],{":options":729,"size":730},"[{\"label\":\"Extra large\",\"value\":\"xl\"}]","xl",[394,732,733],{"v-slot:vue":396},[398,734,736],{"className":400,"code":735,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"value\" size=\"sm\" :options=\"options\" \u002F>\n\u003COriSelect v-model=\"value\" size=\"xl\" :options=\"options\" \u002F>\n",[250,737,738,776],{"__ignoreMap":396},[406,739,740,742,744,746,748,750,752,754,757,759,762,764,766,768,770,772,774],{"class":408,"line":409},[406,741,413],{"class":412},[406,743,417],{"class":416},[406,745,421],{"class":420},[406,747,424],{"class":412},[406,749,428],{"class":427},[406,751,431],{"class":412},[406,753,428],{"class":427},[406,755,756],{"class":420}," size",[406,758,424],{"class":412},[406,760,761],{"class":427},"\"sm\"",[406,763,444],{"class":412},[406,765,447],{"class":420},[406,767,424],{"class":412},[406,769,428],{"class":427},[406,771,447],{"class":412},[406,773,428],{"class":427},[406,775,458],{"class":412},[406,777,778,780,782,784,786,788,790,792,794,796,799,801,803,805,807,809,811],{"class":408,"line":461},[406,779,413],{"class":412},[406,781,417],{"class":416},[406,783,421],{"class":420},[406,785,424],{"class":412},[406,787,428],{"class":427},[406,789,431],{"class":412},[406,791,428],{"class":427},[406,793,756],{"class":420},[406,795,424],{"class":412},[406,797,798],{"class":427},"\"xl\"",[406,800,444],{"class":412},[406,802,447],{"class":420},[406,804,424],{"class":412},[406,806,428],{"class":427},[406,808,447],{"class":412},[406,810,428],{"class":427},[406,812,458],{"class":412},[394,814,815],{"v-slot:html":396},[398,816,818],{"className":539,"code":817,"language":541,"meta":396,"style":396},"\u003C!-- ori-select_* drives height; ori-font-size_* scales the text; both use the same size token -->\n\u003Cdiv class=\"ori-select ori-color_primary ori-select_xl ori-font-size_xl\">\n    \u003Cdiv class=\"ori-select__control-wrap\">\n        \u003Cselect class=\"ori-select__control ori-size-radius_md\">\n            \u003Coption value=\"xl\">Extra large\u003C\u002Foption>\n        \u003C\u002Fselect>\n        \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[250,819,820,825,840,854,868,887,895,923,931],{"__ignoreMap":396},[406,821,822],{"class":408,"line":409},[406,823,824],{"class":548},"\u003C!-- ori-select_* drives height; ori-font-size_* scales the text; both use the same size token -->\n",[406,826,827,829,831,833,835,838],{"class":408,"line":461},[406,828,413],{"class":412},[406,830,556],{"class":416},[406,832,559],{"class":420},[406,834,424],{"class":412},[406,836,837],{"class":427},"\"ori-select ori-color_primary ori-select_xl ori-font-size_xl\"",[406,839,567],{"class":412},[406,841,842,844,846,848,850,852],{"class":408,"line":499},[406,843,572],{"class":412},[406,845,556],{"class":416},[406,847,559],{"class":420},[406,849,424],{"class":412},[406,851,581],{"class":427},[406,853,567],{"class":412},[406,855,856,858,860,862,864,866],{"class":408,"line":586},[406,857,589],{"class":412},[406,859,244],{"class":416},[406,861,559],{"class":420},[406,863,424],{"class":412},[406,865,598],{"class":427},[406,867,567],{"class":412},[406,869,870,872,874,876,878,880,883,885],{"class":408,"line":603},[406,871,606],{"class":412},[406,873,609],{"class":416},[406,875,612],{"class":420},[406,877,424],{"class":412},[406,879,798],{"class":427},[406,881,882],{"class":412},">Extra large\u003C\u002F",[406,884,609],{"class":416},[406,886,567],{"class":412},[406,888,889,891,893],{"class":408,"line":626},[406,890,629],{"class":412},[406,892,244],{"class":416},[406,894,567],{"class":412},[406,896,897,899,901,903,905,907,909,911,913,915,917,919,921],{"class":408,"line":636},[406,898,589],{"class":412},[406,900,406],{"class":416},[406,902,559],{"class":420},[406,904,424],{"class":412},[406,906,647],{"class":427},[406,908,650],{"class":420},[406,910,424],{"class":412},[406,912,655],{"class":427},[406,914,658],{"class":412},[406,916,661],{"class":548},[406,918,664],{"class":412},[406,920,406],{"class":416},[406,922,567],{"class":412},[406,924,925,927,929],{"class":408,"line":671},[406,926,674],{"class":412},[406,928,556],{"class":416},[406,930,567],{"class":412},[406,932,933,935,937],{"class":408,"line":681},[406,934,664],{"class":412},[406,936,556],{"class":416},[406,938,567],{"class":412},[337,940,942],{"id":941},"radius","Radius",[246,944,945,946,949,950,952,953,956],{},"From ",[250,947,948],{},"zero"," (square) through the default ",[250,951,722],{}," to ",[250,954,955],{},"rounded"," (pill-shaped control).",[366,958,959,962,964,966,968,971,1053],{},[369,960],{":options":961,"radius":948},"[{\"label\":\"Zero\",\"value\":\"zero\"}]",[369,963],{":options":717,"radius":718},[369,965],{":options":721,"radius":722},[369,967],{":options":725,"radius":726},[369,969],{":options":970,"radius":955},"[{\"label\":\"Rounded\",\"value\":\"rounded\"}]",[394,972,973],{"v-slot:vue":396},[398,974,976],{"className":400,"code":975,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"value\" radius=\"zero\" :options=\"options\" \u002F>\n\u003COriSelect v-model=\"value\" radius=\"rounded\" :options=\"options\" \u002F>\n",[250,977,978,1016],{"__ignoreMap":396},[406,979,980,982,984,986,988,990,992,994,997,999,1002,1004,1006,1008,1010,1012,1014],{"class":408,"line":409},[406,981,413],{"class":412},[406,983,417],{"class":416},[406,985,421],{"class":420},[406,987,424],{"class":412},[406,989,428],{"class":427},[406,991,431],{"class":412},[406,993,428],{"class":427},[406,995,996],{"class":420}," radius",[406,998,424],{"class":412},[406,1000,1001],{"class":427},"\"zero\"",[406,1003,444],{"class":412},[406,1005,447],{"class":420},[406,1007,424],{"class":412},[406,1009,428],{"class":427},[406,1011,447],{"class":412},[406,1013,428],{"class":427},[406,1015,458],{"class":412},[406,1017,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1039,1041,1043,1045,1047,1049,1051],{"class":408,"line":461},[406,1019,413],{"class":412},[406,1021,417],{"class":416},[406,1023,421],{"class":420},[406,1025,424],{"class":412},[406,1027,428],{"class":427},[406,1029,431],{"class":412},[406,1031,428],{"class":427},[406,1033,996],{"class":420},[406,1035,424],{"class":412},[406,1037,1038],{"class":427},"\"rounded\"",[406,1040,444],{"class":412},[406,1042,447],{"class":420},[406,1044,424],{"class":412},[406,1046,428],{"class":427},[406,1048,447],{"class":412},[406,1050,428],{"class":427},[406,1052,458],{"class":412},[394,1054,1055],{"v-slot:html":396},[398,1056,1058],{"className":539,"code":1057,"language":541,"meta":396,"style":396},"\u003Cselect class=\"ori-select__control ori-size-radius_zero\">\n    …\n\u003C\u002Fselect>\n",[250,1059,1060,1075,1080],{"__ignoreMap":396},[406,1061,1062,1064,1066,1068,1070,1073],{"class":408,"line":409},[406,1063,413],{"class":412},[406,1065,244],{"class":416},[406,1067,559],{"class":420},[406,1069,424],{"class":412},[406,1071,1072],{"class":427},"\"ori-select__control ori-size-radius_zero\"",[406,1074,567],{"class":412},[406,1076,1077],{"class":408,"line":461},[406,1078,1079],{"class":412},"    …\n",[406,1081,1082,1084,1086],{"class":408,"line":499},[406,1083,664],{"class":412},[406,1085,244],{"class":416},[406,1087,567],{"class":412},[337,1089,1091],{"id":1090},"placeholder","Placeholder",[246,1093,1094,1095,1097,1098,1100],{},"A ",[250,1096,1090],{}," renders a disabled, non-reselectable first option that acts as a prompt. It carries\n",[250,1099,278],{}," so it cannot be chosen after the user has made a selection.",[366,1102,1103,1107,1218],{},[369,1104],{":options":1105,"placeholder":1106},"[{\"label\":\"France\",\"value\":\"fr\"},{\"label\":\"Germany\",\"value\":\"de\"},{\"label\":\"Japan\",\"value\":\"jp\"}]","Choose a country",[394,1108,1109],{"v-slot:vue":396},[398,1110,1112],{"className":400,"code":1111,"language":402,"meta":396,"style":396},"\u003COriSelect\n    v-model=\"country\"\n    placeholder=\"Choose a country\"\n    :options=\"[\n        { label: 'France', value: 'fr' },\n        { label: 'Germany', value: 'de' },\n        { label: 'Japan', value: 'jp' }\n    ]\"\n\u002F>\n",[250,1113,1114,1121,1136,1146,1160,1177,1191,1206,1213],{"__ignoreMap":396},[406,1115,1116,1118],{"class":408,"line":409},[406,1117,413],{"class":412},[406,1119,1120],{"class":416},"OriSelect\n",[406,1122,1123,1126,1128,1130,1133],{"class":408,"line":461},[406,1124,1125],{"class":420},"    v-model",[406,1127,424],{"class":412},[406,1129,428],{"class":427},[406,1131,1132],{"class":412},"country",[406,1134,1135],{"class":427},"\"\n",[406,1137,1138,1141,1143],{"class":408,"line":499},[406,1139,1140],{"class":420},"    placeholder",[406,1142,424],{"class":412},[406,1144,1145],{"class":427},"\"Choose a country\"\n",[406,1147,1148,1151,1153,1155,1157],{"class":408,"line":586},[406,1149,1150],{"class":412},"    :",[406,1152,447],{"class":420},[406,1154,424],{"class":412},[406,1156,428],{"class":427},[406,1158,1159],{"class":412},"[\n",[406,1161,1162,1165,1168,1171,1174],{"class":408,"line":603},[406,1163,1164],{"class":412},"        { label: ",[406,1166,1167],{"class":427},"'France'",[406,1169,1170],{"class":412},", value: ",[406,1172,1173],{"class":427},"'fr'",[406,1175,1176],{"class":412}," },\n",[406,1178,1179,1181,1184,1186,1189],{"class":408,"line":626},[406,1180,1164],{"class":412},[406,1182,1183],{"class":427},"'Germany'",[406,1185,1170],{"class":412},[406,1187,1188],{"class":427},"'de'",[406,1190,1176],{"class":412},[406,1192,1193,1195,1198,1200,1203],{"class":408,"line":636},[406,1194,1164],{"class":412},[406,1196,1197],{"class":427},"'Japan'",[406,1199,1170],{"class":412},[406,1201,1202],{"class":427},"'jp'",[406,1204,1205],{"class":412}," }\n",[406,1207,1208,1211],{"class":408,"line":671},[406,1209,1210],{"class":412},"    ]",[406,1212,1135],{"class":427},[406,1214,1215],{"class":408,"line":681},[406,1216,1217],{"class":412},"\u002F>\n",[394,1219,1220],{"v-slot:html":396},[398,1221,1223],{"className":539,"code":1222,"language":541,"meta":396,"style":396},"\u003Cdiv class=\"ori-select ori-color_primary\">\n    \u003Cdiv class=\"ori-select__control-wrap\">\n        \u003Cselect class=\"ori-select__control ori-size-radius_md\">\n            \u003Coption value=\"\" disabled selected>Choose a country\u003C\u002Foption>\n            \u003Coption value=\"fr\">France\u003C\u002Foption>\n            \u003Coption value=\"de\">Germany\u003C\u002Foption>\n            \u003Coption value=\"jp\">Japan\u003C\u002Foption>\n        \u003C\u002Fselect>\n        \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[250,1224,1225,1240,1254,1268,1294,1314,1334,1354,1362,1390,1399],{"__ignoreMap":396},[406,1226,1227,1229,1231,1233,1235,1238],{"class":408,"line":409},[406,1228,413],{"class":412},[406,1230,556],{"class":416},[406,1232,559],{"class":420},[406,1234,424],{"class":412},[406,1236,1237],{"class":427},"\"ori-select ori-color_primary\"",[406,1239,567],{"class":412},[406,1241,1242,1244,1246,1248,1250,1252],{"class":408,"line":461},[406,1243,572],{"class":412},[406,1245,556],{"class":416},[406,1247,559],{"class":420},[406,1249,424],{"class":412},[406,1251,581],{"class":427},[406,1253,567],{"class":412},[406,1255,1256,1258,1260,1262,1264,1266],{"class":408,"line":499},[406,1257,589],{"class":412},[406,1259,244],{"class":416},[406,1261,559],{"class":420},[406,1263,424],{"class":412},[406,1265,598],{"class":427},[406,1267,567],{"class":412},[406,1269,1270,1272,1274,1276,1278,1281,1284,1287,1290,1292],{"class":408,"line":586},[406,1271,606],{"class":412},[406,1273,609],{"class":416},[406,1275,612],{"class":420},[406,1277,424],{"class":412},[406,1279,1280],{"class":427},"\"\"",[406,1282,1283],{"class":420}," disabled",[406,1285,1286],{"class":420}," selected",[406,1288,1289],{"class":412},">Choose a country\u003C\u002F",[406,1291,609],{"class":416},[406,1293,567],{"class":412},[406,1295,1296,1298,1300,1302,1304,1307,1310,1312],{"class":408,"line":603},[406,1297,606],{"class":412},[406,1299,609],{"class":416},[406,1301,612],{"class":420},[406,1303,424],{"class":412},[406,1305,1306],{"class":427},"\"fr\"",[406,1308,1309],{"class":412},">France\u003C\u002F",[406,1311,609],{"class":416},[406,1313,567],{"class":412},[406,1315,1316,1318,1320,1322,1324,1327,1330,1332],{"class":408,"line":626},[406,1317,606],{"class":412},[406,1319,609],{"class":416},[406,1321,612],{"class":420},[406,1323,424],{"class":412},[406,1325,1326],{"class":427},"\"de\"",[406,1328,1329],{"class":412},">Germany\u003C\u002F",[406,1331,609],{"class":416},[406,1333,567],{"class":412},[406,1335,1336,1338,1340,1342,1344,1347,1350,1352],{"class":408,"line":636},[406,1337,606],{"class":412},[406,1339,609],{"class":416},[406,1341,612],{"class":420},[406,1343,424],{"class":412},[406,1345,1346],{"class":427},"\"jp\"",[406,1348,1349],{"class":412},">Japan\u003C\u002F",[406,1351,609],{"class":416},[406,1353,567],{"class":412},[406,1355,1356,1358,1360],{"class":408,"line":671},[406,1357,629],{"class":412},[406,1359,244],{"class":416},[406,1361,567],{"class":412},[406,1363,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388],{"class":408,"line":681},[406,1365,589],{"class":412},[406,1367,406],{"class":416},[406,1369,559],{"class":420},[406,1371,424],{"class":412},[406,1373,647],{"class":427},[406,1375,650],{"class":420},[406,1377,424],{"class":412},[406,1379,655],{"class":427},[406,1381,658],{"class":412},[406,1383,661],{"class":548},[406,1385,664],{"class":412},[406,1387,406],{"class":416},[406,1389,567],{"class":412},[406,1391,1393,1395,1397],{"class":408,"line":1392},10,[406,1394,674],{"class":412},[406,1396,556],{"class":416},[406,1398,567],{"class":412},[406,1400,1402,1404,1406],{"class":408,"line":1401},11,[406,1403,664],{"class":412},[406,1405,556],{"class":416},[406,1407,567],{"class":412},[337,1409,1411],{"id":1410},"options-prop","Options prop",[246,1413,1414,1415,1418,1419,1422],{},"Pass a flat array of ",[250,1416,1417],{},"{ label, value, disabled? }"," objects. The component renders them as ",[250,1420,1421],{},"\u003Coption>","\nelements, with disabled items available but not selectable.",[366,1424,1425,1429,1535],{},[369,1426],{":options":1427,"placeholder":1428},"[{\"label\":\"Free\",\"value\":\"free\"},{\"label\":\"Pro\",\"value\":\"pro\"},{\"label\":\"Enterprise (contact us)\",\"value\":\"ent\",\"disabled\":true}]","Pick a plan",[394,1430,1431],{"v-slot:vue":396},[398,1432,1434],{"className":400,"code":1433,"language":402,"meta":396,"style":396},"\u003COriSelect\n    v-model=\"plan\"\n    placeholder=\"Pick a plan\"\n    :options=\"[\n        { label: 'Free', value: 'free' },\n        { label: 'Pro', value: 'pro' },\n        { label: 'Enterprise (contact us)', value: 'ent', disabled: true }\n    ]\"\n\u002F>\n",[250,1435,1436,1442,1455,1464,1476,1490,1504,1525,1531],{"__ignoreMap":396},[406,1437,1438,1440],{"class":408,"line":409},[406,1439,413],{"class":412},[406,1441,1120],{"class":416},[406,1443,1444,1446,1448,1450,1453],{"class":408,"line":461},[406,1445,1125],{"class":420},[406,1447,424],{"class":412},[406,1449,428],{"class":427},[406,1451,1452],{"class":412},"plan",[406,1454,1135],{"class":427},[406,1456,1457,1459,1461],{"class":408,"line":499},[406,1458,1140],{"class":420},[406,1460,424],{"class":412},[406,1462,1463],{"class":427},"\"Pick a plan\"\n",[406,1465,1466,1468,1470,1472,1474],{"class":408,"line":586},[406,1467,1150],{"class":412},[406,1469,447],{"class":420},[406,1471,424],{"class":412},[406,1473,428],{"class":427},[406,1475,1159],{"class":412},[406,1477,1478,1480,1483,1485,1488],{"class":408,"line":603},[406,1479,1164],{"class":412},[406,1481,1482],{"class":427},"'Free'",[406,1484,1170],{"class":412},[406,1486,1487],{"class":427},"'free'",[406,1489,1176],{"class":412},[406,1491,1492,1494,1497,1499,1502],{"class":408,"line":626},[406,1493,1164],{"class":412},[406,1495,1496],{"class":427},"'Pro'",[406,1498,1170],{"class":412},[406,1500,1501],{"class":427},"'pro'",[406,1503,1176],{"class":412},[406,1505,1506,1508,1511,1513,1516,1519,1523],{"class":408,"line":636},[406,1507,1164],{"class":412},[406,1509,1510],{"class":427},"'Enterprise (contact us)'",[406,1512,1170],{"class":412},[406,1514,1515],{"class":427},"'ent'",[406,1517,1518],{"class":412},", disabled: ",[406,1520,1522],{"class":1521},"sj4cs","true",[406,1524,1205],{"class":412},[406,1526,1527,1529],{"class":408,"line":671},[406,1528,1210],{"class":412},[406,1530,1135],{"class":427},[406,1532,1533],{"class":408,"line":681},[406,1534,1217],{"class":412},[394,1536,1537],{"v-slot:html":396},[398,1538,1540],{"className":539,"code":1539,"language":541,"meta":396,"style":396},"\u003Cselect class=\"ori-select__control …\">\n    \u003Coption value=\"\" disabled selected>Pick a plan\u003C\u002Foption>\n    \u003Coption value=\"free\">Free\u003C\u002Foption>\n    \u003Coption value=\"pro\">Pro\u003C\u002Foption>\n    \u003Coption value=\"ent\" disabled>Enterprise (contact us)\u003C\u002Foption>\n\u003C\u002Fselect>\n",[250,1541,1542,1557,1580,1600,1620,1642],{"__ignoreMap":396},[406,1543,1544,1546,1548,1550,1552,1555],{"class":408,"line":409},[406,1545,413],{"class":412},[406,1547,244],{"class":416},[406,1549,559],{"class":420},[406,1551,424],{"class":412},[406,1553,1554],{"class":427},"\"ori-select__control …\"",[406,1556,567],{"class":412},[406,1558,1559,1561,1563,1565,1567,1569,1571,1573,1576,1578],{"class":408,"line":461},[406,1560,572],{"class":412},[406,1562,609],{"class":416},[406,1564,612],{"class":420},[406,1566,424],{"class":412},[406,1568,1280],{"class":427},[406,1570,1283],{"class":420},[406,1572,1286],{"class":420},[406,1574,1575],{"class":412},">Pick a plan\u003C\u002F",[406,1577,609],{"class":416},[406,1579,567],{"class":412},[406,1581,1582,1584,1586,1588,1590,1593,1596,1598],{"class":408,"line":499},[406,1583,572],{"class":412},[406,1585,609],{"class":416},[406,1587,612],{"class":420},[406,1589,424],{"class":412},[406,1591,1592],{"class":427},"\"free\"",[406,1594,1595],{"class":412},">Free\u003C\u002F",[406,1597,609],{"class":416},[406,1599,567],{"class":412},[406,1601,1602,1604,1606,1608,1610,1613,1616,1618],{"class":408,"line":586},[406,1603,572],{"class":412},[406,1605,609],{"class":416},[406,1607,612],{"class":420},[406,1609,424],{"class":412},[406,1611,1612],{"class":427},"\"pro\"",[406,1614,1615],{"class":412},">Pro\u003C\u002F",[406,1617,609],{"class":416},[406,1619,567],{"class":412},[406,1621,1622,1624,1626,1628,1630,1633,1635,1638,1640],{"class":408,"line":603},[406,1623,572],{"class":412},[406,1625,609],{"class":416},[406,1627,612],{"class":420},[406,1629,424],{"class":412},[406,1631,1632],{"class":427},"\"ent\"",[406,1634,1283],{"class":420},[406,1636,1637],{"class":412},">Enterprise (contact us)\u003C\u002F",[406,1639,609],{"class":416},[406,1641,567],{"class":412},[406,1643,1644,1646,1648],{"class":408,"line":626},[406,1645,664],{"class":412},[406,1647,244],{"class":416},[406,1649,567],{"class":412},[337,1651,1653],{"id":1652},"default-slot","Default slot",[246,1655,1656,1657,1659,1660,1663,1664,1666],{},"Provide hand-written ",[250,1658,1421],{}," \u002F ",[250,1661,1662],{},"\u003Coptgroup>"," markup as the default slot. When the slot is used it\nreplaces the ",[250,1665,447],{},"-prop rendering; the placeholder option (if any) still renders before the slot.",[366,1668,1669,1672,1753],{},[369,1670],{"placeholder":1671},"Pick a city",[394,1673,1674],{"v-slot:vue":396},[398,1675,1677],{"className":400,"code":1676,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"city\" placeholder=\"Pick a city\">\n    \u003Coptgroup label=\"Europe\">\n        \u003Coption value=\"par\">Paris\u003C\u002Foption>\n        \u003Coption value=\"ber\">Berlin\u003C\u002Foption>\n    \u003C\u002Foptgroup>\n    \u003Coptgroup label=\"Asia\">\n        \u003Coption value=\"tok\">Tokyo\u003C\u002Foption>\n        \u003Coption value=\"bkk\">Bangkok\u003C\u002Foption>\n    \u003C\u002Foptgroup>\n\u003C\u002FOriSelect>\n",[250,1678,1679,1706,1711,1716,1721,1726,1731,1736,1741,1745],{"__ignoreMap":396},[406,1680,1681,1683,1685,1687,1689,1691,1694,1696,1699,1701,1704],{"class":408,"line":409},[406,1682,413],{"class":412},[406,1684,417],{"class":416},[406,1686,421],{"class":420},[406,1688,424],{"class":412},[406,1690,428],{"class":427},[406,1692,1693],{"class":412},"city",[406,1695,428],{"class":427},[406,1697,1698],{"class":420}," placeholder",[406,1700,424],{"class":412},[406,1702,1703],{"class":427},"\"Pick a city\"",[406,1705,567],{"class":412},[406,1707,1708],{"class":408,"line":461},[406,1709,1710],{"class":412},"    \u003Coptgroup label=\"Europe\">\n",[406,1712,1713],{"class":408,"line":499},[406,1714,1715],{"class":412},"        \u003Coption value=\"par\">Paris\u003C\u002Foption>\n",[406,1717,1718],{"class":408,"line":586},[406,1719,1720],{"class":412},"        \u003Coption value=\"ber\">Berlin\u003C\u002Foption>\n",[406,1722,1723],{"class":408,"line":603},[406,1724,1725],{"class":412},"    \u003C\u002Foptgroup>\n",[406,1727,1728],{"class":408,"line":626},[406,1729,1730],{"class":412},"    \u003Coptgroup label=\"Asia\">\n",[406,1732,1733],{"class":408,"line":636},[406,1734,1735],{"class":412},"        \u003Coption value=\"tok\">Tokyo\u003C\u002Foption>\n",[406,1737,1738],{"class":408,"line":671},[406,1739,1740],{"class":412},"        \u003Coption value=\"bkk\">Bangkok\u003C\u002Foption>\n",[406,1742,1743],{"class":408,"line":681},[406,1744,1725],{"class":412},[406,1746,1747,1749,1751],{"class":408,"line":1392},[406,1748,664],{"class":412},[406,1750,417],{"class":416},[406,1752,567],{"class":412},[394,1754,1755],{"v-slot:html":396},[398,1756,1758],{"className":539,"code":1757,"language":541,"meta":396,"style":396},"\u003Cdiv class=\"ori-select ori-color_primary\">\n    \u003Cdiv class=\"ori-select__control-wrap\">\n        \u003Cselect class=\"ori-select__control ori-size-radius_md\">\n            \u003Coption value=\"\" disabled selected>Pick a city\u003C\u002Foption>\n            \u003Coptgroup label=\"Europe\">\n                \u003Coption value=\"par\">Paris\u003C\u002Foption>\n                \u003Coption value=\"ber\">Berlin\u003C\u002Foption>\n            \u003C\u002Foptgroup>\n            \u003Coptgroup label=\"Asia\">\n                \u003Coption value=\"tok\">Tokyo\u003C\u002Foption>\n                \u003Coption value=\"bkk\">Bangkok\u003C\u002Foption>\n            \u003C\u002Foptgroup>\n        \u003C\u002Fselect>\n        \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[250,1759,1760,1774,1788,1802,1825,1842,1863,1883,1892,1907,1927,1947,1956,1965,1994,2003],{"__ignoreMap":396},[406,1761,1762,1764,1766,1768,1770,1772],{"class":408,"line":409},[406,1763,413],{"class":412},[406,1765,556],{"class":416},[406,1767,559],{"class":420},[406,1769,424],{"class":412},[406,1771,1237],{"class":427},[406,1773,567],{"class":412},[406,1775,1776,1778,1780,1782,1784,1786],{"class":408,"line":461},[406,1777,572],{"class":412},[406,1779,556],{"class":416},[406,1781,559],{"class":420},[406,1783,424],{"class":412},[406,1785,581],{"class":427},[406,1787,567],{"class":412},[406,1789,1790,1792,1794,1796,1798,1800],{"class":408,"line":499},[406,1791,589],{"class":412},[406,1793,244],{"class":416},[406,1795,559],{"class":420},[406,1797,424],{"class":412},[406,1799,598],{"class":427},[406,1801,567],{"class":412},[406,1803,1804,1806,1808,1810,1812,1814,1816,1818,1821,1823],{"class":408,"line":586},[406,1805,606],{"class":412},[406,1807,609],{"class":416},[406,1809,612],{"class":420},[406,1811,424],{"class":412},[406,1813,1280],{"class":427},[406,1815,1283],{"class":420},[406,1817,1286],{"class":420},[406,1819,1820],{"class":412},">Pick a city\u003C\u002F",[406,1822,609],{"class":416},[406,1824,567],{"class":412},[406,1826,1827,1829,1832,1835,1837,1840],{"class":408,"line":603},[406,1828,606],{"class":412},[406,1830,1831],{"class":416},"optgroup",[406,1833,1834],{"class":420}," label",[406,1836,424],{"class":412},[406,1838,1839],{"class":427},"\"Europe\"",[406,1841,567],{"class":412},[406,1843,1844,1847,1849,1851,1853,1856,1859,1861],{"class":408,"line":626},[406,1845,1846],{"class":412},"                \u003C",[406,1848,609],{"class":416},[406,1850,612],{"class":420},[406,1852,424],{"class":412},[406,1854,1855],{"class":427},"\"par\"",[406,1857,1858],{"class":412},">Paris\u003C\u002F",[406,1860,609],{"class":416},[406,1862,567],{"class":412},[406,1864,1865,1867,1869,1871,1873,1876,1879,1881],{"class":408,"line":636},[406,1866,1846],{"class":412},[406,1868,609],{"class":416},[406,1870,612],{"class":420},[406,1872,424],{"class":412},[406,1874,1875],{"class":427},"\"ber\"",[406,1877,1878],{"class":412},">Berlin\u003C\u002F",[406,1880,609],{"class":416},[406,1882,567],{"class":412},[406,1884,1885,1888,1890],{"class":408,"line":671},[406,1886,1887],{"class":412},"            \u003C\u002F",[406,1889,1831],{"class":416},[406,1891,567],{"class":412},[406,1893,1894,1896,1898,1900,1902,1905],{"class":408,"line":681},[406,1895,606],{"class":412},[406,1897,1831],{"class":416},[406,1899,1834],{"class":420},[406,1901,424],{"class":412},[406,1903,1904],{"class":427},"\"Asia\"",[406,1906,567],{"class":412},[406,1908,1909,1911,1913,1915,1917,1920,1923,1925],{"class":408,"line":1392},[406,1910,1846],{"class":412},[406,1912,609],{"class":416},[406,1914,612],{"class":420},[406,1916,424],{"class":412},[406,1918,1919],{"class":427},"\"tok\"",[406,1921,1922],{"class":412},">Tokyo\u003C\u002F",[406,1924,609],{"class":416},[406,1926,567],{"class":412},[406,1928,1929,1931,1933,1935,1937,1940,1943,1945],{"class":408,"line":1401},[406,1930,1846],{"class":412},[406,1932,609],{"class":416},[406,1934,612],{"class":420},[406,1936,424],{"class":412},[406,1938,1939],{"class":427},"\"bkk\"",[406,1941,1942],{"class":412},">Bangkok\u003C\u002F",[406,1944,609],{"class":416},[406,1946,567],{"class":412},[406,1948,1950,1952,1954],{"class":408,"line":1949},12,[406,1951,1887],{"class":412},[406,1953,1831],{"class":416},[406,1955,567],{"class":412},[406,1957,1959,1961,1963],{"class":408,"line":1958},13,[406,1960,629],{"class":412},[406,1962,244],{"class":416},[406,1964,567],{"class":412},[406,1966,1968,1970,1972,1974,1976,1978,1980,1982,1984,1986,1988,1990,1992],{"class":408,"line":1967},14,[406,1969,589],{"class":412},[406,1971,406],{"class":416},[406,1973,559],{"class":420},[406,1975,424],{"class":412},[406,1977,647],{"class":427},[406,1979,650],{"class":420},[406,1981,424],{"class":412},[406,1983,655],{"class":427},[406,1985,658],{"class":412},[406,1987,661],{"class":548},[406,1989,664],{"class":412},[406,1991,406],{"class":416},[406,1993,567],{"class":412},[406,1995,1997,1999,2001],{"class":408,"line":1996},15,[406,1998,674],{"class":412},[406,2000,556],{"class":416},[406,2002,567],{"class":412},[406,2004,2006,2008,2010],{"class":408,"line":2005},16,[406,2007,664],{"class":412},[406,2009,556],{"class":416},[406,2011,567],{"class":412},[337,2013,2015],{"id":2014},"states","States",[246,2017,2018,2020,2021,2024,2025,2027],{},[250,2019,278],{}," uses the real native attribute. ",[250,2022,2023],{},"invalid"," sets ",[250,2026,281],{}," and switches the\nborder and focus ring to the danger color.",[366,2029,2030,2033,2037,2116],{},[369,2031],{":options":2032,":disabled":1522},"[{\"label\":\"Cannot change\",\"value\":\"x\"}]",[369,2034],{":options":2035,"placeholder":2036,":invalid":1522},"[{\"label\":\"Option A\",\"value\":\"a\"},{\"label\":\"Option B\",\"value\":\"b\"}]","Required",[394,2038,2039],{"v-slot:vue":396},[398,2040,2042],{"className":400,"code":2041,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"value\" disabled :options=\"options\" \u002F>\n\u003COriSelect v-model=\"value\" invalid placeholder=\"Required\" :options=\"options\" \u002F>\n",[250,2043,2044,2076],{"__ignoreMap":396},[406,2045,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074],{"class":408,"line":409},[406,2047,413],{"class":412},[406,2049,417],{"class":416},[406,2051,421],{"class":420},[406,2053,424],{"class":412},[406,2055,428],{"class":427},[406,2057,431],{"class":412},[406,2059,428],{"class":427},[406,2061,1283],{"class":420},[406,2063,444],{"class":412},[406,2065,447],{"class":420},[406,2067,424],{"class":412},[406,2069,428],{"class":427},[406,2071,447],{"class":412},[406,2073,428],{"class":427},[406,2075,458],{"class":412},[406,2077,2078,2080,2082,2084,2086,2088,2090,2092,2095,2097,2099,2102,2104,2106,2108,2110,2112,2114],{"class":408,"line":461},[406,2079,413],{"class":412},[406,2081,417],{"class":416},[406,2083,421],{"class":420},[406,2085,424],{"class":412},[406,2087,428],{"class":427},[406,2089,431],{"class":412},[406,2091,428],{"class":427},[406,2093,2094],{"class":420}," invalid",[406,2096,1698],{"class":420},[406,2098,424],{"class":412},[406,2100,2101],{"class":427},"\"Required\"",[406,2103,444],{"class":412},[406,2105,447],{"class":420},[406,2107,424],{"class":412},[406,2109,428],{"class":427},[406,2111,447],{"class":412},[406,2113,428],{"class":427},[406,2115,458],{"class":412},[394,2117,2118],{"v-slot:html":396},[398,2119,2121],{"className":539,"code":2120,"language":541,"meta":396,"style":396},"\u003C!-- disabled -->\n\u003Cselect class=\"ori-select__control …\" disabled>\n    …\n\u003C\u002Fselect>\n\n\u003C!-- invalid -->\n\u003Cselect class=\"ori-select__control …\" aria-invalid=\"true\">\n    …\n\u003C\u002Fselect>\n",[250,2122,2123,2128,2144,2148,2156,2162,2167,2188,2192],{"__ignoreMap":396},[406,2124,2125],{"class":408,"line":409},[406,2126,2127],{"class":548},"\u003C!-- disabled -->\n",[406,2129,2130,2132,2134,2136,2138,2140,2142],{"class":408,"line":461},[406,2131,413],{"class":412},[406,2133,244],{"class":416},[406,2135,559],{"class":420},[406,2137,424],{"class":412},[406,2139,1554],{"class":427},[406,2141,1283],{"class":420},[406,2143,567],{"class":412},[406,2145,2146],{"class":408,"line":499},[406,2147,1079],{"class":412},[406,2149,2150,2152,2154],{"class":408,"line":586},[406,2151,664],{"class":412},[406,2153,244],{"class":416},[406,2155,567],{"class":412},[406,2157,2158],{"class":408,"line":603},[406,2159,2161],{"emptyLinePlaceholder":2160},true,"\n",[406,2163,2164],{"class":408,"line":626},[406,2165,2166],{"class":548},"\u003C!-- invalid -->\n",[406,2168,2169,2171,2173,2175,2177,2179,2182,2184,2186],{"class":408,"line":636},[406,2170,413],{"class":412},[406,2172,244],{"class":416},[406,2174,559],{"class":420},[406,2176,424],{"class":412},[406,2178,1554],{"class":427},[406,2180,2181],{"class":420}," aria-invalid",[406,2183,424],{"class":412},[406,2185,655],{"class":427},[406,2187,567],{"class":412},[406,2189,2190],{"class":408,"line":671},[406,2191,1079],{"class":412},[406,2193,2194,2196,2198],{"class":408,"line":681},[406,2195,664],{"class":412},[406,2197,244],{"class":416},[406,2199,567],{"class":412},[337,2201,2203],{"id":2202},"label-hint-error","Label, hint & error",[246,2205,2206,2207,2209,2210,2212,2213,2215,2216,2219,2220,2222,2223,2225,2226,2229,2230,2233,2234,2237,2238,2240],{},"Like ",[255,2208,58],{"href":57}," and ",[255,2211,126],{"href":125},", the select has built-in form\nwiring — a ",[250,2214,263],{}," (rendered ",[250,2217,2218],{},"\u003Clabel for>",", no external label needed), a ",[250,2221,267],{},", an ",[250,2224,270],{},"\n(",[250,2227,2228],{},"role=\"alert\"",", flips ",[250,2231,2232],{},"aria-invalid",", wired through ",[250,2235,2236],{},"aria-describedby","), and a ",[250,2239,274],{}," asterisk.",[366,2242,2243,2249,2254,2360],{},[369,2244],{":options":2245,"placeholder":2246,"label":2247,":required":1522,"hint":2248},"[{\"label\":\"France\",\"value\":\"fr\"},{\"label\":\"Germany\",\"value\":\"de\"}]","Select…","Country","Where the order ships",[369,2250],{":options":2251,"placeholder":2246,"label":2252,"error":2253},"[{\"label\":\"Free\",\"value\":\"free\"},{\"label\":\"Pro\",\"value\":\"pro\"}]","Plan","Please choose a plan",[394,2255,2256],{"v-slot:vue":396},[398,2257,2259],{"className":400,"code":2258,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"country\" label=\"Country\" required hint=\"Where the order ships\" :options=\"countries\" \u002F>\n\n\u003COriSelect v-model=\"plan\" label=\"Plan\" error=\"Please choose a plan\" :options=\"plans\" \u002F>\n",[250,2260,2261,2310,2314],{"__ignoreMap":396},[406,2262,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2284,2287,2290,2292,2295,2297,2299,2301,2303,2306,2308],{"class":408,"line":409},[406,2264,413],{"class":412},[406,2266,417],{"class":416},[406,2268,421],{"class":420},[406,2270,424],{"class":412},[406,2272,428],{"class":427},[406,2274,1132],{"class":412},[406,2276,428],{"class":427},[406,2278,1834],{"class":420},[406,2280,424],{"class":412},[406,2282,2283],{"class":427},"\"Country\"",[406,2285,2286],{"class":420}," required",[406,2288,2289],{"class":420}," hint",[406,2291,424],{"class":412},[406,2293,2294],{"class":427},"\"Where the order ships\"",[406,2296,444],{"class":412},[406,2298,447],{"class":420},[406,2300,424],{"class":412},[406,2302,428],{"class":427},[406,2304,2305],{"class":412},"countries",[406,2307,428],{"class":427},[406,2309,458],{"class":412},[406,2311,2312],{"class":408,"line":461},[406,2313,2161],{"emptyLinePlaceholder":2160},[406,2315,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334,2337,2340,2342,2345,2347,2349,2351,2353,2356,2358],{"class":408,"line":499},[406,2317,413],{"class":412},[406,2319,417],{"class":416},[406,2321,421],{"class":420},[406,2323,424],{"class":412},[406,2325,428],{"class":427},[406,2327,1452],{"class":412},[406,2329,428],{"class":427},[406,2331,1834],{"class":420},[406,2333,424],{"class":412},[406,2335,2336],{"class":427},"\"Plan\"",[406,2338,2339],{"class":420}," error",[406,2341,424],{"class":412},[406,2343,2344],{"class":427},"\"Please choose a plan\"",[406,2346,444],{"class":412},[406,2348,447],{"class":420},[406,2350,424],{"class":412},[406,2352,428],{"class":427},[406,2354,2355],{"class":412},"plans",[406,2357,428],{"class":427},[406,2359,458],{"class":412},[394,2361,2362],{"v-slot:html":396},[398,2363,2365],{"className":539,"code":2364,"language":541,"meta":396,"style":396},"\u003Cdiv class=\"ori-select ori-color_primary\">\n    \u003Clabel for=\"country\" class=\"ori-select__label\"\n        >Country\u003Cspan class=\"ori-select__required\" aria-hidden=\"true\">*\u003C\u002Fspan>\u003C\u002Flabel\n    >\n    \u003Cdiv class=\"ori-select__control-wrap\">\n        \u003Cselect id=\"country\" required aria-describedby=\"country-hint\" class=\"ori-select__control ori-size-radius_md\">\n            \u003Coption value=\"fr\">France\u003C\u002Foption>\n            \u003Coption value=\"de\">Germany\u003C\u002Foption>\n        \u003C\u002Fselect>\n        \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cp id=\"country-hint\" class=\"ori-select__hint\">Where the order ships\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[250,2366,2367,2381,2402,2433,2438,2452,2483,2501,2519,2527,2555,2563,2589],{"__ignoreMap":396},[406,2368,2369,2371,2373,2375,2377,2379],{"class":408,"line":409},[406,2370,413],{"class":412},[406,2372,556],{"class":416},[406,2374,559],{"class":420},[406,2376,424],{"class":412},[406,2378,1237],{"class":427},[406,2380,567],{"class":412},[406,2382,2383,2385,2387,2390,2392,2395,2397,2399],{"class":408,"line":461},[406,2384,572],{"class":412},[406,2386,263],{"class":416},[406,2388,2389],{"class":420}," for",[406,2391,424],{"class":412},[406,2393,2394],{"class":427},"\"country\"",[406,2396,559],{"class":420},[406,2398,424],{"class":412},[406,2400,2401],{"class":427},"\"ori-select__label\"\n",[406,2403,2404,2407,2409,2411,2413,2416,2418,2420,2422,2425,2427,2430],{"class":408,"line":499},[406,2405,2406],{"class":412},"        >Country\u003C",[406,2408,406],{"class":416},[406,2410,559],{"class":420},[406,2412,424],{"class":412},[406,2414,2415],{"class":427},"\"ori-select__required\"",[406,2417,650],{"class":420},[406,2419,424],{"class":412},[406,2421,655],{"class":427},[406,2423,2424],{"class":412},">*\u003C\u002F",[406,2426,406],{"class":416},[406,2428,2429],{"class":412},">\u003C\u002F",[406,2431,2432],{"class":416},"label\n",[406,2434,2435],{"class":408,"line":586},[406,2436,2437],{"class":412},"    >\n",[406,2439,2440,2442,2444,2446,2448,2450],{"class":408,"line":603},[406,2441,572],{"class":412},[406,2443,556],{"class":416},[406,2445,559],{"class":420},[406,2447,424],{"class":412},[406,2449,581],{"class":427},[406,2451,567],{"class":412},[406,2453,2454,2456,2458,2461,2463,2465,2467,2470,2472,2475,2477,2479,2481],{"class":408,"line":626},[406,2455,589],{"class":412},[406,2457,244],{"class":416},[406,2459,2460],{"class":420}," id",[406,2462,424],{"class":412},[406,2464,2394],{"class":427},[406,2466,2286],{"class":420},[406,2468,2469],{"class":420}," aria-describedby",[406,2471,424],{"class":412},[406,2473,2474],{"class":427},"\"country-hint\"",[406,2476,559],{"class":420},[406,2478,424],{"class":412},[406,2480,598],{"class":427},[406,2482,567],{"class":412},[406,2484,2485,2487,2489,2491,2493,2495,2497,2499],{"class":408,"line":636},[406,2486,606],{"class":412},[406,2488,609],{"class":416},[406,2490,612],{"class":420},[406,2492,424],{"class":412},[406,2494,1306],{"class":427},[406,2496,1309],{"class":412},[406,2498,609],{"class":416},[406,2500,567],{"class":412},[406,2502,2503,2505,2507,2509,2511,2513,2515,2517],{"class":408,"line":671},[406,2504,606],{"class":412},[406,2506,609],{"class":416},[406,2508,612],{"class":420},[406,2510,424],{"class":412},[406,2512,1326],{"class":427},[406,2514,1329],{"class":412},[406,2516,609],{"class":416},[406,2518,567],{"class":412},[406,2520,2521,2523,2525],{"class":408,"line":681},[406,2522,629],{"class":412},[406,2524,244],{"class":416},[406,2526,567],{"class":412},[406,2528,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547,2549,2551,2553],{"class":408,"line":1392},[406,2530,589],{"class":412},[406,2532,406],{"class":416},[406,2534,559],{"class":420},[406,2536,424],{"class":412},[406,2538,647],{"class":427},[406,2540,650],{"class":420},[406,2542,424],{"class":412},[406,2544,655],{"class":427},[406,2546,658],{"class":412},[406,2548,661],{"class":548},[406,2550,664],{"class":412},[406,2552,406],{"class":416},[406,2554,567],{"class":412},[406,2556,2557,2559,2561],{"class":408,"line":1401},[406,2558,674],{"class":412},[406,2560,556],{"class":416},[406,2562,567],{"class":412},[406,2564,2565,2567,2569,2571,2573,2575,2577,2579,2582,2585,2587],{"class":408,"line":1949},[406,2566,572],{"class":412},[406,2568,246],{"class":416},[406,2570,2460],{"class":420},[406,2572,424],{"class":412},[406,2574,2474],{"class":427},[406,2576,559],{"class":420},[406,2578,424],{"class":412},[406,2580,2581],{"class":427},"\"ori-select__hint\"",[406,2583,2584],{"class":412},">Where the order ships\u003C\u002F",[406,2586,246],{"class":416},[406,2588,567],{"class":412},[406,2590,2591,2593,2595],{"class":408,"line":1958},[406,2592,664],{"class":412},[406,2594,556],{"class":416},[406,2596,567],{"class":412},[337,2598,2600],{"id":2599},"common-patterns","Common patterns",[246,2602,2603],{},"A shipping-address form row — color, size, radius, placeholder, and required fall through together.",[366,2605,2606,2608,2612,2741],{},[369,2607],{":options":1105,"placeholder":2247},[369,2609],{":options":2610,"placeholder":2611},"[{\"label\":\"Île-de-France\",\"value\":\"idf\"},{\"label\":\"Bavaria\",\"value\":\"bay\"}]","State \u002F Province",[394,2613,2614],{"v-slot:vue":396},[398,2615,2617],{"className":400,"code":2616,"language":402,"meta":396,"style":396},"\u003Cdiv style=\"display: flex; gap: 0.75rem; flex-wrap: wrap\">\n    \u003COriSelect\n        v-model=\"country\"\n        placeholder=\"Country\"\n        name=\"country\"\n        required\n        :options=\"countryOptions\"\n    \u002F>\n    \u003COriSelect\n        v-model=\"state\"\n        placeholder=\"State \u002F Province\"\n        name=\"state\"\n        :options=\"stateOptions\"\n    \u002F>\n\u003C\u002Fdiv>\n",[250,2618,2619,2670,2675,2680,2685,2690,2695,2700,2705,2709,2714,2719,2724,2729,2733],{"__ignoreMap":396},[406,2620,2621,2623,2625,2628,2630,2632,2635,2638,2641,2644,2647,2649,2652,2656,2658,2661,2663,2666,2668],{"class":408,"line":409},[406,2622,413],{"class":412},[406,2624,556],{"class":416},[406,2626,2627],{"class":420}," style",[406,2629,424],{"class":412},[406,2631,428],{"class":427},[406,2633,2634],{"class":1521},"display",[406,2636,2637],{"class":412},": ",[406,2639,2640],{"class":1521},"flex",[406,2642,2643],{"class":412},"; ",[406,2645,2646],{"class":1521},"gap",[406,2648,2637],{"class":412},[406,2650,2651],{"class":1521},"0.75",[406,2653,2655],{"class":2654},"szBVR","rem",[406,2657,2643],{"class":412},[406,2659,2660],{"class":1521},"flex-wrap",[406,2662,2637],{"class":412},[406,2664,2665],{"class":1521},"wrap",[406,2667,428],{"class":427},[406,2669,567],{"class":412},[406,2671,2672],{"class":408,"line":461},[406,2673,2674],{"class":412},"    \u003COriSelect\n",[406,2676,2677],{"class":408,"line":499},[406,2678,2679],{"class":412},"        v-model=\"country\"\n",[406,2681,2682],{"class":408,"line":586},[406,2683,2684],{"class":412},"        placeholder=\"Country\"\n",[406,2686,2687],{"class":408,"line":603},[406,2688,2689],{"class":412},"        name=\"country\"\n",[406,2691,2692],{"class":408,"line":626},[406,2693,2694],{"class":412},"        required\n",[406,2696,2697],{"class":408,"line":636},[406,2698,2699],{"class":412},"        :options=\"countryOptions\"\n",[406,2701,2702],{"class":408,"line":671},[406,2703,2704],{"class":412},"    \u002F>\n",[406,2706,2707],{"class":408,"line":681},[406,2708,2674],{"class":412},[406,2710,2711],{"class":408,"line":1392},[406,2712,2713],{"class":412},"        v-model=\"state\"\n",[406,2715,2716],{"class":408,"line":1401},[406,2717,2718],{"class":412},"        placeholder=\"State \u002F Province\"\n",[406,2720,2721],{"class":408,"line":1949},[406,2722,2723],{"class":412},"        name=\"state\"\n",[406,2725,2726],{"class":408,"line":1958},[406,2727,2728],{"class":412},"        :options=\"stateOptions\"\n",[406,2730,2731],{"class":408,"line":1967},[406,2732,2704],{"class":412},[406,2734,2735,2737,2739],{"class":408,"line":1996},[406,2736,664],{"class":412},[406,2738,556],{"class":416},[406,2740,567],{"class":412},[394,2742,2743],{"v-slot:html":396},[398,2744,2746],{"className":539,"code":2745,"language":541,"meta":396,"style":396},"\u003Cdiv style=\"display: flex; gap: 0.75rem; flex-wrap: wrap\">\n    \u003Cdiv class=\"ori-select ori-color_primary\">\n        \u003Cdiv class=\"ori-select__control-wrap\">\n            \u003Cselect name=\"country\" required class=\"ori-select__control ori-size-radius_md\">\n                \u003Coption value=\"\" disabled selected>Country\u003C\u002Foption>\n                \u003Coption value=\"fr\">France\u003C\u002Foption>\n                \u003Coption value=\"de\">Germany\u003C\u002Foption>\n                \u003Coption value=\"jp\">Japan\u003C\u002Foption>\n            \u003C\u002Fselect>\n            \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"ori-select ori-color_primary\">\n        \u003Cdiv class=\"ori-select__control-wrap\">\n            \u003Cselect name=\"state\" class=\"ori-select__control ori-size-radius_md\">\n                \u003Coption value=\"\" disabled selected>State \u002F Province\u003C\u002Foption>\n                \u003Coption value=\"idf\">Île-de-France\u003C\u002Foption>\n                \u003Coption value=\"bay\">Bavaria\u003C\u002Foption>\n            \u003C\u002Fselect>\n            \u003Cspan class=\"ori-select__chevron\" aria-hidden=\"true\">\u003C!-- chevron SVG -->\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[250,2747,2748,2763,2777,2791,2814,2837,2855,2873,2891,2899,2927,2935,2943,2957,2971,2992,3015,3036,3057,3066,3095,3104,3113],{"__ignoreMap":396},[406,2749,2750,2752,2754,2756,2758,2761],{"class":408,"line":409},[406,2751,413],{"class":412},[406,2753,556],{"class":416},[406,2755,2627],{"class":420},[406,2757,424],{"class":412},[406,2759,2760],{"class":427},"\"display: flex; gap: 0.75rem; flex-wrap: wrap\"",[406,2762,567],{"class":412},[406,2764,2765,2767,2769,2771,2773,2775],{"class":408,"line":461},[406,2766,572],{"class":412},[406,2768,556],{"class":416},[406,2770,559],{"class":420},[406,2772,424],{"class":412},[406,2774,1237],{"class":427},[406,2776,567],{"class":412},[406,2778,2779,2781,2783,2785,2787,2789],{"class":408,"line":499},[406,2780,589],{"class":412},[406,2782,556],{"class":416},[406,2784,559],{"class":420},[406,2786,424],{"class":412},[406,2788,581],{"class":427},[406,2790,567],{"class":412},[406,2792,2793,2795,2797,2800,2802,2804,2806,2808,2810,2812],{"class":408,"line":586},[406,2794,606],{"class":412},[406,2796,244],{"class":416},[406,2798,2799],{"class":420}," name",[406,2801,424],{"class":412},[406,2803,2394],{"class":427},[406,2805,2286],{"class":420},[406,2807,559],{"class":420},[406,2809,424],{"class":412},[406,2811,598],{"class":427},[406,2813,567],{"class":412},[406,2815,2816,2818,2820,2822,2824,2826,2828,2830,2833,2835],{"class":408,"line":603},[406,2817,1846],{"class":412},[406,2819,609],{"class":416},[406,2821,612],{"class":420},[406,2823,424],{"class":412},[406,2825,1280],{"class":427},[406,2827,1283],{"class":420},[406,2829,1286],{"class":420},[406,2831,2832],{"class":412},">Country\u003C\u002F",[406,2834,609],{"class":416},[406,2836,567],{"class":412},[406,2838,2839,2841,2843,2845,2847,2849,2851,2853],{"class":408,"line":626},[406,2840,1846],{"class":412},[406,2842,609],{"class":416},[406,2844,612],{"class":420},[406,2846,424],{"class":412},[406,2848,1306],{"class":427},[406,2850,1309],{"class":412},[406,2852,609],{"class":416},[406,2854,567],{"class":412},[406,2856,2857,2859,2861,2863,2865,2867,2869,2871],{"class":408,"line":636},[406,2858,1846],{"class":412},[406,2860,609],{"class":416},[406,2862,612],{"class":420},[406,2864,424],{"class":412},[406,2866,1326],{"class":427},[406,2868,1329],{"class":412},[406,2870,609],{"class":416},[406,2872,567],{"class":412},[406,2874,2875,2877,2879,2881,2883,2885,2887,2889],{"class":408,"line":671},[406,2876,1846],{"class":412},[406,2878,609],{"class":416},[406,2880,612],{"class":420},[406,2882,424],{"class":412},[406,2884,1346],{"class":427},[406,2886,1349],{"class":412},[406,2888,609],{"class":416},[406,2890,567],{"class":412},[406,2892,2893,2895,2897],{"class":408,"line":681},[406,2894,1887],{"class":412},[406,2896,244],{"class":416},[406,2898,567],{"class":412},[406,2900,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925],{"class":408,"line":1392},[406,2902,606],{"class":412},[406,2904,406],{"class":416},[406,2906,559],{"class":420},[406,2908,424],{"class":412},[406,2910,647],{"class":427},[406,2912,650],{"class":420},[406,2914,424],{"class":412},[406,2916,655],{"class":427},[406,2918,658],{"class":412},[406,2920,661],{"class":548},[406,2922,664],{"class":412},[406,2924,406],{"class":416},[406,2926,567],{"class":412},[406,2928,2929,2931,2933],{"class":408,"line":1401},[406,2930,629],{"class":412},[406,2932,556],{"class":416},[406,2934,567],{"class":412},[406,2936,2937,2939,2941],{"class":408,"line":1949},[406,2938,674],{"class":412},[406,2940,556],{"class":416},[406,2942,567],{"class":412},[406,2944,2945,2947,2949,2951,2953,2955],{"class":408,"line":1958},[406,2946,572],{"class":412},[406,2948,556],{"class":416},[406,2950,559],{"class":420},[406,2952,424],{"class":412},[406,2954,1237],{"class":427},[406,2956,567],{"class":412},[406,2958,2959,2961,2963,2965,2967,2969],{"class":408,"line":1967},[406,2960,589],{"class":412},[406,2962,556],{"class":416},[406,2964,559],{"class":420},[406,2966,424],{"class":412},[406,2968,581],{"class":427},[406,2970,567],{"class":412},[406,2972,2973,2975,2977,2979,2981,2984,2986,2988,2990],{"class":408,"line":1996},[406,2974,606],{"class":412},[406,2976,244],{"class":416},[406,2978,2799],{"class":420},[406,2980,424],{"class":412},[406,2982,2983],{"class":427},"\"state\"",[406,2985,559],{"class":420},[406,2987,424],{"class":412},[406,2989,598],{"class":427},[406,2991,567],{"class":412},[406,2993,2994,2996,2998,3000,3002,3004,3006,3008,3011,3013],{"class":408,"line":2005},[406,2995,1846],{"class":412},[406,2997,609],{"class":416},[406,2999,612],{"class":420},[406,3001,424],{"class":412},[406,3003,1280],{"class":427},[406,3005,1283],{"class":420},[406,3007,1286],{"class":420},[406,3009,3010],{"class":412},">State \u002F Province\u003C\u002F",[406,3012,609],{"class":416},[406,3014,567],{"class":412},[406,3016,3018,3020,3022,3024,3026,3029,3032,3034],{"class":408,"line":3017},17,[406,3019,1846],{"class":412},[406,3021,609],{"class":416},[406,3023,612],{"class":420},[406,3025,424],{"class":412},[406,3027,3028],{"class":427},"\"idf\"",[406,3030,3031],{"class":412},">Île-de-France\u003C\u002F",[406,3033,609],{"class":416},[406,3035,567],{"class":412},[406,3037,3039,3041,3043,3045,3047,3050,3053,3055],{"class":408,"line":3038},18,[406,3040,1846],{"class":412},[406,3042,609],{"class":416},[406,3044,612],{"class":420},[406,3046,424],{"class":412},[406,3048,3049],{"class":427},"\"bay\"",[406,3051,3052],{"class":412},">Bavaria\u003C\u002F",[406,3054,609],{"class":416},[406,3056,567],{"class":412},[406,3058,3060,3062,3064],{"class":408,"line":3059},19,[406,3061,1887],{"class":412},[406,3063,244],{"class":416},[406,3065,567],{"class":412},[406,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093],{"class":408,"line":3068},20,[406,3070,606],{"class":412},[406,3072,406],{"class":416},[406,3074,559],{"class":420},[406,3076,424],{"class":412},[406,3078,647],{"class":427},[406,3080,650],{"class":420},[406,3082,424],{"class":412},[406,3084,655],{"class":427},[406,3086,658],{"class":412},[406,3088,661],{"class":548},[406,3090,664],{"class":412},[406,3092,406],{"class":416},[406,3094,567],{"class":412},[406,3096,3098,3100,3102],{"class":408,"line":3097},21,[406,3099,629],{"class":412},[406,3101,556],{"class":416},[406,3103,567],{"class":412},[406,3105,3107,3109,3111],{"class":408,"line":3106},22,[406,3108,674],{"class":412},[406,3110,556],{"class":416},[406,3112,567],{"class":412},[406,3114,3116,3118,3120],{"class":408,"line":3115},23,[406,3117,664],{"class":412},[406,3119,556],{"class":416},[406,3121,567],{"class":412},[337,3123,210],{"id":3124},"accessibility",[246,3126,3127],{},"The accessibility contract holds across every layer — the standalone classes and the Vue component\nrender the same attributes.",[3129,3130,3131,3138,3152,3185,3209,3219,3228,3253],"ul",{},[3132,3133,3134,3135,3137],"li",{},"The control is a native ",[250,3136,292],{},", so the browser provides the complete dropdown, full keyboard\ninteraction (arrow keys, type-ahead, Home\u002FEnd), and all ARIA semantics — no custom widget needed.",[3132,3139,3140,3141,2209,3143,3145,3146,264,3149,709],{},"State is real attributes: native ",[250,3142,278],{},[250,3144,281],{}," (not classes), styled with\nattribute selectors (",[250,3147,3148],{},":disabled",[250,3150,3151],{},"[aria-invalid='true']",[3132,3153,3154,3155,3157,3158,3160,3161,3164,3165,3168,3169,3171,3172,3174,3175,1659,3178,3181,3182,3184],{},"The built-in ",[250,3156,263],{}," renders a ",[250,3159,2218],{}," bound to the control's ",[250,3162,3163],{},"useId()","-based ",[250,3166,3167],{},"id",", so the\nselect is named without any external markup. (You can still supply an external ",[250,3170,2218],{}," using\nthe control's ",[250,3173,3167],{},", or pass ",[250,3176,3177],{},"aria-label",[250,3179,3180],{},"aria-labelledby"," for labelless contexts — they fall\nthrough to the ",[250,3183,292],{},".)",[3132,3186,3187,2209,3189,3191,3192,2643,3194,3196,3197,3199,3200,3202,3203,3205,3206,3208],{},[250,3188,267],{},[250,3190,270],{}," are wired to the control via ",[250,3193,2236],{},[250,3195,270],{}," also renders ",[250,3198,2228],{},"\nand flips the control to ",[250,3201,281],{},". ",[250,3204,274],{}," sets the native ",[250,3207,274],{}," attribute.",[3132,3210,3211,3212,2209,3215,3218],{},"The chevron is ",[250,3213,3214],{},"aria-hidden=\"true\"",[250,3216,3217],{},"pointer-events: none"," — it is never announced and never\nintercepts clicks or keyboard events.",[3132,3220,3221,3222,3224,3225,3227],{},"The placeholder renders as a ",[250,3223,278],{}," ",[250,3226,1421],{}," so it cannot be re-selected once the user makes\na choice.",[3132,3229,3230,3231,264,3233,264,3235,264,3237,264,3239,3241,3242,3245,3246,3249,3250,3252],{},"Arbitrary native attrs (",[250,3232,285],{},[250,3234,274],{},[250,3236,288],{},[250,3238,3177],{},[250,3240,3180],{},", …)\nfall through via ",[250,3243,3244],{},"inheritAttrs: false"," + ",[250,3247,3248],{},"v-bind=\"$attrs\""," directly to the ",[250,3251,292],{}," element.",[3132,3254,3255,3256,3259,3260,3263,3264,3267,3268,3270],{},"Focus is always visible: ",[250,3257,3258],{},":focus"," shows a tokenized border + ",[250,3261,3262],{},"box-shadow"," ring reading\n",[250,3265,3266],{},"--ori-color"," (the control sits on the page, not on a fill surface). When ",[250,3269,2023],{},", the ring uses\nthe danger color.",[3272,3273,3274,3287],"table",{},[3275,3276,3277],"thead",{},[3278,3279,3280,3284],"tr",{},[3281,3282,3283],"th",{},"Key",[3281,3285,3286],{},"Action",[3288,3289,3290,3304,3317,3330,3343,3351],"tbody",{},[3278,3291,3292,3301],{},[3293,3294,3295,1659,3298],"td",{},[250,3296,3297],{},"Tab",[250,3299,3300],{},"Shift+Tab",[3293,3302,3303],{},"Moves focus to \u002F away from the control.",[3278,3305,3306,3314],{},[3293,3307,3308,1659,3311],{},[250,3309,3310],{},"Space",[250,3312,3313],{},"Enter",[3293,3315,3316],{},"Opens the dropdown (browser-native).",[3278,3318,3319,3327],{},[3293,3320,3321,1659,3324],{},[250,3322,3323],{},"Arrow Up",[250,3325,3326],{},"Down",[3293,3328,3329],{},"Cycles through options; navigates the open list.",[3278,3331,3332,3340],{},[3293,3333,3334,1659,3337],{},[250,3335,3336],{},"Home",[250,3338,3339],{},"End",[3293,3341,3342],{},"Jumps to the first \u002F last option.",[3278,3344,3345,3348],{},[3293,3346,3347],{},"Type-ahead",[3293,3349,3350],{},"Selects the first option beginning with typed char.",[3278,3352,3353,3358],{},[3293,3354,3355],{},[250,3356,3357],{},"Escape",[3293,3359,3360],{},"Closes the dropdown without changing selection.",[337,3362,320],{"id":3363},"framework-api",[246,3365,3366,3367,3369,3370,3372],{},"The props, events, slots, and attribute passthrough of the ",[302,3368,334],{}," component. The standalone CSS\nlayer has no component API — its surface is the ",[255,3371,339],{"href":308}," above. (Svelte bindings are\nplanned.)",[3374,3375,3377],"h3",{"id":3376},"props","Props",[3272,3379,3380,3396],{},[3275,3381,3382],{},[3278,3383,3384,3387,3390,3393],{},[3281,3385,3386],{},"Prop",[3281,3388,3389],{},"Type",[3281,3391,3392],{},"Default",[3281,3394,3395],{},"Description",[3288,3397,3398,3420,3441,3465,3489,3507,3525,3554,3577,3599,3621,3640,3666,3690],{},[3278,3399,3400,3405,3410,3415],{},[3293,3401,3402],{},[250,3403,3404],{},"color",[3293,3406,3407],{},[250,3408,3409],{},"ThemeColor",[3293,3411,3412],{},[250,3413,3414],{},"'primary'",[3293,3416,3417,3418,709],{},"Accent that drives the focus-ring\u002Fborder color via the ori-color utility (repoints ",[250,3419,3266],{},[3278,3421,3422,3427,3432,3435],{},[3293,3423,3424],{},[250,3425,3426],{},"describedby",[3293,3428,3429],{},[250,3430,3431],{},"string",[3293,3433,3434],{},"—",[3293,3436,3437,3438,3440],{},"Extra element id(s) appended to ",[250,3439,2236],{}," (e.g. a shared form note).",[3278,3442,3443,3447,3452,3457],{},[3293,3444,3445],{},[250,3446,278],{},[3293,3448,3449],{},[250,3450,3451],{},"boolean",[3293,3453,3454],{},[250,3455,3456],{},"false",[3293,3458,3459,3460,3462,3463,709],{},"Disables the control via the real native ",[250,3461,278],{}," attribute (styled with ",[250,3464,3148],{},[3278,3466,3467,3471,3475,3477],{},[3293,3468,3469],{},[250,3470,270],{},[3293,3472,3473],{},[250,3474,3431],{},[3293,3476,3434],{},[3293,3478,3479,3480,3482,3483,3485,3486,3488],{},"Error message rendered below the control (",[250,3481,2228],{},"); flips the control to ",[250,3484,2232],{}," and wires ",[250,3487,2236],{},". Replaces the hint.",[3278,3490,3491,3496,3500,3504],{},[3293,3492,3493],{},[250,3494,3495],{},"fluid",[3293,3497,3498],{},[250,3499,3451],{},[3293,3501,3502],{},[250,3503,3456],{},[3293,3505,3506],{},"Stretches the control to the full width of its container.",[3278,3508,3509,3513,3517,3519],{},[3293,3510,3511],{},[250,3512,267],{},[3293,3514,3515],{},[250,3516,3431],{},[3293,3518,3434],{},[3293,3520,3521,3522,3524],{},"Helper text below the control, wired via ",[250,3523,2236],{},". Hidden while an error is shown.",[3278,3526,3527,3531,3535,3539],{},[3293,3528,3529],{},[250,3530,3167],{},[3293,3532,3533],{},[250,3534,3431],{},[3293,3536,3537],{},[250,3538,3163],{},[3293,3540,3541,3542,3544,3545,3547,3548,3550,3551,3553],{},"Id applied to the native ",[250,3543,292],{},"; defaults to an SSR-safe ",[250,3546,3163],{}," so the ",[250,3549,263],{}," (or an external ",[250,3552,2218],{},") can target it.",[3278,3555,3556,3560,3564,3568],{},[3293,3557,3558],{},[250,3559,2023],{},[3293,3561,3562],{},[250,3563,3451],{},[3293,3565,3566],{},[250,3567,3456],{},[3293,3569,3570,3571,3573,3574,3576],{},"Marks the control invalid via ",[250,3572,281],{},"; styled with a danger border and ring. (",[250,3575,270],{}," also sets this.)",[3278,3578,3579,3583,3587,3589],{},[3293,3580,3581],{},[250,3582,263],{},[3293,3584,3585],{},[250,3586,3431],{},[3293,3588,3434],{},[3293,3590,3591,3592,3595,3596,297],{},"Built-in ",[250,3593,3594],{},"\u003Clabel>"," rendered above the control and wired to it via ",[250,3597,3598],{},"for",[3278,3600,3601,3605,3610,3615],{},[3293,3602,3603],{},[250,3604,447],{},[3293,3606,3607],{},[250,3608,3609],{},"Array\u003C{ label: string; value: string | number; disabled?: boolean }>",[3293,3611,3612],{},[250,3613,3614],{},"[]",[3293,3616,3617,3618,3620],{},"Options rendered as ",[250,3619,1421],{}," elements. Ignored when a default slot is provided.",[3278,3622,3623,3627,3631,3633],{},[3293,3624,3625],{},[250,3626,1090],{},[3293,3628,3629],{},[250,3630,3431],{},[3293,3632,3434],{},[3293,3634,3635,3636,3639],{},"Renders a disabled, selected-by-default first ",[250,3637,3638],{},"\u003Coption value=\"\">"," as a non-selectable prompt.",[3278,3641,3642,3646,3651,3656],{},[3293,3643,3644],{},[250,3645,941],{},[3293,3647,3648],{},[250,3649,3650],{},"RadiusSize",[3293,3652,3653],{},[250,3654,3655],{},"'md'",[3293,3657,3658,3659,3662,3663,3665],{},"Border radius via the ",[250,3660,3661],{},"ori-size-radius_*"," single-class token (",[250,3664,948],{}," · xs · sm · md · lg · xl · rounded).",[3278,3667,3668,3672,3676,3680],{},[3293,3669,3670],{},[250,3671,274],{},[3293,3673,3674],{},[250,3675,3451],{},[3293,3677,3678],{},[250,3679,3456],{},[3293,3681,3682,3683,3685,3686,3689],{},"Sets the native ",[250,3684,274],{}," attribute and renders a ",[250,3687,3688],{},"*"," after the label.",[3278,3691,3692,3697,3702,3706],{},[3293,3693,3694],{},[250,3695,3696],{},"size",[3293,3698,3699],{},[250,3700,3701],{},"ActionSize",[3293,3703,3704],{},[250,3705,3655],{},[3293,3707,3708,3709,3711,3712,3714,3715,3717,3718,709],{},"Control height (",[250,3710,704],{}," size sugar) and font-size (",[250,3713,708],{},") (",[250,3716,696],{},"–",[250,3719,700],{},[3374,3721,3723],{"id":3722},"events-attributes","Events & attributes",[246,3725,3726,3728,3729,293,3732,3735,3736,3739,3740,3743],{},[250,3727,252],{}," binds to a ",[250,3730,3731],{},"string | number",[250,3733,3734],{},"defineModel\u003Cstring | number>()"," — it reads the\n",[250,3737,3738],{},"modelValue"," prop and emits ",[250,3741,3742],{},"update:modelValue"," on change:",[398,3745,3747],{"className":400,"code":3746,"language":402,"meta":396,"style":396},"\u003COriSelect v-model=\"selected\" :options=\"options\" \u002F>\n",[250,3748,3749],{"__ignoreMap":396},[406,3750,3751,3753,3755,3757,3759,3761,3764,3766,3768,3770,3772,3774,3776,3778],{"class":408,"line":409},[406,3752,413],{"class":412},[406,3754,417],{"class":416},[406,3756,421],{"class":420},[406,3758,424],{"class":412},[406,3760,428],{"class":427},[406,3762,3763],{"class":412},"selected",[406,3765,428],{"class":427},[406,3767,444],{"class":412},[406,3769,447],{"class":420},[406,3771,424],{"class":412},[406,3773,428],{"class":427},[406,3775,447],{"class":412},[406,3777,428],{"class":427},[406,3779,458],{"class":412},[246,3781,3782,3783,3785,3786,3789,3790,3792,3793,3796],{},"OriSelect sets ",[250,3784,3244],{}," and spreads ",[250,3787,3788],{},"$attrs"," onto the underlying ",[250,3791,292],{},", so native\nattributes and listeners pass through directly to the field element — not the wrapper ",[250,3794,3795],{},"\u003Cdiv>",":",[3129,3798,3799,3813],{},[3132,3800,3801,3802,264,3804,264,3806,264,3808,264,3810,3812],{},"Attributes: ",[250,3803,285],{},[250,3805,274],{},[250,3807,288],{},[250,3809,3177],{},[250,3811,3180],{},", …",[3132,3814,3815,3816,264,3819,264,3822,3812],{},"Listeners: ",[250,3817,3818],{},"@change",[250,3820,3821],{},"@focus",[250,3823,3824],{},"@blur",[3374,3826,3828],{"id":3827},"slots","Slots",[3272,3830,3831,3843],{},[3275,3832,3833],{},[3278,3834,3835,3838,3841],{},[3281,3836,3837],{},"Slot",[3281,3839,3840],{},"Scope",[3281,3842,3395],{},[3288,3844,3845],{},[3278,3846,3847,3852,3855],{},[3293,3848,3849],{},[250,3850,3851],{},"default",[3293,3853,3854],{},"none",[3293,3856,3857,3858,1659,3860,3862,3863,3865],{},"Hand-written ",[250,3859,1421],{},[250,3861,1662],{}," markup. When present it replaces the ",[250,3864,447],{},"-prop rendering; the placeholder option still renders before it.",[3867,3868,3869],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":396,"searchDepth":461,"depth":461,"links":3871},[3872,3873,3874,3875,3876,3877,3878,3879,3880,3881,3882,3883],{"id":339,"depth":461,"text":340},{"id":357,"depth":461,"text":358},{"id":690,"depth":461,"text":691},{"id":941,"depth":461,"text":942},{"id":1090,"depth":461,"text":1091},{"id":1410,"depth":461,"text":1411},{"id":1652,"depth":461,"text":1653},{"id":2014,"depth":461,"text":2015},{"id":2202,"depth":461,"text":2203},{"id":2599,"depth":461,"text":2600},{"id":3124,"depth":461,"text":210},{"id":3363,"depth":461,"text":320,"children":3884},[3885,3886,3887],{"id":3376,"depth":499,"text":3377},{"id":3722,"depth":499,"text":3723},{"id":3827,"depth":499,"text":3828},{},{"title":90,"description":91},"components\u002Fselect","SskpKXZVDbVnUoviidIryEca1-hQsyEcmD9Lwaqvrmo",1783874705952]