[{"data":1,"prerenderedAt":8124},["ShallowReactive",2],{"cmdk-index":3,"content:\u002Fcomponents\u002Flist":260},[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,236,240,244,248,252,256],{"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 warning 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 name 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. Behavior 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\nbehavior (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 behavior needs JavaScript — the standalone classes give you the look, and\nuseCombobox gives you the behavior 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 behavior: 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 behavior, no variants, no size scale.",{"path":49,"title":50,"description":51},"\u002Fcomponents\u002Fdrawer","Drawer","A panel docked to one edge of the viewport: a filter sheet, a settings pane, a cart, the navigation on a phone.\nIt runs on the same useDialog engine and the same native \u003Cdialog> element as OriDialog,\nso what a dialog gets from the platform, a drawer gets too. Opened modally (the default) it uses\nshowModal(): a backdrop, a focus trap, an inert page, Esc to close and focus returned to whatever opened it.\nOpened non-modally it is a manual popover, so it still sits in the top layer while the page behind stays\nlive. Swipe to dismiss, snap points and nested drawers are not in this version.",{"path":53,"title":54,"description":55},"\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, SegmentedControl and\nColorPicker 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,\nSegmentedControl, Combobox's listbox, ColorPicker) name themselves via aria-labelledby pointing at the field's label.",{"path":57,"title":58,"description":59},"\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":61,"title":62,"description":63},"\u002Fcomponents\u002Finput","Input","A labeled, 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":65,"title":66,"description":67},"\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 color, size, and variant tokens live on the children.",{"path":69,"title":70,"description":71},"\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":73,"title":74,"description":75},"\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":77,"title":78,"description":79},"\u002Fcomponents\u002Flist","List","A vertical list of rows for settings panels, action panels and navigation. Each row reads prepend → label →\nappend: an icon, a label with an optional subtitle, and at the end short meta text such as a shortcut, a\nchevron into a sub-panel, or a control of your own.",{"path":81,"title":82,"description":83},"\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. OriMenu still opens the panel in the top layer (popover=\"manual\" +\nshowPopover()), so an ancestor's transform, overflow or z-index cannot displace or clip it, and\nplaces it with the same CSS Anchor Positioning primitive as the Popover (ori-anchored), zero\npositioning JS. In your own markup, do the same; without popover the panel falls back to its z-index.",{"path":85,"title":86,"description":87},"\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":89,"title":90,"description":91},"\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":93,"title":94,"description":95},"\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.\nFor a short pick shown as one compact row of buttons (Light \u002F Dark \u002F Auto), use\nSegmentedControl: the same radio semantics, styled as segments.",{"path":97,"title":98,"description":99},"\u002Fcomponents\u002Fsegmented-control","Segmented control","A compact \"choose one\" row — Light \u002F Dark \u002F Auto. It is built like RadioGroup: a\nrole=\"radiogroup\" of real \u003Cinput type=\"radio\"> sharing one name, each input hidden over its segment.\nSo the browser gives you the behavior — arrow keys that move and select, a single Tab stop on the checked\nsegment, native form submission and RTL — and the CSS layer carries no JavaScript at all.",{"path":101,"title":102,"description":103},"\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":105,"title":106,"description":107},"\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":109,"title":110,"description":111},"\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. Color and the filled-track portion are driven by CSS custom properties;\nv-model carries a number.",{"path":113,"title":114,"description":115},"\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":117,"title":118,"description":119},"\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":121,"title":122,"description":123},"\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":125,"title":126,"description":127},"\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":129,"title":130,"description":131},"\u002Fcomponents\u002Ftable","Table","A styled native \u003Ctable>: a rule under the header row, hairlines between body rows, start-aligned cells, and a few\nmodifiers for stripes, a hover tint, a sticky header and cell density. The CSS layer works on any \u003Ctable> with\nno JavaScript; OriTable adds the caption and the accessibility of the box a wide table scrolls in.",{"path":133,"title":134,"description":135},"\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 color; disabled is the native button attribute.",{"path":137,"title":138,"description":139},"\u002Fcomponents\u002Ftag","Tag","A compact label for categorizing, 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":141,"title":142,"description":143},"\u002Fcomponents\u002Ftextarea","Textarea","A labeled, 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":145,"title":146,"description":147},"\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":149,"title":150,"description":151},"\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 behavior\nunderneath, useToolbar from @oriui\u002Fheadless, is a provide\u002Finject\nroving-focus context rather than a state machine over an array.",{"path":153,"title":154,"description":155},"\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 in CSS —\nno state machine, no positioning engine. Show is :focus-visible (keyboard focus) and :hover wrapped\nin @media (hover: hover) (pointer, without sticking open on touch); a click or a tap that focuses the\ntrigger does not show it. A press of the trigger hides it, the pointer can move onto the bubble, and\nEscape hides it without moving focus or the pointer (WCAG 1.4.13).",{"path":157,"title":158,"description":159},"\u002Fguides\u002Fcss","Using the CSS layer","The @oriui\u002Fcss package is oriUI's foundation: 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":161,"title":162,"description":163},"\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.\nThe same \u003COriButton> you shipped on day one becomes on-brand by the time you ship to users, and\nnothing about the component changes.",{"path":165,"title":166,"description":167},"\u002Fguides\u002Fdesign-tokens","Design tokens","Every oriUI package reads one set of design tokens. This page is the\ncatalog — every token, and the resolution model that turns a raw value into the color 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":169,"title":170,"description":171},"\u002Fguides\u002Frtl","Writing direction (RTL)","oriUI's style layer is written in logical properties — margin-inline, border-block,\ninset-inline-end, position-area — so it follows the writing direction the platform gives it. You\nturn RTL on the platform way, and the layer mirrors itself:",{"path":173,"title":174,"description":175},"\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 ·\nwarning · 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":177,"title":178,"description":179},"\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":181,"title":182,"description":183},"\u002Fheadless\u002Fcore","Core","The framework-agnostic heart of the headless layer: a behavior 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 behavior stays swappable per primitive,\nwithout touching markup.",{"path":185,"title":186,"description":187},"\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). Underneath is a zero-dependency sRGB engine — a loose\nparser and a lowercase formatter, hex \u002F rgb \u002F hsv \u002F hsl conversion, readable ink over a swatch by WCAG\nluminance — and the 2D-area math for pointer and keyboard. That engine is internal: it ships inside this\ncomposable, not as exports of its own.",{"path":189,"title":190,"description":191},"\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 behavior (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":193,"title":194,"description":195},"\u002Fheadless\u002Fuse-dialog","useDialog","A headless modal dialog primitive built on the native \u003Cdialog> element — focus trap, Escape to\nclose, focus return, and aria-modal semantics all come from the platform via showModal(). 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":197,"title":198,"description":199},"\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":201,"title":202,"description":203},"\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 standardize. While\nenabled, it attaches document listeners and calls onDismiss() when an interaction lands outside\nthe overlay's own elements. Both triggers are on by default — a pointerdown outside\n(pointerDownOutside) and focus moving outside (focusOutside) — and an overlay turns off the one that\ndoes not fit it:",{"path":205,"title":206,"description":207},"\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":209,"title":210,"description":211},"\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":213,"title":214,"description":215},"\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 colors until they re-render.",{"path":217,"title":218,"description":219},"\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 behavior is a framework-agnostic engine (a plain array + a Set\nof listeners + auto-dismiss timers) projected into the host framework's reactivity (in Vue, a reactive\narray). It is a client-side singleton — every useToast() call shares the one queue, so a push from\nanywhere reaches the single renderer.",{"path":221,"title":222,"description":223},"\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":225,"title":226,"description":227},"\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":229,"title":230,"description":231},"\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":233,"title":234,"description":235},"\u002Foverview\u002Fapplicability","Applicability","Where each oriUI package runs. The CSS works everywhere, the components are Vue, and the headless\ncomposables have a Vue adapter.",{"path":237,"title":238,"description":239},"\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":241,"title":242,"description":243},"\u002Foverview\u002Fcomparisons","Comparisons","oriUI combines three things that usually come separately: a CSS design system that needs no JavaScript,\nstyled Vue components, and headless behavior. This page sets it next to the libraries it learns from.\nIt has fewer components than most of them: we add one when an app built on oriUI needs it.",{"path":245,"title":246,"description":247},"\u002Foverview\u002Fget-started","Get started","Install oriUI and put a component on screen. Use only the packages you need.",{"path":249,"title":250,"description":251},"\u002Foverview\u002Finstallation","Installation","oriUI is three layers, one package each. Install only the layer you need — they share one token\ncontract, so you can add another later without reworking what you built.",{"path":253,"title":254,"description":255},"\u002Foverview\u002Fintroduction","Introduction","oriUI (織り, ori, \"weaving\") is a design system in plain CSS, with accessible Vue 3 components built\non it. It is made for our own apps first, so a component is added when one of them needs it.",{"path":257,"title":258,"description":259},"\u002Foverview\u002Fshowcase","Showcase","Apps built with oriUI. Each entry says what the app does and which parts of oriUI it uses, so you can see the\nlibrary inside a whole product, not one component at a time.",{"id":261,"title":78,"body":262,"description":79,"extension":488,"meta":8120,"navigation":2209,"path":77,"seo":8121,"stem":8122,"__hash__":8123},"docs\u002Fcomponents\u002Flist.md",{"type":263,"value":264,"toc":8095},"minimark",[265,269,278,298,343,348,413,417,443,447,479,506,510,520,524,539,1023,1027,1049,1827,1834,1838,1843,2044,2048,2051,2124,2138,2157,2695,2699,2708,2726,3096,3105,3678,3681,3705,3718,4124,4128,4141,4399,4403,4420,4539,4542,4555,5349,5352,5356,5370,5744,5751,5754,5761,5865,5869,5872,7277,7280,7283,7421,7469,7475,7478,7487,7492,7497,7540,7544,7744,7748,7754,7780,7825,7829,7887,7893,7921,8092],[266,267,78],"h1",{"id":268},"list",[270,271,272,273,277],"p",{},"A vertical list of rows for settings panels, action panels and navigation. Each row reads ",[274,275,276],"strong",{},"prepend → label →\nappend",": an icon, a label with an optional subtitle, and at the end short meta text such as a shortcut, a\nchevron into a sub-panel, or a control of your own.",[270,279,280,281,285,286,290,291,294,295,297],{},"A list is not a ",[282,283,284],"a",{"href":81},"menu",". A menu is a transient popup of actions with ",[287,288,289],"code",{},"role=\"menu\""," and roving\narrow keys. A list is part of the page, reached with ",[287,292,293],{},"Tab",", and a row can hold a control — a switch, a segmented\ncontrol — in a static row, which ",[287,296,289],{}," forbids.",[270,299,300,301,304,305,309,310,315,316,320,321,326,327,330,331,334,335,338,339,342],{},"The examples are organized by ",[274,302,303],{},"layer",": the ",[282,306,308],{"href":307},"#classes","class reference"," is the standalone\n",[274,311,312],{},[287,313,314],{},"@oriui\u002Fcss"," layer, and the ",[282,317,319],{"href":318},"#framework-api","Framework API"," is the ",[274,322,323],{},[287,324,325],{},"@oriui\u002Fvue"," components, ",[287,328,329],{},"OriList","\nand ",[287,332,333],{},"OriListItem",". Every example is live — flip its code between ",[274,336,337],{},"HTML"," (the standalone classes, also your\nhtmx \u002F Astro \u002F Svelte \u002F plain-HTML usage), ",[274,340,341],{},"Vue","; HTML is the default.",[344,345,347],"h2",{"id":346},"when-to-use","When to use",[349,350,351,364],"table",{},[352,353,354],"thead",{},[355,356,357,361],"tr",{},[358,359,360],"th",{},"Control",[358,362,363],{},"Pick it when",[365,366,367,377,386,395,404],"tbody",{},[355,368,369,374],{},[370,371,372],"td",{},[274,373,78],{},[370,375,376],{},"Rows that stay on the page: a settings panel, a panel of actions, a navigation column. Rows may hold controls.",[355,378,379,383],{},[370,380,381],{},[282,382,82],{"href":81},[370,384,385],{},"A transient popup opened from a trigger; arrow keys move through it, one action is chosen and it closes.",[355,387,388,392],{},[370,389,390],{},[282,391,134],{"href":133},[370,393,394],{},"Entries that switch panels of content in place.",[355,396,397,401],{},[370,398,399],{},[282,400,6],{"href":5},[370,402,403],{},"Sections that open and close to reveal their own content.",[355,405,406,410],{},[370,407,408],{},[282,409,130],{"href":129},[370,411,412],{},"Records compared across columns: a leaderboard, an invoice, a list of files with sizes and dates.",[344,414,416],{"id":415},"classes","Classes",[270,418,419,420,423,424,427,428,431,432,435,436,439,440,442],{},"A list is a block class plus single-class token utilities — one class repoints one token. A row is a\n",[287,421,422],{},"ori-list__row"," inside an ",[287,425,426],{},"ori-list__item","; its parts are the ",[287,429,430],{},"__start",", ",[287,433,434],{},"__main"," and ",[287,437,438],{},"__end"," cells. The Vue\nprops in ",[282,441,319],{"href":318}," map 1:1 to these.",[444,445],"class-table",{":rows":446},"[{\"class\":\"ori-list\",\"type\":\"Block\",\"description\":\"Required base class, on a \u003Ccode>ul\u003C\u002Fcode> with role=list. A flex column with a 2px gap and no marker, margin or padding. Bakes the primary accent and the md radius at zero specificity.\"},{\"class\":\"ori-list_divided\",\"type\":\"Modifier\",\"description\":\"No gap; a 1px hairline in the outline color between rows.\"},{\"class\":\"ori-color_*\",\"type\":\"Color\",\"description\":\"\u003Cb>primary\u003C\u002Fb> · secondary · success · warning · danger · info — the accent of the current row: its tint, its bar and the focus ring. Put it on the \u003Ccode>ul\u003C\u002Fcode>.\"},{\"class\":\"ori-size-radius_*\",\"type\":\"Radius\",\"description\":\"none · xs · sm · \u003Cb>md\u003C\u002Fb> · lg · xl · full — the corner radius of a row. Put it on the \u003Ccode>ul\u003C\u002Fcode>.\"},{\"class\":\"ori-list__item\",\"type\":\"Part\",\"description\":\"The \u003Ccode>li\u003C\u002Fcode> that wraps one row.\"},{\"class\":\"ori-list__row\",\"type\":\"Part\",\"description\":\"One row: a \u003Ccode>button\u003C\u002Fcode>, an \u003Ccode>a\u003C\u002Fcode> or a \u003Ccode>div\u003C\u002Fcode>. A flex row with a 0.75em gap and a 2.5em minimum height. Only a button or a link gets the hover tint and the pointer cursor.\"},{\"class\":\"ori-list__prepend · ori-list__append\",\"type\":\"Part\",\"description\":\"The leading and the trailing cell; neither shrinks. The prepended cell holds an icon (faded to 0.8); the appended one holds meta text, a chevron or a control.\"},{\"class\":\"ori-list__main\",\"type\":\"Part\",\"description\":\"The text column; it takes the remaining width and holds the label and the subtitle.\"},{\"class\":\"ori-list__label · ori-list__subtitle\",\"type\":\"Part\",\"description\":\"The label (one line, truncated with an ellipsis) \u002F a second line under it (0.85em, faded to 0.7).\"},{\"class\":\"ori-list__meta · ori-list__chevron\",\"type\":\"Part\",\"description\":\"Text at the end, such as a shortcut (0.8em, faded to 0.7) \u002F an arrow into a sub-panel (faded to 0.6, mirrored in RTL).\"},{\"class\":\"aria-current · disabled · aria-disabled\",\"type\":\"State\",\"description\":\"real attributes, not classes — the current row gets a tint and a bar; a disabled row is dimmed to 45% with a not-allowed cursor.\"}]",[270,448,449,452,453,456,457,460,461,464,465,431,468,471,472,474,475,478],{},[274,450,451],{},"À la carte:"," the classes above ship in ",[287,454,455],{},"@oriui\u002Fcss\u002Fcomponents\u002Flist.css",", which inlines the icon styles a row\nneeds. Import a foundation (",[287,458,459],{},"@oriui\u002Fcss\u002Fbase.css"," or ",[287,462,463],{},"@oriui\u002Fcss\u002Ftokens.css",") first — the token utilities\n(",[287,466,467],{},"ori-color_*",[287,469,470],{},"ori-size-radius_*",", …) live there, not in the component file. The full bundle ",[287,473,314],{}," is\nthe default and already carries both; see ",[282,476,477],{"href":157},"à-la-carte imports",".",[270,480,481,482,485,486,489,490,493,494,497,498,501,502,505],{},"Accent ",[287,483,484],{},"primary"," and radius ",[287,487,488],{},"md"," are baked in at zero specificity, so a bare ",[287,491,492],{},"ori-list"," is already complete and\none utility class on the ",[287,495,496],{},"\u003Cul>"," repoints either. Rows inherit the font and are sized in ",[287,499,500],{},"em",", so a ",[287,503,504],{},"font-size","\non the list (or any ancestor) scales them.",[344,507,509],{"id":508},"anatomy","Anatomy",[511,512,517],"pre",{"className":513,"code":515,"language":516},[514],"language-text","ul.ori-list                           [role=\"list\"]; ori-list_divided adds hairlines\n  li.ori-list__item                   one per row\n    button | a | div .ori-list__row   the row element: what it does decides which\n      span.ori-list__prepend          icon (optional, aria-hidden)\n      span.ori-list__main\n        span.ori-list__label          the label\n        span.ori-list__subtitle       second line (optional)\n      span.ori-list__append           optional\n        span.ori-list__meta           a shortcut, or any short text\n        svg.ori-list__chevron         arrow into a sub-panel (aria-hidden)\n                                      — or a control of your own, in a static row\n","text",[287,518,515],{"__ignoreMap":519},"",[344,521,523],{"id":522},"basic","Basic",[270,525,526,527,530,531,534,535,538],{},"Rows that only show information are static: no listener, no ",[287,528,529],{},"href",", so each is a plain ",[287,532,533],{},"\u003Cdiv>",". ",[287,536,537],{},"meta"," puts\na value or a shortcut at the end.",[540,541,542,558,611],"example",{},[492,543,545,550,554],{"style":544},"width: 100%; max-width: 22rem",[546,547],"ori-list-item",{"label":548,"meta":549},"Storage","2.4 of 5 GB",[546,551],{"label":552,"meta":553},"Last sync","2 minutes ago",[546,555],{"label":556,"meta":557},"Version","1.4.0",[559,560,561],"template",{"v-slot:vue":519},[511,562,566],{"className":563,"code":564,"language":565,"meta":519,"style":519},"language-vue shiki shiki-themes github-light github-dark","\u003COriList>\n    \u003COriListItem label=\"Storage\" meta=\"2.4 of 5 GB\" \u002F>\n    \u003COriListItem label=\"Last sync\" meta=\"2 minutes ago\" \u002F>\n    \u003COriListItem label=\"Version\" meta=\"1.4.0\" \u002F>\n\u003C\u002FOriList>\n","vue",[287,567,568,583,589,595,601],{"__ignoreMap":519},[569,570,573,577,580],"span",{"class":571,"line":572},"line",1,[569,574,576],{"class":575},"sVt8B","\u003C",[569,578,329],{"class":579},"s9eBZ",[569,581,582],{"class":575},">\n",[569,584,586],{"class":571,"line":585},2,[569,587,588],{"class":575},"    \u003COriListItem label=\"Storage\" meta=\"2.4 of 5 GB\" \u002F>\n",[569,590,592],{"class":571,"line":591},3,[569,593,594],{"class":575},"    \u003COriListItem label=\"Last sync\" meta=\"2 minutes ago\" \u002F>\n",[569,596,598],{"class":571,"line":597},4,[569,599,600],{"class":575},"    \u003COriListItem label=\"Version\" meta=\"1.4.0\" \u002F>\n",[569,602,604,607,609],{"class":571,"line":603},5,[569,605,606],{"class":575},"\u003C\u002F",[569,608,329],{"class":579},[569,610,582],{"class":575},[559,612,613],{"v-slot:html":519},[511,614,618],{"className":615,"code":616,"language":617,"meta":519,"style":519},"language-html shiki shiki-themes github-light github-dark","\u003C!-- accent primary and radius md are the baked defaults; role=\"list\" is stated on purpose, see Accessibility -->\n\u003Cul class=\"ori-list\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Storage\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">2.4 of 5 GB\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Last sync\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">2 minutes ago\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Version\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">1.4.0\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n\u003C\u002Ful>\n","html",[287,619,620,626,654,671,688,726,762,772,782,797,812,846,880,889,898,913,928,962,996,1005,1014],{"__ignoreMap":519},[569,621,622],{"class":571,"line":572},[569,623,625],{"class":624},"sJ8bj","\u003C!-- accent primary and radius md are the baked defaults; role=\"list\" is stated on purpose, see Accessibility -->\n",[569,627,628,630,633,637,640,644,647,649,652],{"class":571,"line":585},[569,629,576],{"class":575},[569,631,632],{"class":579},"ul",[569,634,636],{"class":635},"sScJk"," class",[569,638,639],{"class":575},"=",[569,641,643],{"class":642},"sZZnC","\"ori-list\"",[569,645,646],{"class":635}," role",[569,648,639],{"class":575},[569,650,651],{"class":642},"\"list\"",[569,653,582],{"class":575},[569,655,656,659,662,664,666,669],{"class":571,"line":591},[569,657,658],{"class":575},"    \u003C",[569,660,661],{"class":579},"li",[569,663,636],{"class":635},[569,665,639],{"class":575},[569,667,668],{"class":642},"\"ori-list__item\"",[569,670,582],{"class":575},[569,672,673,676,679,681,683,686],{"class":571,"line":597},[569,674,675],{"class":575},"        \u003C",[569,677,678],{"class":579},"div",[569,680,636],{"class":635},[569,682,639],{"class":575},[569,684,685],{"class":642},"\"ori-list__row\"",[569,687,582],{"class":575},[569,689,690,693,695,697,699,702,705,707,709,711,714,717,719,722,724],{"class":571,"line":603},[569,691,692],{"class":575},"            \u003C",[569,694,569],{"class":579},[569,696,636],{"class":635},[569,698,639],{"class":575},[569,700,701],{"class":642},"\"ori-list__main\"",[569,703,704],{"class":575},">\u003C",[569,706,569],{"class":579},[569,708,636],{"class":635},[569,710,639],{"class":575},[569,712,713],{"class":642},"\"ori-list__label\"",[569,715,716],{"class":575},">Storage\u003C\u002F",[569,718,569],{"class":579},[569,720,721],{"class":575},">\u003C\u002F",[569,723,569],{"class":579},[569,725,582],{"class":575},[569,727,729,731,733,735,737,740,742,744,746,748,751,754,756,758,760],{"class":571,"line":728},6,[569,730,692],{"class":575},[569,732,569],{"class":579},[569,734,636],{"class":635},[569,736,639],{"class":575},[569,738,739],{"class":642},"\"ori-list__append\"",[569,741,704],{"class":575},[569,743,569],{"class":579},[569,745,636],{"class":635},[569,747,639],{"class":575},[569,749,750],{"class":642},"\"ori-list__meta\"",[569,752,753],{"class":575},">2.4 of 5 GB\u003C\u002F",[569,755,569],{"class":579},[569,757,721],{"class":575},[569,759,569],{"class":579},[569,761,582],{"class":575},[569,763,765,768,770],{"class":571,"line":764},7,[569,766,767],{"class":575},"        \u003C\u002F",[569,769,678],{"class":579},[569,771,582],{"class":575},[569,773,775,778,780],{"class":571,"line":774},8,[569,776,777],{"class":575},"    \u003C\u002F",[569,779,661],{"class":579},[569,781,582],{"class":575},[569,783,785,787,789,791,793,795],{"class":571,"line":784},9,[569,786,658],{"class":575},[569,788,661],{"class":579},[569,790,636],{"class":635},[569,792,639],{"class":575},[569,794,668],{"class":642},[569,796,582],{"class":575},[569,798,800,802,804,806,808,810],{"class":571,"line":799},10,[569,801,675],{"class":575},[569,803,678],{"class":579},[569,805,636],{"class":635},[569,807,639],{"class":575},[569,809,685],{"class":642},[569,811,582],{"class":575},[569,813,815,817,819,821,823,825,827,829,831,833,835,838,840,842,844],{"class":571,"line":814},11,[569,816,692],{"class":575},[569,818,569],{"class":579},[569,820,636],{"class":635},[569,822,639],{"class":575},[569,824,701],{"class":642},[569,826,704],{"class":575},[569,828,569],{"class":579},[569,830,636],{"class":635},[569,832,639],{"class":575},[569,834,713],{"class":642},[569,836,837],{"class":575},">Last sync\u003C\u002F",[569,839,569],{"class":579},[569,841,721],{"class":575},[569,843,569],{"class":579},[569,845,582],{"class":575},[569,847,849,851,853,855,857,859,861,863,865,867,869,872,874,876,878],{"class":571,"line":848},12,[569,850,692],{"class":575},[569,852,569],{"class":579},[569,854,636],{"class":635},[569,856,639],{"class":575},[569,858,739],{"class":642},[569,860,704],{"class":575},[569,862,569],{"class":579},[569,864,636],{"class":635},[569,866,639],{"class":575},[569,868,750],{"class":642},[569,870,871],{"class":575},">2 minutes ago\u003C\u002F",[569,873,569],{"class":579},[569,875,721],{"class":575},[569,877,569],{"class":579},[569,879,582],{"class":575},[569,881,883,885,887],{"class":571,"line":882},13,[569,884,767],{"class":575},[569,886,678],{"class":579},[569,888,582],{"class":575},[569,890,892,894,896],{"class":571,"line":891},14,[569,893,777],{"class":575},[569,895,661],{"class":579},[569,897,582],{"class":575},[569,899,901,903,905,907,909,911],{"class":571,"line":900},15,[569,902,658],{"class":575},[569,904,661],{"class":579},[569,906,636],{"class":635},[569,908,639],{"class":575},[569,910,668],{"class":642},[569,912,582],{"class":575},[569,914,916,918,920,922,924,926],{"class":571,"line":915},16,[569,917,675],{"class":575},[569,919,678],{"class":579},[569,921,636],{"class":635},[569,923,639],{"class":575},[569,925,685],{"class":642},[569,927,582],{"class":575},[569,929,931,933,935,937,939,941,943,945,947,949,951,954,956,958,960],{"class":571,"line":930},17,[569,932,692],{"class":575},[569,934,569],{"class":579},[569,936,636],{"class":635},[569,938,639],{"class":575},[569,940,701],{"class":642},[569,942,704],{"class":575},[569,944,569],{"class":579},[569,946,636],{"class":635},[569,948,639],{"class":575},[569,950,713],{"class":642},[569,952,953],{"class":575},">Version\u003C\u002F",[569,955,569],{"class":579},[569,957,721],{"class":575},[569,959,569],{"class":579},[569,961,582],{"class":575},[569,963,965,967,969,971,973,975,977,979,981,983,985,988,990,992,994],{"class":571,"line":964},18,[569,966,692],{"class":575},[569,968,569],{"class":579},[569,970,636],{"class":635},[569,972,639],{"class":575},[569,974,739],{"class":642},[569,976,704],{"class":575},[569,978,569],{"class":579},[569,980,636],{"class":635},[569,982,639],{"class":575},[569,984,750],{"class":642},[569,986,987],{"class":575},">1.4.0\u003C\u002F",[569,989,569],{"class":579},[569,991,721],{"class":575},[569,993,569],{"class":579},[569,995,582],{"class":575},[569,997,999,1001,1003],{"class":571,"line":998},19,[569,1000,767],{"class":575},[569,1002,678],{"class":579},[569,1004,582],{"class":575},[569,1006,1008,1010,1012],{"class":571,"line":1007},20,[569,1009,777],{"class":575},[569,1011,661],{"class":579},[569,1013,582],{"class":575},[569,1015,1017,1019,1021],{"class":571,"line":1016},21,[569,1018,606],{"class":575},[569,1020,632],{"class":579},[569,1022,582],{"class":575},[344,1024,1026],{"id":1025},"icon-subtitle-meta-and-chevron","Icon, subtitle, meta and chevron",[270,1028,1029,1030,1033,1034,1037,1038,1041,1042,1044,1045,1048],{},"The four parts of a row. ",[287,1031,1032],{},"icon"," is an SVG path drawn by ",[282,1035,1036],{"href":57},"OriIcon"," before the label;\n",[287,1039,1040],{},"subtitle"," is a second line under the label; ",[287,1043,537],{}," is short text at the end; ",[287,1046,1047],{},"chevron"," is an arrow at the end\nthat says the row opens a sub-panel. They compose — the last row uses all four.",[540,1050,1051,1074,1152],{},[492,1052,1053,1056,1060,1064,1068],{"style":544},[546,1054],{"label":58,"icon":1055},"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z",[546,1057],{"label":1058,"subtitle":1059},"Subtitle","A second line under the label",[546,1061],{"label":1062,"meta":1063},"Meta","Ctrl+S",[546,1065],{"label":1066,":chevron":1067},"Chevron","true",[546,1069],{"label":1070,"subtitle":1071,"meta":1072,"icon":1073,":chevron":1067},"All four","Export the drawing","Ctrl+E","M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",[559,1075,1076],{"v-slot:vue":519},[511,1077,1079],{"className":563,"code":1078,"language":565,"meta":519,"style":519},"\u003COriList>\n    \u003COriListItem icon=\"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z\" label=\"Icon\" \u002F>\n    \u003COriListItem label=\"Description\" subtitle=\"A second line under the label\" \u002F>\n    \u003COriListItem label=\"Hint\" meta=\"Ctrl+S\" \u002F>\n    \u003COriListItem label=\"Chevron\" chevron \u002F>\n    \u003COriListItem\n        icon=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\n        label=\"All four\"\n        subtitle=\"Export the drawing\"\n        meta=\"Ctrl+E\"\n        chevron\n    \u002F>\n\u003C\u002FOriList>\n",[287,1080,1081,1089,1094,1099,1104,1109,1114,1119,1124,1129,1134,1139,1144],{"__ignoreMap":519},[569,1082,1083,1085,1087],{"class":571,"line":572},[569,1084,576],{"class":575},[569,1086,329],{"class":579},[569,1088,582],{"class":575},[569,1090,1091],{"class":571,"line":585},[569,1092,1093],{"class":575},"    \u003COriListItem icon=\"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z\" label=\"Icon\" \u002F>\n",[569,1095,1096],{"class":571,"line":591},[569,1097,1098],{"class":575},"    \u003COriListItem label=\"Description\" subtitle=\"A second line under the label\" \u002F>\n",[569,1100,1101],{"class":571,"line":597},[569,1102,1103],{"class":575},"    \u003COriListItem label=\"Hint\" meta=\"Ctrl+S\" \u002F>\n",[569,1105,1106],{"class":571,"line":603},[569,1107,1108],{"class":575},"    \u003COriListItem label=\"Chevron\" chevron \u002F>\n",[569,1110,1111],{"class":571,"line":728},[569,1112,1113],{"class":575},"    \u003COriListItem\n",[569,1115,1116],{"class":571,"line":764},[569,1117,1118],{"class":575},"        icon=\"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\n",[569,1120,1121],{"class":571,"line":774},[569,1122,1123],{"class":575},"        label=\"All four\"\n",[569,1125,1126],{"class":571,"line":784},[569,1127,1128],{"class":575},"        subtitle=\"Export the drawing\"\n",[569,1130,1131],{"class":571,"line":799},[569,1132,1133],{"class":575},"        meta=\"Ctrl+E\"\n",[569,1135,1136],{"class":571,"line":814},[569,1137,1138],{"class":575},"        chevron\n",[569,1140,1141],{"class":571,"line":848},[569,1142,1143],{"class":575},"    \u002F>\n",[569,1145,1146,1148,1150],{"class":571,"line":882},[569,1147,606],{"class":575},[569,1149,329],{"class":579},[569,1151,582],{"class":575},[559,1153,1154],{"v-slot:html":519},[511,1155,1157],{"className":615,"code":1156,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003C!-- the icon is an OriIcon: a decorative \u003Ci> carrying an inline SVG -->\n            \u003Cspan class=\"ori-list__prepend\">\n                \u003Ci class=\"ori-icon ori-icon_inherit\" aria-hidden=\"true\">\n                    \u003Csvg viewBox=\"0 0 24 24\">\u003Cpath d=\"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z\" \u002F>\u003C\u002Fsvg>\n                \u003C\u002Fi>\n            \u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Icon\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Description\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">A second line under the label\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Hint\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">Ctrl+S\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Chevron\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\n                \u003Csvg class=\"ori-list__chevron\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" aria-hidden=\"true\">\n                    \u003Cpath\n                        d=\"m9 6 6 6-6 6\"\n                        fill=\"none\"\n                        stroke=\"currentcolor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                    \u002F>\n                \u003C\u002Fsvg>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003C!-- … and a row with all four: prepend, main (label + subtitle), append (meta + chevron) -->\n\u003C\u002Ful>\n",[287,1158,1159,1179,1193,1207,1212,1227,1252,1288,1297,1306,1339,1347,1355,1369,1383,1397,1416,1436,1444,1452,1460,1474,1489,1523,1557,1566,1575,1590,1605,1639,1654,1697,1705,1716,1727,1738,1749,1760,1770,1776,1785,1794,1803,1812,1818],{"__ignoreMap":519},[569,1160,1161,1163,1165,1167,1169,1171,1173,1175,1177],{"class":571,"line":572},[569,1162,576],{"class":575},[569,1164,632],{"class":579},[569,1166,636],{"class":635},[569,1168,639],{"class":575},[569,1170,643],{"class":642},[569,1172,646],{"class":635},[569,1174,639],{"class":575},[569,1176,651],{"class":642},[569,1178,582],{"class":575},[569,1180,1181,1183,1185,1187,1189,1191],{"class":571,"line":585},[569,1182,658],{"class":575},[569,1184,661],{"class":579},[569,1186,636],{"class":635},[569,1188,639],{"class":575},[569,1190,668],{"class":642},[569,1192,582],{"class":575},[569,1194,1195,1197,1199,1201,1203,1205],{"class":571,"line":591},[569,1196,675],{"class":575},[569,1198,678],{"class":579},[569,1200,636],{"class":635},[569,1202,639],{"class":575},[569,1204,685],{"class":642},[569,1206,582],{"class":575},[569,1208,1209],{"class":571,"line":597},[569,1210,1211],{"class":624},"            \u003C!-- the icon is an OriIcon: a decorative \u003Ci> carrying an inline SVG -->\n",[569,1213,1214,1216,1218,1220,1222,1225],{"class":571,"line":603},[569,1215,692],{"class":575},[569,1217,569],{"class":579},[569,1219,636],{"class":635},[569,1221,639],{"class":575},[569,1223,1224],{"class":642},"\"ori-list__prepend\"",[569,1226,582],{"class":575},[569,1228,1229,1232,1235,1237,1239,1242,1245,1247,1250],{"class":571,"line":728},[569,1230,1231],{"class":575},"                \u003C",[569,1233,1234],{"class":579},"i",[569,1236,636],{"class":635},[569,1238,639],{"class":575},[569,1240,1241],{"class":642},"\"ori-icon ori-icon_inherit\"",[569,1243,1244],{"class":635}," aria-hidden",[569,1246,639],{"class":575},[569,1248,1249],{"class":642},"\"true\"",[569,1251,582],{"class":575},[569,1253,1254,1257,1260,1263,1265,1268,1270,1273,1276,1278,1281,1284,1286],{"class":571,"line":764},[569,1255,1256],{"class":575},"                    \u003C",[569,1258,1259],{"class":579},"svg",[569,1261,1262],{"class":635}," viewBox",[569,1264,639],{"class":575},[569,1266,1267],{"class":642},"\"0 0 24 24\"",[569,1269,704],{"class":575},[569,1271,1272],{"class":579},"path",[569,1274,1275],{"class":635}," d",[569,1277,639],{"class":575},[569,1279,1280],{"class":642},"\"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z\"",[569,1282,1283],{"class":575}," \u002F>\u003C\u002F",[569,1285,1259],{"class":579},[569,1287,582],{"class":575},[569,1289,1290,1293,1295],{"class":571,"line":774},[569,1291,1292],{"class":575},"                \u003C\u002F",[569,1294,1234],{"class":579},[569,1296,582],{"class":575},[569,1298,1299,1302,1304],{"class":571,"line":784},[569,1300,1301],{"class":575},"            \u003C\u002F",[569,1303,569],{"class":579},[569,1305,582],{"class":575},[569,1307,1308,1310,1312,1314,1316,1318,1320,1322,1324,1326,1328,1331,1333,1335,1337],{"class":571,"line":799},[569,1309,692],{"class":575},[569,1311,569],{"class":579},[569,1313,636],{"class":635},[569,1315,639],{"class":575},[569,1317,701],{"class":642},[569,1319,704],{"class":575},[569,1321,569],{"class":579},[569,1323,636],{"class":635},[569,1325,639],{"class":575},[569,1327,713],{"class":642},[569,1329,1330],{"class":575},">Icon\u003C\u002F",[569,1332,569],{"class":579},[569,1334,721],{"class":575},[569,1336,569],{"class":579},[569,1338,582],{"class":575},[569,1340,1341,1343,1345],{"class":571,"line":814},[569,1342,767],{"class":575},[569,1344,678],{"class":579},[569,1346,582],{"class":575},[569,1348,1349,1351,1353],{"class":571,"line":848},[569,1350,777],{"class":575},[569,1352,661],{"class":579},[569,1354,582],{"class":575},[569,1356,1357,1359,1361,1363,1365,1367],{"class":571,"line":882},[569,1358,658],{"class":575},[569,1360,661],{"class":579},[569,1362,636],{"class":635},[569,1364,639],{"class":575},[569,1366,668],{"class":642},[569,1368,582],{"class":575},[569,1370,1371,1373,1375,1377,1379,1381],{"class":571,"line":891},[569,1372,675],{"class":575},[569,1374,678],{"class":579},[569,1376,636],{"class":635},[569,1378,639],{"class":575},[569,1380,685],{"class":642},[569,1382,582],{"class":575},[569,1384,1385,1387,1389,1391,1393,1395],{"class":571,"line":900},[569,1386,692],{"class":575},[569,1388,569],{"class":579},[569,1390,636],{"class":635},[569,1392,639],{"class":575},[569,1394,701],{"class":642},[569,1396,582],{"class":575},[569,1398,1399,1401,1403,1405,1407,1409,1412,1414],{"class":571,"line":915},[569,1400,1231],{"class":575},[569,1402,569],{"class":579},[569,1404,636],{"class":635},[569,1406,639],{"class":575},[569,1408,713],{"class":642},[569,1410,1411],{"class":575},">Description\u003C\u002F",[569,1413,569],{"class":579},[569,1415,582],{"class":575},[569,1417,1418,1420,1422,1424,1426,1429,1432,1434],{"class":571,"line":930},[569,1419,1231],{"class":575},[569,1421,569],{"class":579},[569,1423,636],{"class":635},[569,1425,639],{"class":575},[569,1427,1428],{"class":642},"\"ori-list__subtitle\"",[569,1430,1431],{"class":575},">A second line under the label\u003C\u002F",[569,1433,569],{"class":579},[569,1435,582],{"class":575},[569,1437,1438,1440,1442],{"class":571,"line":964},[569,1439,1301],{"class":575},[569,1441,569],{"class":579},[569,1443,582],{"class":575},[569,1445,1446,1448,1450],{"class":571,"line":998},[569,1447,767],{"class":575},[569,1449,678],{"class":579},[569,1451,582],{"class":575},[569,1453,1454,1456,1458],{"class":571,"line":1007},[569,1455,777],{"class":575},[569,1457,661],{"class":579},[569,1459,582],{"class":575},[569,1461,1462,1464,1466,1468,1470,1472],{"class":571,"line":1016},[569,1463,658],{"class":575},[569,1465,661],{"class":579},[569,1467,636],{"class":635},[569,1469,639],{"class":575},[569,1471,668],{"class":642},[569,1473,582],{"class":575},[569,1475,1477,1479,1481,1483,1485,1487],{"class":571,"line":1476},22,[569,1478,675],{"class":575},[569,1480,678],{"class":579},[569,1482,636],{"class":635},[569,1484,639],{"class":575},[569,1486,685],{"class":642},[569,1488,582],{"class":575},[569,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1515,1517,1519,1521],{"class":571,"line":1491},23,[569,1493,692],{"class":575},[569,1495,569],{"class":579},[569,1497,636],{"class":635},[569,1499,639],{"class":575},[569,1501,701],{"class":642},[569,1503,704],{"class":575},[569,1505,569],{"class":579},[569,1507,636],{"class":635},[569,1509,639],{"class":575},[569,1511,713],{"class":642},[569,1513,1514],{"class":575},">Hint\u003C\u002F",[569,1516,569],{"class":579},[569,1518,721],{"class":575},[569,1520,569],{"class":579},[569,1522,582],{"class":575},[569,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1549,1551,1553,1555],{"class":571,"line":1525},24,[569,1527,692],{"class":575},[569,1529,569],{"class":579},[569,1531,636],{"class":635},[569,1533,639],{"class":575},[569,1535,739],{"class":642},[569,1537,704],{"class":575},[569,1539,569],{"class":579},[569,1541,636],{"class":635},[569,1543,639],{"class":575},[569,1545,750],{"class":642},[569,1547,1548],{"class":575},">Ctrl+S\u003C\u002F",[569,1550,569],{"class":579},[569,1552,721],{"class":575},[569,1554,569],{"class":579},[569,1556,582],{"class":575},[569,1558,1560,1562,1564],{"class":571,"line":1559},25,[569,1561,767],{"class":575},[569,1563,678],{"class":579},[569,1565,582],{"class":575},[569,1567,1569,1571,1573],{"class":571,"line":1568},26,[569,1570,777],{"class":575},[569,1572,661],{"class":579},[569,1574,582],{"class":575},[569,1576,1578,1580,1582,1584,1586,1588],{"class":571,"line":1577},27,[569,1579,658],{"class":575},[569,1581,661],{"class":579},[569,1583,636],{"class":635},[569,1585,639],{"class":575},[569,1587,668],{"class":642},[569,1589,582],{"class":575},[569,1591,1593,1595,1597,1599,1601,1603],{"class":571,"line":1592},28,[569,1594,675],{"class":575},[569,1596,678],{"class":579},[569,1598,636],{"class":635},[569,1600,639],{"class":575},[569,1602,685],{"class":642},[569,1604,582],{"class":575},[569,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1631,1633,1635,1637],{"class":571,"line":1607},29,[569,1609,692],{"class":575},[569,1611,569],{"class":579},[569,1613,636],{"class":635},[569,1615,639],{"class":575},[569,1617,701],{"class":642},[569,1619,704],{"class":575},[569,1621,569],{"class":579},[569,1623,636],{"class":635},[569,1625,639],{"class":575},[569,1627,713],{"class":642},[569,1629,1630],{"class":575},">Chevron\u003C\u002F",[569,1632,569],{"class":579},[569,1634,721],{"class":575},[569,1636,569],{"class":579},[569,1638,582],{"class":575},[569,1640,1642,1644,1646,1648,1650,1652],{"class":571,"line":1641},30,[569,1643,692],{"class":575},[569,1645,569],{"class":579},[569,1647,636],{"class":635},[569,1649,639],{"class":575},[569,1651,739],{"class":642},[569,1653,582],{"class":575},[569,1655,1657,1659,1661,1663,1665,1668,1670,1672,1674,1677,1679,1682,1685,1687,1689,1691,1693,1695],{"class":571,"line":1656},31,[569,1658,1231],{"class":575},[569,1660,1259],{"class":579},[569,1662,636],{"class":635},[569,1664,639],{"class":575},[569,1666,1667],{"class":642},"\"ori-list__chevron\"",[569,1669,1262],{"class":635},[569,1671,639],{"class":575},[569,1673,1267],{"class":642},[569,1675,1676],{"class":635}," width",[569,1678,639],{"class":575},[569,1680,1681],{"class":642},"\"1em\"",[569,1683,1684],{"class":635}," height",[569,1686,639],{"class":575},[569,1688,1681],{"class":642},[569,1690,1244],{"class":635},[569,1692,639],{"class":575},[569,1694,1249],{"class":642},[569,1696,582],{"class":575},[569,1698,1700,1702],{"class":571,"line":1699},32,[569,1701,1256],{"class":575},[569,1703,1704],{"class":579},"path\n",[569,1706,1708,1711,1713],{"class":571,"line":1707},33,[569,1709,1710],{"class":635},"                        d",[569,1712,639],{"class":575},[569,1714,1715],{"class":642},"\"m9 6 6 6-6 6\"\n",[569,1717,1719,1722,1724],{"class":571,"line":1718},34,[569,1720,1721],{"class":635},"                        fill",[569,1723,639],{"class":575},[569,1725,1726],{"class":642},"\"none\"\n",[569,1728,1730,1733,1735],{"class":571,"line":1729},35,[569,1731,1732],{"class":635},"                        stroke",[569,1734,639],{"class":575},[569,1736,1737],{"class":642},"\"currentcolor\"\n",[569,1739,1741,1744,1746],{"class":571,"line":1740},36,[569,1742,1743],{"class":635},"                        stroke-width",[569,1745,639],{"class":575},[569,1747,1748],{"class":642},"\"2\"\n",[569,1750,1752,1755,1757],{"class":571,"line":1751},37,[569,1753,1754],{"class":635},"                        stroke-linecap",[569,1756,639],{"class":575},[569,1758,1759],{"class":642},"\"round\"\n",[569,1761,1763,1766,1768],{"class":571,"line":1762},38,[569,1764,1765],{"class":635},"                        stroke-linejoin",[569,1767,639],{"class":575},[569,1769,1759],{"class":642},[569,1771,1773],{"class":571,"line":1772},39,[569,1774,1775],{"class":575},"                    \u002F>\n",[569,1777,1779,1781,1783],{"class":571,"line":1778},40,[569,1780,1292],{"class":575},[569,1782,1259],{"class":579},[569,1784,582],{"class":575},[569,1786,1788,1790,1792],{"class":571,"line":1787},41,[569,1789,1301],{"class":575},[569,1791,569],{"class":579},[569,1793,582],{"class":575},[569,1795,1797,1799,1801],{"class":571,"line":1796},42,[569,1798,767],{"class":575},[569,1800,678],{"class":579},[569,1802,582],{"class":575},[569,1804,1806,1808,1810],{"class":571,"line":1805},43,[569,1807,777],{"class":575},[569,1809,661],{"class":579},[569,1811,582],{"class":575},[569,1813,1815],{"class":571,"line":1814},44,[569,1816,1817],{"class":624},"    \u003C!-- … and a row with all four: prepend, main (label + subtitle), append (meta + chevron) -->\n",[569,1819,1821,1823,1825],{"class":571,"line":1820},45,[569,1822,606],{"class":575},[569,1824,632],{"class":579},[569,1826,582],{"class":575},[270,1828,1829,1830,478],{},"The chevron is drawn on the inline-end side and mirrored in RTL — see ",[282,1831,1833],{"href":1832},"#right-to-left","Right to left",[344,1835,1837],{"id":1836},"divided","Divided",[270,1839,1840,1842],{},[287,1841,1836],{}," removes the gap between rows and draws a hairline between them instead — the shape of a settings\npanel or a stack of actions.",[540,1844,1845,1858,1899],{},[492,1846,1847,1851,1855],{"style":544,":divided":1067},[546,1848],{"label":1849,"subtitle":1850},"Profile","Name, photo and bio",[546,1852],{"label":1853,"subtitle":1854},"Privacy","Who can see your drawings",[546,1856],{"label":548,"subtitle":1857},"2.4 of 5 GB used",[559,1859,1860],{"v-slot:vue":519},[511,1861,1863],{"className":563,"code":1862,"language":565,"meta":519,"style":519},"\u003COriList divided>\n    \u003COriListItem label=\"Profile\" subtitle=\"Name, photo and bio\" \u002F>\n    \u003COriListItem label=\"Privacy\" subtitle=\"Who can see your drawings\" \u002F>\n    \u003COriListItem label=\"Storage\" subtitle=\"2.4 of 5 GB used\" \u002F>\n\u003C\u002FOriList>\n",[287,1864,1865,1876,1881,1886,1891],{"__ignoreMap":519},[569,1866,1867,1869,1871,1874],{"class":571,"line":572},[569,1868,576],{"class":575},[569,1870,329],{"class":579},[569,1872,1873],{"class":635}," divided",[569,1875,582],{"class":575},[569,1877,1878],{"class":571,"line":585},[569,1879,1880],{"class":575},"    \u003COriListItem label=\"Profile\" subtitle=\"Name, photo and bio\" \u002F>\n",[569,1882,1883],{"class":571,"line":591},[569,1884,1885],{"class":575},"    \u003COriListItem label=\"Privacy\" subtitle=\"Who can see your drawings\" \u002F>\n",[569,1887,1888],{"class":571,"line":597},[569,1889,1890],{"class":575},"    \u003COriListItem label=\"Storage\" subtitle=\"2.4 of 5 GB used\" \u002F>\n",[569,1892,1893,1895,1897],{"class":571,"line":603},[569,1894,606],{"class":575},[569,1896,329],{"class":579},[569,1898,582],{"class":575},[559,1900,1901],{"v-slot:html":519},[511,1902,1904],{"className":615,"code":1903,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list ori-list_divided\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Profile\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Name, photo and bio\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003C!-- … Privacy, Storage -->\n\u003C\u002Ful>\n",[287,1905,1906,1927,1941,1955,1969,1988,2007,2015,2023,2031,2036],{"__ignoreMap":519},[569,1907,1908,1910,1912,1914,1916,1919,1921,1923,1925],{"class":571,"line":572},[569,1909,576],{"class":575},[569,1911,632],{"class":579},[569,1913,636],{"class":635},[569,1915,639],{"class":575},[569,1917,1918],{"class":642},"\"ori-list ori-list_divided\"",[569,1920,646],{"class":635},[569,1922,639],{"class":575},[569,1924,651],{"class":642},[569,1926,582],{"class":575},[569,1928,1929,1931,1933,1935,1937,1939],{"class":571,"line":585},[569,1930,658],{"class":575},[569,1932,661],{"class":579},[569,1934,636],{"class":635},[569,1936,639],{"class":575},[569,1938,668],{"class":642},[569,1940,582],{"class":575},[569,1942,1943,1945,1947,1949,1951,1953],{"class":571,"line":591},[569,1944,675],{"class":575},[569,1946,678],{"class":579},[569,1948,636],{"class":635},[569,1950,639],{"class":575},[569,1952,685],{"class":642},[569,1954,582],{"class":575},[569,1956,1957,1959,1961,1963,1965,1967],{"class":571,"line":597},[569,1958,692],{"class":575},[569,1960,569],{"class":579},[569,1962,636],{"class":635},[569,1964,639],{"class":575},[569,1966,701],{"class":642},[569,1968,582],{"class":575},[569,1970,1971,1973,1975,1977,1979,1981,1984,1986],{"class":571,"line":603},[569,1972,1231],{"class":575},[569,1974,569],{"class":579},[569,1976,636],{"class":635},[569,1978,639],{"class":575},[569,1980,713],{"class":642},[569,1982,1983],{"class":575},">Profile\u003C\u002F",[569,1985,569],{"class":579},[569,1987,582],{"class":575},[569,1989,1990,1992,1994,1996,1998,2000,2003,2005],{"class":571,"line":728},[569,1991,1231],{"class":575},[569,1993,569],{"class":579},[569,1995,636],{"class":635},[569,1997,639],{"class":575},[569,1999,1428],{"class":642},[569,2001,2002],{"class":575},">Name, photo and bio\u003C\u002F",[569,2004,569],{"class":579},[569,2006,582],{"class":575},[569,2008,2009,2011,2013],{"class":571,"line":764},[569,2010,1301],{"class":575},[569,2012,569],{"class":579},[569,2014,582],{"class":575},[569,2016,2017,2019,2021],{"class":571,"line":774},[569,2018,767],{"class":575},[569,2020,678],{"class":579},[569,2022,582],{"class":575},[569,2024,2025,2027,2029],{"class":571,"line":784},[569,2026,777],{"class":575},[569,2028,661],{"class":579},[569,2030,582],{"class":575},[569,2032,2033],{"class":571,"line":799},[569,2034,2035],{"class":624},"    \u003C!-- … Privacy, Storage -->\n",[569,2037,2038,2040,2042],{"class":571,"line":814},[569,2039,606],{"class":575},[569,2041,632],{"class":579},[569,2043,582],{"class":575},[344,2045,2047],{"id":2046},"rows-that-act","Rows that act",[270,2049,2050],{},"The row element follows what the row does. The first rule that matches wins:",[349,2052,2053,2066],{},[352,2054,2055],{},[355,2056,2057,2060,2063],{},[358,2058,2059],{},"You pass",[358,2061,2062],{},"The row is",[358,2064,2065],{},"Use it for",[365,2067,2068,2081,2095,2112],{},[355,2069,2070,2075,2078],{},[370,2071,2072],{},[287,2073,2074],{},"as",[370,2076,2077],{},"that tag or component",[370,2079,2080],{},"A router link, or any element of your own.",[355,2082,2083,2087,2092],{},[370,2084,2085],{},[287,2086,529],{},[370,2088,2089],{},[287,2090,2091],{},"\u003Ca>",[370,2093,2094],{},"Navigation.",[355,2096,2097,2104,2109],{},[370,2098,2099,2100,2103],{},"a click listener (",[287,2101,2102],{},"@click",")",[370,2105,2106],{},[287,2107,2108],{},"\u003Cbutton type=\"button\">",[370,2110,2111],{},"An action: save, export, open a sub-panel.",[355,2113,2114,2117,2121],{},[370,2115,2116],{},"none of these",[370,2118,2119],{},[287,2120,533],{},[370,2122,2123],{},"Information, or a row that holds a control of its own.",[270,2125,2126,2127,2129,2130,2134,2135,478],{},"Only a static ",[287,2128,533],{}," row may hold a control, since a control inside a button or a link is invalid HTML — see\n",[282,2131,2133],{"href":2132},"#control-in-a-row","Control in a row",". Attributes and listeners go to the row element, not to the ",[287,2136,2137],{},"\u003Cli>",[270,2139,2140,2141,460,2144,2147,2148,2151,2152,2154,2155,478],{},"A button row is activated with ",[287,2142,2143],{},"Enter",[287,2145,2146],{},"Space",". Click one below; the last, ",[287,2149,2150],{},"disabled",", is a real\n",[287,2153,2150],{}," button and is skipped by ",[287,2156,293],{},[540,2158,2159,2163,2441],{},[2160,2161],"list-demo",{"kind":2162},"actions",[559,2164,2165],{"v-slot:vue":519},[511,2166,2168],{"className":563,"code":2167,"language":565,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst last = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COriList divided>\n        \u003COriListItem label=\"New drawing\" meta=\"Ctrl+N\" @click=\"last = 'New drawing'\" \u002F>\n        \u003COriListItem label=\"Save\" meta=\"Ctrl+S\" @click=\"last = 'Save'\" \u002F>\n        \u003COriListItem label=\"Export\" chevron @click=\"last = 'Export'\" \u002F>\n        \u003COriListItem label=\"Revert to saved\" disabled @click=\"last = 'Revert to saved'\" \u002F>\n    \u003C\u002FOriList>\n    \u003Cp>Last activated: {{ last || 'nothing yet' }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[287,2169,2170,2190,2205,2211,2235,2243,2247,2255,2265,2309,2346,2379,2412,2420,2433],{"__ignoreMap":519},[569,2171,2172,2174,2177,2180,2183,2185,2188],{"class":571,"line":572},[569,2173,576],{"class":575},[569,2175,2176],{"class":579},"script",[569,2178,2179],{"class":635}," setup",[569,2181,2182],{"class":635}," lang",[569,2184,639],{"class":575},[569,2186,2187],{"class":642},"\"ts\"",[569,2189,582],{"class":575},[569,2191,2192,2196,2199,2202],{"class":571,"line":585},[569,2193,2195],{"class":2194},"szBVR","import",[569,2197,2198],{"class":575}," { ref } ",[569,2200,2201],{"class":2194},"from",[569,2203,2204],{"class":642}," 'vue'\n",[569,2206,2207],{"class":571,"line":591},[569,2208,2210],{"emptyLinePlaceholder":2209},true,"\n",[569,2212,2213,2216,2220,2223,2226,2229,2232],{"class":571,"line":597},[569,2214,2215],{"class":2194},"const",[569,2217,2219],{"class":2218},"sj4cs"," last",[569,2221,2222],{"class":2194}," =",[569,2224,2225],{"class":635}," ref",[569,2227,2228],{"class":575},"(",[569,2230,2231],{"class":642},"''",[569,2233,2234],{"class":575},")\n",[569,2236,2237,2239,2241],{"class":571,"line":603},[569,2238,606],{"class":575},[569,2240,2176],{"class":579},[569,2242,582],{"class":575},[569,2244,2245],{"class":571,"line":728},[569,2246,2210],{"emptyLinePlaceholder":2209},[569,2248,2249,2251,2253],{"class":571,"line":764},[569,2250,576],{"class":575},[569,2252,559],{"class":579},[569,2254,582],{"class":575},[569,2256,2257,2259,2261,2263],{"class":571,"line":774},[569,2258,658],{"class":575},[569,2260,329],{"class":579},[569,2262,1873],{"class":635},[569,2264,582],{"class":575},[569,2266,2267,2269,2271,2274,2276,2279,2282,2284,2287,2290,2293,2295,2298,2301,2303,2306],{"class":571,"line":784},[569,2268,675],{"class":575},[569,2270,333],{"class":579},[569,2272,2273],{"class":635}," label",[569,2275,639],{"class":575},[569,2277,2278],{"class":642},"\"New drawing\"",[569,2280,2281],{"class":635}," meta",[569,2283,639],{"class":575},[569,2285,2286],{"class":642},"\"Ctrl+N\"",[569,2288,2289],{"class":575}," @",[569,2291,2292],{"class":635},"click",[569,2294,639],{"class":575},[569,2296,2297],{"class":642},"\"",[569,2299,2300],{"class":575},"last ",[569,2302,639],{"class":2194},[569,2304,2305],{"class":642}," 'New drawing'\"",[569,2307,2308],{"class":575}," \u002F>\n",[569,2310,2311,2313,2315,2317,2319,2322,2324,2326,2329,2331,2333,2335,2337,2339,2341,2344],{"class":571,"line":799},[569,2312,675],{"class":575},[569,2314,333],{"class":579},[569,2316,2273],{"class":635},[569,2318,639],{"class":575},[569,2320,2321],{"class":642},"\"Save\"",[569,2323,2281],{"class":635},[569,2325,639],{"class":575},[569,2327,2328],{"class":642},"\"Ctrl+S\"",[569,2330,2289],{"class":575},[569,2332,2292],{"class":635},[569,2334,639],{"class":575},[569,2336,2297],{"class":642},[569,2338,2300],{"class":575},[569,2340,639],{"class":2194},[569,2342,2343],{"class":642}," 'Save'\"",[569,2345,2308],{"class":575},[569,2347,2348,2350,2352,2354,2356,2359,2362,2364,2366,2368,2370,2372,2374,2377],{"class":571,"line":814},[569,2349,675],{"class":575},[569,2351,333],{"class":579},[569,2353,2273],{"class":635},[569,2355,639],{"class":575},[569,2357,2358],{"class":642},"\"Export\"",[569,2360,2361],{"class":635}," chevron",[569,2363,2289],{"class":575},[569,2365,2292],{"class":635},[569,2367,639],{"class":575},[569,2369,2297],{"class":642},[569,2371,2300],{"class":575},[569,2373,639],{"class":2194},[569,2375,2376],{"class":642}," 'Export'\"",[569,2378,2308],{"class":575},[569,2380,2381,2383,2385,2387,2389,2392,2395,2397,2399,2401,2403,2405,2407,2410],{"class":571,"line":848},[569,2382,675],{"class":575},[569,2384,333],{"class":579},[569,2386,2273],{"class":635},[569,2388,639],{"class":575},[569,2390,2391],{"class":642},"\"Revert to saved\"",[569,2393,2394],{"class":635}," disabled",[569,2396,2289],{"class":575},[569,2398,2292],{"class":635},[569,2400,639],{"class":575},[569,2402,2297],{"class":642},[569,2404,2300],{"class":575},[569,2406,639],{"class":2194},[569,2408,2409],{"class":642}," 'Revert to saved'\"",[569,2411,2308],{"class":575},[569,2413,2414,2416,2418],{"class":571,"line":882},[569,2415,777],{"class":575},[569,2417,329],{"class":579},[569,2419,582],{"class":575},[569,2421,2422,2424,2426,2429,2431],{"class":571,"line":891},[569,2423,658],{"class":575},[569,2425,270],{"class":579},[569,2427,2428],{"class":575},">Last activated: {{ last || 'nothing yet' }}\u003C\u002F",[569,2430,270],{"class":579},[569,2432,582],{"class":575},[569,2434,2435,2437,2439],{"class":571,"line":900},[569,2436,606],{"class":575},[569,2438,559],{"class":579},[569,2440,582],{"class":575},[559,2442,2443],{"v-slot:html":519},[511,2444,2446],{"className":615,"code":2445,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list ori-list_divided\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- an action is a real \u003Cbutton type=\"button\"> -->\n        \u003Cbutton type=\"button\" class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">New drawing\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">Ctrl+N\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fbutton>\n    \u003C\u002Fli>\n    \u003C!-- … Save, Export (with the chevron) -->\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- the real disabled attribute drives the dimming -->\n        \u003Cbutton type=\"button\" class=\"ori-list__row\" disabled>\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Revert to saved\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fbutton>\n    \u003C\u002Fli>\n\u003C\u002Ful>\n",[287,2447,2448,2468,2482,2487,2510,2543,2576,2584,2592,2597,2611,2616,2638,2671,2679,2687],{"__ignoreMap":519},[569,2449,2450,2452,2454,2456,2458,2460,2462,2464,2466],{"class":571,"line":572},[569,2451,576],{"class":575},[569,2453,632],{"class":579},[569,2455,636],{"class":635},[569,2457,639],{"class":575},[569,2459,1918],{"class":642},[569,2461,646],{"class":635},[569,2463,639],{"class":575},[569,2465,651],{"class":642},[569,2467,582],{"class":575},[569,2469,2470,2472,2474,2476,2478,2480],{"class":571,"line":585},[569,2471,658],{"class":575},[569,2473,661],{"class":579},[569,2475,636],{"class":635},[569,2477,639],{"class":575},[569,2479,668],{"class":642},[569,2481,582],{"class":575},[569,2483,2484],{"class":571,"line":591},[569,2485,2486],{"class":624},"        \u003C!-- an action is a real \u003Cbutton type=\"button\"> -->\n",[569,2488,2489,2491,2494,2497,2499,2502,2504,2506,2508],{"class":571,"line":597},[569,2490,675],{"class":575},[569,2492,2493],{"class":579},"button",[569,2495,2496],{"class":635}," type",[569,2498,639],{"class":575},[569,2500,2501],{"class":642},"\"button\"",[569,2503,636],{"class":635},[569,2505,639],{"class":575},[569,2507,685],{"class":642},[569,2509,582],{"class":575},[569,2511,2512,2514,2516,2518,2520,2522,2524,2526,2528,2530,2532,2535,2537,2539,2541],{"class":571,"line":603},[569,2513,692],{"class":575},[569,2515,569],{"class":579},[569,2517,636],{"class":635},[569,2519,639],{"class":575},[569,2521,701],{"class":642},[569,2523,704],{"class":575},[569,2525,569],{"class":579},[569,2527,636],{"class":635},[569,2529,639],{"class":575},[569,2531,713],{"class":642},[569,2533,2534],{"class":575},">New drawing\u003C\u002F",[569,2536,569],{"class":579},[569,2538,721],{"class":575},[569,2540,569],{"class":579},[569,2542,582],{"class":575},[569,2544,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565,2568,2570,2572,2574],{"class":571,"line":728},[569,2546,692],{"class":575},[569,2548,569],{"class":579},[569,2550,636],{"class":635},[569,2552,639],{"class":575},[569,2554,739],{"class":642},[569,2556,704],{"class":575},[569,2558,569],{"class":579},[569,2560,636],{"class":635},[569,2562,639],{"class":575},[569,2564,750],{"class":642},[569,2566,2567],{"class":575},">Ctrl+N\u003C\u002F",[569,2569,569],{"class":579},[569,2571,721],{"class":575},[569,2573,569],{"class":579},[569,2575,582],{"class":575},[569,2577,2578,2580,2582],{"class":571,"line":764},[569,2579,767],{"class":575},[569,2581,2493],{"class":579},[569,2583,582],{"class":575},[569,2585,2586,2588,2590],{"class":571,"line":774},[569,2587,777],{"class":575},[569,2589,661],{"class":579},[569,2591,582],{"class":575},[569,2593,2594],{"class":571,"line":784},[569,2595,2596],{"class":624},"    \u003C!-- … Save, Export (with the chevron) -->\n",[569,2598,2599,2601,2603,2605,2607,2609],{"class":571,"line":799},[569,2600,658],{"class":575},[569,2602,661],{"class":579},[569,2604,636],{"class":635},[569,2606,639],{"class":575},[569,2608,668],{"class":642},[569,2610,582],{"class":575},[569,2612,2613],{"class":571,"line":814},[569,2614,2615],{"class":624},"        \u003C!-- the real disabled attribute drives the dimming -->\n",[569,2617,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636],{"class":571,"line":848},[569,2619,675],{"class":575},[569,2621,2493],{"class":579},[569,2623,2496],{"class":635},[569,2625,639],{"class":575},[569,2627,2501],{"class":642},[569,2629,636],{"class":635},[569,2631,639],{"class":575},[569,2633,685],{"class":642},[569,2635,2394],{"class":635},[569,2637,582],{"class":575},[569,2639,2640,2642,2644,2646,2648,2650,2652,2654,2656,2658,2660,2663,2665,2667,2669],{"class":571,"line":882},[569,2641,692],{"class":575},[569,2643,569],{"class":579},[569,2645,636],{"class":635},[569,2647,639],{"class":575},[569,2649,701],{"class":642},[569,2651,704],{"class":575},[569,2653,569],{"class":579},[569,2655,636],{"class":635},[569,2657,639],{"class":575},[569,2659,713],{"class":642},[569,2661,2662],{"class":575},">Revert to saved\u003C\u002F",[569,2664,569],{"class":579},[569,2666,721],{"class":575},[569,2668,569],{"class":579},[569,2670,582],{"class":575},[569,2672,2673,2675,2677],{"class":571,"line":891},[569,2674,767],{"class":575},[569,2676,2493],{"class":579},[569,2678,582],{"class":575},[569,2680,2681,2683,2685],{"class":571,"line":900},[569,2682,777],{"class":575},[569,2684,661],{"class":579},[569,2686,582],{"class":575},[569,2688,2689,2691,2693],{"class":571,"line":915},[569,2690,606],{"class":575},[569,2692,632],{"class":579},[569,2694,582],{"class":575},[344,2696,2698],{"id":2697},"current","Current",[270,2700,2701,2703,2704,2707],{},[287,2702,2697],{}," marks the current page or the selected entry. The row is tinted ",[274,2705,2706],{},"and"," carries a bar on its\ninline-start edge in the accent's text tone: the tint alone is too faint to mark it (WCAG 1.4.11), so the bar\ncarries the signal. The bar flips to the right edge in RTL. On the tint the subtitle and the meta text fade less\n(0.85 instead of 0.7), so they stay AA.",[270,2709,2710,2711,2714,2715,2718,2719,2721,2722,2725],{},"It renders ",[287,2712,2713],{},"aria-current",": ",[287,2716,2717],{},"\"page\""," on a link — a navigation list — and ",[287,2720,1249],{}," on any other row. A\nnavigation list goes in a ",[287,2723,2724],{},"\u003Cnav aria-label=\"…\">",", which the list does not add itself.",[540,2727,2728,2743,2799],{},[2729,2730,2732],"nav",{"ariaLabel":2731,"style":544},"Related components",[492,2733,2734,2737,2740],{},[546,2735],{"label":82,"subtitle":2736,"href":81},"A popup of actions",[546,2738],{"label":78,":current":1067,"subtitle":2739,"href":77},"Rows that stay on the page",[546,2741],{"label":134,"subtitle":2742,"href":133},"Switch panels of content",[559,2744,2745],{"v-slot:vue":519},[511,2746,2748],{"className":563,"code":2747,"language":565,"meta":519,"style":519},"\u003Cnav aria-label=\"Related components\">\n    \u003COriList>\n        \u003COriListItem label=\"Menu\" href=\"\u002Fcomponents\u002Fmenu\" subtitle=\"A popup of actions\" \u002F>\n        \u003COriListItem label=\"List\" href=\"\u002Fcomponents\u002Flist\" subtitle=\"Rows that stay on the page\" current \u002F>\n        \u003COriListItem label=\"Tabs\" href=\"\u002Fcomponents\u002Ftabs\" subtitle=\"Switch panels of content\" \u002F>\n    \u003C\u002FOriList>\n\u003C\u002Fnav>\n",[287,2749,2750,2766,2771,2776,2781,2786,2791],{"__ignoreMap":519},[569,2751,2752,2754,2756,2759,2761,2764],{"class":571,"line":572},[569,2753,576],{"class":575},[569,2755,2729],{"class":579},[569,2757,2758],{"class":635}," aria-label",[569,2760,639],{"class":575},[569,2762,2763],{"class":642},"\"Related components\"",[569,2765,582],{"class":575},[569,2767,2768],{"class":571,"line":585},[569,2769,2770],{"class":575},"    \u003COriList>\n",[569,2772,2773],{"class":571,"line":591},[569,2774,2775],{"class":575},"        \u003COriListItem label=\"Menu\" href=\"\u002Fcomponents\u002Fmenu\" subtitle=\"A popup of actions\" \u002F>\n",[569,2777,2778],{"class":571,"line":597},[569,2779,2780],{"class":575},"        \u003COriListItem label=\"List\" href=\"\u002Fcomponents\u002Flist\" subtitle=\"Rows that stay on the page\" current \u002F>\n",[569,2782,2783],{"class":571,"line":603},[569,2784,2785],{"class":575},"        \u003COriListItem label=\"Tabs\" href=\"\u002Fcomponents\u002Ftabs\" subtitle=\"Switch panels of content\" \u002F>\n",[569,2787,2788],{"class":571,"line":728},[569,2789,2790],{"class":575},"    \u003C\u002FOriList>\n",[569,2792,2793,2795,2797],{"class":571,"line":764},[569,2794,606],{"class":575},[569,2796,2729],{"class":579},[569,2798,582],{"class":575},[559,2800,2801],{"v-slot:html":519},[511,2802,2804],{"className":615,"code":2803,"language":617,"meta":519,"style":519},"\u003Cnav aria-label=\"Related components\">\n    \u003Cul class=\"ori-list\" role=\"list\">\n        \u003Cli class=\"ori-list__item\">\n            \u003Ca class=\"ori-list__row\" href=\"\u002Fcomponents\u002Fmenu\">\n                \u003Cspan class=\"ori-list__main\">\n                    \u003Cspan class=\"ori-list__label\">Menu\u003C\u002Fspan>\n                    \u003Cspan class=\"ori-list__subtitle\">A popup of actions\u003C\u002Fspan>\n                \u003C\u002Fspan>\n            \u003C\u002Fa>\n        \u003C\u002Fli>\n        \u003Cli class=\"ori-list__item\">\n            \u003C!-- state is an attribute: aria-current=\"page\" on a link, \"true\" on any other row -->\n            \u003Ca class=\"ori-list__row\" href=\"\u002Fcomponents\u002Flist\" aria-current=\"page\">\n                \u003Cspan class=\"ori-list__main\">\n                    \u003Cspan class=\"ori-list__label\">List\u003C\u002Fspan>\n                    \u003Cspan class=\"ori-list__subtitle\">Rows that stay on the page\u003C\u002Fspan>\n                \u003C\u002Fspan>\n            \u003C\u002Fa>\n        \u003C\u002Fli>\n        \u003C!-- … Tabs -->\n    \u003C\u002Ful>\n\u003C\u002Fnav>\n",[287,2805,2806,2820,2840,2854,2876,2890,2909,2928,2936,2944,2952,2966,2971,2999,3013,3032,3051,3059,3067,3075,3080,3088],{"__ignoreMap":519},[569,2807,2808,2810,2812,2814,2816,2818],{"class":571,"line":572},[569,2809,576],{"class":575},[569,2811,2729],{"class":579},[569,2813,2758],{"class":635},[569,2815,639],{"class":575},[569,2817,2763],{"class":642},[569,2819,582],{"class":575},[569,2821,2822,2824,2826,2828,2830,2832,2834,2836,2838],{"class":571,"line":585},[569,2823,658],{"class":575},[569,2825,632],{"class":579},[569,2827,636],{"class":635},[569,2829,639],{"class":575},[569,2831,643],{"class":642},[569,2833,646],{"class":635},[569,2835,639],{"class":575},[569,2837,651],{"class":642},[569,2839,582],{"class":575},[569,2841,2842,2844,2846,2848,2850,2852],{"class":571,"line":591},[569,2843,675],{"class":575},[569,2845,661],{"class":579},[569,2847,636],{"class":635},[569,2849,639],{"class":575},[569,2851,668],{"class":642},[569,2853,582],{"class":575},[569,2855,2856,2858,2860,2862,2864,2866,2869,2871,2874],{"class":571,"line":597},[569,2857,692],{"class":575},[569,2859,282],{"class":579},[569,2861,636],{"class":635},[569,2863,639],{"class":575},[569,2865,685],{"class":642},[569,2867,2868],{"class":635}," href",[569,2870,639],{"class":575},[569,2872,2873],{"class":642},"\"\u002Fcomponents\u002Fmenu\"",[569,2875,582],{"class":575},[569,2877,2878,2880,2882,2884,2886,2888],{"class":571,"line":603},[569,2879,1231],{"class":575},[569,2881,569],{"class":579},[569,2883,636],{"class":635},[569,2885,639],{"class":575},[569,2887,701],{"class":642},[569,2889,582],{"class":575},[569,2891,2892,2894,2896,2898,2900,2902,2905,2907],{"class":571,"line":728},[569,2893,1256],{"class":575},[569,2895,569],{"class":579},[569,2897,636],{"class":635},[569,2899,639],{"class":575},[569,2901,713],{"class":642},[569,2903,2904],{"class":575},">Menu\u003C\u002F",[569,2906,569],{"class":579},[569,2908,582],{"class":575},[569,2910,2911,2913,2915,2917,2919,2921,2924,2926],{"class":571,"line":764},[569,2912,1256],{"class":575},[569,2914,569],{"class":579},[569,2916,636],{"class":635},[569,2918,639],{"class":575},[569,2920,1428],{"class":642},[569,2922,2923],{"class":575},">A popup of actions\u003C\u002F",[569,2925,569],{"class":579},[569,2927,582],{"class":575},[569,2929,2930,2932,2934],{"class":571,"line":774},[569,2931,1292],{"class":575},[569,2933,569],{"class":579},[569,2935,582],{"class":575},[569,2937,2938,2940,2942],{"class":571,"line":784},[569,2939,1301],{"class":575},[569,2941,282],{"class":579},[569,2943,582],{"class":575},[569,2945,2946,2948,2950],{"class":571,"line":799},[569,2947,767],{"class":575},[569,2949,661],{"class":579},[569,2951,582],{"class":575},[569,2953,2954,2956,2958,2960,2962,2964],{"class":571,"line":814},[569,2955,675],{"class":575},[569,2957,661],{"class":579},[569,2959,636],{"class":635},[569,2961,639],{"class":575},[569,2963,668],{"class":642},[569,2965,582],{"class":575},[569,2967,2968],{"class":571,"line":848},[569,2969,2970],{"class":624},"            \u003C!-- state is an attribute: aria-current=\"page\" on a link, \"true\" on any other row -->\n",[569,2972,2973,2975,2977,2979,2981,2983,2985,2987,2990,2993,2995,2997],{"class":571,"line":882},[569,2974,692],{"class":575},[569,2976,282],{"class":579},[569,2978,636],{"class":635},[569,2980,639],{"class":575},[569,2982,685],{"class":642},[569,2984,2868],{"class":635},[569,2986,639],{"class":575},[569,2988,2989],{"class":642},"\"\u002Fcomponents\u002Flist\"",[569,2991,2992],{"class":635}," aria-current",[569,2994,639],{"class":575},[569,2996,2717],{"class":642},[569,2998,582],{"class":575},[569,3000,3001,3003,3005,3007,3009,3011],{"class":571,"line":891},[569,3002,1231],{"class":575},[569,3004,569],{"class":579},[569,3006,636],{"class":635},[569,3008,639],{"class":575},[569,3010,701],{"class":642},[569,3012,582],{"class":575},[569,3014,3015,3017,3019,3021,3023,3025,3028,3030],{"class":571,"line":900},[569,3016,1256],{"class":575},[569,3018,569],{"class":579},[569,3020,636],{"class":635},[569,3022,639],{"class":575},[569,3024,713],{"class":642},[569,3026,3027],{"class":575},">List\u003C\u002F",[569,3029,569],{"class":579},[569,3031,582],{"class":575},[569,3033,3034,3036,3038,3040,3042,3044,3047,3049],{"class":571,"line":915},[569,3035,1256],{"class":575},[569,3037,569],{"class":579},[569,3039,636],{"class":635},[569,3041,639],{"class":575},[569,3043,1428],{"class":642},[569,3045,3046],{"class":575},">Rows that stay on the page\u003C\u002F",[569,3048,569],{"class":579},[569,3050,582],{"class":575},[569,3052,3053,3055,3057],{"class":571,"line":930},[569,3054,1292],{"class":575},[569,3056,569],{"class":579},[569,3058,582],{"class":575},[569,3060,3061,3063,3065],{"class":571,"line":964},[569,3062,1301],{"class":575},[569,3064,282],{"class":579},[569,3066,582],{"class":575},[569,3068,3069,3071,3073],{"class":571,"line":998},[569,3070,767],{"class":575},[569,3072,661],{"class":579},[569,3074,582],{"class":575},[569,3076,3077],{"class":571,"line":1007},[569,3078,3079],{"class":624},"        \u003C!-- … Tabs -->\n",[569,3081,3082,3084,3086],{"class":571,"line":1016},[569,3083,777],{"class":575},[569,3085,632],{"class":579},[569,3087,582],{"class":575},[569,3089,3090,3092,3094],{"class":571,"line":1476},[569,3091,606],{"class":575},[569,3093,2729],{"class":579},[569,3095,582],{"class":575},[270,3097,3098,3099,3101,3102,478],{},"A selection that is not navigation — a view, a panel, a tool — is a button row whose ",[287,3100,2697],{}," follows the\nclick. Here the current row reads ",[287,3103,3104],{},"aria-current=\"true\"",[540,3106,3107,3110,3407],{},[2160,3108],{"kind":3109},"selectable",[559,3111,3112],{"v-slot:vue":519},[511,3113,3115],{"className":563,"code":3114,"language":565,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst views = [\n    { value: 'layers', label: 'Layers', subtitle: 'Stack, reorder and hide' },\n    { value: 'brushes', label: 'Brushes', subtitle: 'Size, opacity and shape' },\n    { value: 'palette', label: 'Palette', subtitle: 'Swatches and recent colors' }\n]\nconst view = ref('layers')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COriList>\n        \u003COriListItem\n            v-for=\"v in views\"\n            :key=\"v.value\"\n            :label=\"v.label\"\n            :subtitle=\"v.subtitle\"\n            :current=\"view === v.value\"\n            @click=\"view = v.value\"\n        \u002F>\n    \u003C\u002FOriList>\n\u003C\u002Ftemplate>\n",[287,3116,3117,3133,3143,3147,3159,3182,3201,3221,3226,3243,3251,3255,3263,3271,3278,3298,3315,3331,3346,3367,3386,3391,3399],{"__ignoreMap":519},[569,3118,3119,3121,3123,3125,3127,3129,3131],{"class":571,"line":572},[569,3120,576],{"class":575},[569,3122,2176],{"class":579},[569,3124,2179],{"class":635},[569,3126,2182],{"class":635},[569,3128,639],{"class":575},[569,3130,2187],{"class":642},[569,3132,582],{"class":575},[569,3134,3135,3137,3139,3141],{"class":571,"line":585},[569,3136,2195],{"class":2194},[569,3138,2198],{"class":575},[569,3140,2201],{"class":2194},[569,3142,2204],{"class":642},[569,3144,3145],{"class":571,"line":591},[569,3146,2210],{"emptyLinePlaceholder":2209},[569,3148,3149,3151,3154,3156],{"class":571,"line":597},[569,3150,2215],{"class":2194},[569,3152,3153],{"class":2218}," views",[569,3155,2222],{"class":2194},[569,3157,3158],{"class":575}," [\n",[569,3160,3161,3164,3167,3170,3173,3176,3179],{"class":571,"line":603},[569,3162,3163],{"class":575},"    { value: ",[569,3165,3166],{"class":642},"'layers'",[569,3168,3169],{"class":575},", label: ",[569,3171,3172],{"class":642},"'Layers'",[569,3174,3175],{"class":575},", subtitle: ",[569,3177,3178],{"class":642},"'Stack, reorder and hide'",[569,3180,3181],{"class":575}," },\n",[569,3183,3184,3186,3189,3191,3194,3196,3199],{"class":571,"line":728},[569,3185,3163],{"class":575},[569,3187,3188],{"class":642},"'brushes'",[569,3190,3169],{"class":575},[569,3192,3193],{"class":642},"'Brushes'",[569,3195,3175],{"class":575},[569,3197,3198],{"class":642},"'Size, opacity and shape'",[569,3200,3181],{"class":575},[569,3202,3203,3205,3208,3210,3213,3215,3218],{"class":571,"line":764},[569,3204,3163],{"class":575},[569,3206,3207],{"class":642},"'palette'",[569,3209,3169],{"class":575},[569,3211,3212],{"class":642},"'Palette'",[569,3214,3175],{"class":575},[569,3216,3217],{"class":642},"'Swatches and recent colors'",[569,3219,3220],{"class":575}," }\n",[569,3222,3223],{"class":571,"line":774},[569,3224,3225],{"class":575},"]\n",[569,3227,3228,3230,3233,3235,3237,3239,3241],{"class":571,"line":784},[569,3229,2215],{"class":2194},[569,3231,3232],{"class":2218}," view",[569,3234,2222],{"class":2194},[569,3236,2225],{"class":635},[569,3238,2228],{"class":575},[569,3240,3166],{"class":642},[569,3242,2234],{"class":575},[569,3244,3245,3247,3249],{"class":571,"line":799},[569,3246,606],{"class":575},[569,3248,2176],{"class":579},[569,3250,582],{"class":575},[569,3252,3253],{"class":571,"line":814},[569,3254,2210],{"emptyLinePlaceholder":2209},[569,3256,3257,3259,3261],{"class":571,"line":848},[569,3258,576],{"class":575},[569,3260,559],{"class":579},[569,3262,582],{"class":575},[569,3264,3265,3267,3269],{"class":571,"line":882},[569,3266,658],{"class":575},[569,3268,329],{"class":579},[569,3270,582],{"class":575},[569,3272,3273,3275],{"class":571,"line":891},[569,3274,675],{"class":575},[569,3276,3277],{"class":579},"OriListItem\n",[569,3279,3280,3283,3285,3287,3290,3293,3295],{"class":571,"line":900},[569,3281,3282],{"class":2194},"            v-for",[569,3284,639],{"class":575},[569,3286,2297],{"class":642},[569,3288,3289],{"class":575},"v ",[569,3291,3292],{"class":2194},"in",[569,3294,3153],{"class":575},[569,3296,3297],{"class":642},"\"\n",[569,3299,3300,3303,3306,3308,3310,3313],{"class":571,"line":915},[569,3301,3302],{"class":575},"            :",[569,3304,3305],{"class":635},"key",[569,3307,639],{"class":575},[569,3309,2297],{"class":642},[569,3311,3312],{"class":575},"v.value",[569,3314,3297],{"class":642},[569,3316,3317,3319,3322,3324,3326,3329],{"class":571,"line":930},[569,3318,3302],{"class":575},[569,3320,3321],{"class":635},"label",[569,3323,639],{"class":575},[569,3325,2297],{"class":642},[569,3327,3328],{"class":575},"v.label",[569,3330,3297],{"class":642},[569,3332,3333,3335,3337,3339,3341,3344],{"class":571,"line":964},[569,3334,3302],{"class":575},[569,3336,1040],{"class":635},[569,3338,639],{"class":575},[569,3340,2297],{"class":642},[569,3342,3343],{"class":575},"v.subtitle",[569,3345,3297],{"class":642},[569,3347,3348,3350,3352,3354,3356,3359,3362,3365],{"class":571,"line":998},[569,3349,3302],{"class":575},[569,3351,2697],{"class":635},[569,3353,639],{"class":575},[569,3355,2297],{"class":642},[569,3357,3358],{"class":575},"view ",[569,3360,3361],{"class":2194},"===",[569,3363,3364],{"class":575}," v.value",[569,3366,3297],{"class":642},[569,3368,3369,3372,3374,3376,3378,3380,3382,3384],{"class":571,"line":1007},[569,3370,3371],{"class":575},"            @",[569,3373,2292],{"class":635},[569,3375,639],{"class":575},[569,3377,2297],{"class":642},[569,3379,3358],{"class":575},[569,3381,639],{"class":2194},[569,3383,3364],{"class":575},[569,3385,3297],{"class":642},[569,3387,3388],{"class":571,"line":1016},[569,3389,3390],{"class":575},"        \u002F>\n",[569,3392,3393,3395,3397],{"class":571,"line":1476},[569,3394,777],{"class":575},[569,3396,329],{"class":579},[569,3398,582],{"class":575},[569,3400,3401,3403,3405],{"class":571,"line":1491},[569,3402,606],{"class":575},[569,3404,559],{"class":579},[569,3406,582],{"class":575},[559,3408,3409],{"v-slot:html":519},[511,3410,3412],{"className":615,"code":3411,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cbutton type=\"button\" class=\"ori-list__row\" aria-current=\"true\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Layers\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Stack, reorder and hide\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fbutton>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- no attribute at all when the row is not current: move aria-current as the selection moves -->\n        \u003Cbutton type=\"button\" class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Brushes\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Size, opacity and shape\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fbutton>\n    \u003C\u002Fli>\n    \u003C!-- … Palette -->\n\u003C\u002Ful>\n",[287,3413,3414,3434,3448,3474,3488,3507,3526,3534,3542,3550,3564,3569,3589,3603,3622,3641,3649,3657,3665,3670],{"__ignoreMap":519},[569,3415,3416,3418,3420,3422,3424,3426,3428,3430,3432],{"class":571,"line":572},[569,3417,576],{"class":575},[569,3419,632],{"class":579},[569,3421,636],{"class":635},[569,3423,639],{"class":575},[569,3425,643],{"class":642},[569,3427,646],{"class":635},[569,3429,639],{"class":575},[569,3431,651],{"class":642},[569,3433,582],{"class":575},[569,3435,3436,3438,3440,3442,3444,3446],{"class":571,"line":585},[569,3437,658],{"class":575},[569,3439,661],{"class":579},[569,3441,636],{"class":635},[569,3443,639],{"class":575},[569,3445,668],{"class":642},[569,3447,582],{"class":575},[569,3449,3450,3452,3454,3456,3458,3460,3462,3464,3466,3468,3470,3472],{"class":571,"line":591},[569,3451,675],{"class":575},[569,3453,2493],{"class":579},[569,3455,2496],{"class":635},[569,3457,639],{"class":575},[569,3459,2501],{"class":642},[569,3461,636],{"class":635},[569,3463,639],{"class":575},[569,3465,685],{"class":642},[569,3467,2992],{"class":635},[569,3469,639],{"class":575},[569,3471,1249],{"class":642},[569,3473,582],{"class":575},[569,3475,3476,3478,3480,3482,3484,3486],{"class":571,"line":597},[569,3477,692],{"class":575},[569,3479,569],{"class":579},[569,3481,636],{"class":635},[569,3483,639],{"class":575},[569,3485,701],{"class":642},[569,3487,582],{"class":575},[569,3489,3490,3492,3494,3496,3498,3500,3503,3505],{"class":571,"line":603},[569,3491,1231],{"class":575},[569,3493,569],{"class":579},[569,3495,636],{"class":635},[569,3497,639],{"class":575},[569,3499,713],{"class":642},[569,3501,3502],{"class":575},">Layers\u003C\u002F",[569,3504,569],{"class":579},[569,3506,582],{"class":575},[569,3508,3509,3511,3513,3515,3517,3519,3522,3524],{"class":571,"line":728},[569,3510,1231],{"class":575},[569,3512,569],{"class":579},[569,3514,636],{"class":635},[569,3516,639],{"class":575},[569,3518,1428],{"class":642},[569,3520,3521],{"class":575},">Stack, reorder and hide\u003C\u002F",[569,3523,569],{"class":579},[569,3525,582],{"class":575},[569,3527,3528,3530,3532],{"class":571,"line":764},[569,3529,1301],{"class":575},[569,3531,569],{"class":579},[569,3533,582],{"class":575},[569,3535,3536,3538,3540],{"class":571,"line":774},[569,3537,767],{"class":575},[569,3539,2493],{"class":579},[569,3541,582],{"class":575},[569,3543,3544,3546,3548],{"class":571,"line":784},[569,3545,777],{"class":575},[569,3547,661],{"class":579},[569,3549,582],{"class":575},[569,3551,3552,3554,3556,3558,3560,3562],{"class":571,"line":799},[569,3553,658],{"class":575},[569,3555,661],{"class":579},[569,3557,636],{"class":635},[569,3559,639],{"class":575},[569,3561,668],{"class":642},[569,3563,582],{"class":575},[569,3565,3566],{"class":571,"line":814},[569,3567,3568],{"class":624},"        \u003C!-- no attribute at all when the row is not current: move aria-current as the selection moves -->\n",[569,3570,3571,3573,3575,3577,3579,3581,3583,3585,3587],{"class":571,"line":848},[569,3572,675],{"class":575},[569,3574,2493],{"class":579},[569,3576,2496],{"class":635},[569,3578,639],{"class":575},[569,3580,2501],{"class":642},[569,3582,636],{"class":635},[569,3584,639],{"class":575},[569,3586,685],{"class":642},[569,3588,582],{"class":575},[569,3590,3591,3593,3595,3597,3599,3601],{"class":571,"line":882},[569,3592,692],{"class":575},[569,3594,569],{"class":579},[569,3596,636],{"class":635},[569,3598,639],{"class":575},[569,3600,701],{"class":642},[569,3602,582],{"class":575},[569,3604,3605,3607,3609,3611,3613,3615,3618,3620],{"class":571,"line":891},[569,3606,1231],{"class":575},[569,3608,569],{"class":579},[569,3610,636],{"class":635},[569,3612,639],{"class":575},[569,3614,713],{"class":642},[569,3616,3617],{"class":575},">Brushes\u003C\u002F",[569,3619,569],{"class":579},[569,3621,582],{"class":575},[569,3623,3624,3626,3628,3630,3632,3634,3637,3639],{"class":571,"line":900},[569,3625,1231],{"class":575},[569,3627,569],{"class":579},[569,3629,636],{"class":635},[569,3631,639],{"class":575},[569,3633,1428],{"class":642},[569,3635,3636],{"class":575},">Size, opacity and shape\u003C\u002F",[569,3638,569],{"class":579},[569,3640,582],{"class":575},[569,3642,3643,3645,3647],{"class":571,"line":915},[569,3644,1301],{"class":575},[569,3646,569],{"class":579},[569,3648,582],{"class":575},[569,3650,3651,3653,3655],{"class":571,"line":930},[569,3652,767],{"class":575},[569,3654,2493],{"class":579},[569,3656,582],{"class":575},[569,3658,3659,3661,3663],{"class":571,"line":964},[569,3660,777],{"class":575},[569,3662,661],{"class":579},[569,3664,582],{"class":575},[569,3666,3667],{"class":571,"line":998},[569,3668,3669],{"class":624},"    \u003C!-- … Palette -->\n",[569,3671,3672,3674,3676],{"class":571,"line":1007},[569,3673,606],{"class":575},[569,3675,632],{"class":579},[569,3677,582],{"class":575},[344,3679,3680],{"id":2150},"Disabled",[270,3682,3683,3685,3686,3688,3689,3691,3692,3694,3695,3698,3699,3701,3702,3704],{},[287,3684,2150],{}," on a button row is the real ",[287,3687,2150],{}," attribute: the row is dimmed and ",[287,3690,293],{}," skips it. A link row\ncannot be disabled natively, so it drops its ",[287,3693,529],{}," and gets ",[287,3696,3697],{},"aria-disabled=\"true\""," — an ",[287,3700,2091],{}," without an\n",[287,3703,529],{}," is neither followed nor focused.",[270,3706,3707,3709,3710,3712,3713,3715,3716,478],{},[287,3708,2150],{}," removes the ",[287,3711,529],{}," the row was given and swallows clicks on a link or component row before any\nlistener runs, so a router link passed to ",[287,3714,2074],{}," does not navigate either. A static row ignores ",[287,3717,2150],{},[540,3719,3720,3730,3773],{},[492,3721,3722,3726],{"style":544},[546,3723],{"label":3724,"subtitle":3725,"href":77},"Gallery","Your saved drawings",[546,3727],{"label":3728,"subtitle":3729,"href":77,":disabled":1067},"Shared with me","Sign in to see shared drawings",[559,3731,3732],{"v-slot:vue":519},[511,3733,3735],{"className":563,"code":3734,"language":565,"meta":519,"style":519},"\u003COriList>\n    \u003COriListItem label=\"Gallery\" href=\"\u002Fgallery\" subtitle=\"Your saved drawings\" \u002F>\n    \u003COriListItem label=\"Shared with me\" href=\"\u002Fshared\" subtitle=\"Sign in to see shared drawings\" disabled \u002F>\n    \u003C!-- a button row: the real disabled attribute -->\n    \u003COriListItem label=\"Revert to saved\" disabled @click=\"revert\" \u002F>\n\u003C\u002FOriList>\n",[287,3736,3737,3745,3750,3755,3760,3765],{"__ignoreMap":519},[569,3738,3739,3741,3743],{"class":571,"line":572},[569,3740,576],{"class":575},[569,3742,329],{"class":579},[569,3744,582],{"class":575},[569,3746,3747],{"class":571,"line":585},[569,3748,3749],{"class":575},"    \u003COriListItem label=\"Gallery\" href=\"\u002Fgallery\" subtitle=\"Your saved drawings\" \u002F>\n",[569,3751,3752],{"class":571,"line":591},[569,3753,3754],{"class":575},"    \u003COriListItem label=\"Shared with me\" href=\"\u002Fshared\" subtitle=\"Sign in to see shared drawings\" disabled \u002F>\n",[569,3756,3757],{"class":571,"line":597},[569,3758,3759],{"class":575},"    \u003C!-- a button row: the real disabled attribute -->\n",[569,3761,3762],{"class":571,"line":603},[569,3763,3764],{"class":575},"    \u003COriListItem label=\"Revert to saved\" disabled @click=\"revert\" \u002F>\n",[569,3766,3767,3769,3771],{"class":571,"line":728},[569,3768,606],{"class":575},[569,3770,329],{"class":579},[569,3772,582],{"class":575},[559,3774,3775],{"v-slot:html":519},[511,3776,3778],{"className":615,"code":3777,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Ca class=\"ori-list__row\" href=\"\u002Fgallery\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Gallery\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Your saved drawings\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fa>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- a link row: no href (so it is not followed or focused) and aria-disabled -->\n        \u003Ca class=\"ori-list__row\" aria-disabled=\"true\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Shared with me\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Sign in to see shared drawings\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fa>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- a button row: the real disabled attribute -->\n        \u003Cbutton type=\"button\" class=\"ori-list__row\" disabled>\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Revert to saved\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fbutton>\n    \u003C\u002Fli>\n\u003C\u002Ful>\n",[287,3779,3780,3800,3814,3835,3849,3868,3887,3895,3903,3911,3925,3930,3951,3965,3984,4003,4011,4019,4027,4041,4046,4068,4100,4108,4116],{"__ignoreMap":519},[569,3781,3782,3784,3786,3788,3790,3792,3794,3796,3798],{"class":571,"line":572},[569,3783,576],{"class":575},[569,3785,632],{"class":579},[569,3787,636],{"class":635},[569,3789,639],{"class":575},[569,3791,643],{"class":642},[569,3793,646],{"class":635},[569,3795,639],{"class":575},[569,3797,651],{"class":642},[569,3799,582],{"class":575},[569,3801,3802,3804,3806,3808,3810,3812],{"class":571,"line":585},[569,3803,658],{"class":575},[569,3805,661],{"class":579},[569,3807,636],{"class":635},[569,3809,639],{"class":575},[569,3811,668],{"class":642},[569,3813,582],{"class":575},[569,3815,3816,3818,3820,3822,3824,3826,3828,3830,3833],{"class":571,"line":591},[569,3817,675],{"class":575},[569,3819,282],{"class":579},[569,3821,636],{"class":635},[569,3823,639],{"class":575},[569,3825,685],{"class":642},[569,3827,2868],{"class":635},[569,3829,639],{"class":575},[569,3831,3832],{"class":642},"\"\u002Fgallery\"",[569,3834,582],{"class":575},[569,3836,3837,3839,3841,3843,3845,3847],{"class":571,"line":597},[569,3838,692],{"class":575},[569,3840,569],{"class":579},[569,3842,636],{"class":635},[569,3844,639],{"class":575},[569,3846,701],{"class":642},[569,3848,582],{"class":575},[569,3850,3851,3853,3855,3857,3859,3861,3864,3866],{"class":571,"line":603},[569,3852,1231],{"class":575},[569,3854,569],{"class":579},[569,3856,636],{"class":635},[569,3858,639],{"class":575},[569,3860,713],{"class":642},[569,3862,3863],{"class":575},">Gallery\u003C\u002F",[569,3865,569],{"class":579},[569,3867,582],{"class":575},[569,3869,3870,3872,3874,3876,3878,3880,3883,3885],{"class":571,"line":728},[569,3871,1231],{"class":575},[569,3873,569],{"class":579},[569,3875,636],{"class":635},[569,3877,639],{"class":575},[569,3879,1428],{"class":642},[569,3881,3882],{"class":575},">Your saved drawings\u003C\u002F",[569,3884,569],{"class":579},[569,3886,582],{"class":575},[569,3888,3889,3891,3893],{"class":571,"line":764},[569,3890,1301],{"class":575},[569,3892,569],{"class":579},[569,3894,582],{"class":575},[569,3896,3897,3899,3901],{"class":571,"line":774},[569,3898,767],{"class":575},[569,3900,282],{"class":579},[569,3902,582],{"class":575},[569,3904,3905,3907,3909],{"class":571,"line":784},[569,3906,777],{"class":575},[569,3908,661],{"class":579},[569,3910,582],{"class":575},[569,3912,3913,3915,3917,3919,3921,3923],{"class":571,"line":799},[569,3914,658],{"class":575},[569,3916,661],{"class":579},[569,3918,636],{"class":635},[569,3920,639],{"class":575},[569,3922,668],{"class":642},[569,3924,582],{"class":575},[569,3926,3927],{"class":571,"line":814},[569,3928,3929],{"class":624},"        \u003C!-- a link row: no href (so it is not followed or focused) and aria-disabled -->\n",[569,3931,3932,3934,3936,3938,3940,3942,3945,3947,3949],{"class":571,"line":848},[569,3933,675],{"class":575},[569,3935,282],{"class":579},[569,3937,636],{"class":635},[569,3939,639],{"class":575},[569,3941,685],{"class":642},[569,3943,3944],{"class":635}," aria-disabled",[569,3946,639],{"class":575},[569,3948,1249],{"class":642},[569,3950,582],{"class":575},[569,3952,3953,3955,3957,3959,3961,3963],{"class":571,"line":882},[569,3954,692],{"class":575},[569,3956,569],{"class":579},[569,3958,636],{"class":635},[569,3960,639],{"class":575},[569,3962,701],{"class":642},[569,3964,582],{"class":575},[569,3966,3967,3969,3971,3973,3975,3977,3980,3982],{"class":571,"line":891},[569,3968,1231],{"class":575},[569,3970,569],{"class":579},[569,3972,636],{"class":635},[569,3974,639],{"class":575},[569,3976,713],{"class":642},[569,3978,3979],{"class":575},">Shared with me\u003C\u002F",[569,3981,569],{"class":579},[569,3983,582],{"class":575},[569,3985,3986,3988,3990,3992,3994,3996,3999,4001],{"class":571,"line":900},[569,3987,1231],{"class":575},[569,3989,569],{"class":579},[569,3991,636],{"class":635},[569,3993,639],{"class":575},[569,3995,1428],{"class":642},[569,3997,3998],{"class":575},">Sign in to see shared drawings\u003C\u002F",[569,4000,569],{"class":579},[569,4002,582],{"class":575},[569,4004,4005,4007,4009],{"class":571,"line":915},[569,4006,1301],{"class":575},[569,4008,569],{"class":579},[569,4010,582],{"class":575},[569,4012,4013,4015,4017],{"class":571,"line":930},[569,4014,767],{"class":575},[569,4016,282],{"class":579},[569,4018,582],{"class":575},[569,4020,4021,4023,4025],{"class":571,"line":964},[569,4022,777],{"class":575},[569,4024,661],{"class":579},[569,4026,582],{"class":575},[569,4028,4029,4031,4033,4035,4037,4039],{"class":571,"line":998},[569,4030,658],{"class":575},[569,4032,661],{"class":579},[569,4034,636],{"class":635},[569,4036,639],{"class":575},[569,4038,668],{"class":642},[569,4040,582],{"class":575},[569,4042,4043],{"class":571,"line":1007},[569,4044,4045],{"class":624},"        \u003C!-- a button row: the real disabled attribute -->\n",[569,4047,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066],{"class":571,"line":1016},[569,4049,675],{"class":575},[569,4051,2493],{"class":579},[569,4053,2496],{"class":635},[569,4055,639],{"class":575},[569,4057,2501],{"class":642},[569,4059,636],{"class":635},[569,4061,639],{"class":575},[569,4063,685],{"class":642},[569,4065,2394],{"class":635},[569,4067,582],{"class":575},[569,4069,4070,4072,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098],{"class":571,"line":1476},[569,4071,692],{"class":575},[569,4073,569],{"class":579},[569,4075,636],{"class":635},[569,4077,639],{"class":575},[569,4079,701],{"class":642},[569,4081,704],{"class":575},[569,4083,569],{"class":579},[569,4085,636],{"class":635},[569,4087,639],{"class":575},[569,4089,713],{"class":642},[569,4091,2662],{"class":575},[569,4093,569],{"class":579},[569,4095,721],{"class":575},[569,4097,569],{"class":579},[569,4099,582],{"class":575},[569,4101,4102,4104,4106],{"class":571,"line":1491},[569,4103,767],{"class":575},[569,4105,2493],{"class":579},[569,4107,582],{"class":575},[569,4109,4110,4112,4114],{"class":571,"line":1525},[569,4111,777],{"class":575},[569,4113,661],{"class":579},[569,4115,582],{"class":575},[569,4117,4118,4120,4122],{"class":571,"line":1559},[569,4119,606],{"class":575},[569,4121,632],{"class":579},[569,4123,582],{"class":575},[344,4125,4127],{"id":4126},"colors","Colors",[270,4129,4130,4131,4133,4134,4137,4138,4140],{},"The accent paints the current row: the tint, the bar and the focus ring. Put an ",[287,4132,467],{}," utility on the\nlist — the component has no ",[287,4135,4136],{},"color"," prop, and a class falls through to the ",[287,4139,496],{},". The bar reads the accent's\nAA-safe text tone rather than the raw role.",[540,4142,4143,4153,4162,4171,4180,4189,4198,4270],{},[492,4144,4148,4150],{"style":4145,"className":4146},"width: 13rem",[4147],"ori-color_primary",[546,4149],{"label":484,":current":1067},[546,4151],{"label":4152},"Another row",[492,4154,4157,4160],{"style":4145,"className":4155},[4156],"ori-color_secondary",[546,4158],{"label":4159,":current":1067},"secondary",[546,4161],{"label":4152},[492,4163,4166,4169],{"style":4145,"className":4164},[4165],"ori-color_success",[546,4167],{"label":4168,":current":1067},"success",[546,4170],{"label":4152},[492,4172,4175,4178],{"style":4145,"className":4173},[4174],"ori-color_warning",[546,4176],{"label":4177,":current":1067},"warning",[546,4179],{"label":4152},[492,4181,4184,4187],{"style":4145,"className":4182},[4183],"ori-color_danger",[546,4185],{"label":4186,":current":1067},"danger",[546,4188],{"label":4152},[492,4190,4193,4196],{"style":4145,"className":4191},[4192],"ori-color_info",[546,4194],{"label":4195,":current":1067},"info",[546,4197],{"label":4152},[559,4199,4200],{"v-slot:vue":519},[511,4201,4203],{"className":563,"code":4202,"language":565,"meta":519,"style":519},"\u003COriList class=\"ori-color_success\">\n    \u003COriListItem label=\"success\" current \u002F>\n    \u003COriListItem label=\"Another row\" \u002F>\n\u003C\u002FOriList>\n\u003COriList class=\"ori-color_danger\">\n    \u003COriListItem label=\"danger\" current \u002F>\n    \u003COriListItem label=\"Another row\" \u002F>\n\u003C\u002FOriList>\n",[287,4204,4205,4220,4225,4230,4238,4253,4258,4262],{"__ignoreMap":519},[569,4206,4207,4209,4211,4213,4215,4218],{"class":571,"line":572},[569,4208,576],{"class":575},[569,4210,329],{"class":579},[569,4212,636],{"class":635},[569,4214,639],{"class":575},[569,4216,4217],{"class":642},"\"ori-color_success\"",[569,4219,582],{"class":575},[569,4221,4222],{"class":571,"line":585},[569,4223,4224],{"class":575},"    \u003COriListItem label=\"success\" current \u002F>\n",[569,4226,4227],{"class":571,"line":591},[569,4228,4229],{"class":575},"    \u003COriListItem label=\"Another row\" \u002F>\n",[569,4231,4232,4234,4236],{"class":571,"line":597},[569,4233,606],{"class":575},[569,4235,329],{"class":579},[569,4237,582],{"class":575},[569,4239,4240,4242,4244,4246,4248,4251],{"class":571,"line":603},[569,4241,576],{"class":575},[569,4243,329],{"class":579},[569,4245,636],{"class":635},[569,4247,639],{"class":575},[569,4249,4250],{"class":642},"\"ori-color_danger\"",[569,4252,582],{"class":575},[569,4254,4255],{"class":571,"line":728},[569,4256,4257],{"class":575},"    \u003COriListItem label=\"danger\" current \u002F>\n",[569,4259,4260],{"class":571,"line":764},[569,4261,4229],{"class":575},[569,4263,4264,4266,4268],{"class":571,"line":774},[569,4265,606],{"class":575},[569,4267,329],{"class":579},[569,4269,582],{"class":575},[559,4271,4272],{"v-slot:html":519},[511,4273,4275],{"className":615,"code":4274,"language":617,"meta":519,"style":519},"\u003C!-- swap the color: ori-color_primary → _secondary \u002F _success \u002F _warning \u002F _danger \u002F _info -->\n\u003Cul class=\"ori-list ori-color_success\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\" aria-current=\"true\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">success\u003C\u002Fspan>\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003C!-- … Another row -->\n\u003C\u002Ful>\n",[287,4276,4277,4282,4303,4317,4337,4370,4378,4386,4391],{"__ignoreMap":519},[569,4278,4279],{"class":571,"line":572},[569,4280,4281],{"class":624},"\u003C!-- swap the color: ori-color_primary → _secondary \u002F _success \u002F _warning \u002F _danger \u002F _info -->\n",[569,4283,4284,4286,4288,4290,4292,4295,4297,4299,4301],{"class":571,"line":585},[569,4285,576],{"class":575},[569,4287,632],{"class":579},[569,4289,636],{"class":635},[569,4291,639],{"class":575},[569,4293,4294],{"class":642},"\"ori-list ori-color_success\"",[569,4296,646],{"class":635},[569,4298,639],{"class":575},[569,4300,651],{"class":642},[569,4302,582],{"class":575},[569,4304,4305,4307,4309,4311,4313,4315],{"class":571,"line":591},[569,4306,658],{"class":575},[569,4308,661],{"class":579},[569,4310,636],{"class":635},[569,4312,639],{"class":575},[569,4314,668],{"class":642},[569,4316,582],{"class":575},[569,4318,4319,4321,4323,4325,4327,4329,4331,4333,4335],{"class":571,"line":597},[569,4320,675],{"class":575},[569,4322,678],{"class":579},[569,4324,636],{"class":635},[569,4326,639],{"class":575},[569,4328,685],{"class":642},[569,4330,2992],{"class":635},[569,4332,639],{"class":575},[569,4334,1249],{"class":642},[569,4336,582],{"class":575},[569,4338,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4362,4364,4366,4368],{"class":571,"line":603},[569,4340,692],{"class":575},[569,4342,569],{"class":579},[569,4344,636],{"class":635},[569,4346,639],{"class":575},[569,4348,701],{"class":642},[569,4350,704],{"class":575},[569,4352,569],{"class":579},[569,4354,636],{"class":635},[569,4356,639],{"class":575},[569,4358,713],{"class":642},[569,4360,4361],{"class":575},">success\u003C\u002F",[569,4363,569],{"class":579},[569,4365,721],{"class":575},[569,4367,569],{"class":579},[569,4369,582],{"class":575},[569,4371,4372,4374,4376],{"class":571,"line":728},[569,4373,767],{"class":575},[569,4375,678],{"class":579},[569,4377,582],{"class":575},[569,4379,4380,4382,4384],{"class":571,"line":764},[569,4381,777],{"class":575},[569,4383,661],{"class":579},[569,4385,582],{"class":575},[569,4387,4388],{"class":571,"line":774},[569,4389,4390],{"class":624},"    \u003C!-- … Another row -->\n",[569,4392,4393,4395,4397],{"class":571,"line":784},[569,4394,606],{"class":575},[569,4396,632],{"class":579},[569,4398,582],{"class":575},[344,4400,4402],{"id":4401},"radius","Radius",[270,4404,4405,4406,4408,4409,4412,4413,4416,4417,4419],{},"The rows follow the shared ",[287,4407,470],{}," token: ",[287,4410,4411],{},"none"," to ",[287,4414,4415],{},"full"," (pill). The component has no ",[287,4418,4401],{},"\nprop — put the utility on the list. The bar is an inset shadow, so on a large radius it curves with the row.",[540,4421,4422,4430,4439,4447,4493],{},[492,4423,4426,4428],{"style":4145,"className":4424},[4425],"ori-size-radius_none",[546,4427],{"label":4411,":current":1067},[546,4429],{"label":4152},[492,4431,4434,4437],{"style":4145,"className":4432},[4433],"ori-size-radius_lg",[546,4435],{"label":4436,":current":1067},"lg",[546,4438],{"label":4152},[492,4440,4443,4445],{"style":4145,"className":4441},[4442],"ori-size-radius_full",[546,4444],{"label":4415,":current":1067},[546,4446],{"label":4152},[559,4448,4449],{"v-slot:vue":519},[511,4450,4452],{"className":563,"code":4451,"language":565,"meta":519,"style":519},"\u003COriList class=\"ori-size-radius_none\">…\u003C\u002FOriList>\n\u003COriList class=\"ori-size-radius_full\">…\u003C\u002FOriList>\n",[287,4453,4454,4474],{"__ignoreMap":519},[569,4455,4456,4458,4460,4462,4464,4467,4470,4472],{"class":571,"line":572},[569,4457,576],{"class":575},[569,4459,329],{"class":579},[569,4461,636],{"class":635},[569,4463,639],{"class":575},[569,4465,4466],{"class":642},"\"ori-size-radius_none\"",[569,4468,4469],{"class":575},">…\u003C\u002F",[569,4471,329],{"class":579},[569,4473,582],{"class":575},[569,4475,4476,4478,4480,4482,4484,4487,4489,4491],{"class":571,"line":585},[569,4477,576],{"class":575},[569,4479,329],{"class":579},[569,4481,636],{"class":635},[569,4483,639],{"class":575},[569,4485,4486],{"class":642},"\"ori-size-radius_full\"",[569,4488,4469],{"class":575},[569,4490,329],{"class":579},[569,4492,582],{"class":575},[559,4494,4495],{"v-slot:html":519},[511,4496,4498],{"className":615,"code":4497,"language":617,"meta":519,"style":519},"\u003C!-- ori-size-radius_*: none · xs · sm · md · lg · xl · full -->\n\u003Cul class=\"ori-list ori-size-radius_full\" role=\"list\">\n    …\n\u003C\u002Ful>\n",[287,4499,4500,4505,4526,4531],{"__ignoreMap":519},[569,4501,4502],{"class":571,"line":572},[569,4503,4504],{"class":624},"\u003C!-- ori-size-radius_*: none · xs · sm · md · lg · xl · full -->\n",[569,4506,4507,4509,4511,4513,4515,4518,4520,4522,4524],{"class":571,"line":585},[569,4508,576],{"class":575},[569,4510,632],{"class":579},[569,4512,636],{"class":635},[569,4514,639],{"class":575},[569,4516,4517],{"class":642},"\"ori-list ori-size-radius_full\"",[569,4519,646],{"class":635},[569,4521,639],{"class":575},[569,4523,651],{"class":642},[569,4525,582],{"class":575},[569,4527,4528],{"class":571,"line":591},[569,4529,4530],{"class":575},"    …\n",[569,4532,4533,4535,4537],{"class":571,"line":597},[569,4534,606],{"class":575},[569,4536,632],{"class":579},[569,4538,582],{"class":575},[344,4540,2133],{"id":4541},"control-in-a-row",[270,4543,4544,4545,4548,4549,4551,4552,478],{},"A static row may hold a control in its appended cell (the ",[287,4546,4547],{},"#append"," slot): a switch, a segmented control, anything that is its own\nfocus stop. The row is a ",[287,4550,533],{},", so the control is not nested in a button or a link. The row's label does not\nname the control — give the control its own ",[287,4553,4554],{},"aria-label",[540,4556,4557,4560,4922],{},[2160,4558],{"kind":4559},"control",[559,4561,4562],{"v-slot:vue":519},[511,4563,4565],{"className":563,"code":4564,"language":565,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst notify = ref(true)\nconst theme = ref('auto')\nconst themes = [\n    { label: 'Light', value: 'light' },\n    { label: 'Dark', value: 'dark' },\n    { label: 'Auto', value: 'auto' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COriList divided>\n        \u003COriListItem icon=\"…\" label=\"Notifications\" subtitle=\"Mentions and replies\">\n            \u003Ctemplate #append>\n                \u003COriSwitch v-model=\"notify\" aria-label=\"Notifications\" \u002F>\n            \u003C\u002Ftemplate>\n        \u003C\u002FOriListItem>\n        \u003COriListItem icon=\"…\" label=\"Theme\">\n            \u003Ctemplate #append>\n                \u003COriSegmentedControl v-model=\"theme\" aria-label=\"Theme\" size=\"sm\" :options=\"themes\" \u002F>\n            \u003C\u002Ftemplate>\n        \u003C\u002FOriListItem>\n    \u003C\u002FOriList>\n\u003C\u002Ftemplate>\n",[287,4566,4567,4583,4593,4597,4614,4632,4643,4659,4673,4686,4690,4698,4702,4710,4720,4751,4765,4792,4800,4808,4829,4841,4890,4898,4906,4914],{"__ignoreMap":519},[569,4568,4569,4571,4573,4575,4577,4579,4581],{"class":571,"line":572},[569,4570,576],{"class":575},[569,4572,2176],{"class":579},[569,4574,2179],{"class":635},[569,4576,2182],{"class":635},[569,4578,639],{"class":575},[569,4580,2187],{"class":642},[569,4582,582],{"class":575},[569,4584,4585,4587,4589,4591],{"class":571,"line":585},[569,4586,2195],{"class":2194},[569,4588,2198],{"class":575},[569,4590,2201],{"class":2194},[569,4592,2204],{"class":642},[569,4594,4595],{"class":571,"line":591},[569,4596,2210],{"emptyLinePlaceholder":2209},[569,4598,4599,4601,4604,4606,4608,4610,4612],{"class":571,"line":597},[569,4600,2215],{"class":2194},[569,4602,4603],{"class":2218}," notify",[569,4605,2222],{"class":2194},[569,4607,2225],{"class":635},[569,4609,2228],{"class":575},[569,4611,1067],{"class":2218},[569,4613,2234],{"class":575},[569,4615,4616,4618,4621,4623,4625,4627,4630],{"class":571,"line":603},[569,4617,2215],{"class":2194},[569,4619,4620],{"class":2218}," theme",[569,4622,2222],{"class":2194},[569,4624,2225],{"class":635},[569,4626,2228],{"class":575},[569,4628,4629],{"class":642},"'auto'",[569,4631,2234],{"class":575},[569,4633,4634,4636,4639,4641],{"class":571,"line":728},[569,4635,2215],{"class":2194},[569,4637,4638],{"class":2218}," themes",[569,4640,2222],{"class":2194},[569,4642,3158],{"class":575},[569,4644,4645,4648,4651,4654,4657],{"class":571,"line":764},[569,4646,4647],{"class":575},"    { label: ",[569,4649,4650],{"class":642},"'Light'",[569,4652,4653],{"class":575},", value: ",[569,4655,4656],{"class":642},"'light'",[569,4658,3181],{"class":575},[569,4660,4661,4663,4666,4668,4671],{"class":571,"line":774},[569,4662,4647],{"class":575},[569,4664,4665],{"class":642},"'Dark'",[569,4667,4653],{"class":575},[569,4669,4670],{"class":642},"'dark'",[569,4672,3181],{"class":575},[569,4674,4675,4677,4680,4682,4684],{"class":571,"line":784},[569,4676,4647],{"class":575},[569,4678,4679],{"class":642},"'Auto'",[569,4681,4653],{"class":575},[569,4683,4629],{"class":642},[569,4685,3220],{"class":575},[569,4687,4688],{"class":571,"line":799},[569,4689,3225],{"class":575},[569,4691,4692,4694,4696],{"class":571,"line":814},[569,4693,606],{"class":575},[569,4695,2176],{"class":579},[569,4697,582],{"class":575},[569,4699,4700],{"class":571,"line":848},[569,4701,2210],{"emptyLinePlaceholder":2209},[569,4703,4704,4706,4708],{"class":571,"line":882},[569,4705,576],{"class":575},[569,4707,559],{"class":579},[569,4709,582],{"class":575},[569,4711,4712,4714,4716,4718],{"class":571,"line":891},[569,4713,658],{"class":575},[569,4715,329],{"class":579},[569,4717,1873],{"class":635},[569,4719,582],{"class":575},[569,4721,4722,4724,4726,4729,4731,4734,4736,4738,4741,4744,4746,4749],{"class":571,"line":900},[569,4723,675],{"class":575},[569,4725,333],{"class":579},[569,4727,4728],{"class":635}," icon",[569,4730,639],{"class":575},[569,4732,4733],{"class":642},"\"…\"",[569,4735,2273],{"class":635},[569,4737,639],{"class":575},[569,4739,4740],{"class":642},"\"Notifications\"",[569,4742,4743],{"class":635}," subtitle",[569,4745,639],{"class":575},[569,4747,4748],{"class":642},"\"Mentions and replies\"",[569,4750,582],{"class":575},[569,4752,4753,4755,4757,4760,4763],{"class":571,"line":915},[569,4754,692],{"class":575},[569,4756,559],{"class":579},[569,4758,4759],{"class":575}," #",[569,4761,4762],{"class":635},"append",[569,4764,582],{"class":575},[569,4766,4767,4769,4772,4775,4777,4779,4782,4784,4786,4788,4790],{"class":571,"line":930},[569,4768,1231],{"class":575},[569,4770,4771],{"class":579},"OriSwitch",[569,4773,4774],{"class":635}," v-model",[569,4776,639],{"class":575},[569,4778,2297],{"class":642},[569,4780,4781],{"class":575},"notify",[569,4783,2297],{"class":642},[569,4785,2758],{"class":635},[569,4787,639],{"class":575},[569,4789,4740],{"class":642},[569,4791,2308],{"class":575},[569,4793,4794,4796,4798],{"class":571,"line":964},[569,4795,1301],{"class":575},[569,4797,559],{"class":579},[569,4799,582],{"class":575},[569,4801,4802,4804,4806],{"class":571,"line":998},[569,4803,767],{"class":575},[569,4805,333],{"class":579},[569,4807,582],{"class":575},[569,4809,4810,4812,4814,4816,4818,4820,4822,4824,4827],{"class":571,"line":1007},[569,4811,675],{"class":575},[569,4813,333],{"class":579},[569,4815,4728],{"class":635},[569,4817,639],{"class":575},[569,4819,4733],{"class":642},[569,4821,2273],{"class":635},[569,4823,639],{"class":575},[569,4825,4826],{"class":642},"\"Theme\"",[569,4828,582],{"class":575},[569,4830,4831,4833,4835,4837,4839],{"class":571,"line":1016},[569,4832,692],{"class":575},[569,4834,559],{"class":579},[569,4836,4759],{"class":575},[569,4838,4762],{"class":635},[569,4840,582],{"class":575},[569,4842,4843,4845,4848,4850,4852,4854,4857,4859,4861,4863,4865,4868,4870,4873,4876,4879,4881,4883,4886,4888],{"class":571,"line":1476},[569,4844,1231],{"class":575},[569,4846,4847],{"class":579},"OriSegmentedControl",[569,4849,4774],{"class":635},[569,4851,639],{"class":575},[569,4853,2297],{"class":642},[569,4855,4856],{"class":575},"theme",[569,4858,2297],{"class":642},[569,4860,2758],{"class":635},[569,4862,639],{"class":575},[569,4864,4826],{"class":642},[569,4866,4867],{"class":635}," size",[569,4869,639],{"class":575},[569,4871,4872],{"class":642},"\"sm\"",[569,4874,4875],{"class":575}," :",[569,4877,4878],{"class":635},"options",[569,4880,639],{"class":575},[569,4882,2297],{"class":642},[569,4884,4885],{"class":575},"themes",[569,4887,2297],{"class":642},[569,4889,2308],{"class":575},[569,4891,4892,4894,4896],{"class":571,"line":1491},[569,4893,1301],{"class":575},[569,4895,559],{"class":579},[569,4897,582],{"class":575},[569,4899,4900,4902,4904],{"class":571,"line":1525},[569,4901,767],{"class":575},[569,4903,333],{"class":579},[569,4905,582],{"class":575},[569,4907,4908,4910,4912],{"class":571,"line":1559},[569,4909,777],{"class":575},[569,4911,329],{"class":579},[569,4913,582],{"class":575},[569,4915,4916,4918,4920],{"class":571,"line":1568},[569,4917,606],{"class":575},[569,4919,559],{"class":579},[569,4921,582],{"class":575},[559,4923,4924],{"v-slot:html":519},[511,4925,4927],{"className":615,"code":4926,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list ori-list_divided\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003C!-- a static row: a \u003Cdiv>, so the control inside is valid HTML -->\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Notifications\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Mentions and replies\u003C\u002Fspan>\n            \u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\n                \u003Clabel class=\"ori-switch ori-color_primary ori-font-size_md\">\n                    \u003Cinput class=\"ori-switch__input\" type=\"checkbox\" role=\"switch\" aria-label=\"Notifications\" checked \u002F>\n                    \u003Cspan class=\"ori-switch__track\" aria-hidden=\"true\">\u003Cspan class=\"ori-switch__thumb\">\u003C\u002Fspan>\u003C\u002Fspan>\n                \u003C\u002Flabel>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Theme\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\n                \u003C!-- see the Segmented control page for the full markup -->\n                \u003Cdiv\n                    class=\"ori-segmented-control ori-segmented-control_sm ori-font-size_sm\"\n                    role=\"radiogroup\"\n                    aria-label=\"Theme\"\n                >\n                    …\n                \u003C\u002Fdiv>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n\u003C\u002Ful>\n",[287,4928,4929,4949,4963,4968,4982,4996,5015,5034,5042,5056,5071,5110,5150,5158,5166,5174,5182,5196,5210,5243,5257,5262,5269,5279,5289,5299,5304,5309,5317,5325,5333,5341],{"__ignoreMap":519},[569,4930,4931,4933,4935,4937,4939,4941,4943,4945,4947],{"class":571,"line":572},[569,4932,576],{"class":575},[569,4934,632],{"class":579},[569,4936,636],{"class":635},[569,4938,639],{"class":575},[569,4940,1918],{"class":642},[569,4942,646],{"class":635},[569,4944,639],{"class":575},[569,4946,651],{"class":642},[569,4948,582],{"class":575},[569,4950,4951,4953,4955,4957,4959,4961],{"class":571,"line":585},[569,4952,658],{"class":575},[569,4954,661],{"class":579},[569,4956,636],{"class":635},[569,4958,639],{"class":575},[569,4960,668],{"class":642},[569,4962,582],{"class":575},[569,4964,4965],{"class":571,"line":591},[569,4966,4967],{"class":624},"        \u003C!-- a static row: a \u003Cdiv>, so the control inside is valid HTML -->\n",[569,4969,4970,4972,4974,4976,4978,4980],{"class":571,"line":597},[569,4971,675],{"class":575},[569,4973,678],{"class":579},[569,4975,636],{"class":635},[569,4977,639],{"class":575},[569,4979,685],{"class":642},[569,4981,582],{"class":575},[569,4983,4984,4986,4988,4990,4992,4994],{"class":571,"line":603},[569,4985,692],{"class":575},[569,4987,569],{"class":579},[569,4989,636],{"class":635},[569,4991,639],{"class":575},[569,4993,701],{"class":642},[569,4995,582],{"class":575},[569,4997,4998,5000,5002,5004,5006,5008,5011,5013],{"class":571,"line":728},[569,4999,1231],{"class":575},[569,5001,569],{"class":579},[569,5003,636],{"class":635},[569,5005,639],{"class":575},[569,5007,713],{"class":642},[569,5009,5010],{"class":575},">Notifications\u003C\u002F",[569,5012,569],{"class":579},[569,5014,582],{"class":575},[569,5016,5017,5019,5021,5023,5025,5027,5030,5032],{"class":571,"line":764},[569,5018,1231],{"class":575},[569,5020,569],{"class":579},[569,5022,636],{"class":635},[569,5024,639],{"class":575},[569,5026,1428],{"class":642},[569,5028,5029],{"class":575},">Mentions and replies\u003C\u002F",[569,5031,569],{"class":579},[569,5033,582],{"class":575},[569,5035,5036,5038,5040],{"class":571,"line":774},[569,5037,1301],{"class":575},[569,5039,569],{"class":579},[569,5041,582],{"class":575},[569,5043,5044,5046,5048,5050,5052,5054],{"class":571,"line":784},[569,5045,692],{"class":575},[569,5047,569],{"class":579},[569,5049,636],{"class":635},[569,5051,639],{"class":575},[569,5053,739],{"class":642},[569,5055,582],{"class":575},[569,5057,5058,5060,5062,5064,5066,5069],{"class":571,"line":799},[569,5059,1231],{"class":575},[569,5061,3321],{"class":579},[569,5063,636],{"class":635},[569,5065,639],{"class":575},[569,5067,5068],{"class":642},"\"ori-switch ori-color_primary ori-font-size_md\"",[569,5070,582],{"class":575},[569,5072,5073,5075,5078,5080,5082,5085,5087,5089,5092,5094,5096,5099,5101,5103,5105,5108],{"class":571,"line":814},[569,5074,1256],{"class":575},[569,5076,5077],{"class":579},"input",[569,5079,636],{"class":635},[569,5081,639],{"class":575},[569,5083,5084],{"class":642},"\"ori-switch__input\"",[569,5086,2496],{"class":635},[569,5088,639],{"class":575},[569,5090,5091],{"class":642},"\"checkbox\"",[569,5093,646],{"class":635},[569,5095,639],{"class":575},[569,5097,5098],{"class":642},"\"switch\"",[569,5100,2758],{"class":635},[569,5102,639],{"class":575},[569,5104,4740],{"class":642},[569,5106,5107],{"class":635}," checked",[569,5109,2308],{"class":575},[569,5111,5112,5114,5116,5118,5120,5123,5125,5127,5129,5131,5133,5135,5137,5140,5142,5144,5146,5148],{"class":571,"line":848},[569,5113,1256],{"class":575},[569,5115,569],{"class":579},[569,5117,636],{"class":635},[569,5119,639],{"class":575},[569,5121,5122],{"class":642},"\"ori-switch__track\"",[569,5124,1244],{"class":635},[569,5126,639],{"class":575},[569,5128,1249],{"class":642},[569,5130,704],{"class":575},[569,5132,569],{"class":579},[569,5134,636],{"class":635},[569,5136,639],{"class":575},[569,5138,5139],{"class":642},"\"ori-switch__thumb\"",[569,5141,721],{"class":575},[569,5143,569],{"class":579},[569,5145,721],{"class":575},[569,5147,569],{"class":579},[569,5149,582],{"class":575},[569,5151,5152,5154,5156],{"class":571,"line":882},[569,5153,1292],{"class":575},[569,5155,3321],{"class":579},[569,5157,582],{"class":575},[569,5159,5160,5162,5164],{"class":571,"line":891},[569,5161,1301],{"class":575},[569,5163,569],{"class":579},[569,5165,582],{"class":575},[569,5167,5168,5170,5172],{"class":571,"line":900},[569,5169,767],{"class":575},[569,5171,678],{"class":579},[569,5173,582],{"class":575},[569,5175,5176,5178,5180],{"class":571,"line":915},[569,5177,777],{"class":575},[569,5179,661],{"class":579},[569,5181,582],{"class":575},[569,5183,5184,5186,5188,5190,5192,5194],{"class":571,"line":930},[569,5185,658],{"class":575},[569,5187,661],{"class":579},[569,5189,636],{"class":635},[569,5191,639],{"class":575},[569,5193,668],{"class":642},[569,5195,582],{"class":575},[569,5197,5198,5200,5202,5204,5206,5208],{"class":571,"line":964},[569,5199,675],{"class":575},[569,5201,678],{"class":579},[569,5203,636],{"class":635},[569,5205,639],{"class":575},[569,5207,685],{"class":642},[569,5209,582],{"class":575},[569,5211,5212,5214,5216,5218,5220,5222,5224,5226,5228,5230,5232,5235,5237,5239,5241],{"class":571,"line":998},[569,5213,692],{"class":575},[569,5215,569],{"class":579},[569,5217,636],{"class":635},[569,5219,639],{"class":575},[569,5221,701],{"class":642},[569,5223,704],{"class":575},[569,5225,569],{"class":579},[569,5227,636],{"class":635},[569,5229,639],{"class":575},[569,5231,713],{"class":642},[569,5233,5234],{"class":575},">Theme\u003C\u002F",[569,5236,569],{"class":579},[569,5238,721],{"class":575},[569,5240,569],{"class":579},[569,5242,582],{"class":575},[569,5244,5245,5247,5249,5251,5253,5255],{"class":571,"line":1007},[569,5246,692],{"class":575},[569,5248,569],{"class":579},[569,5250,636],{"class":635},[569,5252,639],{"class":575},[569,5254,739],{"class":642},[569,5256,582],{"class":575},[569,5258,5259],{"class":571,"line":1016},[569,5260,5261],{"class":624},"                \u003C!-- see the Segmented control page for the full markup -->\n",[569,5263,5264,5266],{"class":571,"line":1476},[569,5265,1231],{"class":575},[569,5267,5268],{"class":579},"div\n",[569,5270,5271,5274,5276],{"class":571,"line":1491},[569,5272,5273],{"class":635},"                    class",[569,5275,639],{"class":575},[569,5277,5278],{"class":642},"\"ori-segmented-control ori-segmented-control_sm ori-font-size_sm\"\n",[569,5280,5281,5284,5286],{"class":571,"line":1525},[569,5282,5283],{"class":635},"                    role",[569,5285,639],{"class":575},[569,5287,5288],{"class":642},"\"radiogroup\"\n",[569,5290,5291,5294,5296],{"class":571,"line":1559},[569,5292,5293],{"class":635},"                    aria-label",[569,5295,639],{"class":575},[569,5297,5298],{"class":642},"\"Theme\"\n",[569,5300,5301],{"class":571,"line":1568},[569,5302,5303],{"class":575},"                >\n",[569,5305,5306],{"class":571,"line":1577},[569,5307,5308],{"class":575},"                    …\n",[569,5310,5311,5313,5315],{"class":571,"line":1592},[569,5312,1292],{"class":575},[569,5314,678],{"class":579},[569,5316,582],{"class":575},[569,5318,5319,5321,5323],{"class":571,"line":1607},[569,5320,1301],{"class":575},[569,5322,569],{"class":579},[569,5324,582],{"class":575},[569,5326,5327,5329,5331],{"class":571,"line":1641},[569,5328,767],{"class":575},[569,5330,678],{"class":579},[569,5332,582],{"class":575},[569,5334,5335,5337,5339],{"class":571,"line":1656},[569,5336,777],{"class":575},[569,5338,661],{"class":579},[569,5340,582],{"class":575},[569,5342,5343,5345,5347],{"class":571,"line":1699},[569,5344,606],{"class":575},[569,5346,632],{"class":579},[569,5348,582],{"class":575},[270,5350,5351],{},"Do not put a control in a link or a button row: that nests an interactive element in another, which is\ninvalid HTML and breaks both keyboard and screen-reader use. If the whole row must act as well, make the\ncontrol the only action.",[344,5353,5355],{"id":5354},"custom-content","Custom content",[270,5357,5358,5359,5362,5363,5365,5366,5369],{},"The slots replace the built-in cells. ",[287,5360,5361],{},"#prepend"," replaces the icon, ",[287,5364,4547],{}," replaces the meta text and the\nchevron, and the default slot replaces the label and the subtitle — the content you pass sits inside\n",[287,5367,5368],{},"ori-list__main",". Here a status icon before the label and a tag at the end.",[540,5371,5372,5375,5474],{},[2160,5373],{"kind":5374},"custom",[559,5376,5377],{"v-slot:vue":519},[511,5378,5380],{"className":563,"code":5379,"language":565,"meta":519,"style":519},"\u003COriList divided>\n    \u003COriListItem label=\"Build 128\" subtitle=\"Deployed 4 minutes ago\">\n        \u003Ctemplate #prepend>\n            \u003COriIcon icon=\"M12 2C6.48 2 2 6.48…\" color=\"success\" \u002F>\n        \u003C\u002Ftemplate>\n        \u003Ctemplate #append>\n            \u003COriTag label=\"Passed\" color=\"success\" \u002F>\n        \u003C\u002Ftemplate>\n    \u003C\u002FOriListItem>\n    \u003COriListItem label=\"Build 127\" subtitle=\"Failed 1 hour ago\">\n        \u003Ctemplate #prepend>\n            \u003COriIcon icon=\"M12 2C6.48 2 2 6.48…\" color=\"danger\" \u002F>\n        \u003C\u002Ftemplate>\n        \u003Ctemplate #append>\n            \u003COriTag label=\"Failed\" color=\"danger\" \u002F>\n        \u003C\u002Ftemplate>\n    \u003C\u002FOriListItem>\n\u003C\u002FOriList>\n",[287,5381,5382,5392,5397,5402,5407,5412,5417,5422,5426,5431,5436,5440,5445,5449,5453,5458,5462,5466],{"__ignoreMap":519},[569,5383,5384,5386,5388,5390],{"class":571,"line":572},[569,5385,576],{"class":575},[569,5387,329],{"class":579},[569,5389,1873],{"class":635},[569,5391,582],{"class":575},[569,5393,5394],{"class":571,"line":585},[569,5395,5396],{"class":575},"    \u003COriListItem label=\"Build 128\" subtitle=\"Deployed 4 minutes ago\">\n",[569,5398,5399],{"class":571,"line":591},[569,5400,5401],{"class":575},"        \u003Ctemplate #prepend>\n",[569,5403,5404],{"class":571,"line":597},[569,5405,5406],{"class":575},"            \u003COriIcon icon=\"M12 2C6.48 2 2 6.48…\" color=\"success\" \u002F>\n",[569,5408,5409],{"class":571,"line":603},[569,5410,5411],{"class":575},"        \u003C\u002Ftemplate>\n",[569,5413,5414],{"class":571,"line":728},[569,5415,5416],{"class":575},"        \u003Ctemplate #append>\n",[569,5418,5419],{"class":571,"line":764},[569,5420,5421],{"class":575},"            \u003COriTag label=\"Passed\" color=\"success\" \u002F>\n",[569,5423,5424],{"class":571,"line":774},[569,5425,5411],{"class":575},[569,5427,5428],{"class":571,"line":784},[569,5429,5430],{"class":575},"    \u003C\u002FOriListItem>\n",[569,5432,5433],{"class":571,"line":799},[569,5434,5435],{"class":575},"    \u003COriListItem label=\"Build 127\" subtitle=\"Failed 1 hour ago\">\n",[569,5437,5438],{"class":571,"line":814},[569,5439,5401],{"class":575},[569,5441,5442],{"class":571,"line":848},[569,5443,5444],{"class":575},"            \u003COriIcon icon=\"M12 2C6.48 2 2 6.48…\" color=\"danger\" \u002F>\n",[569,5446,5447],{"class":571,"line":882},[569,5448,5411],{"class":575},[569,5450,5451],{"class":571,"line":891},[569,5452,5416],{"class":575},[569,5454,5455],{"class":571,"line":900},[569,5456,5457],{"class":575},"            \u003COriTag label=\"Failed\" color=\"danger\" \u002F>\n",[569,5459,5460],{"class":571,"line":915},[569,5461,5411],{"class":575},[569,5463,5464],{"class":571,"line":930},[569,5465,5430],{"class":575},[569,5467,5468,5470,5472],{"class":571,"line":964},[569,5469,606],{"class":575},[569,5471,329],{"class":579},[569,5473,582],{"class":575},[559,5475,5476],{"v-slot:html":519},[511,5477,5479],{"className":615,"code":5478,"language":617,"meta":519,"style":519},"\u003Cul class=\"ori-list ori-list_divided\" role=\"list\">\n    \u003Cli class=\"ori-list__item\">\n        \u003Cdiv class=\"ori-list__row\">\n            \u003Cspan class=\"ori-list__prepend\">\n                \u003Ci class=\"ori-icon ori-icon_inherit ori-color_success\" aria-hidden=\"true\">\n                    \u003Csvg viewBox=\"0 0 24 24\">\u003Cpath d=\"M12 2C6.48 2 2 6.48…\" \u002F>\u003C\u002Fsvg>\n                \u003C\u002Fi>\n            \u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__main\">\n                \u003Cspan class=\"ori-list__label\">Build 128\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__subtitle\">Deployed 4 minutes ago\u003C\u002Fspan>\n            \u003C\u002Fspan>\n            \u003Cspan class=\"ori-list__append\">\n                \u003C!-- see the Tag page for the markup -->\n                \u003Cspan class=\"ori-tag ori-color_success\">…\u003C\u002Fspan>\n            \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n    \u003C\u002Fli>\n    \u003C!-- … Build 127 -->\n\u003C\u002Ful>\n",[287,5480,5481,5501,5515,5529,5543,5564,5593,5601,5609,5623,5642,5661,5669,5683,5688,5707,5715,5723,5731,5736],{"__ignoreMap":519},[569,5482,5483,5485,5487,5489,5491,5493,5495,5497,5499],{"class":571,"line":572},[569,5484,576],{"class":575},[569,5486,632],{"class":579},[569,5488,636],{"class":635},[569,5490,639],{"class":575},[569,5492,1918],{"class":642},[569,5494,646],{"class":635},[569,5496,639],{"class":575},[569,5498,651],{"class":642},[569,5500,582],{"class":575},[569,5502,5503,5505,5507,5509,5511,5513],{"class":571,"line":585},[569,5504,658],{"class":575},[569,5506,661],{"class":579},[569,5508,636],{"class":635},[569,5510,639],{"class":575},[569,5512,668],{"class":642},[569,5514,582],{"class":575},[569,5516,5517,5519,5521,5523,5525,5527],{"class":571,"line":591},[569,5518,675],{"class":575},[569,5520,678],{"class":579},[569,5522,636],{"class":635},[569,5524,639],{"class":575},[569,5526,685],{"class":642},[569,5528,582],{"class":575},[569,5530,5531,5533,5535,5537,5539,5541],{"class":571,"line":597},[569,5532,692],{"class":575},[569,5534,569],{"class":579},[569,5536,636],{"class":635},[569,5538,639],{"class":575},[569,5540,1224],{"class":642},[569,5542,582],{"class":575},[569,5544,5545,5547,5549,5551,5553,5556,5558,5560,5562],{"class":571,"line":603},[569,5546,1231],{"class":575},[569,5548,1234],{"class":579},[569,5550,636],{"class":635},[569,5552,639],{"class":575},[569,5554,5555],{"class":642},"\"ori-icon ori-icon_inherit ori-color_success\"",[569,5557,1244],{"class":635},[569,5559,639],{"class":575},[569,5561,1249],{"class":642},[569,5563,582],{"class":575},[569,5565,5566,5568,5570,5572,5574,5576,5578,5580,5582,5584,5587,5589,5591],{"class":571,"line":728},[569,5567,1256],{"class":575},[569,5569,1259],{"class":579},[569,5571,1262],{"class":635},[569,5573,639],{"class":575},[569,5575,1267],{"class":642},[569,5577,704],{"class":575},[569,5579,1272],{"class":579},[569,5581,1275],{"class":635},[569,5583,639],{"class":575},[569,5585,5586],{"class":642},"\"M12 2C6.48 2 2 6.48…\"",[569,5588,1283],{"class":575},[569,5590,1259],{"class":579},[569,5592,582],{"class":575},[569,5594,5595,5597,5599],{"class":571,"line":764},[569,5596,1292],{"class":575},[569,5598,1234],{"class":579},[569,5600,582],{"class":575},[569,5602,5603,5605,5607],{"class":571,"line":774},[569,5604,1301],{"class":575},[569,5606,569],{"class":579},[569,5608,582],{"class":575},[569,5610,5611,5613,5615,5617,5619,5621],{"class":571,"line":784},[569,5612,692],{"class":575},[569,5614,569],{"class":579},[569,5616,636],{"class":635},[569,5618,639],{"class":575},[569,5620,701],{"class":642},[569,5622,582],{"class":575},[569,5624,5625,5627,5629,5631,5633,5635,5638,5640],{"class":571,"line":799},[569,5626,1231],{"class":575},[569,5628,569],{"class":579},[569,5630,636],{"class":635},[569,5632,639],{"class":575},[569,5634,713],{"class":642},[569,5636,5637],{"class":575},">Build 128\u003C\u002F",[569,5639,569],{"class":579},[569,5641,582],{"class":575},[569,5643,5644,5646,5648,5650,5652,5654,5657,5659],{"class":571,"line":814},[569,5645,1231],{"class":575},[569,5647,569],{"class":579},[569,5649,636],{"class":635},[569,5651,639],{"class":575},[569,5653,1428],{"class":642},[569,5655,5656],{"class":575},">Deployed 4 minutes ago\u003C\u002F",[569,5658,569],{"class":579},[569,5660,582],{"class":575},[569,5662,5663,5665,5667],{"class":571,"line":848},[569,5664,1301],{"class":575},[569,5666,569],{"class":579},[569,5668,582],{"class":575},[569,5670,5671,5673,5675,5677,5679,5681],{"class":571,"line":882},[569,5672,692],{"class":575},[569,5674,569],{"class":579},[569,5676,636],{"class":635},[569,5678,639],{"class":575},[569,5680,739],{"class":642},[569,5682,582],{"class":575},[569,5684,5685],{"class":571,"line":891},[569,5686,5687],{"class":624},"                \u003C!-- see the Tag page for the markup -->\n",[569,5689,5690,5692,5694,5696,5698,5701,5703,5705],{"class":571,"line":900},[569,5691,1231],{"class":575},[569,5693,569],{"class":579},[569,5695,636],{"class":635},[569,5697,639],{"class":575},[569,5699,5700],{"class":642},"\"ori-tag ori-color_success\"",[569,5702,4469],{"class":575},[569,5704,569],{"class":579},[569,5706,582],{"class":575},[569,5708,5709,5711,5713],{"class":571,"line":915},[569,5710,1301],{"class":575},[569,5712,569],{"class":579},[569,5714,582],{"class":575},[569,5716,5717,5719,5721],{"class":571,"line":930},[569,5718,767],{"class":575},[569,5720,678],{"class":579},[569,5722,582],{"class":575},[569,5724,5725,5727,5729],{"class":571,"line":964},[569,5726,777],{"class":575},[569,5728,661],{"class":579},[569,5730,582],{"class":575},[569,5732,5733],{"class":571,"line":998},[569,5734,5735],{"class":624},"    \u003C!-- … Build 127 -->\n",[569,5737,5738,5740,5742],{"class":571,"line":1007},[569,5739,606],{"class":575},[569,5741,632],{"class":579},[569,5743,582],{"class":575},[270,5745,5746,5747,5750],{},"The icon is decorative (",[287,5748,5749],{},"aria-hidden","); the text that says what happened — here the tag — stays in the row, so\nthe status never rests on color alone.",[344,5752,1833],{"id":5753},"right-to-left",[270,5755,5756,5757,5760],{},"The bar and the chevron are logical: they sit on the inline-start and inline-end edges, and a ",[287,5758,5759],{},"dir=\"rtl\"","\nmirrors them with no extra class. Rows lay out in the inline direction, so the icon, the label and the\nappended cell swap sides too.",[540,5762,5763,5774,5815],{},[492,5764,5766,5770],{"style":544,"dir":5765},"rtl",[546,5767],{"label":5768,":current":1067,"icon":5769},"Home","M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",[546,5771],{"label":5772,"meta":5773,"icon":1055,":chevron":1067},"Projects","12",[559,5775,5776],{"v-slot:vue":519},[511,5777,5779],{"className":563,"code":5778,"language":565,"meta":519,"style":519},"\u003COriList dir=\"rtl\">\n    \u003COriListItem icon=\"…\" label=\"Home\" current \u002F>\n    \u003COriListItem icon=\"…\" label=\"Projects\" meta=\"12\" chevron \u002F>\n\u003C\u002FOriList>\n",[287,5780,5781,5797,5802,5807],{"__ignoreMap":519},[569,5782,5783,5785,5787,5790,5792,5795],{"class":571,"line":572},[569,5784,576],{"class":575},[569,5786,329],{"class":579},[569,5788,5789],{"class":635}," dir",[569,5791,639],{"class":575},[569,5793,5794],{"class":642},"\"rtl\"",[569,5796,582],{"class":575},[569,5798,5799],{"class":571,"line":585},[569,5800,5801],{"class":575},"    \u003COriListItem icon=\"…\" label=\"Home\" current \u002F>\n",[569,5803,5804],{"class":571,"line":591},[569,5805,5806],{"class":575},"    \u003COriListItem icon=\"…\" label=\"Projects\" meta=\"12\" chevron \u002F>\n",[569,5808,5809,5811,5813],{"class":571,"line":597},[569,5810,606],{"class":575},[569,5812,329],{"class":579},[569,5814,582],{"class":575},[559,5816,5817],{"v-slot:html":519},[511,5818,5820],{"className":615,"code":5819,"language":617,"meta":519,"style":519},"\u003C!-- dir=\"rtl\" on the list (or any ancestor): the bar moves to the right edge, the chevron is mirrored -->\n\u003Cul class=\"ori-list\" role=\"list\" dir=\"rtl\">\n    …\n\u003C\u002Ful>\n",[287,5821,5822,5827,5853,5857],{"__ignoreMap":519},[569,5823,5824],{"class":571,"line":572},[569,5825,5826],{"class":624},"\u003C!-- dir=\"rtl\" on the list (or any ancestor): the bar moves to the right edge, the chevron is mirrored -->\n",[569,5828,5829,5831,5833,5835,5837,5839,5841,5843,5845,5847,5849,5851],{"class":571,"line":585},[569,5830,576],{"class":575},[569,5832,632],{"class":579},[569,5834,636],{"class":635},[569,5836,639],{"class":575},[569,5838,643],{"class":642},[569,5840,646],{"class":635},[569,5842,639],{"class":575},[569,5844,651],{"class":642},[569,5846,5789],{"class":635},[569,5848,639],{"class":575},[569,5850,5794],{"class":642},[569,5852,582],{"class":575},[569,5854,5855],{"class":571,"line":591},[569,5856,4530],{"class":575},[569,5858,5859,5861,5863],{"class":571,"line":597},[569,5860,606],{"class":575},[569,5862,632],{"class":579},[569,5864,582],{"class":575},[344,5866,5868],{"id":5867},"common-patterns","Common patterns",[270,5870,5871],{},"A panel of an app: a file menu of actions with their shortcuts and a chevron into a sub-panel, a theme row that\nholds a segmented control, and a link row into another page. The first three rows are buttons, the fourth is a\nstatic row holding a control, the last is a link — one list, four kinds of row.",[540,5873,5874,5877,6335],{},[2160,5875],{"kind":5876},"panel",[559,5878,5879],{"v-slot:vue":519},[511,5880,5882],{"className":563,"code":5881,"language":565,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst theme = ref('auto')\nconst themes = [\n    { label: 'Light', value: 'light' },\n    { label: 'Dark', value: 'dark' },\n    { label: 'Auto', value: 'auto' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COriSurface style=\"padding: 0.375rem\">\n        \u003COriList divided>\n            \u003COriListItem :icon=\"plusPath\" label=\"New drawing\" meta=\"Ctrl+N\" @click=\"newDrawing\" \u002F>\n            \u003COriListItem :icon=\"savePath\" label=\"Save\" meta=\"Ctrl+S\" @click=\"save\" \u002F>\n            \u003COriListItem :icon=\"exportPath\" label=\"Export\" chevron @click=\"openExport\" \u002F>\n            \u003COriListItem :icon=\"themePath\" label=\"Theme\">\n                \u003Ctemplate #append>\n                    \u003COriSegmentedControl v-model=\"theme\" aria-label=\"Theme\" size=\"sm\" :options=\"themes\" \u002F>\n                \u003C\u002Ftemplate>\n            \u003C\u002FOriListItem>\n            \u003COriListItem :icon=\"galleryPath\" label=\"Gallery\" subtitle=\"Your saved drawings\" href=\"\u002Fgallery\" \u002F>\n        \u003C\u002FOriList>\n    \u003C\u002FOriSurface>\n\u003C\u002Ftemplate>\n",[287,5883,5884,5900,5910,5914,5930,5940,5952,5964,5976,5980,5988,5992,6000,6029,6039,6085,6131,6173,6200,6212,6254,6262,6270,6311,6319,6327],{"__ignoreMap":519},[569,5885,5886,5888,5890,5892,5894,5896,5898],{"class":571,"line":572},[569,5887,576],{"class":575},[569,5889,2176],{"class":579},[569,5891,2179],{"class":635},[569,5893,2182],{"class":635},[569,5895,639],{"class":575},[569,5897,2187],{"class":642},[569,5899,582],{"class":575},[569,5901,5902,5904,5906,5908],{"class":571,"line":585},[569,5903,2195],{"class":2194},[569,5905,2198],{"class":575},[569,5907,2201],{"class":2194},[569,5909,2204],{"class":642},[569,5911,5912],{"class":571,"line":591},[569,5913,2210],{"emptyLinePlaceholder":2209},[569,5915,5916,5918,5920,5922,5924,5926,5928],{"class":571,"line":597},[569,5917,2215],{"class":2194},[569,5919,4620],{"class":2218},[569,5921,2222],{"class":2194},[569,5923,2225],{"class":635},[569,5925,2228],{"class":575},[569,5927,4629],{"class":642},[569,5929,2234],{"class":575},[569,5931,5932,5934,5936,5938],{"class":571,"line":603},[569,5933,2215],{"class":2194},[569,5935,4638],{"class":2218},[569,5937,2222],{"class":2194},[569,5939,3158],{"class":575},[569,5941,5942,5944,5946,5948,5950],{"class":571,"line":728},[569,5943,4647],{"class":575},[569,5945,4650],{"class":642},[569,5947,4653],{"class":575},[569,5949,4656],{"class":642},[569,5951,3181],{"class":575},[569,5953,5954,5956,5958,5960,5962],{"class":571,"line":764},[569,5955,4647],{"class":575},[569,5957,4665],{"class":642},[569,5959,4653],{"class":575},[569,5961,4670],{"class":642},[569,5963,3181],{"class":575},[569,5965,5966,5968,5970,5972,5974],{"class":571,"line":774},[569,5967,4647],{"class":575},[569,5969,4679],{"class":642},[569,5971,4653],{"class":575},[569,5973,4629],{"class":642},[569,5975,3220],{"class":575},[569,5977,5978],{"class":571,"line":784},[569,5979,3225],{"class":575},[569,5981,5982,5984,5986],{"class":571,"line":799},[569,5983,606],{"class":575},[569,5985,2176],{"class":579},[569,5987,582],{"class":575},[569,5989,5990],{"class":571,"line":814},[569,5991,2210],{"emptyLinePlaceholder":2209},[569,5993,5994,5996,5998],{"class":571,"line":848},[569,5995,576],{"class":575},[569,5997,559],{"class":579},[569,5999,582],{"class":575},[569,6001,6002,6004,6007,6010,6012,6014,6017,6019,6022,6025,6027],{"class":571,"line":882},[569,6003,658],{"class":575},[569,6005,6006],{"class":579},"OriSurface",[569,6008,6009],{"class":635}," style",[569,6011,639],{"class":575},[569,6013,2297],{"class":642},[569,6015,6016],{"class":2218},"padding",[569,6018,2714],{"class":575},[569,6020,6021],{"class":2218},"0.375",[569,6023,6024],{"class":2194},"rem",[569,6026,2297],{"class":642},[569,6028,582],{"class":575},[569,6030,6031,6033,6035,6037],{"class":571,"line":891},[569,6032,675],{"class":575},[569,6034,329],{"class":579},[569,6036,1873],{"class":635},[569,6038,582],{"class":575},[569,6040,6041,6043,6045,6047,6049,6051,6053,6056,6058,6060,6062,6064,6066,6068,6070,6072,6074,6076,6078,6081,6083],{"class":571,"line":900},[569,6042,692],{"class":575},[569,6044,333],{"class":579},[569,6046,4875],{"class":575},[569,6048,1032],{"class":635},[569,6050,639],{"class":575},[569,6052,2297],{"class":642},[569,6054,6055],{"class":575},"plusPath",[569,6057,2297],{"class":642},[569,6059,2273],{"class":635},[569,6061,639],{"class":575},[569,6063,2278],{"class":642},[569,6065,2281],{"class":635},[569,6067,639],{"class":575},[569,6069,2286],{"class":642},[569,6071,2289],{"class":575},[569,6073,2292],{"class":635},[569,6075,639],{"class":575},[569,6077,2297],{"class":642},[569,6079,6080],{"class":575},"newDrawing",[569,6082,2297],{"class":642},[569,6084,2308],{"class":575},[569,6086,6087,6089,6091,6093,6095,6097,6099,6102,6104,6106,6108,6110,6112,6114,6116,6118,6120,6122,6124,6127,6129],{"class":571,"line":915},[569,6088,692],{"class":575},[569,6090,333],{"class":579},[569,6092,4875],{"class":575},[569,6094,1032],{"class":635},[569,6096,639],{"class":575},[569,6098,2297],{"class":642},[569,6100,6101],{"class":575},"savePath",[569,6103,2297],{"class":642},[569,6105,2273],{"class":635},[569,6107,639],{"class":575},[569,6109,2321],{"class":642},[569,6111,2281],{"class":635},[569,6113,639],{"class":575},[569,6115,2328],{"class":642},[569,6117,2289],{"class":575},[569,6119,2292],{"class":635},[569,6121,639],{"class":575},[569,6123,2297],{"class":642},[569,6125,6126],{"class":575},"save",[569,6128,2297],{"class":642},[569,6130,2308],{"class":575},[569,6132,6133,6135,6137,6139,6141,6143,6145,6148,6150,6152,6154,6156,6158,6160,6162,6164,6166,6169,6171],{"class":571,"line":930},[569,6134,692],{"class":575},[569,6136,333],{"class":579},[569,6138,4875],{"class":575},[569,6140,1032],{"class":635},[569,6142,639],{"class":575},[569,6144,2297],{"class":642},[569,6146,6147],{"class":575},"exportPath",[569,6149,2297],{"class":642},[569,6151,2273],{"class":635},[569,6153,639],{"class":575},[569,6155,2358],{"class":642},[569,6157,2361],{"class":635},[569,6159,2289],{"class":575},[569,6161,2292],{"class":635},[569,6163,639],{"class":575},[569,6165,2297],{"class":642},[569,6167,6168],{"class":575},"openExport",[569,6170,2297],{"class":642},[569,6172,2308],{"class":575},[569,6174,6175,6177,6179,6181,6183,6185,6187,6190,6192,6194,6196,6198],{"class":571,"line":964},[569,6176,692],{"class":575},[569,6178,333],{"class":579},[569,6180,4875],{"class":575},[569,6182,1032],{"class":635},[569,6184,639],{"class":575},[569,6186,2297],{"class":642},[569,6188,6189],{"class":575},"themePath",[569,6191,2297],{"class":642},[569,6193,2273],{"class":635},[569,6195,639],{"class":575},[569,6197,4826],{"class":642},[569,6199,582],{"class":575},[569,6201,6202,6204,6206,6208,6210],{"class":571,"line":998},[569,6203,1231],{"class":575},[569,6205,559],{"class":579},[569,6207,4759],{"class":575},[569,6209,4762],{"class":635},[569,6211,582],{"class":575},[569,6213,6214,6216,6218,6220,6222,6224,6226,6228,6230,6232,6234,6236,6238,6240,6242,6244,6246,6248,6250,6252],{"class":571,"line":1007},[569,6215,1256],{"class":575},[569,6217,4847],{"class":579},[569,6219,4774],{"class":635},[569,6221,639],{"class":575},[569,6223,2297],{"class":642},[569,6225,4856],{"class":575},[569,6227,2297],{"class":642},[569,6229,2758],{"class":635},[569,6231,639],{"class":575},[569,6233,4826],{"class":642},[569,6235,4867],{"class":635},[569,6237,639],{"class":575},[569,6239,4872],{"class":642},[569,6241,4875],{"class":575},[569,6243,4878],{"class":635},[569,6245,639],{"class":575},[569,6247,2297],{"class":642},[569,6249,4885],{"class":575},[569,6251,2297],{"class":642},[569,6253,2308],{"class":575},[569,6255,6256,6258,6260],{"class":571,"line":1016},[569,6257,1292],{"class":575},[569,6259,559],{"class":579},[569,6261,582],{"class":575},[569,6263,6264,6266,6268],{"class":571,"line":1476},[569,6265,1301],{"class":575},[569,6267,333],{"class":579},[569,6269,582],{"class":575},[569,6271,6272,6274,6276,6278,6280,6282,6284,6287,6289,6291,6293,6296,6298,6300,6303,6305,6307,6309],{"class":571,"line":1491},[569,6273,692],{"class":575},[569,6275,333],{"class":579},[569,6277,4875],{"class":575},[569,6279,1032],{"class":635},[569,6281,639],{"class":575},[569,6283,2297],{"class":642},[569,6285,6286],{"class":575},"galleryPath",[569,6288,2297],{"class":642},[569,6290,2273],{"class":635},[569,6292,639],{"class":575},[569,6294,6295],{"class":642},"\"Gallery\"",[569,6297,4743],{"class":635},[569,6299,639],{"class":575},[569,6301,6302],{"class":642},"\"Your saved drawings\"",[569,6304,2868],{"class":635},[569,6306,639],{"class":575},[569,6308,3832],{"class":642},[569,6310,2308],{"class":575},[569,6312,6313,6315,6317],{"class":571,"line":1525},[569,6314,767],{"class":575},[569,6316,329],{"class":579},[569,6318,582],{"class":575},[569,6320,6321,6323,6325],{"class":571,"line":1559},[569,6322,777],{"class":575},[569,6324,6006],{"class":579},[569,6326,582],{"class":575},[569,6328,6329,6331,6333],{"class":571,"line":1568},[569,6330,606],{"class":575},[569,6332,559],{"class":579},[569,6334,582],{"class":575},[559,6336,6337],{"v-slot:html":519},[511,6338,6340],{"className":615,"code":6339,"language":617,"meta":519,"style":519},"\u003Cdiv class=\"ori-surface ori-surface_elevation-lg ori-surface_bordered ori-size-radius_lg\" style=\"padding: 0.375rem\">\n    \u003Cul class=\"ori-list ori-list_divided\" role=\"list\">\n        \u003Cli class=\"ori-list__item\">\n            \u003Cbutton type=\"button\" class=\"ori-list__row\">\n                \u003Cspan class=\"ori-list__prepend\">\n                    \u003Ci class=\"ori-icon ori-icon_inherit\" aria-hidden=\"true\">\n                        \u003Csvg viewBox=\"0 0 24 24\">\u003Cpath d=\"M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z\" \u002F>\u003C\u002Fsvg>\n                    \u003C\u002Fi>\n                \u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">New drawing\u003C\u002Fspan>\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__append\">\u003Cspan class=\"ori-list__meta\">Ctrl+N\u003C\u002Fspan>\u003C\u002Fspan>\n            \u003C\u002Fbutton>\n        \u003C\u002Fli>\n        \u003C!-- … Save (Ctrl+S) -->\n        \u003Cli class=\"ori-list__item\">\n            \u003Cbutton type=\"button\" class=\"ori-list__row\">\n                \u003Cspan class=\"ori-list__prepend\">\n                    \u003Ci class=\"ori-icon ori-icon_inherit\" aria-hidden=\"true\">\u003Csvg viewBox=\"0 0 24 24\">…\u003C\u002Fsvg>\u003C\u002Fi>\n                \u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Export\u003C\u002Fspan>\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__append\">\n                    \u003Csvg class=\"ori-list__chevron\" viewBox=\"0 0 24 24\" width=\"1em\" height=\"1em\" aria-hidden=\"true\">\n                        \u003Cpath\n                            d=\"m9 6 6 6-6 6\"\n                            fill=\"none\"\n                            stroke=\"currentcolor\"\n                            stroke-width=\"2\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                        \u002F>\n                    \u003C\u002Fsvg>\n                \u003C\u002Fspan>\n            \u003C\u002Fbutton>\n        \u003C\u002Fli>\n        \u003Cli class=\"ori-list__item\">\n            \u003C!-- a static row: the control lives in the appended cell and names itself -->\n            \u003Cdiv class=\"ori-list__row\">\n                \u003Cspan class=\"ori-list__prepend\">\n                    \u003Ci class=\"ori-icon ori-icon_inherit\" aria-hidden=\"true\">\u003Csvg viewBox=\"0 0 24 24\">…\u003C\u002Fsvg>\u003C\u002Fi>\n                \u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__main\">\u003Cspan class=\"ori-list__label\">Theme\u003C\u002Fspan>\u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__append\">\n                    \u003Cdiv\n                        class=\"ori-segmented-control ori-segmented-control_sm ori-font-size_sm\"\n                        role=\"radiogroup\"\n                        aria-label=\"Theme\"\n                    >\n                        …\n                    \u003C\u002Fdiv>\n                \u003C\u002Fspan>\n            \u003C\u002Fdiv>\n        \u003C\u002Fli>\n        \u003Cli class=\"ori-list__item\">\n            \u003Ca class=\"ori-list__row\" href=\"\u002Fgallery\">\n                \u003Cspan class=\"ori-list__prepend\">\n                    \u003Ci class=\"ori-icon ori-icon_inherit\" aria-hidden=\"true\">\u003Csvg viewBox=\"0 0 24 24\">…\u003C\u002Fsvg>\u003C\u002Fi>\n                \u003C\u002Fspan>\n                \u003Cspan class=\"ori-list__main\">\n                    \u003Cspan class=\"ori-list__label\">Gallery\u003C\u002Fspan>\n                    \u003Cspan class=\"ori-list__subtitle\">Your saved drawings\u003C\u002Fspan>\n                \u003C\u002Fspan>\n            \u003C\u002Fa>\n        \u003C\u002Fli>\n    \u003C\u002Ful>\n\u003C\u002Fdiv>\n",[287,6341,6342,6364,6384,6398,6418,6432,6452,6481,6490,6498,6530,6562,6570,6578,6583,6597,6617,6631,6669,6677,6710,6724,6762,6768,6777,6786,6795,6804,6813,6822,6827,6835,6843,6851,6859,6873,6878,6892,6906,6944,6952,6984,6998,7004,7013,7022,7032,7038,7044,7053,7062,7071,7080,7095,7116,7131,7170,7179,7194,7213,7232,7241,7250,7259,7268],{"__ignoreMap":519},[569,6343,6344,6346,6348,6350,6352,6355,6357,6359,6362],{"class":571,"line":572},[569,6345,576],{"class":575},[569,6347,678],{"class":579},[569,6349,636],{"class":635},[569,6351,639],{"class":575},[569,6353,6354],{"class":642},"\"ori-surface ori-surface_elevation-lg ori-surface_bordered ori-size-radius_lg\"",[569,6356,6009],{"class":635},[569,6358,639],{"class":575},[569,6360,6361],{"class":642},"\"padding: 0.375rem\"",[569,6363,582],{"class":575},[569,6365,6366,6368,6370,6372,6374,6376,6378,6380,6382],{"class":571,"line":585},[569,6367,658],{"class":575},[569,6369,632],{"class":579},[569,6371,636],{"class":635},[569,6373,639],{"class":575},[569,6375,1918],{"class":642},[569,6377,646],{"class":635},[569,6379,639],{"class":575},[569,6381,651],{"class":642},[569,6383,582],{"class":575},[569,6385,6386,6388,6390,6392,6394,6396],{"class":571,"line":591},[569,6387,675],{"class":575},[569,6389,661],{"class":579},[569,6391,636],{"class":635},[569,6393,639],{"class":575},[569,6395,668],{"class":642},[569,6397,582],{"class":575},[569,6399,6400,6402,6404,6406,6408,6410,6412,6414,6416],{"class":571,"line":597},[569,6401,692],{"class":575},[569,6403,2493],{"class":579},[569,6405,2496],{"class":635},[569,6407,639],{"class":575},[569,6409,2501],{"class":642},[569,6411,636],{"class":635},[569,6413,639],{"class":575},[569,6415,685],{"class":642},[569,6417,582],{"class":575},[569,6419,6420,6422,6424,6426,6428,6430],{"class":571,"line":603},[569,6421,1231],{"class":575},[569,6423,569],{"class":579},[569,6425,636],{"class":635},[569,6427,639],{"class":575},[569,6429,1224],{"class":642},[569,6431,582],{"class":575},[569,6433,6434,6436,6438,6440,6442,6444,6446,6448,6450],{"class":571,"line":728},[569,6435,1256],{"class":575},[569,6437,1234],{"class":579},[569,6439,636],{"class":635},[569,6441,639],{"class":575},[569,6443,1241],{"class":642},[569,6445,1244],{"class":635},[569,6447,639],{"class":575},[569,6449,1249],{"class":642},[569,6451,582],{"class":575},[569,6453,6454,6457,6459,6461,6463,6465,6467,6469,6471,6473,6475,6477,6479],{"class":571,"line":764},[569,6455,6456],{"class":575},"                        \u003C",[569,6458,1259],{"class":579},[569,6460,1262],{"class":635},[569,6462,639],{"class":575},[569,6464,1267],{"class":642},[569,6466,704],{"class":575},[569,6468,1272],{"class":579},[569,6470,1275],{"class":635},[569,6472,639],{"class":575},[569,6474,1280],{"class":642},[569,6476,1283],{"class":575},[569,6478,1259],{"class":579},[569,6480,582],{"class":575},[569,6482,6483,6486,6488],{"class":571,"line":774},[569,6484,6485],{"class":575},"                    \u003C\u002F",[569,6487,1234],{"class":579},[569,6489,582],{"class":575},[569,6491,6492,6494,6496],{"class":571,"line":784},[569,6493,1292],{"class":575},[569,6495,569],{"class":579},[569,6497,582],{"class":575},[569,6499,6500,6502,6504,6506,6508,6510,6512,6514,6516,6518,6520,6522,6524,6526,6528],{"class":571,"line":799},[569,6501,1231],{"class":575},[569,6503,569],{"class":579},[569,6505,636],{"class":635},[569,6507,639],{"class":575},[569,6509,701],{"class":642},[569,6511,704],{"class":575},[569,6513,569],{"class":579},[569,6515,636],{"class":635},[569,6517,639],{"class":575},[569,6519,713],{"class":642},[569,6521,2534],{"class":575},[569,6523,569],{"class":579},[569,6525,721],{"class":575},[569,6527,569],{"class":579},[569,6529,582],{"class":575},[569,6531,6532,6534,6536,6538,6540,6542,6544,6546,6548,6550,6552,6554,6556,6558,6560],{"class":571,"line":814},[569,6533,1231],{"class":575},[569,6535,569],{"class":579},[569,6537,636],{"class":635},[569,6539,639],{"class":575},[569,6541,739],{"class":642},[569,6543,704],{"class":575},[569,6545,569],{"class":579},[569,6547,636],{"class":635},[569,6549,639],{"class":575},[569,6551,750],{"class":642},[569,6553,2567],{"class":575},[569,6555,569],{"class":579},[569,6557,721],{"class":575},[569,6559,569],{"class":579},[569,6561,582],{"class":575},[569,6563,6564,6566,6568],{"class":571,"line":848},[569,6565,1301],{"class":575},[569,6567,2493],{"class":579},[569,6569,582],{"class":575},[569,6571,6572,6574,6576],{"class":571,"line":882},[569,6573,767],{"class":575},[569,6575,661],{"class":579},[569,6577,582],{"class":575},[569,6579,6580],{"class":571,"line":891},[569,6581,6582],{"class":624},"        \u003C!-- … Save (Ctrl+S) -->\n",[569,6584,6585,6587,6589,6591,6593,6595],{"class":571,"line":900},[569,6586,675],{"class":575},[569,6588,661],{"class":579},[569,6590,636],{"class":635},[569,6592,639],{"class":575},[569,6594,668],{"class":642},[569,6596,582],{"class":575},[569,6598,6599,6601,6603,6605,6607,6609,6611,6613,6615],{"class":571,"line":915},[569,6600,692],{"class":575},[569,6602,2493],{"class":579},[569,6604,2496],{"class":635},[569,6606,639],{"class":575},[569,6608,2501],{"class":642},[569,6610,636],{"class":635},[569,6612,639],{"class":575},[569,6614,685],{"class":642},[569,6616,582],{"class":575},[569,6618,6619,6621,6623,6625,6627,6629],{"class":571,"line":930},[569,6620,1231],{"class":575},[569,6622,569],{"class":579},[569,6624,636],{"class":635},[569,6626,639],{"class":575},[569,6628,1224],{"class":642},[569,6630,582],{"class":575},[569,6632,6633,6635,6637,6639,6641,6643,6645,6647,6649,6651,6653,6655,6657,6659,6661,6663,6665,6667],{"class":571,"line":964},[569,6634,1256],{"class":575},[569,6636,1234],{"class":579},[569,6638,636],{"class":635},[569,6640,639],{"class":575},[569,6642,1241],{"class":642},[569,6644,1244],{"class":635},[569,6646,639],{"class":575},[569,6648,1249],{"class":642},[569,6650,704],{"class":575},[569,6652,1259],{"class":579},[569,6654,1262],{"class":635},[569,6656,639],{"class":575},[569,6658,1267],{"class":642},[569,6660,4469],{"class":575},[569,6662,1259],{"class":579},[569,6664,721],{"class":575},[569,6666,1234],{"class":579},[569,6668,582],{"class":575},[569,6670,6671,6673,6675],{"class":571,"line":998},[569,6672,1292],{"class":575},[569,6674,569],{"class":579},[569,6676,582],{"class":575},[569,6678,6679,6681,6683,6685,6687,6689,6691,6693,6695,6697,6699,6702,6704,6706,6708],{"class":571,"line":1007},[569,6680,1231],{"class":575},[569,6682,569],{"class":579},[569,6684,636],{"class":635},[569,6686,639],{"class":575},[569,6688,701],{"class":642},[569,6690,704],{"class":575},[569,6692,569],{"class":579},[569,6694,636],{"class":635},[569,6696,639],{"class":575},[569,6698,713],{"class":642},[569,6700,6701],{"class":575},">Export\u003C\u002F",[569,6703,569],{"class":579},[569,6705,721],{"class":575},[569,6707,569],{"class":579},[569,6709,582],{"class":575},[569,6711,6712,6714,6716,6718,6720,6722],{"class":571,"line":1016},[569,6713,1231],{"class":575},[569,6715,569],{"class":579},[569,6717,636],{"class":635},[569,6719,639],{"class":575},[569,6721,739],{"class":642},[569,6723,582],{"class":575},[569,6725,6726,6728,6730,6732,6734,6736,6738,6740,6742,6744,6746,6748,6750,6752,6754,6756,6758,6760],{"class":571,"line":1476},[569,6727,1256],{"class":575},[569,6729,1259],{"class":579},[569,6731,636],{"class":635},[569,6733,639],{"class":575},[569,6735,1667],{"class":642},[569,6737,1262],{"class":635},[569,6739,639],{"class":575},[569,6741,1267],{"class":642},[569,6743,1676],{"class":635},[569,6745,639],{"class":575},[569,6747,1681],{"class":642},[569,6749,1684],{"class":635},[569,6751,639],{"class":575},[569,6753,1681],{"class":642},[569,6755,1244],{"class":635},[569,6757,639],{"class":575},[569,6759,1249],{"class":642},[569,6761,582],{"class":575},[569,6763,6764,6766],{"class":571,"line":1491},[569,6765,6456],{"class":575},[569,6767,1704],{"class":579},[569,6769,6770,6773,6775],{"class":571,"line":1525},[569,6771,6772],{"class":635},"                            d",[569,6774,639],{"class":575},[569,6776,1715],{"class":642},[569,6778,6779,6782,6784],{"class":571,"line":1559},[569,6780,6781],{"class":635},"                            fill",[569,6783,639],{"class":575},[569,6785,1726],{"class":642},[569,6787,6788,6791,6793],{"class":571,"line":1568},[569,6789,6790],{"class":635},"                            stroke",[569,6792,639],{"class":575},[569,6794,1737],{"class":642},[569,6796,6797,6800,6802],{"class":571,"line":1577},[569,6798,6799],{"class":635},"                            stroke-width",[569,6801,639],{"class":575},[569,6803,1748],{"class":642},[569,6805,6806,6809,6811],{"class":571,"line":1592},[569,6807,6808],{"class":635},"                            stroke-linecap",[569,6810,639],{"class":575},[569,6812,1759],{"class":642},[569,6814,6815,6818,6820],{"class":571,"line":1607},[569,6816,6817],{"class":635},"                            stroke-linejoin",[569,6819,639],{"class":575},[569,6821,1759],{"class":642},[569,6823,6824],{"class":571,"line":1641},[569,6825,6826],{"class":575},"                        \u002F>\n",[569,6828,6829,6831,6833],{"class":571,"line":1656},[569,6830,6485],{"class":575},[569,6832,1259],{"class":579},[569,6834,582],{"class":575},[569,6836,6837,6839,6841],{"class":571,"line":1699},[569,6838,1292],{"class":575},[569,6840,569],{"class":579},[569,6842,582],{"class":575},[569,6844,6845,6847,6849],{"class":571,"line":1707},[569,6846,1301],{"class":575},[569,6848,2493],{"class":579},[569,6850,582],{"class":575},[569,6852,6853,6855,6857],{"class":571,"line":1718},[569,6854,767],{"class":575},[569,6856,661],{"class":579},[569,6858,582],{"class":575},[569,6860,6861,6863,6865,6867,6869,6871],{"class":571,"line":1729},[569,6862,675],{"class":575},[569,6864,661],{"class":579},[569,6866,636],{"class":635},[569,6868,639],{"class":575},[569,6870,668],{"class":642},[569,6872,582],{"class":575},[569,6874,6875],{"class":571,"line":1740},[569,6876,6877],{"class":624},"            \u003C!-- a static row: the control lives in the appended cell and names itself -->\n",[569,6879,6880,6882,6884,6886,6888,6890],{"class":571,"line":1751},[569,6881,692],{"class":575},[569,6883,678],{"class":579},[569,6885,636],{"class":635},[569,6887,639],{"class":575},[569,6889,685],{"class":642},[569,6891,582],{"class":575},[569,6893,6894,6896,6898,6900,6902,6904],{"class":571,"line":1762},[569,6895,1231],{"class":575},[569,6897,569],{"class":579},[569,6899,636],{"class":635},[569,6901,639],{"class":575},[569,6903,1224],{"class":642},[569,6905,582],{"class":575},[569,6907,6908,6910,6912,6914,6916,6918,6920,6922,6924,6926,6928,6930,6932,6934,6936,6938,6940,6942],{"class":571,"line":1772},[569,6909,1256],{"class":575},[569,6911,1234],{"class":579},[569,6913,636],{"class":635},[569,6915,639],{"class":575},[569,6917,1241],{"class":642},[569,6919,1244],{"class":635},[569,6921,639],{"class":575},[569,6923,1249],{"class":642},[569,6925,704],{"class":575},[569,6927,1259],{"class":579},[569,6929,1262],{"class":635},[569,6931,639],{"class":575},[569,6933,1267],{"class":642},[569,6935,4469],{"class":575},[569,6937,1259],{"class":579},[569,6939,721],{"class":575},[569,6941,1234],{"class":579},[569,6943,582],{"class":575},[569,6945,6946,6948,6950],{"class":571,"line":1778},[569,6947,1292],{"class":575},[569,6949,569],{"class":579},[569,6951,582],{"class":575},[569,6953,6954,6956,6958,6960,6962,6964,6966,6968,6970,6972,6974,6976,6978,6980,6982],{"class":571,"line":1787},[569,6955,1231],{"class":575},[569,6957,569],{"class":579},[569,6959,636],{"class":635},[569,6961,639],{"class":575},[569,6963,701],{"class":642},[569,6965,704],{"class":575},[569,6967,569],{"class":579},[569,6969,636],{"class":635},[569,6971,639],{"class":575},[569,6973,713],{"class":642},[569,6975,5234],{"class":575},[569,6977,569],{"class":579},[569,6979,721],{"class":575},[569,6981,569],{"class":579},[569,6983,582],{"class":575},[569,6985,6986,6988,6990,6992,6994,6996],{"class":571,"line":1796},[569,6987,1231],{"class":575},[569,6989,569],{"class":579},[569,6991,636],{"class":635},[569,6993,639],{"class":575},[569,6995,739],{"class":642},[569,6997,582],{"class":575},[569,6999,7000,7002],{"class":571,"line":1805},[569,7001,1256],{"class":575},[569,7003,5268],{"class":579},[569,7005,7006,7009,7011],{"class":571,"line":1814},[569,7007,7008],{"class":635},"                        class",[569,7010,639],{"class":575},[569,7012,5278],{"class":642},[569,7014,7015,7018,7020],{"class":571,"line":1820},[569,7016,7017],{"class":635},"                        role",[569,7019,639],{"class":575},[569,7021,5288],{"class":642},[569,7023,7025,7028,7030],{"class":571,"line":7024},46,[569,7026,7027],{"class":635},"                        aria-label",[569,7029,639],{"class":575},[569,7031,5298],{"class":642},[569,7033,7035],{"class":571,"line":7034},47,[569,7036,7037],{"class":575},"                    >\n",[569,7039,7041],{"class":571,"line":7040},48,[569,7042,7043],{"class":575},"                        …\n",[569,7045,7047,7049,7051],{"class":571,"line":7046},49,[569,7048,6485],{"class":575},[569,7050,678],{"class":579},[569,7052,582],{"class":575},[569,7054,7056,7058,7060],{"class":571,"line":7055},50,[569,7057,1292],{"class":575},[569,7059,569],{"class":579},[569,7061,582],{"class":575},[569,7063,7065,7067,7069],{"class":571,"line":7064},51,[569,7066,1301],{"class":575},[569,7068,678],{"class":579},[569,7070,582],{"class":575},[569,7072,7074,7076,7078],{"class":571,"line":7073},52,[569,7075,767],{"class":575},[569,7077,661],{"class":579},[569,7079,582],{"class":575},[569,7081,7083,7085,7087,7089,7091,7093],{"class":571,"line":7082},53,[569,7084,675],{"class":575},[569,7086,661],{"class":579},[569,7088,636],{"class":635},[569,7090,639],{"class":575},[569,7092,668],{"class":642},[569,7094,582],{"class":575},[569,7096,7098,7100,7102,7104,7106,7108,7110,7112,7114],{"class":571,"line":7097},54,[569,7099,692],{"class":575},[569,7101,282],{"class":579},[569,7103,636],{"class":635},[569,7105,639],{"class":575},[569,7107,685],{"class":642},[569,7109,2868],{"class":635},[569,7111,639],{"class":575},[569,7113,3832],{"class":642},[569,7115,582],{"class":575},[569,7117,7119,7121,7123,7125,7127,7129],{"class":571,"line":7118},55,[569,7120,1231],{"class":575},[569,7122,569],{"class":579},[569,7124,636],{"class":635},[569,7126,639],{"class":575},[569,7128,1224],{"class":642},[569,7130,582],{"class":575},[569,7132,7134,7136,7138,7140,7142,7144,7146,7148,7150,7152,7154,7156,7158,7160,7162,7164,7166,7168],{"class":571,"line":7133},56,[569,7135,1256],{"class":575},[569,7137,1234],{"class":579},[569,7139,636],{"class":635},[569,7141,639],{"class":575},[569,7143,1241],{"class":642},[569,7145,1244],{"class":635},[569,7147,639],{"class":575},[569,7149,1249],{"class":642},[569,7151,704],{"class":575},[569,7153,1259],{"class":579},[569,7155,1262],{"class":635},[569,7157,639],{"class":575},[569,7159,1267],{"class":642},[569,7161,4469],{"class":575},[569,7163,1259],{"class":579},[569,7165,721],{"class":575},[569,7167,1234],{"class":579},[569,7169,582],{"class":575},[569,7171,7173,7175,7177],{"class":571,"line":7172},57,[569,7174,1292],{"class":575},[569,7176,569],{"class":579},[569,7178,582],{"class":575},[569,7180,7182,7184,7186,7188,7190,7192],{"class":571,"line":7181},58,[569,7183,1231],{"class":575},[569,7185,569],{"class":579},[569,7187,636],{"class":635},[569,7189,639],{"class":575},[569,7191,701],{"class":642},[569,7193,582],{"class":575},[569,7195,7197,7199,7201,7203,7205,7207,7209,7211],{"class":571,"line":7196},59,[569,7198,1256],{"class":575},[569,7200,569],{"class":579},[569,7202,636],{"class":635},[569,7204,639],{"class":575},[569,7206,713],{"class":642},[569,7208,3863],{"class":575},[569,7210,569],{"class":579},[569,7212,582],{"class":575},[569,7214,7216,7218,7220,7222,7224,7226,7228,7230],{"class":571,"line":7215},60,[569,7217,1256],{"class":575},[569,7219,569],{"class":579},[569,7221,636],{"class":635},[569,7223,639],{"class":575},[569,7225,1428],{"class":642},[569,7227,3882],{"class":575},[569,7229,569],{"class":579},[569,7231,582],{"class":575},[569,7233,7235,7237,7239],{"class":571,"line":7234},61,[569,7236,1292],{"class":575},[569,7238,569],{"class":579},[569,7240,582],{"class":575},[569,7242,7244,7246,7248],{"class":571,"line":7243},62,[569,7245,1301],{"class":575},[569,7247,282],{"class":579},[569,7249,582],{"class":575},[569,7251,7253,7255,7257],{"class":571,"line":7252},63,[569,7254,767],{"class":575},[569,7256,661],{"class":579},[569,7258,582],{"class":575},[569,7260,7262,7264,7266],{"class":571,"line":7261},64,[569,7263,777],{"class":575},[569,7265,632],{"class":579},[569,7267,582],{"class":575},[569,7269,7271,7273,7275],{"class":571,"line":7270},65,[569,7272,606],{"class":575},[569,7274,678],{"class":579},[569,7276,582],{"class":575},[344,7278,230],{"id":7279},"accessibility",[270,7281,7282],{},"The accessibility contract holds across every layer — the standalone classes and the Vue components render the\nsame attributes and keyboard behavior.",[632,7284,7285,7308,7318,7332,7351,7354,7375,7381,7384,7402,7408],{},[661,7286,7287,7288,7290,7291,7294,7295,7298,7299,7301,7302,7305,7306,478],{},"The list is a ",[287,7289,496],{}," with ",[287,7292,7293],{},"role=\"list\""," ",[274,7296,7297],{},"stated",": Safari drops list semantics from a ",[287,7300,496],{}," styled\n",[287,7303,7304],{},"list-style: none",", and the explicit role keeps it announced as a list. Each row sits in an ",[287,7307,2137],{},[661,7309,7310,7311,7313,7314,7317],{},"A navigation list goes in a ",[287,7312,2724],{},". The list adds no landmark of its own, and an unlabeled\n",[287,7315,7316],{},"\u003Cnav>"," is announced as just \"navigation\".",[661,7319,7320,7321,460,7323,7326,7327,7329,7330,478],{},"A row that acts is a real ",[287,7322,2108],{},[287,7324,7325],{},"\u003Ca href>","; a row that only holds content is a\n",[287,7328,533],{},". Its accessible name is its content: the label, the subtitle and the meta text read as one string\n(\"New drawing Ctrl+N\"). The icon and the chevron are ",[287,7331,5749],{},[661,7333,7334,7336,7337,2714,7339,7341,7342,7344,7345,7347,7348,7350],{},[287,7335,2697],{}," renders ",[287,7338,2713],{},[287,7340,2717],{}," on a link (an ",[287,7343,2091],{},", or a component such as a router link) and\n",[287,7346,1249],{}," on any other row. Set it through ",[287,7349,2697],{},", not as a raw attribute.",[661,7352,7353],{},"The current row is not marked by tint alone: the tint is too faint (WCAG 1.4.11), so it also carries a bar on\nits inline-start edge in the accent's AA-safe text tone. Do not remove the bar when restyling.",[661,7355,7356,7358,7359,7361,7362,7364,7365,3694,7367,7290,7369,7372,7373,478],{},[287,7357,2150],{},": a button row is a native ",[287,7360,2150],{}," button (dimmed to 45%, skipped by ",[287,7363,293],{},"); a link row drops its\n",[287,7366,529],{},[287,7368,3697],{},[287,7370,7371],{},"role=\"link\"",", so it is announced as an unavailable link and is\nneither followed nor focused. A static row\nignores ",[287,7374,2150],{},[661,7376,7377,7378,7380],{},"A control in a row's appended cell needs its own accessible name (",[287,7379,4554],{},"): the row's label text is not\nwired to it. Never put a control in a link or a button row.",[661,7382,7383],{},"The subtitle and the meta text are faded to 0.7 of the text color, and to 0.85 on the current row's tint, so\nthey stay readable (AA) on both backgrounds.",[661,7385,7386,7387,7390,7391,7394,7395,7398,7399,478],{},"Focus is drawn on the row: a 2 px ",[287,7388,7389],{},"outline"," in the accent's text tone, inset by 2 px so it is not clipped by the\nlist's edge, on ",[287,7392,7393],{},":focus-visible",". The hover tint sits inside ",[287,7396,7397],{},"@media (hover: hover)"," and the tint transition\nis off under ",[287,7400,7401],{},"prefers-reduced-motion",[661,7403,7404,7405,7407],{},"There is no arrow-key roving: the rows are ordinary tab stops, because a list of navigation links is not a\nmenu in the WAI-ARIA Authoring Practices. Use a ",[282,7406,284],{"href":81}," when you want one tab stop and\narrow keys.",[661,7409,7410,7411,330,7414,7417,7418,478],{},"Writing direction is respected: the bar sits on the inline-start edge, the chevron is mirrored, and ",[287,7412,7413],{},"ori-list__prepend",[287,7415,7416],{},"ori-list__append"," swap sides with ",[287,7419,7420],{},"dir",[349,7422,7423,7433],{},[352,7424,7425],{},[355,7426,7427,7430],{},[358,7428,7429],{},"Key",[358,7431,7432],{},"Action",[365,7434,7435,7448,7457],{},[355,7436,7437,7445],{},[370,7438,7439,7441,7442],{},[287,7440,293],{}," \u002F ",[287,7443,7444],{},"Shift+Tab",[370,7446,7447],{},"Moves focus to the next \u002F previous interactive row, then on to the controls inside static rows. A disabled row is skipped.",[355,7449,7450,7454],{},[370,7451,7452],{},[287,7453,2143],{},[370,7455,7456],{},"Activates a button row or follows a link row.",[355,7458,7459,7463],{},[370,7460,7461],{},[287,7462,2146],{},[370,7464,7465,7466,7468],{},"Activates a button row (native). A link row is activated with ",[287,7467,2143],{}," only.",[270,7470,7471,7472,7474],{},"A control inside a static row keeps its own keys: a switch toggles on ",[287,7473,2146],{},", a segmented control moves with\nthe arrows. The list takes none of them.",[344,7476,319],{"id":7477},"framework-api",[270,7479,7480,7481,7483,7484,7486],{},"The props, attributes and slots of the ",[274,7482,341],{}," components. The standalone CSS layer has no component API — its\nsurface is the ",[282,7485,415],{"href":307}," above.",[7488,7489,7491],"h3",{"id":7490},"props","Props",[270,7493,7494,7496],{},[287,7495,329],{},":",[349,7498,7499,7515],{},[352,7500,7501],{},[355,7502,7503,7506,7509,7512],{},[358,7504,7505],{},"Prop",[358,7507,7508],{},"Type",[358,7510,7511],{},"Default",[358,7513,7514],{},"Description",[365,7516,7517],{},[355,7518,7519,7523,7528,7533],{},[370,7520,7521],{},[287,7522,1836],{},[370,7524,7525],{},[287,7526,7527],{},"boolean",[370,7529,7530],{},[287,7531,7532],{},"false",[370,7534,7535,7536,7539],{},"No gap between rows; a hairline between them (",[287,7537,7538],{},"ori-list_divided",").",[270,7541,7542,7496],{},[287,7543,333],{},[349,7545,7546,7558],{},[352,7547,7548],{},[355,7549,7550,7552,7554,7556],{},[358,7551,7505],{},[358,7553,7508],{},[358,7555,7511],{},[358,7557,7514],{},[365,7559,7560,7593,7610,7636,7662,7679,7696,7711,7729],{},[355,7561,7562,7566,7571,7587],{},[370,7563,7564],{},[287,7565,2074],{},[370,7567,7568],{},[287,7569,7570],{},"string | object",[370,7572,7573,7290,7576,431,7578,7290,7581,7583,7584],{},[287,7574,7575],{},"'a'",[287,7577,529],{},[287,7579,7580],{},"'button'",[287,7582,2102],{},", else ",[287,7585,7586],{},"'div'",[370,7588,7589,7590,7592],{},"The row element: a tag name or a component (a router link). Wins over ",[287,7591,529],{}," and a click listener.",[355,7594,7595,7599,7603,7607],{},[370,7596,7597],{},[287,7598,1047],{},[370,7600,7601],{},[287,7602,7527],{},[370,7604,7605],{},[287,7606,7532],{},[370,7608,7609],{},"A chevron at the end: the row opens a sub-panel. Mirrored in RTL.",[355,7611,7612,7616,7620,7624],{},[370,7613,7614],{},[287,7615,2697],{},[370,7617,7618],{},[287,7619,7527],{},[370,7621,7622],{},[287,7623,7532],{},[370,7625,7626,7627,7629,7630,7632,7633,7635],{},"The current page or the selected entry: ",[287,7628,2713],{}," (",[287,7631,2717],{}," on a link, ",[287,7634,1249],{}," otherwise), the tint and the bar.",[355,7637,7638,7642,7646,7650],{},[370,7639,7640],{},[287,7641,2150],{},[370,7643,7644],{},[287,7645,7527],{},[370,7647,7648],{},[287,7649,7532],{},[370,7651,7652,7653,7655,7656,3694,7658,7661],{},"A button row gets ",[287,7654,2150],{},"; a link row drops its ",[287,7657,529],{},[287,7659,7660],{},"aria-disabled",". A static row ignores it.",[355,7663,7664,7668,7673,7676],{},[370,7665,7666],{},[287,7667,529],{},[370,7669,7670],{},[287,7671,7672],{},"string",[370,7674,7675],{},"—",[370,7677,7678],{},"Renders the row as a link.",[355,7680,7681,7685,7689,7691],{},[370,7682,7683],{},[287,7684,1032],{},[370,7686,7687],{},[287,7688,7672],{},[370,7690,7675],{},[370,7692,7693,7694,7539],{},"An SVG path drawn before the label (",[287,7695,1036],{},[355,7697,7698,7702,7706,7708],{},[370,7699,7700],{},[287,7701,3321],{},[370,7703,7704],{},[287,7705,7672],{},[370,7707,7675],{},[370,7709,7710],{},"The row text.",[355,7712,7713,7717,7721,7723],{},[370,7714,7715],{},[287,7716,537],{},[370,7718,7719],{},[287,7720,7672],{},[370,7722,7675],{},[370,7724,7725,7726,7728],{},"Short text at the end of the row, such as a shortcut (",[287,7727,1063],{},") or a value.",[355,7730,7731,7735,7739,7741],{},[370,7732,7733],{},[287,7734,1040],{},[370,7736,7737],{},[287,7738,7672],{},[370,7740,7675],{},[370,7742,7743],{},"A second line under the label.",[7488,7745,7747],{"id":7746},"events-attributes","Events & attributes",[270,7749,7750,7751,478],{},"Neither component declares ",[274,7752,7753],{},"custom events",[270,7755,7756,7758,7759,7762,7763,431,7766,431,7769,435,7771,7774,7775,7777,7778,478],{},[287,7757,329],{}," does not set ",[287,7760,7761],{},"inheritAttrs: false",", so ",[287,7764,7765],{},"class",[287,7767,7768],{},"style",[287,7770,7420],{},[287,7772,7773],{},"aria-*"," (an ",[287,7776,4554],{}," on a list\nthat stands alone) fall through to the ",[287,7779,496],{},[270,7781,7782,7784,7785,7787,7788,7791,7792,534,7794,7796,7797,7799,7800,7802,7803,7806,7807,431,7810,7813,7814,431,7817,7819,7820,7822,7823,478],{},[287,7783,333],{}," sets ",[287,7786,7761],{}," and binds every attribute and listener to the ",[274,7789,7790],{},"row element",", not to\nthe ",[287,7793,2137],{},[287,7795,7765],{}," is merged with ",[287,7798,422],{},". A listener is also what decides the element: an\n",[287,7801,2102],{}," makes the row a ",[287,7804,7805],{},"\u003Cbutton>","; other listeners (",[287,7808,7809],{},"@keydown",[287,7811,7812],{},"@focus",") do not. An attribute you pass\noverrides the ones the row sets itself (",[287,7815,7816],{},"type",[287,7818,529],{},"), except ",[287,7821,2713],{},", which always follows ",[287,7824,2697],{},[7488,7826,7828],{"id":7827},"slots","Slots",[349,7830,7831,7840],{},[352,7832,7833],{},[355,7834,7835,7838],{},[358,7836,7837],{},"Slot",[358,7839,7514],{},[365,7841,7842,7858,7871],{},[355,7843,7844,7849],{},[370,7845,7846],{},[287,7847,7848],{},"prepend",[370,7850,7851,7852,7854,7855,7857],{},"Replaces the icon in ",[287,7853,7413],{},". The cell is rendered when this slot or ",[287,7856,1032],{}," is set.",[355,7859,7860,7865],{},[370,7861,7862],{},[287,7863,7864],{},"default",[370,7866,7867,7868,7870],{},"Replaces the label and the subtitle inside ",[287,7869,5368],{},". You own the markup of the text column.",[355,7872,7873,7877],{},[370,7874,7875],{},[287,7876,4762],{},[370,7878,7879,7880,7882,7883,460,7885,7857],{},"Replaces the meta text and the chevron in ",[287,7881,7416],{}," — put a control of your own here, in a static row. The cell is rendered when this slot, ",[287,7884,537],{},[287,7886,1047],{},[7488,7888,7890,7891,2103],{"id":7889},"polymorphic-as","Polymorphic (",[287,7892,2074],{},[270,7894,7895,7897,7898,7900,7901,7904,7905,7907,7908,7336,7910,7913,7914,7784,7916,7918,7919,478],{},[287,7896,2074],{}," takes a tag name or a component and wins over ",[287,7899,529],{}," and a click listener. Pass a router link and give it\nits own navigation props; the row renders it with ",[287,7902,7903],{},"class=\"ori-list__row\"",". An ",[287,7906,2091],{}," and a component are\ntreated as links: ",[287,7909,2697],{},[287,7911,7912],{},"aria-current=\"page\"",", and ",[287,7915,2150],{},[287,7917,7660],{}," and swallows\nclicks. Any other tag is a static row, like the ",[287,7920,533],{},[511,7922,7924],{"className":563,"code":7923,"language":565,"meta":519,"style":519},"\u003Cscript setup lang=\"ts\">\nimport { RouterLink } from 'vue-router'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cnav aria-label=\"Main\">\n        \u003COriList>\n            \u003COriListItem :as=\"RouterLink\" to=\"\u002Fgallery\" label=\"Gallery\" \u002F>\n            \u003COriListItem :as=\"RouterLink\" to=\"\u002Fsettings\" label=\"Settings\" current \u002F>\n        \u003C\u002FOriList>\n    \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[287,7925,7926,7942,7954,7962,7966,7974,7989,7997,8031,8068,8076,8084],{"__ignoreMap":519},[569,7927,7928,7930,7932,7934,7936,7938,7940],{"class":571,"line":572},[569,7929,576],{"class":575},[569,7931,2176],{"class":579},[569,7933,2179],{"class":635},[569,7935,2182],{"class":635},[569,7937,639],{"class":575},[569,7939,2187],{"class":642},[569,7941,582],{"class":575},[569,7943,7944,7946,7949,7951],{"class":571,"line":585},[569,7945,2195],{"class":2194},[569,7947,7948],{"class":575}," { RouterLink } ",[569,7950,2201],{"class":2194},[569,7952,7953],{"class":642}," 'vue-router'\n",[569,7955,7956,7958,7960],{"class":571,"line":591},[569,7957,606],{"class":575},[569,7959,2176],{"class":579},[569,7961,582],{"class":575},[569,7963,7964],{"class":571,"line":597},[569,7965,2210],{"emptyLinePlaceholder":2209},[569,7967,7968,7970,7972],{"class":571,"line":603},[569,7969,576],{"class":575},[569,7971,559],{"class":579},[569,7973,582],{"class":575},[569,7975,7976,7978,7980,7982,7984,7987],{"class":571,"line":728},[569,7977,658],{"class":575},[569,7979,2729],{"class":579},[569,7981,2758],{"class":635},[569,7983,639],{"class":575},[569,7985,7986],{"class":642},"\"Main\"",[569,7988,582],{"class":575},[569,7990,7991,7993,7995],{"class":571,"line":764},[569,7992,675],{"class":575},[569,7994,329],{"class":579},[569,7996,582],{"class":575},[569,7998,7999,8001,8003,8005,8007,8009,8011,8014,8016,8019,8021,8023,8025,8027,8029],{"class":571,"line":774},[569,8000,692],{"class":575},[569,8002,333],{"class":579},[569,8004,4875],{"class":575},[569,8006,2074],{"class":635},[569,8008,639],{"class":575},[569,8010,2297],{"class":642},[569,8012,8013],{"class":575},"RouterLink",[569,8015,2297],{"class":642},[569,8017,8018],{"class":635}," to",[569,8020,639],{"class":575},[569,8022,3832],{"class":642},[569,8024,2273],{"class":635},[569,8026,639],{"class":575},[569,8028,6295],{"class":642},[569,8030,2308],{"class":575},[569,8032,8033,8035,8037,8039,8041,8043,8045,8047,8049,8051,8053,8056,8058,8060,8063,8066],{"class":571,"line":784},[569,8034,692],{"class":575},[569,8036,333],{"class":579},[569,8038,4875],{"class":575},[569,8040,2074],{"class":635},[569,8042,639],{"class":575},[569,8044,2297],{"class":642},[569,8046,8013],{"class":575},[569,8048,2297],{"class":642},[569,8050,8018],{"class":635},[569,8052,639],{"class":575},[569,8054,8055],{"class":642},"\"\u002Fsettings\"",[569,8057,2273],{"class":635},[569,8059,639],{"class":575},[569,8061,8062],{"class":642},"\"Settings\"",[569,8064,8065],{"class":635}," current",[569,8067,2308],{"class":575},[569,8069,8070,8072,8074],{"class":571,"line":799},[569,8071,767],{"class":575},[569,8073,329],{"class":579},[569,8075,582],{"class":575},[569,8077,8078,8080,8082],{"class":571,"line":814},[569,8079,777],{"class":575},[569,8081,2729],{"class":579},[569,8083,582],{"class":575},[569,8085,8086,8088,8090],{"class":571,"line":848},[569,8087,606],{"class":575},[569,8089,559],{"class":579},[569,8091,582],{"class":575},[7768,8093,8094],{},"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 .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 .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 pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":519,"searchDepth":585,"depth":585,"links":8096},[8097,8098,8099,8100,8101,8102,8103,8104,8105,8106,8107,8108,8109,8110,8111,8112,8113],{"id":346,"depth":585,"text":347},{"id":415,"depth":585,"text":416},{"id":508,"depth":585,"text":509},{"id":522,"depth":585,"text":523},{"id":1025,"depth":585,"text":1026},{"id":1836,"depth":585,"text":1837},{"id":2046,"depth":585,"text":2047},{"id":2697,"depth":585,"text":2698},{"id":2150,"depth":585,"text":3680},{"id":4126,"depth":585,"text":4127},{"id":4401,"depth":585,"text":4402},{"id":4541,"depth":585,"text":2133},{"id":5354,"depth":585,"text":5355},{"id":5753,"depth":585,"text":1833},{"id":5867,"depth":585,"text":5868},{"id":7279,"depth":585,"text":230},{"id":7477,"depth":585,"text":319,"children":8114},[8115,8116,8117,8118],{"id":7490,"depth":591,"text":7491},{"id":7746,"depth":591,"text":7747},{"id":7827,"depth":591,"text":7828},{"id":7889,"depth":591,"text":8119},"Polymorphic (as)",{},{"title":78,"description":79},"components\u002Flist","dPp_41AyEbsyxoeL91Qknh4KnseSLOaX4wDn-4TF5VE",1791706812346]