[{"data":1,"prerenderedAt":2914},["ShallowReactive",2],{"search-sections-content_en-components_en-[object Object]":3,"navigation-components_en-en":2507},[4,10,14,20,25,30,35,40,45,49,54,59,64,69,74,79,85,91,96,101,106,111,116,121,126,131,136,141,146,150,155,159,163,168,173,177,182,187,191,196,201,206,210,215,220,225,230,235,239,244,249,254,259,264,269,273,278,283,288,293,298,303,308,313,317,322,327,331,336,340,345,349,354,358,363,368,373,378,383,388,393,398,402,406,410,414,419,424,429,434,437,442,447,452,457,462,467,472,475,479,484,488,493,496,500,504,508,512,516,521,526,529,533,537,541,546,551,554,558,563,568,572,577,582,587,592,595,600,605,610,615,619,624,629,634,639,644,647,652,657,662,665,670,675,680,685,689,694,698,703,708,712,716,721,726,730,734,739,742,746,751,756,760,764,768,773,778,782,787,790,794,798,802,806,810,814,819,822,826,830,835,840,845,850,854,858,862,866,870,875,878,882,887,892,897,901,905,909,914,917,921,926,931,935,939,943,947,952,955,959,963,967,971,975,980,985,989,992,996,1001,1006,1010,1014,1018,1022,1026,1031,1035,1039,1043,1047,1051,1055,1059,1064,1067,1071,1075,1080,1085,1090,1094,1098,1102,1106,1110,1114,1119,1122,1127,1132,1137,1141,1145,1150,1153,1157,1161,1166,1171,1174,1178,1182,1187,1192,1196,1200,1204,1209,1214,1219,1224,1227,1231,1236,1241,1246,1250,1255,1259,1262,1266,1270,1274,1278,1283,1286,1290,1295,1300,1304,1309,1312,1316,1320,1325,1328,1332,1337,1342,1347,1352,1356,1360,1365,1368,1372,1376,1380,1384,1389,1393,1397,1401,1406,1411,1416,1421,1424,1428,1433,1438,1443,1447,1452,1455,1459,1463,1468,1473,1478,1483,1486,1491,1496,1501,1506,1510,1514,1519,1523,1527,1532,1537,1542,1547,1552,1557,1562,1567,1571,1576,1581,1584,1588,1593,1598,1602,1607,1612,1617,1622,1627,1632,1637,1642,1647,1652,1657,1662,1667,1672,1677,1682,1687,1692,1697,1702,1707,1711,1716,1719,1723,1728,1733,1736,1740,1744,1748,1751,1755,1760,1765,1769,1773,1778,1781,1785,1790,1795,1799,1804,1809,1812,1816,1821,1824,1828,1833,1838,1843,1848,1851,1855,1859,1863,1868,1871,1875,1879,1884,1889,1892,1896,1900,1904,1909,1913,1918,1922,1926,1931,1934,1938,1942,1946,1951,1954,1958,1963,1966,1970,1974,1979,1982,1986,1990,1994,1999,2002,2006,2011,2015,2020,2023,2027,2032,2035,2039,2044,2047,2051,2056,2060,2065,2068,2072,2077,2080,2084,2089,2092,2096,2101,2106,2111,2116,2121,2124,2128,2132,2136,2141,2144,2148,2153,2158,2163,2168,2171,2175,2180,2184,2188,2193,2196,2201,2206,2211,2215,2220,2223,2227,2231,2236,2239,2243,2247,2252,2256,2261,2264,2268,2272,2275,2279,2283,2288,2291,2295,2300,2303,2307,2311,2315,2320,2323,2327,2331,2335,2339,2344,2347,2351,2355,2360,2363,2367,2371,2376,2379,2383,2388,2392,2395,2399,2403,2408,2413,2417,2422,2425,2429,2434,2439,2442,2446,2450,2455,2459,2464,2468,2471,2475,2480,2484,2487,2491,2496,2499,2503],{"id":5,"title":6,"titles":7,"content":8,"level":9},"\u002Fcompliance","Compliance",[],"Today, compliance is more complex than ever before. There are ever-increasing legal challenges in a global environment. That’s why we are constantly adapting our processes and systems to the legal framework. To emphasize the significance of compliance for us, we have firmly anchored it into our corporate policy: “We comply with applicable laws and internal guidelines.” Compliance is therefore an active component of our corporate culture. We have a compliance management system in place that allows you as a customer, business partner, or company employee to act in accordance with uniform and binding structures.",1,{"id":11,"title":6,"titles":12,"content":13,"level":9},"\u002Fcompliance#compliance",[],"Today, compliance is more complex than ever before. There are ever-increasing legal challenges in a global environment. That’s why we are constantly adapting our processes and systems to the legal framework. To emphasize the significance of compliance for us, we have firmly anchored it into our corporate policy: “We comply with applicable laws and internal guidelines.” Compliance is therefore an active component of our corporate culture. We have a compliance management system in place that allows you as a customer, business partner, or company employee to act in accordance with uniform and binding structures. It is important to identify potential misconduct at an early stage to ensure that we can live up to our corporate policy. One of the ways we are able to do this is by having any information about possible compliance violations reported to us. A compliance violation exists if applicable law or internal policies are violated in Germany or abroad by our employees or vis-à-vis our employees in the performance of their duties. Such violations include corruption, competition and antitrust offenses, data privacy violations, as well as accounting, financial and tax offenses. To detect compliance violations and be able to prevent them, we rely not only on our employees, but also on our customers and business partners. Should you notice any sign of a compliance violation, you can report it through various channels. Regardless of the method you choose to raise your concern, we assure you that every report will be handled in strict confidentiality – even anonymously if you so desire.",{"id":15,"title":16,"titles":17,"content":18,"level":19},"\u002Fcompliance#whistleblower-reports","Whistleblower Reports",[6],"Please contact our Compliance Department to raise serious concerns regarding compliance violations, or if you have questions on the topic of compliance in general. Schwarz Digits IT KG \nCompliance \nAm Campus 1 \n74177 Bad Friedrichshall \nGermany \nE-Mail: compliance@digits.schwarz All incoming information is processed by our Compliance Department. Please be assured that we will handle all indications of compliance violations with utmost care and in strict confidentiality and act on any confirmed misconduct in a firm and appropriate manner. Please note that matters bearing no relation to non-compliance will not be dealt with.",2,{"id":21,"title":22,"titles":23,"content":24,"level":9},"\u002Fdocs\u002Fgetting-started\u002Finstallation","Installation",[],"Get started using our design system by installing it into your project. We support Vue, Nuxt and Figma.",{"id":26,"title":27,"titles":28,"content":29,"level":19},"\u002Fdocs\u002Fgetting-started\u002Finstallation#basic-setup","Basic setup",[22],"Select your platform or framework to get started: Step 1: Create a Vue application Follow the official Vue installation guide to create a new Vue application if needed. Step 2: Install Onyx Install the sit-onyx package: Step 3: Add styles and plugin Import the styles and register the Vue plugin in your main.ts file. Pass your router and i18n instances to enable integrations. global.css is optional but strongly recommended when the entire application is built with Onyx. Components are scoped to prevent side effects on global elements like \u003Cbody>, making it safe to integrate with existing styles or other design systems. import \"sit-onyx\u002Fstyle.css\";\nimport \"sit-onyx\u002Fglobal.css\";\n\nimport { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\n\nconst onyx = createOnyx({\n  \u002F\u002F pass Vue Router instance to enable router integration\n  router,\n  \u002F\u002F pass locale to enable i18n integration\n  i18n: {\n    locale: i18n.global.locale,\n  },\n});\n\nconst app = createApp(App);\napp.use(onyx);\nStep 1: Create a Nuxt application Follow the official Nuxt installation guide to create a new Nuxt application if needed. Step 2: Add Nuxt module Install the Nuxt module: Then add it to your nuxt.config.ts. Important: If you also use @nuxtjs\u002Fi18n, place @sit-onyx\u002Fnuxt before @nuxtjs\u002Fi18n. export default defineNuxtConfig({\n  modules: [\"@sit-onyx\u002Fnuxt\"],\n  onyx: {\n    \u002F\u002F optional module options...\n  },\n});\nThe Figma library is currently available exclusively to Schwarz Group employees and official partners. Step 1: Create a Figma file Create a new file in Figma. See the Figma documentation for details. Step 2: Add library Add the \"Onyx Components\" library using Figma's library panel. See the Figma documentation for details.",{"id":31,"title":32,"titles":33,"content":34,"level":19},"\u002Fdocs\u002Fgetting-started\u002Finstallation#typography","Typography",[22],"We do not bundle font families. You must install them separately.",{"id":36,"title":37,"titles":38,"content":39,"level":19},"\u002Fdocs\u002Fgetting-started\u002Finstallation#first-steps","First steps",[22],"Before building application features, follow our recommended setup checklist for best practices.",{"id":41,"title":42,"titles":43,"content":44,"level":19},"\u002Fdocs\u002Fgetting-started\u002Finstallation#browser-support","Browser support",[22],"Our design system is tested and optimized for modern browsers. Older browser versions may work, but full compatibility is not guaranteed. Need to support older browsers?\nTo also support older browser versions, use lightningcss with @vitejs\u002Fplugin-legacy or nuxt-vite-legacy. import { defineConfig } from \"vite\";\nimport legacy from \"@vitejs\u002Fplugin-legacy\";\n\nexport default defineConfig({\n  plugins: [\n    legacy({\n      targets: [\"chrome >= 120\"],\n    }),\n  ],\n  build: {\n    cssMinify: \"lightningcss\",\n  },\n  css: {\n    lightningcss: {\n      targets: {\n        chrome: 120,\n      },\n    },\n  },\n});\nimport { defineNuxtConfig } from \"nuxt\u002Fconfig\";\n\nexport default defineNuxtConfig({\n  modules: [\"nuxt-vite-legacy\"],\n  \u002F\u002F use `lightningcss` to support syntax lowering for modern CSS features\n  vite: {\n    build: {\n      cssMinify: \"lightningcss\",\n    },\n    css: {\n      lightningcss: {\n        targets: {\n          chrome: 120,\n        },\n      },\n    },\n  },\n  \u002F\u002F use the `nuxt-vite-legacy` module to inject polyfills for relevant user agents\n  legacy: {\n    targets: [\"chrome >= 120\"],\n  },\n}); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":46,"title":37,"titles":47,"content":48,"level":9},"\u002Fdocs\u002Fgetting-started\u002Ffirst-steps",[],"Key principles and essential steps for building a new application with Onyx. This guide assumes you have completed the basic setup. If not, follow the installation guide first.",{"id":50,"title":51,"titles":52,"content":53,"level":19},"\u002Fdocs\u002Fgetting-started\u002Ffirst-steps#layout","Layout",[37],"We strongly recommend using the app and page layout components to structure your application. They provide consistent layout structures, correct scroll container management, and system-level components. App layout The app layout is placed once at the root of your application. It serves as the shell for global navigation and main content, while hosting system-level components like toasts and notifications. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\nimport { RouterView } from \"vue-router\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Example app\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003CRouterView \u002F>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Example app\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003CNuxtRouteAnnouncer \u002F>\n\n    \u003CNuxtLayout>\n      \u003CNuxtPage \u002F>\n    \u003C\u002FNuxtLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nPage layout Use page layout on every page to ensure standardized spacing and scroll containers. It provides dedicated slots for sidebars, footers, and page content. \u003Cscript lang=\"ts\" setup>\nimport { OnyxHeadline, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPageLayout>\n    \u003COnyxHeadline is=\"h1\">Hello World\u003C\u002FOnyxHeadline>\n  \u003C\u002FOnyxPageLayout>\n\u003C\u002Ftemplate>\nIn Nuxt, create a Nuxt layout to define the structure across pages. You can also add a global footer here.\nFor custom pages, pass props to the layout or override the layout. \u003Cscript lang=\"ts\" setup>\ndefineSlots\u003C{\n  \u002F**\n  * Main page content.\n  *\u002F\n  default(): unknown;\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPageLayout>\n    \u003Cslot>\u003C\u002Fslot>\n  \u003C\u002FOnyxPageLayout>\n\u003C\u002Ftemplate>\nCreate a new frame sized for your project (e.g. Full HD, 1920x1080px). Apply the onyx\u002Fcolor\u002Fbase\u002Fbackground\u002Ftinted variable as the fill color so the background adapts across light and dark modes.",{"id":55,"title":56,"titles":57,"content":58,"level":19},"\u002Fdocs\u002Fgetting-started\u002Ffirst-steps#grid-settings","Grid settings",[37],"Configure your application grid by defining a maximum width and alignment early on. On wide screens, stretching content across the full width impairs readability. We recommend capping content at 1920px (the lg breakpoint) with center alignment. Apply these utility classes to your root component: For all options, see the: \u003COnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n  \u003C!-- app content here... -->\n\u003C\u002FOnyxAppLayout>\nApply a layout grid to your frame by selecting one of our predefined grid layouts in the \"Layout guide\" menu. Be sure to select the grid matching your frame size \u002F breakpoint. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"id":60,"title":61,"titles":62,"content":63,"level":9},"\u002Fdocs\u002Fgetting-started\u002Fchangelog","Changelog",[],"Track recent design system releases, new components, bug fixes, and migration notes. This section is currently in progress. Refer to our GitHub releases for the complete changelog.",{"id":65,"title":66,"titles":67,"content":68,"level":9},"\u002Fdocs\u002Ffoundation\u002Fcolors","Colors & Themes",[],"Semantic colors and themes for light and dark mode, ensuring accessible and consistent visual experiences. Colors convey hierarchy, communicate state, and provide visual structure. A consistent palette guides users, highlights actions, and ensures cohesive UI behavior across applications.",{"id":70,"title":71,"titles":72,"content":73,"level":19},"\u002Fdocs\u002Ffoundation\u002Fcolors#themes","Themes",[66],"We include a free and Open Source theme with light and dark mode out of the box, applied automatically without manual configuration. Light mode tinted blank Dark mode tinted blank",{"id":75,"title":76,"titles":77,"content":78,"level":19},"\u002Fdocs\u002Ffoundation\u002Fcolors#colors","Colors",[66],"Predefined color palettes adapt automatically between light and dark mode. Always use CSS or Figma variables instead of hardcoded hex values. This ensures components adapt properly when switching between light and dark modes. For details, see the variables documentation.",{"id":80,"title":81,"titles":82,"content":83,"level":84},"\u002Fdocs\u002Ffoundation\u002Fcolors#brand-colors","Brand colors",[66,76],"Use brand colors as functional identifiers rather than purely decorative accents.",3,{"id":86,"title":87,"titles":88,"content":89,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#primary","Primary",[66,76,81],"The primary color serves as the core brand identifier across every theme. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold States Dedicated state tokens maintain consistent borders, outlines, and focus rings. cta cta-hover border border-hover focus",4,{"id":92,"title":93,"titles":94,"content":95,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#secondary","Secondary",[66,76,81],"Use secondary brand colors sparingly for predefined accents to maintain visual balance. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold",{"id":97,"title":98,"titles":99,"content":100,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#neutral","Neutral",[66,76,81],"Neutral colors are used for backgrounds, borders, and secondary actions, providing contrast that helps primary colors stand out. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense inverted States Dedicated state tokens maintain consistent borders, outlines, and focus rings. cta-disabled border-neutral border-disabled focus-neutral",{"id":102,"title":103,"titles":104,"content":105,"level":84},"\u002Fdocs\u002Ffoundation\u002Fcolors#system-colors","System colors",[66,76],"System colors convey functional status and semantic feedback. Reserved for system states, they should not be used as decorative brand colors.",{"id":107,"title":108,"titles":109,"content":110,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#danger","Danger",[66,76,103],"Danger colors signal urgent attention, destructive actions, or critical errors. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold States Dedicated state tokens maintain consistent borders, outlines, and focus rings. cta cta-hover border border-hover focus",{"id":112,"title":113,"titles":114,"content":115,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#warning","Warning",[66,76,103],"Warning colors indicate caution, non-blocking errors, or potential risks. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold",{"id":117,"title":118,"titles":119,"content":120,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#success","Success",[66,76,103],"Success colors indicate completed actions, successful operations, or healthy system status. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold States Dedicated state tokens maintain consistent borders, outlines, and focus rings. border border-hover focus",{"id":122,"title":123,"titles":124,"content":125,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#info","Info",[66,76,103],"Info colors present objective information, helpful tips, and non-critical guidance. Base Base colors provide the core palette for custom UI styling. 100 200 300 400 500 600 700 800 900 Text & Icons Apply text and icon colors exclusively to typography and icon elements. soft medium intense bold",{"id":127,"title":128,"titles":129,"content":130,"level":90},"\u002Fdocs\u002Ffoundation\u002Fcolors#quantitative-colors","Quantitative colors",[66,76,103],"The quantitative palette is designed specifically for charts and data visualization. Application Use in infographics, charts, and dashboards to distinguish between data series. Constraint Do not use quantitative colors for UI elements (buttons, inputs, borders). They are decoupled from brand colors to avoid semantic ambiguity. Goal High-contrast hues ensure clear visual distinction across complex datasets. 100 200 300 400 500 600 700 800 900 1000 1100 1200",{"id":132,"title":133,"titles":134,"content":135,"level":84},"\u002Fdocs\u002Ffoundation\u002Fcolors#backgrounds","Backgrounds",[66,76],"The tinted background should be applied to the page root, while individual UI containers and components use a blank background.\nSee the layout guide for page structure examples. tinted blank",{"id":137,"title":138,"titles":139,"content":140,"level":84},"\u002Fdocs\u002Ffoundation\u002Fcolors#backdrops","Backdrops",[66,76],"Backdrops are overlays rendered behind modals and dialogs. Use the OnyxModal component for automatic backdrop support. medium soft",{"id":142,"title":143,"titles":144,"content":145,"level":19},"\u002Fdocs\u002Ffoundation\u002Fcolors#usage","Usage",[66],"To toggle between light and dark mode, set the color-scheme CSS property on the root or on a specific container: :root {\n  color-scheme: dark;\n}\nFor compatibility with older tooling, Onyx also supports the .dark class, though color-scheme is preferred. Automatic light\u002Fdark mode To adapt automatically to system preferences, use the approaches below for Vue or Nuxt. You can also integrate OnyxColorSchemeMenuItem or OnyxColorSchemeDialog to allow manual theme switching. Install VueUse Install the VueUse package: Enable automatic light\u002Fdark mode Use the useColorMode() composable from VueUse: \u003Cscript setup lang=\"ts\">\nimport { useColorMode } from \"@vueuse\u002Fcore\";\nimport { useThemeTransition } from \"sit-onyx\";\n\nconst { store: colorScheme } = useColorMode({ disableTransition: false });\nuseThemeTransition(colorScheme);\n\u003C\u002Fscript>\nInstall Nuxt module Install the @nuxtjs\u002Fcolor-mode module: Enable automatic light\u002Fdark mode Register @nuxtjs\u002Fcolor-mode in your Nuxt config: export default defineNuxtConfig({\n  modules: [\"@nuxtjs\u002Fcolor-mode\"],\n});\nTo change the theme in Figma, use the mode selector on the page, frame, layer, or component and select the target theme under \"Appearance\". html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":147,"title":32,"titles":148,"content":149,"level":9},"\u002Fdocs\u002Ffoundation\u002Ftypography",[],"Typography establishes hierarchy, provides structure, and ensures accessible communication across applications.",{"id":151,"title":152,"titles":153,"content":154,"level":19},"\u002Fdocs\u002Ffoundation\u002Ftypography#font-families","Font families",[32],"The design system uses two font families to avoid visual clutter: a sans-serif and a monospace typeface. Visual contrast is achieved through variations in weight and size rather than combining multiple font families. By default, these Open Source typefaces are used, optimized for legibility on digital screens: Default: Source Sans 3 Clear, modern, and approachable. View on Google Fonts. Monospace: Source Code Pro Precise and readable. Designed for data-dense layouts and code blocks. View on Google Fonts. To support diverse brand identities, a variable-based architecture is used so font families can be customized easily. See custom font families below.",{"id":156,"title":143,"titles":157,"content":158,"level":19},"\u002Fdocs\u002Ffoundation\u002Ftypography#usage",[32],"Instead of arbitrary pixel values, we provide semantic text roles that express functional intent. Whenever possible, use built-in typography components for headlines, links, and text. Headlines Use the OnyxHeadline component for headlines. Heading levels h5 and h6 are supported for semantic HTML hierarchy but share the visual styling of h4. Hello World Hello World Hello World Hello World Hello World Hello World Links Use the OnyxLink component for text links. Hello World Hello World Paragraphs Use regular paragraph elements with the appropriate CSS class or Figma style: Hello World Hello World Hello World Font families Apply monospace or default font families using the corresponding CSS utility classes or Figma styles: Hello World Hello World Truncation Truncation defines how overflow text is handled when content exceeds its container width. While multiline is standard behavior, helper classes simplify common truncation patterns. Hello World Hello World Hello World Hello World Hello World Hello World Hello World",{"id":160,"title":22,"titles":161,"content":162,"level":19},"\u002Fdocs\u002Ffoundation\u002Ftypography#installation",[32],"Font families are not bundled by default to optimize bundle size and build performance. You must install your chosen font packages manually, otherwise browsers fall back to system defaults. Install font families We recommend installing fonts using Fontsource: Add imports Import the font stylesheets in your application entry file: import \"@fontsource-variable\u002Fsource-sans-3\";\nimport \"@fontsource-variable\u002Fsource-code-pro\";\nexport default defineNuxtConfig({\n  css: [\"@fontsource-variable\u002Fsource-sans-3\", \"@fontsource-variable\u002Fsource-code-pro\"],\n});\nCustom font families To use custom fonts instead of the defaults: Install custom font families Install your preferred font packages or host the font files locally. Override default font families Override the default font variables with your custom font families: :root {\n  --onyx-font-family-Source-Sans-3-Variable: \"Font family name\", sans-serif;\n  --onyx-font-family-Source-Code-Pro-Variable: \"Font family name\", monospace;\n}\nRecommended fonts must be installed in Figma before using components. We recommend uploading fonts at the Figma organization level so all teams and projects have access. See the Figma guide for instructions. html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":164,"title":165,"titles":166,"content":167,"level":9},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid","Breakpoints & Grid",[],"Responsive layout grids and breakpoints that adapt fluidly across devices and screen sizes. Column grids are used to organize layouts, components, and content into structured hierarchies. This structure ensures consistent alignment and distribution across all views. Built on responsive breakpoints, the grid adapts smoothly from mobile screens to ultrawide monitors. Visit our interactive Grid Playground to see the grid system in action.",{"id":169,"title":170,"titles":171,"content":172,"level":19},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid#grid","Grid",[165],"The grid system consists of three core building blocks: Columns Available width is divided into up to 12 columns. Elements define how many columns they span, and overflowing elements wrap to the next row. Maximum columns adapt dynamically based on the active breakpoint. See breakpoints below for details. Gutters \u002F Gaps Elements within the grid are separated by predefined gutter spacing. Margins Unified outer margins provide dynamic padding around grid containers, keeping content properly indented from viewport edges.",{"id":174,"title":143,"titles":175,"content":176,"level":84},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid#usage",[165,170],"Add the onyx-grid CSS class to create a grid container. Use column-span classes on child elements to control sizing: Specific number of columns Use onyx-grid-span-\u003Cnumber> to span a fixed number of columns: \u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-4\">Grid element\u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nFull width Use onyx-grid-span-full to span all available columns across any breakpoint: \u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-full\">Grid element\u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nSpecific breakpoints To adjust column span at specific breakpoints, use onyx-grid-\u003Cbreakpoint>-span-\u003Cnumber>. The element will span \u003Cnumber> of columns for that \u003Cbreakpoint> and larger. Combine breakpoint-specific classes with a base onyx-grid-span-\u003Cnumber> class: \u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-4 onyx-grid-md-span-6\">\n      \u003C!-- Spans 4 columns below md, 6 columns at md and above -->\n      Grid element\n    \u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nCustom container The grid system is built on CSS container queries. Each grid evaluates breakpoints relative to its nearest container ancestor. OnyxPageLayout, OnyxAppLayout, and OnyxSidebar set up container queries automatically. To create a custom container, set the container-type CSS property. This is useful when nesting grids inside OnyxModal or custom widgets: \u003Cscript lang=\"ts\" setup>\nimport { OnyxModal } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxModal class=\"modal\" label=\"Example grid modal\">\n    \u003Cdiv class=\"onyx-grid\">\n      \u003Cdiv class=\"onyx-grid-span-2\">Grid element\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxModal>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 32rem;\n  container-type: inline-size;\n}\n\u003C\u002Fstyle>\nGrid margin Outer grid margins are applied automatically by OnyxPageLayout. To apply them manually, use the .onyx-grid-layout utility class: \u003Ctemplate>\n  \u003COnyxPageLayout no-padding>\n    \u003C!-- full-width section (e.g. hero) -->\n\n    \u003Cdiv class=\"onyx-grid-layout\">\n      \u003C!-- page content with standard padding -->\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxPageLayout>\n\u003C\u002Ftemplate>\nApply a layout grid to your frame by selecting a predefined grid layout in the \"Layout guide\" menu, matching your target breakpoint size.",{"id":178,"title":179,"titles":180,"content":181,"level":84},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid#customization","Customization",[165,170],"Customize grid behavior by setting utility classes on the root application element: Max width By default, the grid expands across the full viewport width. To preserve readability on wide displays (e.g. 1440px or 1920px+), limit content width using max-width utility classes. Components like OnyxNavBar and OnyxBottomBar adapt automatically. Apply one of the following classes: Alignment When a max-width class is set, align the grid container to the left or center: Max columns The grid defaults to 12 columns. On wide displays (breakpoint lg and above), you can expand the column count to 16 or 20: \u003COnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n  \u003C!-- your application content... -->\n\u003C\u002FOnyxAppLayout>",{"id":183,"title":184,"titles":185,"content":186,"level":19},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid#breakpoints","Breakpoints",[165],"Breakpoints define width thresholds where page or component layouts refactor for smaller or larger screens: The minimum supported viewport width is 320px. Screens narrower than 320px are not officially supported.",{"id":188,"title":143,"titles":189,"content":190,"level":84},"\u002Fdocs\u002Ffoundation\u002Fbreakpoints-and-grid#usage-1",[165,184],"In custom layouts or components, use SCSS mixins to query screen or container widths: Media queries To apply styles based on the viewport width, use the breakpoints.screen() SCSS mixin: @use \"sit-onyx\u002Fbreakpoints.scss\";\n\n.some-class {\n  @include breakpoints.screen(max, sm) {\n    \u002F\u002F styles for sm screens and smaller\n  }\n\n  @include breakpoints.screen(min, md) {\n    \u002F\u002F styles for md screens and larger\n  }\n}\nContainer queries To apply styles based on the parent element width, use the breakpoints.container() SCSS mixin. Ensure the element has container-type defined. When defining both min and max for the same breakpoint, include an offset parameter: @use \"sit-onyx\u002Fbreakpoints.scss\";\n\n.some-class {\n  container-type: size;\n\n  @include breakpoints.container(max, md) {\n    \u002F\u002F styles for md containers and smaller\n  }\n\n  @include breakpoints.container(min, md, $offset: 1) {\n    \u002F\u002F styles for containers larger than md\n  }\n}\nUsage in code To access breakpoint values in TypeScript or JavaScript, import ONYX_BREAKPOINTS: import { ONYX_BREAKPOINTS } from \"sit-onyx\";\n\nconsole.log(`Width for sm breakpoint is: ${ONYX_BREAKPOINTS.sm}px`);\nIn Figma, design responsiveness is handled using layout grids and auto layout rather than direct breakpoint variables. See the grid usage section above. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .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}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":192,"title":193,"titles":194,"content":195,"level":9},"\u002Fdocs\u002Ffoundation\u002Fdensity","Density",[],"Density adjusts the vertical space of components to optimize layouts for various screen sizes and improve data scannability.",{"id":197,"title":198,"titles":199,"content":200,"level":19},"\u002Fdocs\u002Ffoundation\u002Fdensity#introduction","Introduction",[193],"Density refers to the amount of vertical white space within a component and the height of its primary interactive element. To provide a flexible toolkit for various user preferences and device capabilities, this design system offers three density levels: Compact, Default and Cozy. These levels use fixed base heights of 32px, 40px and 48px. Compact High-density layouts maximize information density and optimize limited screen space for expert interfaces, data-heavy dashboards, and complex data grids. Default The standard baseline balances scannability with visual comfort across all devices for most enterprise and general-purpose applications. Cozy Content-focused layouts utilize spacious white space to increase readability and reduce cognitive load for touch-friendly interfaces and simplified workflows.",{"id":202,"title":203,"titles":204,"content":205,"level":19},"\u002Fdocs\u002Ffoundation\u002Fdensity#overview","Overview",[193],"Use density variables for dynamic spacings that adapt dynamically to the selected density mode. This is the recommended approach for paddings and margins in custom components and layouts. In specific cases where dimensions must remain static, fixed spacing variables are also available.",{"id":207,"title":143,"titles":208,"content":209,"level":19},"\u002Fdocs\u002Ffoundation\u002Fdensity#usage",[193],"When selecting a density, it will apply to the selected component as well as to all nested components unless they explicitly define another density. You can change the density using the density property of supported components or by applying the below CSS classes to any elements of your application. .onyx-density-compact .onyx-density-default .onyx-density-cozy \u003Ctemplate>\n  \u003COnyxButton label=\"Button\" density=\"compact\" \u002F>\n  \u003C!-- or -->\n  \u003Cdiv class=\"onyx-density-compact\">Your custom component\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nTo change the density in Figma, use the mode selector on the target page, frame, layer, or component. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":211,"title":212,"titles":213,"content":214,"level":9},"\u002Fdocs\u002Ffoundation\u002Fborders-and-shadows","Borders & Shadows",[],"Borders and shadows create structure, define element boundaries, and establish depth across components. Borders and shadows define boundaries, separate content areas, and convey elevation and hierarchy. Borders provide crisp structure, while shadows add subtle depth cues to interactive and floating elements.",{"id":216,"title":217,"titles":218,"content":219,"level":19},"\u002Fdocs\u002Ffoundation\u002Fborders-and-shadows#borders","Borders",[212],"Borders delineate containers, define component edges, and indicate interactive states such as focus, hover, or validation. To ensure consistent rounding across interfaces, we provide semantic border-radius variables. These range from subtle corners to fully rounded pills and circular shapes.",{"id":221,"title":222,"titles":223,"content":224,"level":19},"\u002Fdocs\u002Ffoundation\u002Fborders-and-shadows#shadows","Shadows",[212],"Box shadows add elevation to floating containers such as flyouts, popovers, modals, and toasts, separating them from underlying content. Shadows provide poor contrast on dark backgrounds. Consequently, all shadow variables resolve to none in dark mode. For dark mode elevation, use a border (such as --onyx-color-component-border-neutral) or background color differentiation.",{"id":226,"title":227,"titles":228,"content":229,"level":9},"\u002Fdocs\u002Ffoundation\u002Fvariables","Variables",[],"Design variables serve as the single source of truth for visual attributes across platforms. Design variables represent shared design attributes such as color, typography, and spacing. They ensure consistency and streamline cross-platform development. Variables should always be favored over hardcoded values so that colors adapt across light\u002Fdark themes and spacing responds to the active density. Design variables align developers and designers through a shared naming convention and unified visual language.",{"id":231,"title":232,"titles":233,"content":234,"level":19},"\u002Fdocs\u002Ffoundation\u002Fvariables#architecture","Architecture",[227],"The variable architecture consists of three layers. Only semantic variables are intended for direct use in applications: Global variables Global variables store raw, context-agnostic design values (such as primitive colors and unit scales). They are not intended to be used directly in application code. Semantic variables Semantic variables map raw values to functional use cases and adapt across light and dark modes. Developers and designers should always build components using semantic variables. Component variables Component variables are reserved for internal component definitions and unique state overrides. They are not intended for external use.",{"id":236,"title":143,"titles":237,"content":238,"level":19},"\u002Fdocs\u002Ffoundation\u002Fvariables#usage",[227],"Reference available variables in the foundation sections below: All variables share the onyx prefix to avoid collisions with application styles. In code, variables use kebab-case dashes; in Figma, they use slash notation. For example, --onyx-color-text-icons-neutral-intense in CSS corresponds to onyx\u002Fcolor\u002Ftext\u002Ficons\u002Fneutral\u002Fintense in Figma. All variables are exposed as CSS custom properties and referenced with var(): .my-component {\n  color: var(--onyx-color-text-icons-neutral-intense);\n}\nOpen Figma's variable panel and select \"Libraries\" to inspect and apply variables. For details, refer to the Figma documentation. html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":240,"title":241,"titles":242,"content":243,"level":9},"\u002Fdocs\u002Ffoundation\u002Faccessibility","Accessibility",[],"Accessibility principles and guidelines ensuring components meet WCAG 2.2 Level AA compliance.",{"id":245,"title":246,"titles":247,"content":248,"level":19},"\u002Fdocs\u002Ffoundation\u002Faccessibility#our-commitment","Our commitment",[241],"To ensure products are usable by everyone, we are committed to WCAG 2.2 Level AA compliance across all components. The Web Content Accessibility Guidelines (WCAG) 2.2, developed by the Web Accessibility Initiative (WAI), provide the benchmark framework: Level A Addresses fundamental barriers—such as basic keyboard navigation—required for digital usability. Level AA Establishes strong contrast, readability, and predictable interaction, satisfying legal accessibility standards. Level AAA The strictest compliance tier, featuring advanced requirements such as dedicated sign language interpretation.",{"id":250,"title":251,"titles":252,"content":253,"level":19},"\u002Fdocs\u002Ffoundation\u002Faccessibility#key-principles","Key principles",[241],"Our components adhere to three core accessibility standards: ARIA patterns Components implement standard W3C WAI-ARIA Authoring Practices to deliver familiar, predictable interaction patterns for assistive technologies. Assistive technology support Components feature full keyboard operability and structured screen reader announcements. Accessible labels and descriptions are required by default. Color contrast Palettes are selected to meet minimum contrast ratios in both light and dark modes. For details, see the Colors & Themes documentation.",{"id":255,"title":256,"titles":257,"content":258,"level":19},"\u002Fdocs\u002Ffoundation\u002Faccessibility#testing-verification","Testing & Verification",[241],"We perform automated accessibility tests on all components across every variation and interactive state.",{"id":260,"title":261,"titles":262,"content":263,"level":9},"\u002Fdocs\u002Ffoundation\u002Fi18n","Internationalization",[],"Out-of-the-box multilingual support for built-in component labels, buttons, and empty states.",{"id":265,"title":266,"titles":267,"content":268,"level":19},"\u002Fdocs\u002Ffoundation\u002Fi18n#available-languages","Available languages",[261],"English (en-US) is enabled by default. Additional languages must be registered during application setup. Once registered, component translations automatically synchronize with your active application locale. English and German translations are curated manually. Other languages are AI-generated and might have been (partially) reviewed by native speakers.",{"id":270,"title":22,"titles":271,"content":272,"level":19},"\u002Fdocs\u002Ffoundation\u002Fi18n#installation",[261],"Connect your existing vue-i18n instance to Onyx by passing the current locale and message bundles: import { createOnyx } from \"sit-onyx\";\nimport onyxDE from \"sit-onyx\u002Flocales\u002Fde-DE.json\";\nimport { createI18n } from \"vue-i18n\";\n\nconst i18n = createI18n({\n  \u002F\u002F existing vue-i18n setup...\n});\n\nconst onyx = createOnyx({\n  i18n: {\n    locale: i18n.global.locale,\n    \u002F\u002F Locale keys (e.g. \"de-DE\") must match your vue-i18n setup exactly\n    messages: { \"de-DE\": onyxDE },\n  },\n});\n\ncreateApp(App).use(i18n).use(onyx);\nWhenever the vue-i18n locale changes, Onyx updates its internal component translations automatically. When using @sit-onyx\u002Fnuxt, locales configured in @nuxtjs\u002Fi18n are detected and loaded automatically. If your locale codes omit region subtags (e.g. using es instead of es-ES), specify the complete BCP 47 language tag in the language property: export default defineNuxtConfig({\n  modules: [\"@sit-onyx\u002Fnuxt\", \"@nuxtjs\u002Fi18n\"],\n  i18n: {\n    locales: [\n      { code: \"de-DE\" },\n      \u002F\u002F When code is \"es\", provide the full BCP 47 code in \"language\"\n      { code: \"es\", language: \"es-ES\" },\n    ],\n  },\n}); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":274,"title":275,"titles":276,"content":277,"level":9},"\u002Fdocs\u002Ffoundation\u002Flayouts","Layouts",[],"Principles and page structures to guide user focus, establish visual hierarchy, and maintain consistent interfaces.",{"id":279,"title":280,"titles":281,"content":282,"level":19},"\u002Fdocs\u002Ffoundation\u002Flayouts#core-principles","Core principles",[275],"Every layout should adhere to two fundamental rules: Responsive Layouts must adapt seamlessly across screen sizes and device types. Content-driven Layout is determined by content requirements. Prioritize information architecture before selecting layout patterns. Use our grid system to ensure consistent alignment and spacing.",{"id":284,"title":285,"titles":286,"content":287,"level":19},"\u002Fdocs\u002Ffoundation\u002Flayouts#page-anatomy","Page anatomy",[275],"Standard applications are structured around four distinct layout regions: Main navigation Persistent top or left bar providing global routing and system controls. See OnyxNavBar. Sidebar Side panel for master-detail views, sub-navigation, or filtering. Stays pinned to the left or right screen edge. See OnyxSidebar. Page content Primary content viewport governed by the grid system and active scroll container. See OnyxPageLayout. Bottom bar Pinned footer area for action buttons, status indicators, and batch operations. See OnyxBottomBar. For container alignment and max-width options, see the grid documentation. Use OnyxAppLayout and OnyxPageLayout to assemble the application frame: \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" logo-url=\"\u002Flogo.svg\">\n        \u003COnyxNavItem label=\"Home\" link=\"\u002F\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout> Page content... \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nTo build a layout in Figma: Create new frame Create a desktop frame (e.g. 1440x1024px). Define background fill Set frame fill to onyx\u002Fcolor\u002Fbase\u002Fbackground\u002Ftinted via the Libraries menu to support automatic dark mode adaptation. Add components Place global navigation, sidebars, and content components inside the frame.",{"id":289,"title":290,"titles":291,"content":292,"level":19},"\u002Fdocs\u002Ffoundation\u002Flayouts#component-layout","Component layout",[275],"Internal component content is left-aligned. Center or right alignment is reserved for specialized cases, such as numeric table columns. Left-align content within components. Do not center- or right-align component content, except in numeric table cells.",{"id":294,"title":295,"titles":296,"content":297,"level":19},"\u002Fdocs\u002Ffoundation\u002Flayouts#visual-rhythm-grouping","Visual rhythm & Grouping",[275],"Structure interfaces by clustering related elements: Proportion & balance Keep consistent proportions across sections to avoid visual imbalance. Spatial grouping Group functionally related elements together. Use white space, typography, and dividers to distinguish logical blocks and minimize cognitive load. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":299,"title":300,"titles":301,"content":302,"level":9},"\u002Fdocs\u002Ffoundation\u002Fimages","Images",[],"Guidelines and principles for using images effectively, authentically, and accessibly across applications.",{"id":304,"title":305,"titles":306,"content":307,"level":19},"\u002Fdocs\u002Ffoundation\u002Fimages#principles","Principles",[300],"Images convey messages quickly, establishing mood and supporting understanding. Follow these principles when incorporating photography: Color gamut Select images where a single primary hue dominates the composition.\nChoose images with a harmonious, monochromatic, or analogous color profile.\n\nAvoid images with competing, oversaturated primary colors.\nTip: Vary color gamuts across sections to provide subtle navigation cues. Natural lighting Prioritize soft, authentic light sources to maintain a realistic aesthetic.\nEnsure lighting is naturally balanced and subjects appear evenly lit.\n\nAvoid harsh highlights, deep shadows, or high-contrast studio flash.\nTip: Avoid heavy filters or over-processing that make photos look artificial. Authentic snapshots Choose candid imagery that feels unscripted rather than staged.\nLook for natural movement and genuine interaction.\n\nAvoid forced expressions, unnatural poses, or generic stock-photo smiles.\nTip: Photos should resemble authentic moments in real working environments. Visual simplicity Select minimalist compositions that emphasize a single subject or message.\nChoose images with generous negative space and uncluttered backgrounds.\n\nAvoid cluttered scenes with competing focal points.\nTip: Simple framing reduces visual noise and keeps content clear. Direct authenticity Use genuine photography without artificial digital embellishments.\nUse naturally composed photography.\n\nDo not overlay artificial slogans, 3D elements, or synthetic graphics on photos.\nTip: Imagery should look captured by a camera, not rendered artificially. Technical quality Ensure assets meet resolution and compression standards. Optimize image dimensions for their display container to avoid serving unnecessary 4K assets on small viewports. Use modern formats like WebP to minimize file sizes.\nUse sharp, properly scaled assets.\n\nAvoid assets with visible compression artifacts, noise, or motion blur.\nTip: If pixelation or compression artifacts are noticeable, replace the asset.",{"id":309,"title":310,"titles":311,"content":312,"level":19},"\u002Fdocs\u002Ffoundation\u002Fimages#sources","Sources",[300],"Ensure images comply with copyright and licensing requirements. Recommended stock libraries:",{"id":314,"title":241,"titles":315,"content":316,"level":19},"\u002Fdocs\u002Ffoundation\u002Fimages#accessibility",[300],"Every informative image must provide descriptive alternative text (alt). Screen readers rely on alt text to convey meaning to visually impaired users, and it also serves as fallback content if image loading fails. Decorative images should use an empty alt=\"\" attribute.",{"id":318,"title":319,"titles":320,"content":321,"level":19},"\u002Fdocs\u002Ffoundation\u002Fimages#technical-usage","Technical usage",[300],"Use the OnyxImage component to render images. It enforces accessible attributes and provides built-in lazy-loading and skeleton states.",{"id":323,"title":324,"titles":325,"content":326,"level":9},"\u002Fdocs\u002Ffoundation\u002Fanimations","Animations",[],"Purposeful animations and transitions that guide focus, provide feedback, and respect user motion preferences. We currently include basic animations and transitions in components such as loaders and toasts. Extended animation support is on our roadmap.",{"id":328,"title":305,"titles":329,"content":330,"level":19},"\u002Fdocs\u002Ffoundation\u002Fanimations#principles",[324],"Animations should clarify interactions rather than distract. Use motion purposefully to indicate state changes, provide feedback, and maintain orientation.",{"id":332,"title":333,"titles":334,"content":335,"level":19},"\u002Fdocs\u002Ffoundation\u002Fanimations#durations","Durations",[324],"Use standard duration variables to ensure consistent animation timing across components:",{"id":337,"title":241,"titles":338,"content":339,"level":19},"\u002Fdocs\u002Ffoundation\u002Fanimations#accessibility",[324],"Excessive or unexpected motion can trigger symptoms in users with vestibular motion disorders.\nRespect the prefers-reduced-motion media query by disabling non-essential transitions when requested by the user's system preferences.",{"id":341,"title":342,"titles":343,"content":344,"level":9},"\u002Fimprint","Imprint",[],"The content published on this website is maintained by:",{"id":346,"title":342,"titles":347,"content":348,"level":9},"\u002Fimprint#imprint",[],"The content published on this website is maintained by: Schwarz Digits KG \nAm Campus 1 \n74177 Bad Friedrichshall \nGermany Local District Court: Stuttgart HRA 730995 Schwarz Digits KG is represented by Iota-Stiftung, with its registered office in Dresden, Landesdirektion Sachsen, AZ 20-2245\u002F184, which in turn is jointly represented by two board members with joint power of representation, including Christian Müller and Walter Wolf. Email: info@digits.schwarz \nTelephone: +49 7132 30-5000",{"id":350,"title":351,"titles":352,"content":353,"level":9},"\u002Fprivacy-policy","Privacy Policy",[],"Version 1.1",{"id":355,"title":351,"titles":356,"content":357,"level":9},"\u002Fprivacy-policy#privacy-policy",[],"Version 1.1 This Privacy Notice provides information about the processing of your personal data and your rights under the General Data Protection Regulation (GDPR).",{"id":359,"title":360,"titles":361,"content":362,"level":19},"\u002Fprivacy-policy#_1-data-controller","1. Data Controller",[351],"The data controller (Art. 4(7) GDPR) for the data processing described below is, unless otherwise stated below: Schwarz Digits IT KG \nAm Campus 1 \n74177 Bad Friedrichshall \nGermany Email: info@digits.schwarz",{"id":364,"title":365,"titles":366,"content":367,"level":19},"\u002Fprivacy-policy#_2-use-of-our-website","2. Use of our Website",[351],"",{"id":369,"title":370,"titles":371,"content":372,"level":84},"\u002Fprivacy-policy#_21-purposes-and-legal-bases","2.1. Purposes and Legal Bases",[351,365],"When you use our website, the browser on your device automatically collects the following information without any action on your part the IP address of the device, the date and time of access, the name and URL of the file accessed, the amount of data transferred, the website\u002Fapplication from which the access originated (referrer URL), the browser you are using and, if applicable, the operating system of your device, as well as the name of your Internet service provider are sent to our website’s server and temporarily stored in a log file for the following purposes: to ensure a smooth connection, to ensure a convenient user experience on our website\u002Fapplication, and to evaluate system security and stability. The legal basis for this data processing is Article 6(1)(f) of the GDPR. The legitimate interest arises from the protection of our systems and the prevention of abusive or fraudulent behavior whenever a user accesses this website.",{"id":374,"title":375,"titles":376,"content":377,"level":84},"\u002Fprivacy-policy#_22-recipients","2.2. Recipients",[351,365],"Under certain circumstances, it may be necessary for us to transfer your personal data to other recipients. The website is operated on our behalf on servers maintained by IT service providers. Your personal data may be made available to these service providers for support and maintenance purposes.",{"id":379,"title":380,"titles":381,"content":382,"level":84},"\u002Fprivacy-policy#_23-retention-periodcriteria-for-retention","2.3. Retention Period\u002FCriteria for Retention",[351,365],"Log files are stored for 30 days.",{"id":384,"title":385,"titles":386,"content":387,"level":19},"\u002Fprivacy-policy#_3-data-subject-rights","3. Data Subject Rights",[351],"If data processing is based on consent pursuant to Art. 6(1)(a) or Art. 9(2)(a) of the GDPR, you may revoke your consent at any time with future effect, without affecting the lawfulness of the processing that has taken place up to that point. You have the right, pursuant to Article 15(1) of the GDPR, to receive, upon request and free of charge, information about the personal data stored about you. In addition, provided the legal requirements are met, you have the right to rectification (Article 16 of the GDPR), erasure (Article 17 of the GDPR), and restriction of processing (Article 18 of the GDPR) of your personal data. If you yourself have provided the processed data, you have the right to data portability under Article 20 of the GDPR. If data processing is based on Article 6(1)(e) or (f) of the GDPR, you have the right to object under Article 21 of the GDPR. If you object to data processing, it will only continue if we can demonstrate compelling legitimate grounds for further processing that override your interest in the objection. To exercise your rights as a data subject, if you have any questions, or in the event of a complaint, please contact the Data Protection Officer in writing or by email. You also have the right to lodge a complaint with a data protection supervisory authority. The competent authority is the data protection supervisory authority of the federal state in which you reside or in which the controller is headquartered.",{"id":389,"title":390,"titles":391,"content":392,"level":19},"\u002Fprivacy-policy#_4-contacting-the-data-protection-officer","4. Contacting the Data Protection Officer",[351],"If you have any further questions regarding the processing of your data or the exercise of your rights, you may contact the Data Protection Officer at the data controller: Schwarz Digits IT KG Data Protection Officer - \nAm Campus 1 \n74177 Bad Friedrichshall Email: datenschutz@digits.schwarz",{"id":394,"title":395,"titles":396,"content":397,"level":9},"\u002Fcomponents\u002Fbuttons\u002Fbutton","Button",[],"Buttons trigger actions, submit forms, and guide users through critical workflows.",{"id":399,"title":400,"titles":401,"content":367,"level":19},"\u002Fcomponents\u002Fbuttons\u002Fbutton#examples","Examples",[395],{"id":403,"title":87,"titles":404,"content":405,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#primary",[395,400],"Use primary buttons for the key action in a given view (e.g. \"Save\", \"Submit\", \"Continue\"). \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Default\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Outline\" mode=\"outline\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Plain\" mode=\"plain\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":407,"title":98,"titles":408,"content":409,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#neutral",[395,400],"Use neutral buttons for secondary or cancel actions. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Default\" color=\"neutral\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Outline\" color=\"neutral\" mode=\"outline\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Plain\" color=\"neutral\" mode=\"plain\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":411,"title":108,"titles":412,"content":413,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#danger",[395,400],"Use danger buttons for destructive operations such as \"Delete\". We recommend pairing destructive actions with a confirmation dialog such as OnyxAlertModal. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Default\" color=\"danger\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Outline\" color=\"danger\" mode=\"outline\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton label=\"Plain\" color=\"danger\" mode=\"plain\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":415,"title":416,"titles":417,"content":418,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#icons","Icons",[395,400],"Icons can be placed before or after the text label. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Left icon\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n  \u003COnyxButton\n    label=\"Right icon\"\n    :icon=\"iconPlaceholder\"\n    icon-position=\"right\"\n    @click=\"handleClick\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":420,"title":421,"titles":422,"content":423,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#loading-skeleton","Loading & skeleton",[395,400],"The loading state indicates an action is in progress following user interaction. The skeleton prop displays a loading placeholder during initial page rendering. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Loading\" loading \u002F>\n  \u003COnyxButton label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":425,"title":426,"titles":427,"content":428,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fbutton#disabled","Disabled",[395,400],"Buttons can be disabled when an action is unavailable. Ensure the interface explains why the action is disabled. Do not disable \"Submit\" buttons in forms. Keeping submit buttons enabled allows form validation to trigger on click and guide users to fix errors. See the form component for details. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Default\" disabled \u002F>\n  \u003COnyxButton label=\"Neutral\" color=\"neutral\" disabled \u002F>\n  \u003COnyxButton label=\"Danger\" color=\"danger\" disabled \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":430,"title":431,"titles":432,"content":433,"level":9},"\u002Fcomponents\u002Fbuttons\u002Ffab","Floating action button",[],"A floating action button (FAB) is a fixed button anchored to a lower viewport corner for primary, persistent actions.",{"id":435,"title":400,"titles":436,"content":367,"level":19},"\u002Fcomponents\u002Fbuttons\u002Ffab#examples",[431],{"id":438,"title":439,"titles":440,"content":441,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#basic","Basic",[431,400],"The FAB supports icons and text labels, positioning itself in the bottom-right corner by default. Examples below are shown inline for demonstration. \u003Cscript lang=\"ts\" setup>\nimport { iconArrowSmallUp } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFAB } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFAB label=\"Back to top\" :icon=\"iconArrowSmallUp\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":443,"title":444,"titles":445,"content":446,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#icon-only","Icon only",[431,400],"The label can be visually hidden to render an icon-only FAB. The label remains accessible to screen readers. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFAB } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFAB label=\"Example label\" :icon=\"iconPlaceholder\" hide-label @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":448,"title":449,"titles":450,"content":451,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#left-aligned","Left aligned",[431,400],"By default, the FAB anchors to the right, but it can optionally anchor to the bottom-left corner. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFAB } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFAB\n    label=\"Example label\"\n    :icon=\"iconPlaceholder\"\n    alignment=\"left\"\n    hide-label\n    @click=\"handleClick\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":453,"title":454,"titles":455,"content":456,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#multiple-actions","Multiple actions",[431,400],"When multiple actions are provided, the FAB becomes a trigger that opens a speed-dial speed menu of child actions. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFAB, OnyxFABItem } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFAB label=\"Example label\" :icon=\"iconPlaceholder\" hide-label>\n    \u003COnyxFABItem label=\"Action 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003COnyxFABItem label=\"Action 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003COnyxFABItem label=\"Action 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n  \u003C\u002FOnyxFAB>\n\u003C\u002Ftemplate>",{"id":458,"title":459,"titles":460,"content":461,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#custom-offset","Custom offset",[431,400],"To avoid overlapping sidebars or bottom navigation bars, customize the offset using CSS variables --onyx-fab-offset-x and --onyx-fab-offset-y. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFAB } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFAB\n    class=\"fab\"\n    label=\"Example label\"\n    :icon=\"iconPlaceholder\"\n    hide-label\n    @click=\"handleClick\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.fab {\n  --onyx-fab-offset-x: 5rem;\n  --onyx-fab-offset-y: 1rem;\n}\n\u003C\u002Fstyle>",{"id":463,"title":464,"titles":465,"content":466,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ffab#global-fab","Global FAB",[431,400],"The useGlobalFAB() composable allows pages or components to register FABs dynamically without prop drilling. The FABs in this example appear in the bottom-right corner of the browser window: \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder, iconPlus, iconX } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, useGlobalFAB } from \"sit-onyx\";\n\nconst globalFAB = useGlobalFAB();\n\nconst addFAB = () => {\n  const newId = globalFAB.items.value.length + 1;\n\n  globalFAB.add({\n    id: newId,\n    label: `Option ${newId}`,\n    icon: iconPlaceholder,\n  });\n};\n\nconst removeFAB = () => {\n  const lastId = globalFAB.items.value.at(-1)?.value.id;\n  if (lastId !== undefined) globalFAB.remove(lastId);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Add FAB\" :icon=\"iconPlus\" @click=\"addFAB\" \u002F>\n  \u003COnyxButton label=\"Remove FAB\" :icon=\"iconX\" @click=\"removeFAB\" \u002F>\n\u003C\u002Ftemplate> Prerequisites \u002F manual setup Applications using OnyxAppLayout have global FAB support preconfigured automatically. If not using OnyxAppLayout, mount the \u003COnyxGlobalFAB \u002F> component at the root of your application: \u003Cscript lang=\"ts\" setup>\nimport { OnyxGlobalFAB } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxGlobalFAB \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":468,"title":469,"titles":470,"content":471,"level":9},"\u002Fcomponents\u002Fbuttons\u002Ficon-button","Icon button",[],"An icon button serves as a compact, label-free version of a traditional button, used to trigger both primary and secondary actions. It’s a key interactive element, letting users engage quickly with content.",{"id":473,"title":400,"titles":474,"content":367,"level":19},"\u002Fcomponents\u002Fbuttons\u002Ficon-button#examples",[469],{"id":476,"title":76,"titles":477,"content":478,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ficon-button#colors",[469,400],"The icon button supports the same colors as the regular button. For further information on when to use which colors, please refer to the button documentation. \u003Cscript lang=\"ts\" setup>\nimport { iconDisc, iconTrash, iconX } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIconButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIconButton label=\"Save\" :icon=\"iconDisc\" @click=\"handleClick\" \u002F>\n  \u003COnyxIconButton label=\"Cancel\" :icon=\"iconX\" color=\"neutral\" @click=\"handleClick\" \u002F>\n  \u003COnyxIconButton label=\"Delete\" :icon=\"iconTrash\" color=\"danger\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":480,"title":481,"titles":482,"content":483,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ficon-button#loading-skeleton","Loading & Skeleton",[469,400],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F button is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIconButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIconButton label=\"Loading\" :icon=\"iconPlaceholder\" loading \u002F>\n  \u003COnyxIconButton label=\"Skeleton\" :icon=\"iconPlaceholder\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":485,"title":426,"titles":486,"content":487,"level":84},"\u002Fcomponents\u002Fbuttons\u002Ficon-button#disabled",[469,400],"The icon button can be disabled to indicate that its associated action is currently not available.\nFor an improved user experience, it should be clear to the user why the icon button is disabled. \u003Cscript lang=\"ts\" setup>\nimport { iconDisc, iconTrash, iconX } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIconButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIconButton label=\"Save\" :icon=\"iconDisc\" disabled \u002F>\n  \u003COnyxIconButton label=\"Cancel\" :icon=\"iconX\" color=\"neutral\" disabled \u002F>\n  \u003COnyxIconButton label=\"Delete\" :icon=\"iconTrash\" color=\"danger\" disabled \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":489,"title":490,"titles":491,"content":492,"level":9},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button","Split button",[],"The split button is used to have multiple actions alongside a group of similar actions. The main action will be displayed on the left and will be triggered immediately after clicking. On the right side and behind an arrow icon, there are multiple additional actions which can be individual or can extend the functionality of the main action. The split button supports the same styles as the regular button but extends the button with additional actions.",{"id":494,"title":400,"titles":495,"content":367,"level":19},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#examples",[490],{"id":497,"title":87,"titles":498,"content":499,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#primary",[490,400],"See the button documentation for when to use primary buttons. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Default\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Outline\" mode=\"outline\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Plain\" mode=\"plain\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate>",{"id":501,"title":98,"titles":502,"content":503,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#neutral",[490,400],"See the button documentation for when to use neutral buttons. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Default\" color=\"neutral\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Outline\" color=\"neutral\" mode=\"outline\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Plain\" color=\"neutral\" mode=\"plain\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate>",{"id":505,"title":108,"titles":506,"content":507,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#danger",[490,400],"See the button documentation for when to use danger buttons. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Default\" color=\"danger\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Outline\" color=\"danger\" mode=\"outline\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Danger\" color=\"danger\" mode=\"plain\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate>",{"id":509,"title":416,"titles":510,"content":511,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#icons",[490,400],"An optional icon can be placed on either the left or the right side of the label. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Left icon\" :icon=\"iconPlaceholder\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton\n    label=\"Right icon\"\n    :icon=\"iconPlaceholder\"\n    icon-position=\"right\"\n    @click=\"handleClick\"\n  >\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate>",{"id":513,"title":481,"titles":514,"content":515,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#loading-skeleton",[490,400],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. While loading, the additional actions are unavailable. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F button is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Example button\" loading>\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\n  \u003COnyxSplitButton label=\"Example button\" skeleton>\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate>",{"id":517,"title":518,"titles":519,"content":520,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsplit-button#hover","Hover",[490,400],"By default, the additional actions are opened on click but you can configure them to optionally show of hover instead. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxMenuItem, OnyxSplitButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSplitButton label=\"Example button\" trigger=\"hover\" @click=\"handleClick\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Option 1\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 2\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Option 3\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSplitButton>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":522,"title":523,"titles":524,"content":525,"level":9},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button","System button",[],"The system button triggers interactions exclusively for a parent container - not for standalone actions \u002F content - and is therefore smaller than regular buttons. For standalone usage, please prefer the regular button or icon button instead. It is commonly used for context menus, e.g. in combination with the flyout menu.",{"id":527,"title":400,"titles":528,"content":367,"level":19},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button#examples",[523],{"id":530,"title":439,"titles":531,"content":532,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button#basic",[523,400],"The system button is supported in two variants: Text or icon. A combination of both is not supported. \u003Cscript lang=\"ts\" setup>\nimport { iconMoreVertical } from \"@sit-onyx\u002Ficons\";\nimport { OnyxSystemButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSystemButton label=\"Example label\" :icon=\"iconMoreVertical\" @click=\"handleClick\" \u002F>\n  \u003COnyxSystemButton label=\"Example label\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":534,"title":76,"titles":535,"content":536,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button#colors",[523,400],"Different colors can be used, depending on the parent background to provide a good color contrast. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSystemButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSystemButton label=\"Intense\" @click=\"handleClick\" \u002F>\n  \u003COnyxSystemButton label=\"Medium\" color=\"medium\" @click=\"handleClick\" \u002F>\n  \u003COnyxSystemButton label=\"Soft\" color=\"soft\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":538,"title":426,"titles":539,"content":540,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button#disabled",[523,400],"The system button can be disabled to indicate that its associated action is currently not available.\nFor an improved user experience, it should be clear to the user why the icon button is disabled. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSystemButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSystemButton label=\"Disabled system button\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":542,"title":543,"titles":544,"content":545,"level":84},"\u002Fcomponents\u002Fbuttons\u002Fsystem-button#context","Context",[523,400],"The system button is intended to always be used as child component related to a parent to provide additional actions like copying a value, opening a link or showing a context menu. \u003Cscript lang=\"ts\" setup>\nimport { iconFileCopy, iconMail, iconPhone } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAvatar,\n  OnyxCard,\n  OnyxFlyoutMenu,\n  OnyxHeadline,\n  OnyxIcon,\n  OnyxMenuItem,\n  OnyxSystemButton,\n  OnyxTag,\n} from \"sit-onyx\";\n\nconst user = {\n  name: \"Jane Doe\",\n  role: \"Software Engineer\",\n  email: \"jane.doe@example.com\",\n  phone: \"+49 1234 56789\",\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\">\n    \u003Cdiv class=\"card__header\">\n      \u003COnyxAvatar :full-name=\"user.name\" \u002F>\n\n      \u003Cdiv class=\"card__content\">\n        \u003Cdiv class=\"card__headline\">\n          \u003COnyxHeadline is=\"h3\">{{ user.name }}\u003C\u002FOnyxHeadline>\n\n          \u003COnyxFlyoutMenu label=\"Actions\">\n            \u003Ctemplate #options>\n              \u003COnyxMenuItem label=\"Action 1\" \u002F>\n              \u003COnyxMenuItem label=\"Action 2\" \u002F>\n              \u003COnyxMenuItem label=\"Action 3\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxFlyoutMenu>\n        \u003C\u002Fdiv>\n\n        \u003COnyxTag :label=\"user.role\" color=\"primary\" density=\"compact\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card__details\">\n      \u003Cdiv class=\"detail\">\n        \u003COnyxIcon :icon=\"iconMail\" color=\"neutral\" \u002F>\n        \u003Cspan>{{ user.email }}\u003C\u002Fspan>\n        \u003COnyxSystemButton label=\"Copy\" :icon=\"iconFileCopy\" \u002F>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"detail\">\n        \u003COnyxIcon :icon=\"iconPhone\" color=\"neutral\" \u002F>\n        \u003Cspan>{{ user.phone }}\u003C\u002Fspan>\n        \u003COnyxSystemButton label=\"Copy\" :icon=\"iconFileCopy\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  padding: 0;\n  gap: 0;\n\n  &__header {\n    display: flex;\n    align-items: center;\n    gap: var(--onyx-card-gap);\n    flex-wrap: wrap;\n    padding: var(--onyx-card-padding);\n    background-color: var(--onyx-color-base-background-tinted);\n    border-top-left-radius: inherit;\n    border-top-right-radius: inherit;\n  }\n\n  &__headline {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--onyx-card-gap);\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n    flex-grow: 1;\n  }\n\n  &__details {\n    padding: var(--onyx-card-padding);\n    border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-card-gap);\n  }\n}\n\n.detail {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--onyx-card-gap);\n  color: var(--onyx-color-text-icons-neutral-medium);\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":547,"title":548,"titles":549,"content":550,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group","Checkbox group",[],"Checkboxes are a fundamental UI element, that allows users to make a binary selection. They are commonly used for tasks such as selecting multiple items, opting into services or confirming and agreeing. The checkbox group is a convenience component to simplify the management of multiple related options. For individual use, you can also use the checkbox component.",{"id":552,"title":400,"titles":553,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#examples",[548],{"id":555,"title":439,"titles":556,"content":557,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#basic",[548,400],"Each individual checkbox option supports different properties to e.g. make it required, disabled, loading etc. The checkbox group itself will manage the checked state of all checkboxes. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOptions = ref\u003Cnumber[]>([2]);\n\nconst options = [\n  { label: \"Default\", value: 1 },\n  { label: \"Initially checked\", value: 2 },\n  { label: \"Required\", value: 3, required: true },\n  { label: \"Disabled\", value: 4, disabled: true },\n  { label: \"Loading\", value: 5, loading: true },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup v-model=\"selectedOptions\" label=\"Example label\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":559,"title":560,"titles":561,"content":562,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#horizontal","Horizontal",[548,400],"The checkbox group can optionally be used in horizontal orientation. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOptions = ref\u003Cnumber[]>([]);\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup\n    v-model=\"selectedOptions\"\n    label=\"Example label\"\n    orientation=\"horizontal\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate>",{"id":564,"title":565,"titles":566,"content":567,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#check-all","Check all",[548,400],"A \"Select all\" option is supported that allows for easily checking \u002F unchecking all options. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOptions = ref\u003Cnumber[]>([1]);\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup v-model=\"selectedOptions\" label=\"Example label\" :options with-check-all \u002F>\n\u003C\u002Ftemplate>",{"id":569,"title":426,"titles":570,"content":571,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#disabled",[548,400],"The whole group or only individual options can be disabled to indicate that they can currently not be checked. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup label=\"Example label\" :options disabled \u002F>\n\u003C\u002Ftemplate>",{"id":573,"title":574,"titles":575,"content":576,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#skeleton","Skeleton",[548,400],"The skeleton can be used on initial load to indicate that the data for the checkbox group is currently loading.\nThe number of skeleton options is customizable. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup label=\"Example label\" :skeleton=\"3\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":578,"title":579,"titles":580,"content":581,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#truncation","Truncation",[548,400],"By default, the checkboxes are truncated with ellipsis (...) if the label is too long to fit into the available width. Alternatively, multiline truncation can be used to wrap the label into multi lines instead. The truncation can be configured for the whole group or individual checkboxes. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOptions = ref\u003Cnumber[]>([]);\n\nconst options = [\n  { label: \"Very long label that should be truncated 1\", value: 1 },\n  { label: \"Very long label that should be truncated 2\", value: 2 },\n  { label: \"Very long label that should be truncated 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup v-model=\"selectedOptions\" class=\"group\" label=\"Example label\" :options \u002F>\n  \u003COnyxCheckboxGroup\n    v-model=\"selectedOptions\"\n    class=\"group\"\n    label=\"Example label\"\n    truncation=\"multiline\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n\u002F\u002F these styles are only used for this example, remove them when copying\n.group {\n  width: 16rem;\n}\n\u003C\u002Fstyle>",{"id":583,"title":584,"titles":585,"content":586,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fcheckbox-group#label-tooltip","Label tooltip",[548,400],"An additional info tooltip can be displayed next to the label to e.g. show additional information or details about the options. \u003Cscript lang=\"ts\" setup>\nimport { CheckboxGroupOption, OnyxCheckboxGroup } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOptions = ref\u003Cnumber[]>([]);\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies CheckboxGroupOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCheckboxGroup\n    v-model=\"selectedOptions\"\n    label=\"Example label\"\n    label-tooltip=\"Example tooltip text\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":588,"title":589,"titles":590,"content":591,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2","Date picker (v2)",[],"The date picker allows users to select individual dates, multiple selections, or continuous date ranges.",{"id":593,"title":400,"titles":594,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#examples",[589],{"id":596,"title":597,"titles":598,"content":599,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#selection-modes","Selection modes",[589,400],"The date picker supports single, multi, and range selection modes. \u003Cscript lang=\"ts\" setup>\nimport { DateRange, OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\nconst dates = ref\u003CDate[]>([]);\nconst range = ref\u003CDateRange>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" label=\"Single\" \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"dates\" label=\"Multiple\" selection-mode=\"multiple\" \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"range\" label=\"Range\" selection-mode=\"range\" \u002F>\n  \u003COnyxUnstableDatePickerV2\n    v-model=\"range\"\n    label=\"Range with multi view\"\n    selection-mode=\"range\"\n    multi-view\n  \u002F>\n\u003C\u002Ftemplate>",{"id":601,"title":602,"titles":603,"content":604,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#min-max-and-disabled-dates","Min, max and disabled dates",[589,400],"Constrain selectable dates with min and max bounds, or provide an array of disabled dates (such as holidays or weekends). In this example, only the past and upcoming 7 days are selectable, with Wednesdays disabled: \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\n\u002F\u002F dynamically determine min and max date based on today\nconst today = new Date();\n\nconst min = new Date(today);\nmin.setDate(min.getDate() - 7);\n\nconst max = new Date(today);\nmax.setDate(max.getDate() + 7);\n\nconst disabledDays = (date: Date) => {\n  \u002F\u002F disable individual days, e.g. every Wednesday\n  return date.getDay() === 3;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" label=\"Date\" :min :max :disabled-days \u002F>\n\u003C\u002Ftemplate>",{"id":606,"title":607,"titles":608,"content":609,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#calendar-weeks","Calendar weeks",[589,400],"Calendar week numbers can be displayed alongside days. In range selection mode, clicking a week number selects the full week. \u003Cscript lang=\"ts\" setup>\nimport { DateRange, OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst range = ref\u003CDateRange>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2\n    v-model=\"range\"\n    label=\"Date\"\n    selection-mode=\"range\"\n    show-calendar-weeks\n  \u002F>\n\u003C\u002Ftemplate>",{"id":611,"title":612,"titles":613,"content":614,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#readonly-disabled","Readonly & disabled",[589,400],"Use readonly or disabled states when user input is restricted. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(new Date());\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 v-model=\"value\" label=\"Readonly\" readonly \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"value\" label=\"Disabled\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":616,"title":421,"titles":617,"content":618,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#loading-skeleton",[589,400],"The loading state indicates asynchronous operations following interaction, while skeleton renders a loading placeholder on initial page load. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2 } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 label=\"Loading\" loading \u002F>\n  \u003COnyxUnstableDatePickerV2 label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":620,"title":621,"titles":622,"content":623,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#message","Message",[589,400],"Supports hint, error, and success messages with optional tooltip context. When multiple states apply, errors take precedence. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2\n    v-model=\"date\"\n    label=\"Date\"\n    :message=\"{ label: 'Message', tooltipText: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxUnstableDatePickerV2\n    v-model=\"date\"\n    label=\"Date\"\n    :error=\"{ label: 'Custom error', tooltipText: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxUnstableDatePickerV2\n    v-model=\"date\"\n    label=\"Date\"\n    :success=\"{ label: 'Success', tooltipText: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":625,"title":626,"titles":627,"content":628,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#slots","Slots",[589,400],"Custom slots are provided for prefix and suffix content. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxIcon,\n  OnyxSelect,\n  OnyxUnstableDatePickerV2,\n  OnyxUnstableFormElementAction,\n  SelectOption,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\nconst selectOptions = [\n  { label: \"Foo\", value: \"foo\" },\n  { label: \"Bar\", value: \"bar\" },\n] satisfies SelectOption[];\n\nconst selectedOption = ref(selectOptions[0].value);\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" label=\"Date\">\n    \u003Ctemplate #leading>\n      \u003COnyxUnstableFormElementAction\n        label=\"Example action\"\n        :icon=\"iconPlaceholder\"\n        size=\"lg\"\n        @click=\"handleActionClick\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailing>\n      \u003COnyxSelect\n        v-model=\"selectedOption\"\n        label=\"Unit\"\n        list-label=\"Available units\"\n        alignment=\"right\"\n        :options=\"selectOptions\"\n        hide-clear-icon\n        hide-label\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxUnstableDatePickerV2>\n\u003C\u002Ftemplate>",{"id":630,"title":631,"titles":632,"content":633,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#label-positions","Label positions",[589,400],"Labels can be aligned top, left, or floating to accommodate various form layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2 } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" label=\"Top\" \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxUnstableDatePickerV2 v-model=\"date\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate>",{"id":635,"title":636,"titles":637,"content":638,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker-v2#date-and-time-picker","Date and time picker",[589,400],"To select both date and time, pair the date picker with an OnyxTimePicker. Separating the two inputs ensures clearer usability across desktop and mobile screens. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableDatePickerV2, OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\nconst date = ref\u003CDate>();\nconst time = ref\u003Cstring>();\n\n\u002F\u002F use this computed value for the combined date + time value\nconst dateTime = computed(() => {\n  if (!date.value || !time.value) return date.value;\n  const value = new Date(date.value);\n  const [hours, minutes] = time.value.split(\":\").map((i) => Number.parseInt(i));\n  value.setHours(hours, minutes);\n  return value;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxUnstableDatePickerV2 v-model=\"date\" class=\"onyx-grid-span-2\" label=\"Date\" \u002F>\n    \u003COnyxUnstableTimePicker v-model=\"time\" class=\"onyx-grid-span-2\" label=\"Time\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":640,"title":641,"titles":642,"content":643,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker","Date picker",[],"The date picker component can be used to select a date or date-time.",{"id":645,"title":400,"titles":646,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker#examples",[641],{"id":648,"title":649,"titles":650,"content":651,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker#date","Date",[641,400],"\u003Cscript lang=\"ts\" setup>\nimport { OnyxDatePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDatePicker v-model=\"date\" label=\"Date\" \u002F>\n\u003C\u002Ftemplate>",{"id":653,"title":654,"titles":655,"content":656,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fdate-picker#datetime","Datetime",[641,400],"When selecting date and time, the local timezone of the user will be used. \u003Cscript lang=\"ts\" setup>\nimport { OnyxDatePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst datetime = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDatePicker v-model=\"datetime\" label=\"Datetime\" type=\"datetime-local\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":658,"title":659,"titles":660,"content":661,"level":9},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload","File upload",[],"The file upload component is used to support selecting \u002F uploading one or multiple files with drag-and-drop support.",{"id":663,"title":400,"titles":664,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#examples",[659],{"id":666,"title":667,"titles":668,"content":669,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#single","Single",[659,400],"A single file can be selected by default. You can optionally define which file types should be accepted and which max. file size to use. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFileUpload } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F create an initial dummy file for this example\nconst exampleFile = new File([iconPlaceholder], \"icon-placeholder.svg\", { type: \"image\u002Fsvg+xml\" });\n\nconst file = ref\u003CFile>(exampleFile);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload v-model=\"file\" :accept=\"['.jpg', '.png', '.svg']\" max-size=\"4MiB\" \u002F>\n\u003C\u002Ftemplate>",{"id":671,"title":672,"titles":673,"content":674,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#multiple","Multiple",[659,400],"The file upload also supports selecting multiple files. You can optionally restrict how many total files can be selected and which max. total file size to use across all selected files. When selecting files multiple times, they will be added to the selection by default. Use the replace property to replace the current selection with the new files. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFileUpload } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst files = ref\u003CFile[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload\n    v-model=\"files\"\n    :accept=\"['.jpg', '.png', '.svg']\"\n    max-size=\"4MiB\"\n    max-total-size=\"12MiB\"\n    :max-count=\"4\"\n    multiple\n  \u002F>\n\u003C\u002Ftemplate>",{"id":676,"title":677,"titles":678,"content":679,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#sizes","Sizes",[659,400],"The file upload supports several visual sizes so it can be used for different use cases \u002F layouts. \u003Cscript lang=\"ts\" setup>\nimport { FileType, OnyxFileUpload } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst file = ref\u003CFile>();\n\nconst accept: FileType[] = [\".jpg\", \".png\", \".svg\"];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload v-model=\"file\" :accept \u002F>\n  \u003COnyxFileUpload v-model=\"file\" size=\"medium\" :accept \u002F>\n  \u003COnyxFileUpload v-model=\"file\" size=\"small\" :accept \u002F>\n\u003C\u002Ftemplate>",{"id":681,"title":682,"titles":683,"content":684,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#custom-file-actions","Custom file actions",[659,400],"The card displayed for every file can be customized if needed to e.g. support additional file actions. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder, iconTrash } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxFileCard,\n  OnyxFileUpload,\n  OnyxFlyoutMenu,\n  OnyxIconButton,\n  OnyxMenuItem,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F create an initial dummy file for this example\nconst exampleFile = new File([iconPlaceholder], \"icon-placeholder.svg\", { type: \"image\u002Fsvg+xml\" });\n\nconst files = ref\u003CFile[]>([exampleFile]);\n\nconst removeFile = (fileToRemove: File) => {\n  files.value = files.value.filter((file) => file !== fileToRemove);\n};\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload v-model=\"files\" multiple>\n    \u003Ctemplate #default=\"{ file, props }\">\n      \u003COnyxFileCard v-bind=\"props\">\n        \u003Ctemplate #actions>\n          \u003COnyxFlyoutMenu label=\"Actions\">\n            \u003Ctemplate #options>\n              \u003COnyxMenuItem label=\"Open\" @click=\"handleActionClick\" \u002F>\n              \u003COnyxMenuItem label=\"Print\" @click=\"handleActionClick\" \u002F>\n              \u003COnyxMenuItem label=\"Share\" @click=\"handleActionClick\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxFlyoutMenu>\n\n          \u003COnyxIconButton\n            label=\"Remove File\"\n            :icon=\"iconTrash\"\n            color=\"danger\"\n            @click=\"removeFile(file)\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxFileCard>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFileUpload>\n\u003C\u002Ftemplate>",{"id":686,"title":621,"titles":687,"content":688,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#message",[659,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxFileUpload } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\" \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxFileUpload\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxFileUpload :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\" \u002F>\n\u003C\u002Ftemplate>",{"id":690,"title":691,"titles":692,"content":693,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#list-types","List types",[659,400],"The list of selected files can be customized using the listType property to e.g. define a maximum height or use a show\u002Fhide button.\nThis examples shows a custom visualization using a modal. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder, iconTrash } from \"@sit-onyx\u002Ficons\";\nimport {\n  MediaType,\n  OnyxFileCard,\n  OnyxFileUpload,\n  OnyxIconButton,\n  OnyxModal,\n  OnyxSystemButton,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F create an initial dummy file for this example\nconst exampleFile = new File([iconPlaceholder], \"icon-placeholder.svg\", { type: \"image\u002Fsvg+xml\" });\n\nconst files = ref\u003CFile[]>([exampleFile]);\nconst isModalOpen = ref(false);\n\nconst removeFile = (fileToRemove: File) => {\n  files.value = files.value.filter((file) => file !== fileToRemove);\n  if (!files.value.length) isModalOpen.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"upload\">\n    \u003COnyxFileUpload v-model=\"files\" list-type=\"hidden\" multiple \u002F>\n    \u003COnyxSystemButton\n      v-if=\"files.length\"\n      class=\"upload__button\"\n      label=\"Show files\"\n      @click=\"isModalOpen = true\"\n    \u002F>\n\n    \u003COnyxModal v-model:open=\"isModalOpen\" label=\"Selected files\">\n      \u003Cdiv class=\"files\">\n        \u003COnyxFileCard\n          v-for=\"file in files\"\n          :key=\"file.name\"\n          :filename=\"file.name\"\n          :size=\"file.size\"\n          :type=\"file.type as MediaType\"\n        >\n          \u003Ctemplate #actions>\n            \u003COnyxIconButton\n              label=\"Remove file\"\n              :icon=\"iconTrash\"\n              color=\"danger\"\n              @click=\"removeFile(file)\"\n            \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxFileCard>\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.upload {\n  width: max-content;\n  max-width: 100%;\n\n  &__button {\n    display: block;\n    margin-top: var(--onyx-density-xs);\n    margin-inline: auto;\n  }\n}\n\n.files {\n  padding: var(--onyx-density-sm) var(--onyx-modal-padding-inline);\n  display: flex;\n  flex-direction: column;\n  gap: var(--onyx-density-sm);\n}\n\u003C\u002Fstyle>",{"id":695,"title":631,"titles":696,"content":697,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ffile-upload#label-positions",[659,400],"The flyout label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFileUpload } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileUpload label=\"Top\" \u002F>\n  \u003COnyxFileUpload :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxFileUpload :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxFileUpload :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"id":699,"title":700,"titles":701,"content":702,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fform","Form",[],"Forms collect user input across fields such as text inputs, selects, and steppers. With integrated validation and error states, the form component simplifies complex data collection. Technically, our form component wraps the native HTML \u003Cform> element and adds utility features like cascading disabled states across child inputs.",{"id":704,"title":705,"titles":706,"content":707,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fform#form-validation","Form validation",[700],"All Onyx form components integrate with native HTML form validation. External validation libraries are usually unnecessary. Submitting the form triggers validation across all child inputs and surfaces corresponding error messages. The submit event fires only when all fields satisfy validation constraints. We advise against disabling form submit buttons. Disabling the button prevents users from discovering validation errors upon click. Keeping the submit button enabled allows the form to highlight invalid fields and guide correction when submitted. Form reset buttons are discouraged. See the MDN reset documentation for details.",{"id":709,"title":400,"titles":710,"content":711,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fform#examples",[700],"The examples below use the Onyx grid system for responsive multi-column layouts.",{"id":713,"title":439,"titles":714,"content":715,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fform#basic",[700,400],"Basic form demonstrating validation constraints. Click \"Submit\" with empty fields to trigger validation highlights: \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxForm, OnyxInput, OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype FormState = {\n  email: string;\n  age?: number;\n};\n\nconst state = ref\u003CPartial\u003CFormState>>({});\n\nconst handleSubmit = () => {\n  \u002F\u002F when passing the data to other components, you most likely want to make a copy of the data\n  \u002F\u002F so the object is not passed by reference to avoid side effects\n  \u002F\u002F the type cast is considered safe since the submit is only triggered when all required validations is passed\n  const data = structuredClone(state.value) as FormState;\n\n  window.alert(`Form submitted: ${JSON.stringify(data, null, 2)}`);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxForm class=\"onyx-grid\" reserve-message-space @submit.prevent=\"handleSubmit\">\n    \u003COnyxInput v-model=\"state.email\" class=\"onyx-grid-span-4\" label=\"Email\" type=\"email\" required \u002F>\n\n    \u003COnyxStepper\n      v-model=\"state.age\"\n      class=\"onyx-grid-span-4\"\n      label=\"Age\"\n      :min=\"18\"\n      :maxlength=\"99\"\n    \u002F>\n\n    \u003COnyxButton class=\"onyx-grid-span-full\" label=\"Submit\" type=\"submit\" \u002F>\n  \u003C\u002FOnyxForm>\n\u003C\u002Ftemplate>",{"id":717,"title":718,"titles":719,"content":720,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fform#external-submit-buttons","External submit buttons",[700,400],"Some layouts require placing the submit action outside the form element (e.g. inside a modal footer). To connect an external button, assign an id to the form and set the form attribute on the button to match that id. Validation and submission behaviors work identically: \u003Cscript lang=\"ts\" setup>\nimport { OnyxBottomBar, OnyxButton, OnyxForm, OnyxInput, OnyxModal, OnyxStepper } from \"sit-onyx\";\nimport { ref, useId } from \"vue\";\n\ntype FormState = {\n  email: string;\n  age?: number;\n};\n\nconst isModalOpen = ref(false);\nconst state = ref\u003CPartial\u003CFormState>>({});\n\nconst formId = useId();\n\nconst handleSubmit = () => {\n  \u002F\u002F when passing the data to other components, you most likely want to make a copy of the data\n  \u002F\u002F so the object is not passed by reference to avoid side effects\n  \u002F\u002F the type cast is considered safe since the submit is only triggered when all required validations is passed\n  const data = structuredClone(state.value) as FormState;\n\n  window.alert(`Form submitted: ${JSON.stringify(data, null, 2)}`);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Open modal\" @click=\"isModalOpen = true\" \u002F>\n\n  \u003COnyxModal v-model:open=\"isModalOpen\" class=\"modal\" label=\"Example modal label\">\n    \u003COnyxForm\n      :id=\"formId\"\n      class=\"onyx-grid modal__content\"\n      reserve-message-space\n      @submit.prevent=\"handleSubmit\"\n    >\n      \u003COnyxInput\n        v-model=\"state.email\"\n        class=\"onyx-grid-span-4\"\n        label=\"Email\"\n        type=\"email\"\n        required\n      \u002F>\n      \u003COnyxStepper\n        v-model=\"state.age\"\n        class=\"onyx-grid-span-4\"\n        label=\"Age\"\n        :min=\"18\"\n        :maxlength=\"99\"\n      \u002F>\n    \u003C\u002FOnyxForm>\n\n    \u003Ctemplate #footer>\n      \u003COnyxBottomBar>\n        \u003COnyxButton label=\"Cancel\" color=\"neutral\" mode=\"plain\" @click=\"isModalOpen = false\" \u002F>\n        \u003COnyxButton label=\"Submit\" type=\"submit\" :form=\"formId\" \u002F>\n      \u003C\u002FOnyxBottomBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxModal>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 24rem;\n  container-type: inline-size;\n\n  &__content {\n    padding: var(--onyx-density-xl) var(--onyx-modal-padding-inline);\n  }\n}\n\u003C\u002Fstyle>",{"id":722,"title":723,"titles":724,"content":725,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fform#required-optional-marker","Required \u002F optional marker",[700,400],"Required fields show an asterisk by default. When the vast majority of fields are required, set requiredMarker=\"optional\" to label the rare optional fields instead. Maintain one consistent marker convention per form. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxForm, OnyxInput, OnyxStepper } from \"sit-onyx\";\n\nconst handleSubmit = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxForm\n    class=\"onyx-grid\"\n    required-marker=\"optional\"\n    reserve-message-space\n    @submit.prevent=\"handleSubmit\"\n  >\n    \u003COnyxInput class=\"onyx-grid-span-4\" label=\"Email\" type=\"email\" required \u002F>\n    \u003COnyxStepper class=\"onyx-grid-span-4\" label=\"Age\" :min=\"18\" :maxlength=\"99\" \u002F>\n\n    \u003COnyxButton class=\"onyx-grid-span-full\" label=\"Submit\" type=\"submit\" \u002F>\n  \u003C\u002FOnyxForm>\n\u003C\u002Ftemplate>",{"id":727,"title":426,"titles":728,"content":729,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fform#disabled",[700,400],"Disabling the form cascades the disabled state down to all child inputs, which is ideal during asynchronous submit operations. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxForm, OnyxInput, OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isLoading = ref(true);\n\nconst handleSubmit = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxForm\n    class=\"onyx-grid\"\n    :disabled=\"isLoading\"\n    reserve-message-space\n    @submit.prevent=\"handleSubmit\"\n  >\n    \u003COnyxInput class=\"onyx-grid-span-4\" label=\"Email\" type=\"email\" required \u002F>\n    \u003COnyxStepper class=\"onyx-grid-span-4\" label=\"Age\" :min=\"18\" :maxlength=\"99\" \u002F>\n\n    \u003COnyxButton class=\"onyx-grid-span-full\" label=\"Submit\" type=\"submit\" :loading=\"isLoading\" \u002F>\n  \u003C\u002FOnyxForm>\n\u003C\u002Ftemplate>",{"id":731,"title":574,"titles":732,"content":733,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fform#skeleton",[700,400],"Setting the skeleton prop renders skeletons for all nested fields during initial data fetch. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxForm, OnyxInput, OnyxStepper } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxForm class=\"onyx-grid\" reserve-message-space skeleton>\n    \u003COnyxInput class=\"onyx-grid-span-4\" label=\"Email\" type=\"email\" required \u002F>\n    \u003COnyxStepper class=\"onyx-grid-span-4\" label=\"Age\" :min=\"18\" :maxlength=\"99\" \u002F>\n    \u003COnyxButton class=\"onyx-grid-span-full\" label=\"Submit\" type=\"submit\" \u002F>\n  \u003C\u002FOnyxForm>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":735,"title":736,"titles":737,"content":738,"level":9},"\u002Fcomponents\u002Fform-elements\u002Finput","Input",[],"Text inputs are essential UI elements where users can enter textual information. These components play a fundamental role in facilitating user interactions and data input within applications and websites. For numeric values, please use the stepper instead.",{"id":740,"title":400,"titles":741,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Finput#examples",[736],{"id":743,"title":439,"titles":744,"content":745,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#basic",[736,400],"\u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput v-model=\"value\" label=\"Example label\" placeholder=\"Placeholder...\" required \u002F>\n\u003C\u002Ftemplate>",{"id":747,"title":748,"titles":749,"content":750,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#readonly-disabled","Readonly & Disabled",[736,400],"Readonly and disabled are used to indicate that the input is currently not editable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"Example value\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput v-model=\"value\" label=\"Readonly\" readonly \u002F>\n  \u003COnyxInput v-model=\"value\" label=\"Disabled\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":752,"title":753,"titles":754,"content":755,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#min-and-max-length","Min and max length",[736,400],"When a min or maxlength is defined, the user must enter at least min and at most max characters before the input is valid. Otherwise the input is invalid and a proper error message is displayed. Optionally, a character counter can be displayed. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput v-model=\"value\" label=\"Example label\" :minlength=\"8\" :maxlength=\"32\" with-counter \u002F>\n\u003C\u002Ftemplate>",{"id":757,"title":481,"titles":758,"content":759,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#loading-skeleton",[736,400],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput label=\"Loading\" loading \u002F>\n  \u003COnyxInput label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":761,"title":621,"titles":762,"content":763,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#message",[736,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput\n    v-model=\"value\"\n    label=\"Example label\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxInput\n    v-model=\"value\"\n    label=\"Example label\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxInput\n    v-model=\"value\"\n    label=\"Example label\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":765,"title":626,"titles":766,"content":767,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#slots",[736,400],"Multiple slots are supported to pass in custom content if needed. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxIcon,\n  OnyxInput,\n  OnyxSelect,\n  OnyxUnstableFormElementAction,\n  SelectOption,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\nconst unitOptions = [\n  { label: \"kg\", value: \"kg\" },\n  { label: \"g\", value: \"g\" },\n] satisfies SelectOption[];\n\nconst unit = ref(unitOptions[0].value);\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput v-model=\"value\" label=\"Example label\" disable-slot-padding>\n    \u003Ctemplate #leading>\n      \u003COnyxUnstableFormElementAction\n        label=\"Example action\"\n        :icon=\"iconPlaceholder\"\n        size=\"lg\"\n        @click=\"handleActionClick\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailing>\n      \u003COnyxSelect\n        v-model=\"unit\"\n        label=\"Unit\"\n        list-label=\"Available units\"\n        alignment=\"right\"\n        :options=\"unitOptions\"\n        hide-clear-icon\n        hide-label\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxInput>\n\u003C\u002Ftemplate>",{"id":769,"title":770,"titles":771,"content":772,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#password","Password",[736,400],"For password inputs, an additional button is displayed that allows the user to reveal the entered password. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"very-secret-password\");\nconst showPassword = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!--\n    The \"v-model:show-password\" is optional.\n    If you don't need to manually control the password visibility, you can remove it so its managed internally.\n  -->\n  \u003COnyxInput\n    v-model=\"value\"\n    v-model:show-password=\"showPassword\"\n    label=\"Password\"\n    type=\"password\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":774,"title":775,"titles":776,"content":777,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#copy","Copy",[736,400],"To implement a copy-to-clipboard feature, you can manually populate the #trailingIcons slot and utilize the useCopy composable. This allows you to trigger the copy mechanism. \u003Cscript lang=\"ts\" setup>\nimport { iconCheckSmall, iconCopy } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIcon, OnyxInput, OnyxUnstableFormElementAction, useCopy } from \"sit-onyx\";\nimport { ref, computed } from \"vue\";\n\nconst textValue = ref(\"This text can be copied!\");\n\nconst { copyStatus, copy: handleCopy } = useCopy({ source: textValue });\n\nconst successMessage = computed(() => {\n  return copyStatus.value === \"success\" ? \"Copied successfully!\" : undefined;\n});\n\nconst errorMessage = computed(() => {\n  return copyStatus.value === \"error\" ? \"Failed to copy.\" : undefined;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput\n    v-model=\"textValue\"\n    label=\"Copyable value\"\n    :success=\"successMessage\"\n    :error=\"errorMessage\"\n  >\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxUnstableFormElementAction\n        v-if=\"textValue.length && copyStatus !== 'success'\"\n        class=\"onyx-input__copy\"\n        label=\"Copy to clipboard\"\n        :icon=\"iconCopy\"\n        @click=\"handleCopy\"\n      \u002F>\n      \u003COnyxIcon v-if=\"copyStatus === 'success'\" :icon=\"iconCheckSmall\" color=\"success\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxInput>\n\u003C\u002Ftemplate>",{"id":779,"title":631,"titles":780,"content":781,"level":84},"\u002Fcomponents\u002Fform-elements\u002Finput#label-positions",[736,400],"The input label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput v-model=\"value\" label=\"Top\" \u002F>\n  \u003COnyxInput v-model=\"value\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxInput v-model=\"value\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxInput v-model=\"value\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":783,"title":784,"titles":785,"content":786,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fradio-group","Radio group",[],"Radio buttons in UI design are interactive elements that allow users to make a single selection from a set of mutually exclusive options. Users can choose only one option at the time, making radio buttons ideal for scenarios where a single, distinct choice is required.",{"id":788,"title":400,"titles":789,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#examples",[784],{"id":791,"title":439,"titles":792,"content":793,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#basic",[784,400],"Each individual radio button supports different properties to e.g. make it required, disabled, loading etc. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOption = ref\u003Cnumber>(2);\n\nconst options = [\n  { label: \"Default\", value: 1 },\n  { label: \"Initially checked\", value: 2 },\n  { label: \"Disabled\", value: 3, disabled: true },\n  { label: \"Loading\", value: 4, loading: true },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup v-model=\"selectedOption\" label=\"Example label\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":795,"title":560,"titles":796,"content":797,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#horizontal",[784,400],"The radio group can optionally be used in horizontal orientation. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOption = ref\u003Cnumber>();\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup\n    v-model=\"selectedOption\"\n    label=\"Example label\"\n    orientation=\"horizontal\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate>",{"id":799,"title":426,"titles":800,"content":801,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#disabled",[784,400],"The whole group or only individual options can be disabled to indicate that they can currently not be checked. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup label=\"Example label\" :options disabled \u002F>\n\u003C\u002Ftemplate>",{"id":803,"title":574,"titles":804,"content":805,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#skeleton",[784,400],"The skeleton can be used on initial load to indicate that the data for the radio group is currently loading.\nThe number of skeleton options is customizable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup label=\"Example label\" :skeleton=\"3\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":807,"title":579,"titles":808,"content":809,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#truncation",[784,400],"By default, the radio buttons are truncated with ellipsis (...) if the label is too long to fit into the available width. Alternatively, multiline truncation can be used to wrap the label into multi lines instead. The truncation can be configured for the whole group or individual radio buttons. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOption = ref\u003Cnumber>();\n\nconst options = [\n  { label: \"Very long label that should be truncated 1\", value: 1 },\n  { label: \"Very long label that should be truncated 2\", value: 2 },\n  { label: \"Very long label that should be truncated 3\", value: 3 },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup v-model=\"selectedOption\" class=\"group\" label=\"Example label\" :options \u002F>\n  \u003COnyxRadioGroup\n    v-model=\"selectedOption\"\n    class=\"group\"\n    label=\"Example label\"\n    truncation=\"multiline\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n\u002F\u002F these styles are only used for this example, remove them when copying\n.group {\n  width: 16rem;\n}\n\u003C\u002Fstyle>",{"id":811,"title":584,"titles":812,"content":813,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fradio-group#label-tooltip",[784,400],"An additional info tooltip can be displayed next to the label to e.g. show additional information or details about the radio buttons. \u003Cscript lang=\"ts\" setup>\nimport { OnyxRadioGroup, RadioButtonOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedOption = ref\u003Cnumber>();\n\nconst options = [\n  { label: \"Option 1\", value: 1 },\n  { label: \"Option 2\", value: 2 },\n  { label: \"Option 3\", value: 3 },\n] satisfies RadioButtonOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxRadioGroup\n    v-model=\"selectedOption\"\n    label=\"Example label\"\n    label-tooltip=\"Example tooltip text\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":815,"title":816,"titles":817,"content":818,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fselect","Select",[],"The select is a fundamental element utilized across various components such as dropdowns, navigation bars, pagination, tables, etc. It provides the users with the ability to open a small modal window, facilitating single or multi-selection based on the context in which it is employed.",{"id":820,"title":400,"titles":821,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fselect#examples",[816],{"id":823,"title":439,"titles":824,"content":825,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#basic",[816,400],"A single value can be selected out of all available options by default. \u003Cscript lang=\"ts\" setup>\nimport { iconApplePhone, iconAppleTabletLandscape, iconComputer } from \"@sit-onyx\u002Ficons\";\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\nconst options = [\n  { label: \"Phone\", value: \"phone\", icon: iconApplePhone },\n  { label: \"Tablet\", value: \"tablet\", icon: iconAppleTabletLandscape },\n  { label: \"Computer\", value: \"computed\", icon: iconComputer },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    placeholder=\"Placeholder...\"\n    :options\n    required\n  \u002F>\n\u003C\u002Ftemplate>",{"id":827,"title":672,"titles":828,"content":829,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#multiple",[816,400],"The select also supports selecting multiple values. A \"Select all\" option can optionally be displayed to allow the user to select all available options with a single action. Text mode Different modes are supported for displaying the selected values: A summary (default) that just shows the number of selected options and a preview mode that shows the labels of all selected options. For full flexibility, the valueLabel property can be used to define a custom value to be displayed for the current selection. Selection order Selected options are automatically sorted first after selecting, closing and re-opening the flyout. You can disable this behavior using the keepSelectionOrder property so the options keep their original order. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Mango\", value: \"mango\" },\n  { label: \"Kiwi\", value: \"kiwi\" },\n  { label: \"Orange\", value: \"orange\" },\n  { label: \"Papaya\", value: \"papaya\" },\n  { label: \"Apricot\", value: \"apricot\" },\n  { label: \"Lemon\", value: \"lemon\" },\n  { label: \"Cranberry\", value: \"cranberry\" },\n  { label: \"Avocado\", value: \"avocado\" },\n  { label: \"Cherry\", value: \"cherry\" },\n  { label: \"Coconut\", value: \"coconut\" },\n  { label: \"Lychee\", value: \"lychee\" },\n  { label: \"Melon\", value: \"melon\" },\n  { label: \"Raspberry\", value: \"raspberry\" },\n  { label: \"Strawberry\", value: \"strawberry\" },\n] satisfies SelectOption[];\n\n\u002F\u002F for this example, we pre-select a few options initially\nconst values = ref\u003Cstring[]>(options.slice(0, 6).map((option) => option.value));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"values\"\n    label=\"Summary mode\"\n    list-label=\"Available options\"\n    :options\n    multiple\n    with-check-all\n  \u002F>\n\n  \u003COnyxSelect\n    v-model=\"values\"\n    label=\"Preview mode\"\n    list-label=\"Available options\"\n    text-mode=\"preview\"\n    :options\n    multiple\n    with-check-all\n  \u002F>\n\u003C\u002Ftemplate>",{"id":831,"title":832,"titles":833,"content":834,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#search","Search",[816,400],"An additional search input can be enabled to support filtering the options. The search is automatically cleared when the flyout closes. If needed, you can access or change the current search term by binding the v-model:search-term property. When used in combination with multiselect and the \"Select all\" option, an additional \"Select filtered\" option is supported to select all options that are matching the current search term. Default search The default search logic filters the options based on their label (not case-sensitive). \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst values = ref\u003Cstring[]>([]);\n\nconst options = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Mango\", value: \"mango\" },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"values\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :options\n    multiple\n    with-search\n    with-check-all\n  \u002F>\n\u003C\u002Ftemplate>\nCustom search logic For full flexibility, the internal default search logic can be disabled so you can filter the options manually. Since the passed options only include the filtered options with this approach, it is mandatory that you manage the valueLabel property yourself so that the current selection is still displayed, even if it is currently not included in the filtered options. \u003Cscript lang=\"ts\" setup>\nimport { normalizedIncludes, OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\nconst allOptions = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Mango\", value: \"mango\" },\n] satisfies SelectOption[];\n\nconst searchTerm = ref(\"\");\n\n\u002F\u002F we need to manually manage the value label since the filtered options passed to the select\n\u002F\u002F might not include the current value (depending on the search term) so it would be hidden otherwise\nconst valueLabel = computed(() => allOptions.find((option) => option.value === value.value)?.label);\n\nconst filteredOptions = computed(() => {\n  if (!searchTerm.value) return allOptions;\n  return allOptions.filter((option) => {\n    \u002F\u002F your custom filter logic here...\n    return normalizedIncludes(option.label, searchTerm.value);\n  });\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    v-model:search-term=\"searchTerm\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :options=\"filteredOptions\"\n    :value-label\n    with-search\n    no-filter\n  \u002F>\n\u003C\u002Ftemplate>\nAsync search When the options are provided by a backend service and should not be loaded immediately, async search can be used to optimize performance and only load relevant options. After the user typed in a search term, matching options are loaded asynchronously. \u003Cscript lang=\"ts\" setup>\nimport { refDebounced, useAsyncState } from \"@vueuse\u002Fcore\";\nimport { OnyxEmpty, OnyxLoadingIndicator, OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\nconst value = ref\u003Cstring>();\nconst searchTerm = ref(\"\");\n\n\u002F\u002F using a debounce so we do not trigger the load for every keystroke\nconst debouncedSearchTerm = refDebounced(searchTerm, 500);\n\nconst {\n  state: filteredOptions,\n  isLoading,\n  executeImmediate: loadOptions,\n} = useAsyncState\u003CSelectOption\u003Cstring>[]>(\n  async () => {\n    const search = debouncedSearchTerm.value.trim();\n    if (!search) return [];\n\n    \u002F\u002F your logic here to load the options...\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    return [{ label: search, value: `value-${search}` }];\n  },\n  [],\n  {\n    immediate: false,\n  },\n);\n\nwatch(debouncedSearchTerm, () => loadOptions());\n\n\u002F\u002F in order to display the label of the selected option, we need to \"store\" the full option for the selected value\nconst selectedOption = computed\u003CSelectOption | undefined>((previousValue) => {\n  const option = filteredOptions.value.find((option) => option.value === value.value);\n  if (option) return option;\n\n  \u002F\u002F if selected option is not found, use the previously cached value of this computed\n  if (previousValue?.value === value.value) return previousValue;\n  return undefined;\n});\n\n\u002F\u002F we need to manually manage the value label since the filtered options passed to the select\n\u002F\u002F might not include the current value (depending on the search term) so it would be hidden otherwise\nconst valueLabel = computed(() => selectedOption.value?.label ?? value.value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    v-model:search-term=\"searchTerm\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :options=\"filteredOptions\"\n    :loading=\"isLoading\"\n    :value-label\n    with-search\n    no-filter\n  >\n    \u003Ctemplate #empty=\"{ defaultMessage }\">\n      \u003COnyxEmpty v-if=\"isLoading\">\n        \u003Ctemplate #icon>\n          \u003COnyxLoadingIndicator class=\"loading-indicator\" type=\"circle\" \u002F>\n        \u003C\u002Ftemplate>\n        Loading...\n      \u003C\u002FOnyxEmpty>\n\n      \u003COnyxEmpty v-else>\n        {{ !debouncedSearchTerm ? \"Type to search...\" : defaultMessage }}\n      \u003C\u002FOnyxEmpty>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSelect>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.loading-indicator {\n  color: var(--onyx-color-text-icons-primary-intense);\n}\n\u003C\u002Fstyle>",{"id":836,"title":837,"titles":838,"content":839,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#load-more-options","Load more options",[816,400],"When working with very large data sets or backend-provided data, it might be desired to only load a few options initially and then load more options on demand to optimize performance. The select supports multiple ways of pagination \u002F loading more options depending on the use case: Lazy loading With lazy loading, more options are loaded automatically when the user scrolls to the end of the list. You can optionally define a scroll offset to trigger the lazy loading earlier, e.g. when scrolling to the third last option. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, type SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F**\n * Generates the given number of dummy options for this example.\n *\u002F\nconst generateDummyOptions = (count: number, existingItems: number) => {\n  return Array.from({ length: count }, (_, index) => {\n    const id = existingItems + index + 1;\n    return { value: id, label: `Option ${id}` } satisfies SelectOption;\n  });\n};\n\n\u002F**\n * Number of items per load\n *\u002F\nconst count = 25;\n\nconst options = ref\u003CSelectOption\u003Cnumber>[]>(generateDummyOptions(count, 0));\nconst value = ref\u003Cnumber>();\nconst isLoading = ref(false);\n\nconst handleLoadMore = async () => {\n  isLoading.value = true;\n  await new Promise((resolve) => setTimeout(resolve, 1000));\n  options.value = options.value.concat(generateDummyOptions(count, options.value.length));\n  isLoading.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :options\n    :lazy-loading=\"{ enabled: true, loading: isLoading }\"\n    @lazy-load=\"handleLoadMore\"\n  \u002F>\n\u003C\u002Ftemplate>\nLoad more button Using a load more button is similar to lazy loading but instead of automatically loading more options, the user needs to manually click on a button. \u003Cscript lang=\"ts\" setup>\nimport { iconPlusSmall } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxSelect, type SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F**\n * Generates the given number of dummy options for this example.\n *\u002F\nconst generateDummyOptions = (count: number, existingItems: number) => {\n  return Array.from({ length: count }, (_, index) => {\n    const id = existingItems + index + 1;\n    return { value: id, label: `Option ${id}` } satisfies SelectOption;\n  });\n};\n\n\u002F**\n * Number of items per load\n *\u002F\nconst count = 25;\n\nconst options = ref\u003CSelectOption\u003Cnumber>[]>(generateDummyOptions(count, 0));\nconst value = ref\u003Cnumber>();\nconst isLoading = ref(false);\n\nconst handleLoadMore = async () => {\n  isLoading.value = true;\n  await new Promise((resolve) => setTimeout(resolve, 1000));\n  options.value = options.value.concat(generateDummyOptions(count, options.value.length));\n  isLoading.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Example label\" list-label=\"Available options\" :options>\n    \u003Ctemplate #optionsEnd>\n      \u003COnyxButton\n        class=\"more-button\"\n        label=\"Load more\"\n        mode=\"plain\"\n        :loading=\"isLoading\"\n        :icon=\"iconPlusSmall\"\n        @click=\"handleLoadMore\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSelect>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.more-button {\n  width: 100%;\n}\n\u003C\u002Fstyle>",{"id":841,"title":842,"titles":843,"content":844,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#custom-option-content","Custom option content",[816,400],"Each option can additionally be displayed with custom content. You must display the label any apply ellipsis truncation manually if needed. See our typography documentation for further information on how to apply truncation. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, OnyxTag, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\nconst options = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Mango\", value: \"mango\" },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Example label\" list-label=\"Available options\" :options>\n    \u003Ctemplate #option=\"option\">\n      \u003Cdiv class=\"option\">\n        \u003C!-- ellipsis class can be removed when using multiline truncation on the OnyxSelect -->\n        \u003Cspan class=\"onyx-truncation-ellipsis\">{{ option.label }}\u003C\u002Fspan>\n        \u003COnyxTag label=\"Example\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSelect>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--onyx-density-sm);\n}\n\u003C\u002Fstyle>",{"id":846,"title":847,"titles":848,"content":849,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#groups","Groups",[816,400],"Options can also be grouped to provide additional structure and clearance for related options. \u003Cscript lang=\"ts\" setup>\nimport { iconCheese, iconChocolate, iconCookie, iconLoafBread } from \"@sit-onyx\u002Ficons\";\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\nconst options = [\n  { label: \"Bread\", value: \"bread\", icon: iconLoafBread, group: \"Breakfast\" },\n  { label: \"Cheese\", value: \"cheese\", icon: iconCheese, group: \"Breakfast\" },\n  { label: \"Chocolate\", value: \"chocolate\", icon: iconChocolate, group: \"Snacks\" },\n  { label: \"Cookie\", value: \"cookie\", icon: iconCookie, group: \"Snacks\" },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Example label\" list-label=\"Available options\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":851,"title":748,"titles":852,"content":853,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#readonly-disabled",[816,400],"Readonly and disabled are used to indicate that the select is currently not editable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options = [\n  { label: \"Apple\", value: \"apple\" },\n  { label: \"Banana\", value: \"banana\" },\n  { label: \"Mango\", value: \"mango\" },\n] satisfies SelectOption[];\n\nconst value = ref\u003Cstring>(options[0].value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Readonly\" list-label=\"Available options\" :options readonly \u002F>\n  \u003COnyxSelect v-model=\"value\" label=\"Disabled\" list-label=\"Available options\" :options disabled \u002F>\n\u003C\u002Ftemplate>",{"id":855,"title":481,"titles":856,"content":857,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#loading-skeleton",[816,400],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page\u002Fselect is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\n\nconst options = [] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect label=\"Loading\" list-label=\"Available options\" :options loading \u002F>\n  \u003COnyxSelect label=\"Skeleton\" list-label=\"Available options\" :options skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":859,"title":621,"titles":860,"content":861,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#message",[816,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\nconst options = [] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n    :options\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    :options\n    show-error\n  \u002F>\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate>",{"id":863,"title":626,"titles":864,"content":865,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#slots",[816,400],"Multiple slots are supported to pass in custom content if needed. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIcon, OnyxSelect, OnyxUnstableFormElementAction, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\nconst options = [] satisfies SelectOption[];\n\nconst unitOptions = [\n  { label: \"kg\", value: \"kg\" },\n  { label: \"g\", value: \"g\" },\n] satisfies SelectOption[];\n\nconst unit = ref(unitOptions[0].value);\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect\n    v-model=\"value\"\n    label=\"Example label\"\n    list-label=\"Available options\"\n    :options\n    disable-slot-padding\n  >\n    \u003Ctemplate #leading>\n      \u003COnyxUnstableFormElementAction\n        label=\"Example action\"\n        :icon=\"iconPlaceholder\"\n        size=\"lg\"\n        @click=\"handleActionClick\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailing>\n      \u003COnyxSelect\n        v-model=\"unit\"\n        label=\"Unit\"\n        list-label=\"Available units\"\n        alignment=\"right\"\n        :options=\"unitOptions\"\n        hide-clear-icon\n        hide-label\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxSelect>\n\u003C\u002Ftemplate>",{"id":867,"title":631,"titles":868,"content":869,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fselect#label-positions",[816,400],"The select label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\nconst options = [] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Top\" list-label=\"Available options\" :options \u002F>\n  \u003COnyxSelect\n    v-model=\"value\"\n    :label=\"{ label: 'Left', position: 'left' }\"\n    list-label=\"Available options\"\n    :options\n  \u002F>\n  \u003COnyxSelect\n    v-model=\"value\"\n    :label=\"{ label: 'Right', position: 'right' }\"\n    list-label=\"Available options\"\n    :options\n  \u002F>\n  \u003COnyxSelect\n    v-model=\"value\"\n    :label=\"{ label: 'Hidden', hidden: true }\"\n    list-label=\"Available options\"\n    :options\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":871,"title":872,"titles":873,"content":874,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fslider","Slider",[],"Sliders allow users to select a value (or a range of two values) inside a given min\u002Fmax range by dragging a thumb along a track.",{"id":876,"title":400,"titles":877,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fslider#examples",[872],{"id":879,"title":439,"titles":880,"content":881,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#basic",[872,400],"The default slider supports selecting a single value within the given min\u002Fmax range. The step size can be configured if needed but defaults to 1. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"value\" label=\"Example label\" \u002F>\n\u003C\u002Ftemplate>",{"id":883,"title":884,"titles":885,"content":886,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#range","Range",[872,400],"The range mode can be used so select a range of two values. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst range = ref\u003C[number, number]>([25, 75]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"range\" label=\"Example label\" mode=\"range\" \u002F>\n\u003C\u002Ftemplate>",{"id":888,"title":889,"titles":890,"content":891,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#marks","Marks",[872,400],"Marks can be used to show visual \"steps\" inside the slider track which can optionally show a label below. They can be auto-generated based on the step property which is useful for discrete sliders where the user can only selected specific values (e.g. 0, 25, 50, 75 and 100). The mark slot can be used to provide custom content for each mark such as icons. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider, SliderMark } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst discreteValue = ref(50);\nconst value = ref(50);\n\nconst marks: SliderMark[] = [\n  { label: \"0°C\", value: 0 },\n  { label: \"25°C\", value: 25 },\n  { label: \"50°C\", value: 50 },\n  { label: \"75°C\", value: 75 },\n  { label: \"100°C\", value: 100 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"discreteValue\" label=\"Discrete marks\" :step=\"25\" marks \u002F>\n  \u003COnyxSlider\n    v-model=\"value\"\n    label=\"Labelled marks\"\n    :tooltip=\"{ formatter: (value) => `${value}%` }\"\n    :marks\n  \u002F>\n\u003C\u002Ftemplate>",{"id":893,"title":894,"titles":895,"content":896,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#controls","Controls",[872,400],"The slider supports multiple control types that allow the user to change the slider value with an additional action. Icon control The icon control shows two additional buttons for increasing and decreasing the value. It is only supported for the single mode. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"value\" label=\"Example label\" control=\"icon\" \u002F>\n\u003C\u002Ftemplate>\nInput control The input control shows an additional input where the user can type in to change the current value. This control is supported for both the single and the range mode. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst range = ref\u003C[number, number]>([25, 75]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"range\" label=\"Example label\" mode=\"range\" control=\"input\" \u002F>\n\u003C\u002Ftemplate>\nValue control The value control is not interactive and shows the min and max value of the slider. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"value\" label=\"Example label\" control=\"value\" \u002F>\n\u003C\u002Ftemplate>",{"id":898,"title":426,"titles":899,"content":900,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#disabled",[872,400],"The disabled is used to indicate that the slider is currently not editable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"value\" label=\"Example label\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":902,"title":574,"titles":903,"content":904,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#skeleton",[872,400],"The skeleton should be used on initial page load when the data for the page \u002F slider is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider v-model=\"value\" label=\"Example label\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":906,"title":621,"titles":907,"content":908,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fslider#message",[872,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxSlider } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(50);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSlider\n    v-model=\"value\"\n    label=\"Example label\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxSlider\n    v-model=\"value\"\n    label=\"Example label\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxSlider\n    v-model=\"value\"\n    label=\"Example label\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":910,"title":911,"titles":912,"content":913,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fstepper","Stepper",[],"The stepper component lets users input numerical values and adjust them incrementally via plus and minus buttons, making it ideal for setting quantities or values in small, controlled steps.",{"id":915,"title":400,"titles":916,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fstepper#examples",[911],{"id":918,"title":439,"titles":919,"content":920,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#basic",[911,400],"The stepper includes a increase\u002Fdecrease button by default that can optionally be hidden. The step size defaults to 1 but can be customized using the stepSize property. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Default\" placeholder=\"Placeholder...\" required \u002F>\n  \u003COnyxStepper\n    v-model=\"value\"\n    label=\"Without buttons\"\n    placeholder=\"Placeholder...\"\n    required\n    hide-buttons\n  \u002F>\n\u003C\u002Ftemplate>",{"id":922,"title":923,"titles":924,"content":925,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#precision","Precision",[911,400],"You can use the precision property to restrict how many decimal places are shown. The entered value is rounded if needed. A precision of 2 means that only two decimal places are allowed, e.g. 1.00. To only allow \"full\" numbers, set the precision to 0. A negative value can also be used to specify the places of the integer part so e.g. precision=\"-1\" only allows multiples of 10, precision=\"-2\" multiples of 100 and so on. The stepSize must be compatible with the defined precision. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>(42);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Example label\" :precision=\"2\" :step-size=\"0.25\" \u002F>\n\u003C\u002Ftemplate>",{"id":927,"title":928,"titles":929,"content":930,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#formatting","Formatting",[911,400],"In addition to specifying a precision, custom formatting can be applied to the value to display any text. Since the formatted text might not always be a valid number, it is only displayed when the stepper is not focused \u002F actively edited. While editing the value, the default formatting is used. There are multiple options available: Locale formatting When simply enabling the formatNumber property, the value will be formatted depending on the current locale \u002F language of the application. This means e.g. a dot is used to separate the integer and fractional part in Englisch while a comma is used in German. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>(12.34);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Example label\" format-number \u002F>\n\u003C\u002Ftemplate>\nCustom formatting Alternatively, a full custom formatter can be defined that returns a custom text for the current value. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>(12.34);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper\n    v-model=\"value\"\n    label=\"Example label\"\n    :format-number=\"(value) => `Value: ${value}%`\"\n  \u002F>\n\u003C\u002Ftemplate>\nAlignment The value is centered by default but can optionally be left or right aligned. All alignment options can be used in combination with custom formatting. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>(42);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Centered\" \u002F>\n  \u003COnyxStepper v-model=\"value\" class=\"stepper--left\" label=\"Left aligned\" \u002F>\n  \u003COnyxStepper v-model=\"value\" class=\"stepper--right\" label=\"Right aligned\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.stepper {\n  &--left {\n    --onyx-stepper-text-align: left;\n  }\n\n  &--right {\n    --onyx-stepper-text-align: right;\n  }\n}\n\u003C\u002Fstyle>",{"id":932,"title":748,"titles":933,"content":934,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#readonly-disabled",[911,400],"Readonly and disabled are used to indicate that the stepper is currently not editable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(42);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Readonly\" readonly \u002F>\n  \u003COnyxStepper v-model=\"value\" label=\"Disabled\" disabled \u002F>\n\u003C\u002Ftemplate> The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F stepper is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper label=\"Loading\" loading \u002F>\n  \u003COnyxStepper label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":936,"title":621,"titles":937,"content":938,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#message",[911,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper\n    v-model=\"value\"\n    label=\"Example label\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxStepper\n    v-model=\"value\"\n    label=\"Example label\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxStepper\n    v-model=\"value\"\n    label=\"Example label\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":940,"title":626,"titles":941,"content":942,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#slots",[911,400],"Multiple slots are supported to pass in custom content if needed. Note that the default increment and decrement button will be hidden if a custom leading or trailing slot is passed. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxIcon,\n  OnyxSelect,\n  OnyxStepper,\n  OnyxUnstableFormElementAction,\n  SelectOption,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>();\n\nconst unitOptions = [\n  { label: \"kg\", value: \"kg\" },\n  { label: \"g\", value: \"g\" },\n] satisfies SelectOption[];\n\nconst unit = ref(unitOptions[0].value);\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Example label\">\n    \u003Ctemplate #leading>\n      \u003COnyxUnstableFormElementAction\n        label=\"Example action\"\n        :icon=\"iconPlaceholder\"\n        size=\"lg\"\n        @click=\"handleActionClick\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailing>\n      \u003COnyxSelect\n        v-model=\"unit\"\n        label=\"Unit\"\n        list-label=\"Available units\"\n        alignment=\"right\"\n        :options=\"unitOptions\"\n        hide-clear-icon\n        hide-label\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxStepper>\n\u003C\u002Ftemplate>",{"id":944,"title":631,"titles":945,"content":946,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fstepper#label-positions",[911,400],"The stepper label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStepper } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cnumber>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxStepper v-model=\"value\" label=\"Top\" \u002F>\n  \u003COnyxStepper v-model=\"value\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxStepper v-model=\"value\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxStepper v-model=\"value\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":948,"title":949,"titles":950,"content":951,"level":9},"\u002Fcomponents\u002Fform-elements\u002Fswitch","Switch",[],"Switches are a common UI element used to control binary states, such as on\u002Foff, enable\u002Fdisable or active\u002Finactive. They consist of a toggle mechanism that allow users to switch between two distinct states with a simple interaction.",{"id":953,"title":400,"titles":954,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Fswitch#examples",[949],{"id":956,"title":439,"titles":957,"content":958,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#basic",[949,400],"The switch can be used with or without a visual label. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst checked = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch v-model=\"checked\" :label=\"{ label: 'Example label', position: 'top' }\" required \u002F>\n\u003C\u002Ftemplate>",{"id":960,"title":481,"titles":961,"content":962,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#loading-skeleton",[949,400],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F switch is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch :label=\"{ label: 'Example label', position: 'top' }\" loading \u002F>\n  \u003COnyxSwitch :label=\"{ label: 'Example label', position: 'top' }\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":964,"title":621,"titles":965,"content":966,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#message",[949,400],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch\n    :label=\"{ label: 'Example label', position: 'top' }\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxSwitch\n    :label=\"{ label: 'Example label', position: 'top' }\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxSwitch\n    :label=\"{ label: 'Example label', position: 'top' }\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":968,"title":426,"titles":969,"content":970,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#disabled",[949,400],"The switch can be disabled to indicate that its action is currently not available and the switch can not be toggled.\nFor an improved user experience, it should be clear to the user why the switch is disabled. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch :label=\"{ label: 'Example label', position: 'top' }\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":972,"title":631,"titles":973,"content":974,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#label-positions",[949,400],"The switch label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch v-model=\"value\" :label=\"{ label: 'Top', position: 'top' }\" \u002F>\n  \u003COnyxSwitch v-model=\"value\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxSwitch v-model=\"value\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxSwitch v-model=\"value\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate>",{"id":976,"title":977,"titles":978,"content":979,"level":84},"\u002Fcomponents\u002Fform-elements\u002Fswitch#value-label","Value label",[949,400],"The switch value label can be used to display different labels depending on its state. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSwitch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSwitch\n    v-model=\"value\"\n    :label=\"{ label: 'Example Label', position: 'top' }\"\n    :value-label=\"{ truthy: 'ON', falsy: 'OFF' }\"\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":981,"title":982,"titles":983,"content":984,"level":9},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor","Text editor",[],"The text editor supports entering text with additional formatting such as inserting links, headlines and more and is therefore ideal for comments, descriptions and more. For simple text-only data, please use the textarea instead.",{"id":986,"title":22,"titles":987,"content":988,"level":19},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#installation",[982],"Our text editor is based on the Tiptap editor. Follow the steps below to get started: Install dependencies Install the npm package into your project: Import styles Next, import the editor styles. We recommend to import them globally in the root of your application: Import the styles in your main.ts file. Make sure to import them after the regular sit-onyx\u002Fstyle.css styles and before any of your components (usually the App.vue file). \u002F\u002F make sure to import the Tiptap styles AFTER the general \"sit-onyx\" styles\n\u002F\u002F import \"sit-onyx\u002Fstyle.css\";\nimport \"@sit-onyx\u002Ftiptap\u002Fstyle.css\";\nImport the styles in your Nuxt config: export default defineNuxtConfig({\n  css: [\"@sit-onyx\u002Ftiptap\u002Fstyle.css\"],\n});",{"id":990,"title":400,"titles":991,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#examples",[982],{"id":993,"title":439,"titles":994,"content":995,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#basic",[982,400],"The basic text editor includes standard formatting extensions. The editor height expands dynamically as content grows until reaching its maximum threshold. Configure rows via autosize or allow unbounded vertical expansion. Type multiple rows in the example below to test automatic height expansion. Users can also manually resize the editor by dragging the bottom-right corner, unless disableManualResize is set. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor v-model=\"value\" label=\"Example label\" placeholder=\"Placeholder...\" required \u002F>\n\u003C\u002Ftemplate>",{"id":997,"title":998,"titles":999,"content":1000,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#toolbar-position","Toolbar position",[982,400],"The toolbar can be docked at the top or bottom of the editor. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor v-model=\"value\" label=\"Example label\" :toolbar=\"{ position: 'bottom' }\" \u002F>\n\u003C\u002Ftemplate>",{"id":1002,"title":1003,"titles":1004,"content":1005,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#extensions","Extensions",[982,400],"The toolbar automatically adapts to enabled extensions (e.g. hiding heading pickers if headings are disabled): Configure starter kit The editor uses OnyxStarterKit by default, extending the Tiptap starter kit with enterprise formatting presets. Pass custom extensions to the extensions property to reconfigure defaults or supply an alternative set of plugins. \u003Cscript lang=\"ts\" setup>\nimport { OnyxStarterKit, OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\n\nconst extensions = [\n  OnyxStarterKit.configure({\n    blockquote: false, \u002F\u002F e.g. disable specific extensions\n    heading: {\n      levels: [1, 2], \u002F\u002F or customize existing ones\n    },\n  }),\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor label=\"Example label\" :extensions \u002F>\n\u003C\u002Ftemplate>\nCustom extensions Extend the editor with third-party Tiptap plugins and append custom toolbar buttons to the end of the action row. See the full catalog of Tiptap extensions: \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxEditorToolbarAction,\n  OnyxEditorToolbarFlyout,\n  OnyxEditorToolbarGroup,\n  OnyxTextEditor,\n  type EditorToolbarFlyoutOption,\n} from \"@sit-onyx\u002Ftiptap\";\nimport { computed, useTemplateRef } from \"vue\";\n\nconst textEditor = useTemplateRef(\"editor\");\n\n\u002F\u002F you can optionally use the \"useEditorUtils\" to e.g. check if specific extensions are\n\u002F\u002F registered for the Tiptap editor to show\u002Fhide actions dynamically\n\u002F\u002F const { hasExtension } = useEditorUtils(computed(() => textEditor.value?.editor));\n\nconst listOptions = computed\u003CEditorToolbarFlyoutOption[]>(() => {\n  return [\n    {\n      label: \"Option 1\",\n      icon: iconPlaceholder,\n      active: textEditor.value?.editor?.isActive(\"extensionName\"),\n      onClick: () => {\n        \u002F\u002F do something\n      },\n    },\n    {\n      label: \"Option 2\",\n      icon: iconPlaceholder,\n      active: textEditor.value?.editor?.isActive(\"extensionName\"),\n      onClick: () => {\n        \u002F\u002F do something\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor ref=\"editor\" label=\"Example label\">\n    \u003Ctemplate #actions>\n      \u003C!-- use the OnyxEditorToolbarGroup to separate multiple actions with a vertical line -->\n      \u003COnyxEditorToolbarGroup>\n        \u003COnyxEditorToolbarAction label=\"Action 1\" :icon=\"iconPlaceholder\" \u002F>\n        \u003COnyxEditorToolbarAction label=\"Action 2\" :icon=\"iconPlaceholder\" \u002F>\n      \u003C\u002FOnyxEditorToolbarGroup>\n\n      \u003COnyxEditorToolbarGroup>\n        \u003COnyxEditorToolbarFlyout label=\"Action 3\" :icon=\"iconPlaceholder\" :options=\"listOptions\" \u002F>\n      \u003C\u002FOnyxEditorToolbarGroup>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTextEditor>\n\u003C\u002Ftemplate>",{"id":1007,"title":426,"titles":1008,"content":1009,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#disabled",[982,400],"Renders the editor in a disabled, non-editable state. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>(\"\u003Cp>Example value\u003C\u002Fp>\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor v-model=\"value\" label=\"Example label\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":1011,"title":753,"titles":1012,"content":1013,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#min-and-max-length",[982,400],"Enforce character limits using min and max constraints. Displays an optional character counter powered by Tiptap's CharacterCount extension. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    :minlength=\"8\"\n    :maxlength=\"32\"\n    with-counter\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1015,"title":421,"titles":1016,"content":1017,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#loading-skeleton",[982,400],"The loading state indicates asynchronous operations following interaction, while skeleton renders a loading placeholder on initial page load. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor label=\"Loading\" loading \u002F>\n  \u003COnyxTextEditor label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":1019,"title":621,"titles":1020,"content":1021,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#message",[982,400],"Supports hint, error, and success messages with optional tooltip context. When multiple states apply, errors take precedence. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    :message=\"{ label: 'Message', tooltipText: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    :error=\"{ label: 'Custom error', tooltipText: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxTextEditor\n    v-model=\"value\"\n    label=\"Example label\"\n    :success=\"{ label: 'Success', tooltipText: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1023,"title":631,"titles":1024,"content":1025,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftext-editor#label-positions",[982,400],"Labels can be aligned top, left, or floating to match form layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextEditor } from \"@sit-onyx\u002Ftiptap\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextEditor v-model=\"value\" label=\"Top\" \u002F>\n  \u003COnyxTextEditor v-model=\"value\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxTextEditor v-model=\"value\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxTextEditor v-model=\"value\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":1027,"title":1028,"titles":1029,"content":1030,"level":9},"\u002Fcomponents\u002Fform-elements\u002Ftextarea","Textarea",[],"Textarea components support large text entries, giving users a spacious area to input or format continuous text, making them ideal for comments, descriptions, or other longer texts.",{"id":1032,"title":439,"titles":1033,"content":1034,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#basic",[1028],"By default, the height of the textarea is sized automatically, which ensures a minimum height that grows as the user types until a maximum height is reached. You can customize the minimum and maximum number of rows using the autosize property, or you can disable the maximum height completely, allowing the textarea to grow infinitely. Type multiple rows into the example below to see the autosizing in action. Additionally, the user can resize the textarea manually by dragging the bottom right corner vertically. You can disable this feature using the disableManualResize property. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea v-model=\"value\" label=\"Example label\" placeholder=\"Placeholder...\" required \u002F>\n\u003C\u002Ftemplate>",{"id":1036,"title":748,"titles":1037,"content":1038,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#readonly-disabled",[1028],"Readonly and disabled are used to indicate that the textarea is currently not editable. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"Example value\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea v-model=\"value\" label=\"Readonly\" readonly \u002F>\n  \u003COnyxTextarea v-model=\"value\" label=\"Disabled\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":1040,"title":753,"titles":1041,"content":1042,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#min-and-max-length",[1028],"If minlength or maxlength is defined, the user must enter at least minlength and at most maxlength characters before the textarea becomes valid. Otherwise the textarea is invalid and an error message is displayed. Optionally, a character counter can be displayed. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea v-model=\"value\" label=\"Example label\" :minlength=\"8\" :maxlength=\"32\" with-counter \u002F>\n\u003C\u002Ftemplate>",{"id":1044,"title":481,"titles":1045,"content":1046,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#loading-skeleton",[1028],"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F textarea is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea label=\"Loading\" loading \u002F>\n  \u003COnyxTextarea label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":1048,"title":621,"titles":1049,"content":1050,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#message",[1028],"An optional message, error or success message can be displayed. Each message supports showing an info tooltip with further information.\nWhen multiple message types are defined at once, only the most relevant will be displayed (e.g. error message takes precedent over the regular message). \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea\n    v-model=\"value\"\n    label=\"Example label\"\n    :message=\"{ shortMessage: 'Message', longMessage: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxTextarea\n    v-model=\"value\"\n    label=\"Example label\"\n    :error=\"{ shortMessage: 'Custom error', longMessage: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxTextarea\n    v-model=\"value\"\n    label=\"Example label\"\n    :success=\"{ shortMessage: 'Success', longMessage: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1052,"title":626,"titles":1053,"content":1054,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#slots",[1028],"Custom content can be passed to the leadingIcons slot if needed. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIcon, OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea v-model=\"value\" label=\"Example label\">\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTextarea>\n\u003C\u002Ftemplate>",{"id":1056,"title":631,"titles":1057,"content":1058,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftextarea#label-positions",[1028],"The textarea label can be positioned in several ways to support a wide variety of layouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTextarea } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTextarea v-model=\"value\" label=\"Top\" \u002F>\n  \u003COnyxTextarea v-model=\"value\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxTextarea v-model=\"value\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxTextarea v-model=\"value\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":1060,"title":1061,"titles":1062,"content":1063,"level":9},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker","Time picker",[],"The time picker allows users to select a specific time or a time range.",{"id":1065,"title":400,"titles":1066,"content":367,"level":19},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#examples",[1061],{"id":1068,"title":439,"titles":1069,"content":1070,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#basic",[1061,400],"Times can be typed directly or selected from the clock flyout menu. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Default\" required \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"With seconds\" required show-seconds \u002F>\n\u003C\u002Ftemplate>",{"id":1072,"title":884,"titles":1073,"content":1074,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#range",[1061,400],"Select a time range with explicit start and end times. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker, TimeRange } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst range = ref\u003CTimeRange>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"range\" label=\"Example label\" type=\"range\" \u002F>\n\u003C\u002Ftemplate>",{"id":1076,"title":1077,"titles":1078,"content":1079,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#select-options","Select options",[1061,400],"To restrict choices to predefined intervals, use select mode. Options can be generated automatically with a step interval (e.g. every 30 minutes) or supplied as a custom list. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\nconst customTimes: SelectOption\u003Cstring>[] = [\n  {\n    label: \"09:00\",\n    value: \"09:00\",\n    group: \"Morning Slots (09:00 - 12:00)\",\n  },\n  {\n    label: \"10:00\",\n    value: \"10:00\",\n    group: \"Morning Slots (09:00 - 12:00)\",\n    disabled: true,\n  },\n  {\n    label: \"11:00\",\n    value: \"11:00\",\n    group: \"Morning Slots (09:00 - 12:00)\",\n  },\n  {\n    label: \"12:30\",\n    value: \"12:30\",\n    group: \"Lunch Break (12:00 - 14:00)\",\n    disabled: true,\n  },\n  {\n    label: \"14:00\",\n    value: \"14:00\",\n    group: \"Afternoon Slots (14:00 - 17:00)\",\n  },\n  {\n    label: \"15:00\",\n    value: \"15:00\",\n    group: \"Afternoon Slots (14:00 - 17:00)\",\n    disabled: true,\n  },\n  {\n    label: \"15:30\",\n    value: \"15:30\",\n    group: \"Afternoon Slots (14:00 - 17:00)\",\n    disabled: true,\n  },\n  {\n    label: \"16:00\",\n    value: \"16:00\",\n    group: \"Afternoon Slots (14:00 - 17:00)\",\n  },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Auto-generated options\"\n    type=\"select\"\n    min=\"09:00\"\n    max=\"17:00\"\n  \u002F>\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Custom options\"\n    type=\"select\"\n    :options=\"{ customTimes }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1081,"title":1082,"titles":1083,"content":1084,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#am-pm","AM \u002F PM",[1061,400],"Enable the AM\u002FPM toggle for 12-hour clock formats. Set to auto to resolve format based on the active locale. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker, TimeRange } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\nconst range = ref\u003CTimeRange>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Single\" show-am-pm \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"range\" label=\"Range\" type=\"range\" show-am-pm \u002F>\n\u003C\u002Ftemplate>",{"id":1086,"title":1087,"titles":1088,"content":1089,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#min-and-max-time","Min and max time",[1061,400],"Constrain selectable times using min and max limits. Entering a value outside these bounds marks the input invalid with an error message. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Example label\"\n    min=\"09:00\"\n    max=\"17:00\"\n    message=\"Select a time between 9AM and 5PM\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1091,"title":612,"titles":1092,"content":1093,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#readonly-disabled",[1061,400],"Use readonly or disabled states when time editing is prohibited. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>(\"09:00\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Readonly\" readonly \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Disabled\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":1095,"title":421,"titles":1096,"content":1097,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#loading-skeleton",[1061,400],"The loading state indicates asynchronous operations following user input, while skeleton renders a loading placeholder on initial page load. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker label=\"Loading\" loading \u002F>\n  \u003COnyxUnstableTimePicker label=\"Skeleton\" skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":1099,"title":621,"titles":1100,"content":1101,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#message",[1061,400],"Supports hint, error, and success messages with optional tooltip context. When multiple states apply, errors take precedence. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Example label\"\n    :message=\"{ label: 'Message', tooltipText: 'Message tooltip content' }\"\n  \u002F>\n  \u003C!--\n    \"show-error\" is only set for this example so the error is displayed immediately.\n    Remove it if not needed so the error is only displayed after user interaction.\n  -->\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Example label\"\n    :error=\"{ label: 'Custom error', tooltipText: 'Error tooltip content' }\"\n    show-error\n  \u002F>\n  \u003COnyxUnstableTimePicker\n    v-model=\"time\"\n    label=\"Example label\"\n    :success=\"{ label: 'Success', tooltipText: 'Success tooltip content' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1103,"title":626,"titles":1104,"content":1105,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#slots",[1061,400],"Custom slots are available for prefix and suffix content. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxIcon,\n  OnyxSelect,\n  OnyxUnstableFormElementAction,\n  OnyxUnstableTimePicker,\n  SelectOption,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\nconst selectOptions = [\n  { label: \"Foo\", value: \"foo\" },\n  { label: \"Bar\", value: \"bar\" },\n] satisfies SelectOption[];\n\nconst selectedOption = ref(selectOptions[0].value);\n\nconst handleActionClick = () => {\n  \u002F\u002F your logic here\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Example label\">\n    \u003Ctemplate #leading>\n      \u003COnyxUnstableFormElementAction\n        label=\"Example action\"\n        :icon=\"iconPlaceholder\"\n        size=\"lg\"\n        @click=\"handleActionClick\"\n      \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #leadingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailingIcons>\n      \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #trailing>\n      \u003COnyxSelect\n        v-model=\"selectedOption\"\n        label=\"Unit\"\n        list-label=\"Available units\"\n        alignment=\"right\"\n        :options=\"selectOptions\"\n        hide-clear-icon\n        hide-label\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxUnstableTimePicker>\n\u003C\u002Ftemplate>",{"id":1107,"title":631,"titles":1108,"content":1109,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#label-positions",[1061,400],"Labels can be aligned top, left, or floating to match form structures. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableTimePicker } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst time = ref\u003Cstring>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTimePicker v-model=\"time\" label=\"Top\" \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"time\" :label=\"{ label: 'Left', position: 'left' }\" \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"time\" :label=\"{ label: 'Right', position: 'right' }\" \u002F>\n  \u003COnyxUnstableTimePicker v-model=\"time\" :label=\"{ label: 'Hidden', hidden: true }\" \u002F>\n\u003C\u002Ftemplate>",{"id":1111,"title":636,"titles":1112,"content":1113,"level":84},"\u002Fcomponents\u002Fform-elements\u002Ftime-picker#date-and-time-picker",[1061,400],"See date picker component for examples combining date and time inputs. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":1115,"title":1116,"titles":1117,"content":1118,"level":9},"\u002Fcomponents\u002Fbasic\u002Faccordion","Accordion",[],"An accordion is a versatile UI element that allows users to expand and collapse sections of content. It is commonly used for organizing large amounts of information in a compact space, enabling users to easily navigate through different categories or options.",{"id":1120,"title":400,"titles":1121,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Faccordion#examples",[1116],{"id":1123,"title":1124,"titles":1125,"content":1126,"level":84},"\u002Fcomponents\u002Fbasic\u002Faccordion#types","Types",[1116,400],"Multiple accordion items can be opened at the same time. Depending on the usage, one or multiple items can also be initially be opened without the user needing to interact with them first. The accordion supports different visual types so it can be used in various use cases: Default This type is the default and should be used when a simple and subtle separation of the page content is desired. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAccordion, OnyxAccordionItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F for this example, we open the first accordion initially\n\u002F\u002F but you can also leave the array empty if not needed\nconst openAccordions = ref\u003Cstring[]>([\"item-1\"]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\">\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate>\nCard To achieve a clearer separation and structure of the page content, the card type can be used. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAccordion, OnyxAccordionItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst openAccordions = ref\u003Cstring[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\" type=\"card\">\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate>\nNested large The nested-large type is optimized to be used inside of other containers or components such as sidebar. It is not intended to be used standalone on the main page content. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  OnyxAccordion,\n  OnyxAccordionItem,\n  OnyxAppLayout,\n  OnyxNavBar,\n  OnyxPageLayout,\n  OnyxSidebar,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F for this example, we open the first accordion initially\n\u002F\u002F but you can also leave the array empty if not needed\nconst openAccordions = ref\u003Cstring[]>([\"item-1\"]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar :logo-url \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar label\">\n          \u003COnyxAccordion v-model=\"openAccordions\" type=\"nested-large\">\n            \u003COnyxAccordionItem value=\"item-1\">\n              \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n              Content of the first accordion...\n            \u003C\u002FOnyxAccordionItem>\n\n            \u003COnyxAccordionItem value=\"item-2\">\n              \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n              Content of the second accordion...\n            \u003C\u002FOnyxAccordionItem>\n\n            \u003COnyxAccordionItem value=\"item-3\">\n              \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n              Content of the third accordion...\n            \u003C\u002FOnyxAccordionItem>\n          \u003C\u002FOnyxAccordion>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      Page content...\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nNested small Identically to the large type, nested-small is optimized to be used inside of other containers or components such as sidebar. It is also not intended to be used standalone on the main page content. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  OnyxAccordion,\n  OnyxAccordionItem,\n  OnyxAppLayout,\n  OnyxNavBar,\n  OnyxPageLayout,\n  OnyxSidebar,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\n\u002F\u002F for this example, we open the first accordion initially\n\u002F\u002F but you can also leave the array empty if not needed\nconst openAccordions = ref\u003Cstring[]>([\"item-1\"]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar :logo-url \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar label\">\n          \u003COnyxAccordion v-model=\"openAccordions\" type=\"nested-small\">\n            \u003COnyxAccordionItem value=\"item-1\">\n              \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n              Content of the first accordion...\n            \u003C\u002FOnyxAccordionItem>\n\n            \u003COnyxAccordionItem value=\"item-2\">\n              \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n              Content of the second accordion...\n            \u003C\u002FOnyxAccordionItem>\n\n            \u003COnyxAccordionItem value=\"item-3\">\n              \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n              Content of the third accordion...\n            \u003C\u002FOnyxAccordionItem>\n          \u003C\u002FOnyxAccordion>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      Page content...\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":1128,"title":1129,"titles":1130,"content":1131,"level":84},"\u002Fcomponents\u002Fbasic\u002Faccordion#exclusive","Exclusive",[1116,400],"The optional exclusive mode can be enabled so only one item can be opened at a time. Opening another item will automatically close the previously opened item. This can be useful to focus the users attention to a single item. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAccordion, OnyxAccordionItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst openAccordions = ref\u003Cstring[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\" exclusive>\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate>",{"id":1133,"title":1134,"titles":1135,"content":1136,"level":84},"\u002Fcomponents\u002Fbasic\u002Faccordion#custom-content","Custom content",[1116,400],"Each accordion item supports custom content inside the header and body. The header should not contain interactive elements since its only used for toggling the content. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxAccordion, OnyxAccordionItem, OnyxIcon, OnyxTag } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst openAccordions = ref\u003Cstring[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\">\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"header\">\n          \u003Cdiv class=\"header__content\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            Header 1\n          \u003C\u002Fdiv>\n\n          \u003Cdiv class=\"header__trailing\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            \u003COnyxTag label=\"Tag\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"header\">\n          \u003Cdiv class=\"header__content\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            Header 2\n          \u003C\u002Fdiv>\n\n          \u003Cdiv class=\"header__trailing\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            \u003COnyxTag label=\"Tag\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>\n        \u003Cdiv class=\"header\">\n          \u003Cdiv class=\"header__content\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            Header 3\n          \u003C\u002Fdiv>\n\n          \u003Cdiv class=\"header__trailing\">\n            \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n            \u003COnyxTag label=\"Tag\" \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--onyx-accordion-item-gap);\n  flex-wrap: wrap;\n  flex-grow: 1;\n\n  &__content {\n    display: flex;\n    align-items: center;\n    gap: var(--onyx-accordion-item-header-gap);\n    flex-wrap: wrap;\n  }\n\n  &__trailing {\n    display: flex;\n    align-items: center;\n    gap: var(--onyx-accordion-item-header-gap);\n    flex-wrap: wrap;\n  }\n}\n\u003C\u002Fstyle>",{"id":1138,"title":426,"titles":1139,"content":1140,"level":84},"\u002Fcomponents\u002Fbasic\u002Faccordion#disabled",[1116,400],"The disabled state is used to indicate that the accordion is currently not interactive and the content can not be toggled. Individual items or the whole accordion can be disabled. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAccordion, OnyxAccordionItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst openAccordions = ref\u003Cstring[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\" disabled>\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate>",{"id":1142,"title":574,"titles":1143,"content":1144,"level":84},"\u002Fcomponents\u002Fbasic\u002Faccordion#skeleton",[1116,400],"The skeleton should be used on initial page load when the data for the page \u002F accordion is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAccordion, OnyxAccordionItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst openAccordions = ref\u003Cstring[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAccordion v-model=\"openAccordions\" skeleton>\n    \u003COnyxAccordionItem value=\"item-1\">\n      \u003Ctemplate #header>Header 1\u003C\u002Ftemplate>\n      Content of the first accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-2\">\n      \u003Ctemplate #header>Header 2\u003C\u002Ftemplate>\n      Content of the second accordion...\n    \u003C\u002FOnyxAccordionItem>\n\n    \u003COnyxAccordionItem value=\"item-3\">\n      \u003Ctemplate #header>Header 3\u003C\u002Ftemplate>\n      Content of the third accordion...\n    \u003C\u002FOnyxAccordionItem>\n  \u003C\u002FOnyxAccordion>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1146,"title":1147,"titles":1148,"content":1149,"level":9},"\u002Fcomponents\u002Fbasic\u002Favatar","Avatar",[],"Avatars visually represent users with profile images or initials, adding a personal touch to applications by displaying the user’s identity in a compact form.",{"id":1151,"title":400,"titles":1152,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Favatar#examples",[1147],{"id":1154,"title":439,"titles":1155,"content":1156,"level":84},"\u002Fcomponents\u002Fbasic\u002Favatar#basic",[1147,400],"The avatar can either be displayed as initials only (based on the username) or with a custom profile image. If the image can not be loaded, the initials are shown automatically. Use the initials property to define custom initials to override the default auto-generated ones. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAvatar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAvatar full-name=\"Jane Doe\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F256\u002F256\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" \u002F>\n\u003C\u002Ftemplate>",{"id":1158,"title":677,"titles":1159,"content":1160,"level":84},"\u002Fcomponents\u002Fbasic\u002Favatar#sizes",[1147,400],"The avatar can be display in multiple sizes, depending on the layout and use case. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAvatar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAvatar full-name=\"Jane Doe\" size=\"16px\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" size=\"24px\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" size=\"32px\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" size=\"64px\" \u002F>\n  \u003COnyxAvatar full-name=\"Jane Doe\" size=\"96px\" \u002F>\n\u003C\u002Ftemplate>",{"id":1162,"title":1163,"titles":1164,"content":1165,"level":84},"\u002Fcomponents\u002Fbasic\u002Favatar#stack","Stack",[1147,400],"For displaying multiple grouped users, you can wrap the avatars inside the OnyxAvatarStack component. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAvatar, OnyxAvatarStack } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAvatarStack>\n    \u003COnyxAvatar full-name=\"Jane Doe 1\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F64\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"Jane Doe 2\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F65\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"Jane Doe 3\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F91\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"Jane Doe 4\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F96\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"Jane Doe 5\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F129\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"Jane Doe 6\" src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F256\u002F256\" \u002F>\n    \u003COnyxAvatar full-name=\"4 more\" initials=\"+4\" \u002F>\n  \u003C\u002FOnyxAvatarStack>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1167,"title":1168,"titles":1169,"content":1170,"level":9},"\u002Fcomponents\u002Fbasic\u002Fbadge","Badge",[],"Badges render compact, prominent status indicators associated with a parent object, such as version tags or system states. For data categorization, use the tag instead.",{"id":1172,"title":400,"titles":1173,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Fbadge#examples",[1168],{"id":1175,"title":439,"titles":1176,"content":1177,"level":84},"\u002Fcomponents\u002Fbasic\u002Fbadge#basic",[1168,400],"Badges display text, count numbers, or icons. The optional dot mode renders an indicator badge suitable for notifications. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxBadge } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxBadge>Example label\u003C\u002FOnyxBadge>\n  \u003COnyxBadge :icon=\"iconPlaceholder\" \u002F>\n  \u003COnyxBadge dot \u002F>\n\u003C\u002Ftemplate>",{"id":1179,"title":76,"titles":1180,"content":1181,"level":84},"\u002Fcomponents\u002Fbasic\u002Fbadge#colors",[1168,400],"Semantic color variants communicate status intent. See the color documentation for details. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBadge } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxBadge>Primary\u003C\u002FOnyxBadge>\n  \u003COnyxBadge color=\"neutral\">Neutral\u003C\u002FOnyxBadge>\n  \u003COnyxBadge color=\"danger\">Danger\u003C\u002FOnyxBadge>\n  \u003COnyxBadge color=\"warning\">Warning\u003C\u002FOnyxBadge>\n  \u003COnyxBadge color=\"success\">Success\u003C\u002FOnyxBadge>\n  \u003COnyxBadge color=\"info\">Info\u003C\u002FOnyxBadge>\n\u003C\u002Ftemplate>",{"id":1183,"title":1184,"titles":1185,"content":1186,"level":84},"\u002Fcomponents\u002Fbasic\u002Fbadge#clickable","Clickable",[1168,400],"Badges are static by default. Set clickable to attach click handlers (e.g. badge dismissal). An action icon and tooltip description can be configured. Tip: For interactive filter chips, use OnyxFilterBadge. \u003Cscript lang=\"ts\" setup>\nimport { iconPlusSmall, iconXSmall } from \"@sit-onyx\u002Ficons\";\nimport { OnyxBadge } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxBadge :clickable=\"{ label: 'Click to add the badge', actionIcon: iconPlusSmall }\">\n    Example label\n  \u003C\u002FOnyxBadge>\n\n  \u003COnyxBadge\n    :clickable=\"{ label: 'Click to remove the badge', actionIcon: iconXSmall, active: true }\"\n  >\n    Example label\n  \u003C\u002FOnyxBadge>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":1188,"title":1189,"titles":1190,"content":1191,"level":9},"\u002Fcomponents\u002Fbasic\u002Fflag","Flag",[],"Flags visually represent countries or territories. While Onyx provides an official flag package, any SVG flag set can be used.",{"id":1193,"title":22,"titles":1194,"content":1195,"level":19},"\u002Fcomponents\u002Fbasic\u002Fflag#installation",[1189],"Install the official flag package:",{"id":1197,"title":400,"titles":1198,"content":1199,"level":19},"\u002Fcomponents\u002Fbasic\u002Fflag#examples",[1189],"Flags share the same rendering API as icons and are displayed via the icon component.",{"id":1201,"title":677,"titles":1202,"content":1203,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflag#sizes",[1189,400],"Flags support standardized preset sizes. Setting size to inline scales the flag dynamically with surrounding font size: \u003Cscript lang=\"ts\" setup>\nimport { flagDE } from \"@sit-onyx\u002Fflags\";\nimport { OnyxIcon } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"12px\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"16px\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"32px\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"48px\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"64px\" \u002F>\n  \u003COnyxIcon :icon=\"flagDE\" size=\"96px\" \u002F>\n\u003C\u002Ftemplate>",{"id":1205,"title":1206,"titles":1207,"content":1208,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflag#country-names","Country names",[1189,400],"To display localized country names alongside flags, use JavaScript's native Intl.DisplayNames API to avoid maintaining custom dictionary maps. \u003Cscript lang=\"ts\" setup>\nimport { flagDE } from \"@sit-onyx\u002Fflags\";\nimport { OnyxIcon } from \"sit-onyx\";\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\nconst { locale } = useI18n();\nconst countryNames = computed(() => new Intl.DisplayNames(locale.value, { type: \"region\" }));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIcon :icon=\"flagDE\" \u002F>\n  \u003Cspan>{{ countryNames.of(\"DE\") }}\u003C\u002Fspan>\n\u003C\u002Ftemplate>",{"id":1210,"title":1211,"titles":1212,"content":1213,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflag#metadata","Metadata",[1189,400],"Each flag definition includes metadata (such as continent and ISO code) for search and grouping purposes. \u003Cscript lang=\"ts\" setup>\nimport * as ALL_FLAGS from \"@sit-onyx\u002Fflags\";\nimport { FLAG_METADATA, getFlagImportName } from \"@sit-onyx\u002Fflags\u002Futils\";\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>(\"DE\");\n\nconst options = Object.entries(FLAG_METADATA).map\u003CSelectOption\u003Cstring>>(\n  ([countryCode, metadata]) => {\n    const flag = ALL_FLAGS[getFlagImportName(countryCode) as keyof typeof ALL_FLAGS];\n    return {\n      label: metadata.internationalName,\n      group: metadata.continent,\n      value: countryCode,\n      icon: flag,\n    };\n  },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Flag\" list-label=\"Available flags\" :options with-search \u002F>\n\u003C\u002Ftemplate>",{"id":1215,"title":1216,"titles":1217,"content":1218,"level":19},"\u002Fcomponents\u002Fbasic\u002Fflag#available-flags","Available flags",[1189],"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1220,"title":1221,"titles":1222,"content":1223,"level":9},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu","Flyout menu",[],"The flyout menu is used to create navigation or action menus that are positioned relative to a parent element and appear when the user clicks or hovers over them.",{"id":1225,"title":400,"titles":1226,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#examples",[1221],{"id":1228,"title":439,"titles":1229,"content":1230,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#basic",[1221,400],"A predefined system button is used as the trigger, if it is not overridden via the button slot. Options for the menu must be passed in using the options slot. Each option supports a label, icon and optional link by default but custom content can be passed as slot if needed. For more information, please refer to the menu item. Hover The flyout menu is triggered on hover by default. \u003Cscript lang=\"ts\" setup>\nimport { iconEdit, iconExpandWindow, iconTrash } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Open\" :icon=\"iconExpandWindow\" link=\"#\" \u002F>\n      \u003COnyxMenuItem label=\"Edit\" :icon=\"iconEdit\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Delete\" :icon=\"iconTrash\" color=\"danger\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>\nClick Optionally, the flyout menu can be triggered on click. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\" trigger=\"click\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Item 1\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Item 2\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Item 3\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>",{"id":1232,"title":1233,"titles":1234,"content":1235,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#custom-trigger","Custom trigger",[1221,400],"The default trigger button can be overridden with any custom component. However, the trigger must be an interactive element such as a button or link. Make sure to bind the trigger slot property to the custom trigger, otherwise the flyout will not open\u002Fclose on hover or click. \u003Cscript lang=\"ts\" setup>\nimport { iconGlobe } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Choose application language\">\n    \u003Ctemplate #button=\"{ trigger }\">\n      \u003COnyxButton v-bind=\"trigger\" label=\"English\" :icon=\"iconGlobe\" color=\"neutral\" mode=\"plain\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"English\" active @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"German\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Spanish\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>",{"id":1237,"title":1238,"titles":1239,"content":1240,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#nested-options","Nested options",[1221,400],"Nested hierarchical data can be displayed using a drilldown where the user can open an option to see the nested related options. Internal drilldown The internal drilldown only shows a single flyout menu which is replaced with the nested options when navigating. A \"Back\" button is shown to navigate back to the previous layer. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Item 1\">\n        \u003Ctemplate #children>\n          \u003COnyxMenuItem label=\"Nested 1.1.1\" \u002F>\n\n          \u003COnyxMenuItem label=\"Nested 1.1.2\">\n            \u003Ctemplate #children>\n              \u003COnyxMenuItem label=\"Nested 1.2.1\" \u002F>\n              \u003COnyxMenuItem label=\"Nested 1.2.2\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxMenuItem>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxMenuItem>\n\n      \u003COnyxMenuItem label=\"Item 2\" \u002F>\n      \u003COnyxMenuItem label=\"Item 3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>\nExternal drilldown With the external drilldown, the nested options are expanded using additional flyout menus so all layers can be display at the same time. Make sure to only use a limited number of layers with the external drilldown to prevent cluttering the screen with many flyouts. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\" drilldown-mode=\"external\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Item 1\">\n        \u003Ctemplate #children>\n          \u003COnyxMenuItem label=\"Nested 1.1.1\" \u002F>\n\n          \u003COnyxMenuItem label=\"Nested 1.1.2\">\n            \u003Ctemplate #children>\n              \u003COnyxMenuItem label=\"Nested 1.2.1\" \u002F>\n              \u003COnyxMenuItem label=\"Nested 1.2.2\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxMenuItem>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxMenuItem>\n\n      \u003COnyxMenuItem label=\"Item 2\" \u002F>\n      \u003COnyxMenuItem label=\"Item 3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>",{"id":1242,"title":1243,"titles":1244,"content":1245,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#position-and-alignment","Position and alignment",[1221,400],"The position (placement of the flyout menu around the trigger) and alignment (relative to the trigger, based on the position) are calculated automatically depending on the placement on the screen. This ensures optimized visibility across multiple layouts and screen sizes. The position and alignment can be changed if needed but be aware that the flyout might not be ideally placed or not fully visible on all devices and layouts then. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\" position=\"right\" alignment=\"center\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Item 1\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Item 2\" @click=\"handleClick\" \u002F>\n      \u003COnyxMenuItem label=\"Item 3\" @click=\"handleClick\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>",{"id":1247,"title":426,"titles":1248,"content":1249,"level":84},"\u002Fcomponents\u002Fbasic\u002Fflyout-menu#disabled",[1221,400],"The disabled state can be used to prevent opening the flyout. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFlyoutMenu, OnyxMenuItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu label=\"Actions\" disabled>\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Item 1\" \u002F>\n      \u003COnyxMenuItem label=\"Item 2\" \u002F>\n      \u003COnyxMenuItem label=\"Item 3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":1251,"title":1252,"titles":1253,"content":1254,"level":9},"\u002Fcomponents\u002Fbasic\u002Ficon","Icon",[],"Icons enhance visual communication and accessibility within the interface. We recommend using our official icons listed below but any SVG icon library is compatible with our design system.",{"id":1256,"title":22,"titles":1257,"content":1258,"level":19},"\u002Fcomponents\u002Fbasic\u002Ficon#installation",[1252],"To use our official icon library, install it into your project first:",{"id":1260,"title":400,"titles":1261,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Ficon#examples",[1252],{"id":1263,"title":677,"titles":1264,"content":1265,"level":84},"\u002Fcomponents\u002Fbasic\u002Ficon#sizes",[1252,400],"To ensure a consistent look and usage across multiple pages and applications, the component offers several predefined sizes. Set size=\"inline\" to use the current text size, which is useful for embedding the icon within continuous text. \u003Cscript lang=\"ts\" setup>\nimport { iconCookie } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIcon } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"12px\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"16px\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"32px\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"48px\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"64px\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" size=\"96px\" \u002F>\n\u003C\u002Ftemplate>",{"id":1267,"title":76,"titles":1268,"content":1269,"level":84},"\u002Fcomponents\u002Fbasic\u002Ficon#colors",[1252,400],"Several colors are available to emphasize the icon's meaning. See our color documentation for more information. If no color is set explicitly (default), the icon will use the current text color defined by the parent element. \u003Cscript lang=\"ts\" setup>\nimport { iconCookie } from \"@sit-onyx\u002Ficons\";\nimport { OnyxIcon } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"primary\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"neutral\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"danger\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"warning\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"success\" \u002F>\n  \u003COnyxIcon :icon=\"iconCookie\" color=\"info\" \u002F>\n\u003C\u002Ftemplate>",{"id":1271,"title":1211,"titles":1272,"content":1273,"level":84},"\u002Fcomponents\u002Fbasic\u002Ficon#metadata",[1252,400],"We also include some metadata for each icon such as the category and aliases which can e.g. be used to group icons. \u003Cscript lang=\"ts\" setup>\nimport * as ALL_ICONS from \"@sit-onyx\u002Ficons\";\nimport { ICON_METADATA, getIconImportName } from \"@sit-onyx\u002Ficons\u002Futils\";\nimport { OnyxSelect, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref\u003Cstring>(\"cookie\");\n\nconst options = Object.entries(ICON_METADATA).map\u003CSelectOption\u003Cstring>>(([iconName, metadata]) => {\n  const icon = ALL_ICONS[getIconImportName(iconName) as keyof typeof ALL_ICONS];\n  return {\n    label: iconName,\n    group: metadata.category,\n    value: iconName,\n    icon,\n  };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSelect v-model=\"value\" label=\"Icon\" list-label=\"Available icons\" :options with-search \u002F>\n\u003C\u002Ftemplate>",{"id":1275,"title":1276,"titles":1277,"content":1218,"level":19},"\u002Fcomponents\u002Fbasic\u002Ficon#available-icons","Available icons",[1252],{"id":1279,"title":1280,"titles":1281,"content":1282,"level":9},"\u002Fcomponents\u002Fbasic\u002Fimage","Image",[],"Image components are essential elements in web design, serving multiple purposes to enhance the visual appeal, user experience and functionality of an application. For general recommendations on how to use images, please refer to our:",{"id":1284,"title":400,"titles":1285,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Fimage#examples",[1280],{"id":1287,"title":439,"titles":1288,"content":1289,"level":84},"\u002Fcomponents\u002Fbasic\u002Fimage#basic",[1280,400],"The image component enforces high accessibility standards by e.g. requiring to define an alternative text as well as a width and height to prevent layout shifts. You can still define a custom size using CSS. \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F512\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"512\"\n    :height=\"256\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1291,"title":1292,"titles":1293,"content":1294,"level":84},"\u002Fcomponents\u002Fbasic\u002Fimage#light-and-dark-mode","Light and dark mode",[1280,400],"You can also define a different image for light and for dark mode which will automatically be displayed depending on the current theme. \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    :src=\"{\n      light: 'https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F512\u002F256',\n      dark: 'https:\u002F\u002Fpicsum.photos\u002Fid\u002F133\u002F512\u002F256',\n    }\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"512\"\n    :height=\"256\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1296,"title":1297,"titles":1298,"content":1299,"level":84},"\u002Fcomponents\u002Fbasic\u002Fimage#shapes","Shapes",[1280,400],"The image supports multiple common shapes \u002F border styles. Rounded \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F512\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"512\"\n    :height=\"256\"\n    shape=\"rounded\"\n  \u002F>\n\u003C\u002Ftemplate>\nCircle \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F256\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"256\"\n    :height=\"256\"\n    shape=\"circle\"\n  \u002F>\n\u003C\u002Ftemplate>\nClipped \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F256\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"256\"\n    :height=\"256\"\n    shape=\"clip\"\n  \u002F>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F256\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"256\"\n    :height=\"256\"\n    shape=\"clip-inverted\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1301,"title":574,"titles":1302,"content":1303,"level":84},"\u002Fcomponents\u002Fbasic\u002Fimage#skeleton",[1280,400],"The skeleton can be used on initial page load when the data for the page \u002F image is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxImage } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxImage\n    src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F512\u002F256\"\n    alt=\"Alt text that describes the content of the image...\"\n    :width=\"512\"\n    :height=\"256\"\n    skeleton\n  \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1305,"title":1306,"titles":1307,"content":1308,"level":9},"\u002Fcomponents\u002Fbasic\u002Fmenu-item","Menu item",[],"The menu item represents a single action inside of a parent menu component such as the flyout menu. It is not intended for standalone use.",{"id":1310,"title":400,"titles":1311,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Fmenu-item#examples",[1306],{"id":1313,"title":439,"titles":1314,"content":1315,"level":84},"\u002Fcomponents\u002Fbasic\u002Fmenu-item#basic",[1306,400],"The basic menu item supports a label and an optional icon. \u003Cscript lang=\"ts\" setup>\nimport { iconExpandWindow, iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFlyoutMenu, OnyxMenuItem, OnyxTag } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst open = ref(true);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFlyoutMenu v-model:open=\"open\" label=\"Actions\">\n    \u003Ctemplate #options>\n      \u003COnyxMenuItem label=\"Label only\" \u002F>\n      \u003COnyxMenuItem label=\"Label and icon\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxMenuItem\n        label=\"With link\"\n        :icon=\"iconExpandWindow\"\n        link=\"\u002Fcomponents\u002Fbasic\u002Fflyout-menu\"\n      \u002F>\n      \u003COnyxMenuItem label=\"Active\" :icon=\"iconPlaceholder\" active \u002F>\n      \u003COnyxMenuItem label=\"Disabled\" :icon=\"iconPlaceholder\" disabled \u002F>\n      \u003COnyxMenuItem label=\"Danger\" :icon=\"iconPlaceholder\" color=\"danger\" \u002F>\n\n      \u003COnyxMenuItem>\n        Custom content\n        \u003COnyxTag label=\"Tag\" \u002F>\n      \u003C\u002FOnyxMenuItem>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFlyoutMenu>\n\u003C\u002Ftemplate>",{"id":1317,"title":1238,"titles":1318,"content":1319,"level":84},"\u002Fcomponents\u002Fbasic\u002Fmenu-item#nested-options",[1306,400],"See our flyout menu documentation for examples with nested options: html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1321,"title":1322,"titles":1323,"content":1324,"level":9},"\u002Fcomponents\u002Fbasic\u002Fshortcut","Shortcut",[],"The shortcut component offers a visual representation of a shortcut sequence. It supports multi-step sequences and operating system-specific symbols for macOS and Windows. It can also highlight pressed keys interactively.",{"id":1326,"title":400,"titles":1327,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Fshortcut#examples",[1322],{"id":1329,"title":439,"titles":1330,"content":1331,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#basic",[1322,400],"A basic shortcut consists out of one or multiple keys. Optionally, the highlight property can be set to auto to visually highlight pressed keys of the shortcut. The following shortcut is executed when pressing Control and C at the same time. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut } from \"sit-onyx\";\n\nconst handleComplete = () => {\n  \u002F\u002F your logic here when the full shortcut is pressed...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableShortcut\n    :sequence=\"[{ all: ['Control', 'C'] }]\"\n    highlight=\"auto\"\n    @complete=\"handleComplete\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1333,"title":1334,"titles":1335,"content":1336,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#multiple-steps","Multiple steps",[1322,400],"The shortcut can also contain multiple steps that the user must press in a specific order. Each step can define keys where either all of them must be pressed at the same time or any (at least one) of them must be pressed. The following shortcut is executed when pressing Control and K at the same time first, then releasing both keys and finally pressing only either A or B. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut } from \"sit-onyx\";\n\nconst handleComplete = () => {\n  \u002F\u002F your logic here when the full shortcut is pressed...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableShortcut\n    :sequence=\"[{ all: ['Control', 'K'] }, { any: ['A', 'B'] }]\"\n    highlight=\"auto\"\n    @complete=\"handleComplete\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1338,"title":1339,"titles":1340,"content":1341,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#nested-steps","Nested steps",[1322,400],"Shortcut steps can also be nested for both single and multi step shortcuts. The following shortcut is executed when pressing Control, K and either A or B together at the same time. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut } from \"sit-onyx\";\n\nconst handleComplete = () => {\n  \u002F\u002F your logic here when the full shortcut is pressed...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableShortcut\n    :sequence=\"[{ all: ['Control', 'K', { any: ['A', 'B'] }] }]\"\n    highlight=\"auto\"\n    @complete=\"handleComplete\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1343,"title":1344,"titles":1345,"content":1346,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#composable","Composable",[1322,400],"We also offer a composable (which is also used internally by our shortcut component) for reacting to shortcut sequences. It can be used independently from the shortcut component. \u003Cscript lang=\"ts\" setup>\nimport { _unstableUseShortcut, useToast } from \"sit-onyx\";\n\nconst toast = useToast();\n\n_unstableUseShortcut({\n  sequence: [{ all: [\"Shift\", \"7\"] }],\n  onComplete: () => {\n    \u002F\u002F your logic here when the full shortcut is pressed...\n    toast.show({\n      headline: \"Successfully pressed shortcut\",\n      description: \"This shortcut was triggered using the shortcut composable\",\n      color: \"success\",\n    });\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp class=\"description\">Press (Shift + 7) to trigger the shortcut.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.description {\n  color: var(--onyx-color-text-icons-info-intense);\n}\n\u003C\u002Fstyle>",{"id":1348,"title":1349,"titles":1350,"content":1351,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#operating-system","Operating system",[1322,400],"The users operating system is detected automatically by default to show OS-specific key symbols such as \"Command\" on macOS or the \"Windows\" key on Windows. If necessary, the operating system can be explicitly defined using the os property or be set to generic to use OS-independent symbols. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut, ShortcutSequenceStep } from \"sit-onyx\";\n\nconst sequence: ShortcutSequenceStep[] = [{ all: [\"Meta\"] }];\n\nconst handleComplete = () => {\n  \u002F\u002F your logic here when the full shortcut is pressed...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"shortcut\">\n    \u003COnyxUnstableShortcut :sequence @complete=\"handleComplete\" \u002F>\n    Auto\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"shortcut\">\n    \u003COnyxUnstableShortcut :sequence os=\"macOS\" @complete=\"handleComplete\" \u002F>\n    macOS\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"shortcut\">\n    \u003COnyxUnstableShortcut :sequence os=\"windows\" @complete=\"handleComplete\" \u002F>\n    Windows\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"shortcut\">\n    \u003COnyxUnstableShortcut :sequence os=\"generic\" @complete=\"handleComplete\" \u002F>\n    Generic\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.shortcut {\n  display: flex;\n  align-items: center;\n  gap: var(--onyx-density-xs);\n}\n\u003C\u002Fstyle>",{"id":1353,"title":426,"titles":1354,"content":1355,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#disabled",[1322,400],"The disabled state can be used to prevent listening to keyboard events so the shortcut is not executed when pressing the defined keys. This can be useful when the shortcut should only be displayed visually but should not actually be listened for to improve performance. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableShortcut :sequence=\"[{ all: ['Control', 'C'] }]\" highlight=\"auto\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":1357,"title":574,"titles":1358,"content":1359,"level":84},"\u002Fcomponents\u002Fbasic\u002Fshortcut#skeleton",[1322,400],"The skeleton can be used on initial page load when the data for the page \u002F shortcut is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableShortcut } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableShortcut :sequence=\"[{ all: ['Control', 'C'] }]\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1361,"title":1362,"titles":1363,"content":1364,"level":9},"\u002Fcomponents\u002Fbasic\u002Ftag","Tag",[],"Tags provide contextual metadata for related parent elements, such as categories or classification labels. For application-level or system status indicators, use the badge instead.",{"id":1366,"title":400,"titles":1367,"content":367,"level":19},"\u002Fcomponents\u002Fbasic\u002Ftag#examples",[1362],{"id":1369,"title":439,"titles":1370,"content":1371,"level":84},"\u002Fcomponents\u002Fbasic\u002Ftag#basic",[1362,400],"Tags require a text label and can include an optional icon. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTag label=\"Example label\" \u002F>\n  \u003COnyxTag label=\"Example label\" :icon=\"iconPlaceholder\" \u002F>\n\u003C\u002Ftemplate>",{"id":1373,"title":76,"titles":1374,"content":1375,"level":84},"\u002Fcomponents\u002Fbasic\u002Ftag#colors",[1362,400],"Semantic color variants highlight data status or categories. See the color documentation for token details. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTag label=\"Primary\" color=\"primary\" \u002F>\n  \u003COnyxTag label=\"Neutral\" \u002F>\n  \u003COnyxTag label=\"Danger\" color=\"danger\" \u002F>\n  \u003COnyxTag label=\"Warning\" color=\"warning\" \u002F>\n  \u003COnyxTag label=\"Success\" color=\"success\" \u002F>\n  \u003COnyxTag label=\"Info\" color=\"info\" \u002F>\n\u003C\u002Ftemplate>",{"id":1377,"title":1184,"titles":1378,"content":1379,"level":84},"\u002Fcomponents\u002Fbasic\u002Ftag#clickable",[1362,400],"Tags are non-interactive by default. Enable clickable to execute actions on click (e.g. tag dismissal). An action icon and tooltip description can be configured. Tip: For interactive filter controls, use OnyxFilterTag. \u003Cscript lang=\"ts\" setup>\nimport { iconXSmall } from \"@sit-onyx\u002Ficons\";\nimport { OnyxTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTag\n    label=\"Example label\"\n    :clickable=\"{ label: 'Click to remove the tag', actionIcon: iconXSmall }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1381,"title":574,"titles":1382,"content":1383,"level":84},"\u002Fcomponents\u002Fbasic\u002Ftag#skeleton",[1362,400],"Use the skeleton during data fetching. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTag label=\"Example label\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1385,"title":1386,"titles":1387,"content":1388,"level":9},"\u002Fcomponents\u002Fcards\u002Fcard","Card",[],"Cards serve as versatile containers for a few short, related pieces of content. Their primary purpose is to present information in a visually appealing and organized manner, enhancing user experience and content discoverability.",{"id":1390,"title":400,"titles":1391,"content":1392,"level":19},"\u002Fcomponents\u002Fcards\u002Fcard#examples",[1386],"Since cards a very flexible and generic components, the content highly depends on the use case and is fully customizable. You can find a few examples below to get started, feel free to copy and adjust them if needed or create your own cards from scratch.",{"id":1394,"title":439,"titles":1395,"content":1396,"level":84},"\u002Fcomponents\u002Fcards\u002Fcard#basic",[1386,400],"\u003Cscript lang=\"ts\" setup>\nimport { OnyxCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\">\n    Note: The card component is fully flexible. It can be adjusted with every content the project\n    needs.\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  color: var(--onyx-color-text-icons-info-intense);\n}\n\u003C\u002Fstyle>",{"id":1398,"title":1184,"titles":1399,"content":1400,"level":84},"\u002Fcomponents\u002Fcards\u002Fcard#clickable",[1386,400],"The whole card can be made clickable in two ways: As button or as link. Button Set the clickable property to use a button card that can be clicked to perform any custom action. \u003Cscript lang=\"ts\" setup>\nimport { iconTouchPress } from \"@sit-onyx\u002Ficons\";\nimport { OnyxCard, OnyxHeadline, OnyxIcon, useToast } from \"sit-onyx\";\n\nconst toast = useToast();\n\nconst handleClick = () => {\n  \u002F\u002F your logic here...\n  toast.show({\n    headline: \"Card clicked\",\n    description: \"Implement your custom logic here...\",\n  });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\" clickable @click=\"handleClick\">\n    \u003COnyxIcon :icon=\"iconTouchPress\" size=\"48px\" \u002F>\n\n    \u003Cdiv class=\"card__content\">\n      \u003COnyxHeadline is=\"h3\">Example headline\u003C\u002FOnyxHeadline>\n      This is an example description for a clickable card.\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  flex-direction: row;\n  gap: var(--onyx-density-md);\n\n  &:hover {\n    background-color: var(--onyx-color-base-neutral-200);\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n    flex-grow: 1;\n  }\n}\n\u003C\u002Fstyle>\nLink Alternatively, use the link property to add a link to another page. \u003Cscript lang=\"ts\" setup>\nimport { iconArrowSmallRight, iconExpandWindow, iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { isInternalLink, OnyxCard, type OnyxCardProps, OnyxHeadline, OnyxIcon } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\nconst link: OnyxCardProps[\"link\"] = { href: \"https:\u002F\u002Fonyx.schwarz\", target: \"_blank\" };\n\n\u002F\u002F we want to show a different arrow icon based on whether the link is internal (same application) or external\nconst isInternal = computed(() => {\n  if (!link) return;\n  const normalizedLink = typeof link === \"string\" ? { href: link } : link;\n  return isInternalLink(normalizedLink.href);\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\" :link>\n    \u003COnyxIcon :icon=\"iconPlaceholder\" size=\"48px\" \u002F>\n\n    \u003Cdiv class=\"card__content\">\n      \u003COnyxHeadline is=\"h3\">Example headline\u003C\u002FOnyxHeadline>\n      This is an example description for a link card.\n    \u003C\u002Fdiv>\n\n    \u003COnyxIcon class=\"card__arrow\" :icon=\"isInternal ? iconArrowSmallRight : iconExpandWindow\" \u002F>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  flex-direction: row;\n  gap: var(--onyx-density-md);\n\n  &:hover {\n    background-color: var(--onyx-color-base-neutral-200);\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n    flex-grow: 1;\n  }\n\n  &__arrow {\n    align-self: center;\n  }\n}\n\u003C\u002Fstyle> Clickable cards must NOT contain any interactive elements inside the content since the whole card is already interactive. If you need to add multiple actions, leave the card non-interactive and add the actions e.g. with multiple buttons inside the card.",{"id":1402,"title":1403,"titles":1404,"content":1405,"level":84},"\u002Fcomponents\u002Fcards\u002Fcard#image-card","Image card",[1386,400],"An image-based card to represent information with additional data such as image, category, tags etc. \u003Cscript lang=\"ts\" setup>\nimport {\n  OnyxButton,\n  OnyxCard,\n  OnyxFlyoutMenu,\n  OnyxHeadline,\n  OnyxImage,\n  OnyxMenuItem,\n  OnyxTag,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\">\n    \u003COnyxImage\n      class=\"card__image\"\n      alt=\"Example image\"\n      src=\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F16\u002F320\u002F128\"\n      :height=\"128\"\n      :width=\"320\"\n      shape=\"rounded\"\n    \u002F>\n\n    \u003Cdiv class=\"card__header\">\n      \u003Cdiv>\n        \u003Cdiv class=\"card__category onyx-text--small\">Category name\u003C\u002Fdiv>\n        \u003COnyxHeadline is=\"h2\">Example headline\u003C\u002FOnyxHeadline>\n      \u003C\u002Fdiv>\n\n      \u003COnyxFlyoutMenu label=\"Actions\" trigger=\"click\">\n        \u003Ctemplate #options>\n          \u003COnyxMenuItem>Action 1\u003C\u002FOnyxMenuItem>\n          \u003COnyxMenuItem>Action 2\u003C\u002FOnyxMenuItem>\n          \u003COnyxMenuItem>Action 3\u003C\u002FOnyxMenuItem>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxFlyoutMenu>\n    \u003C\u002Fdiv>\n\n    \u003Cp class=\"card__description\">\n      Lorem ipsum dolor sit amet consectetur. Id neque viverra faucibus ullamcorper dui volutpat.\n      Vel nec aliquet lorem turpis eu dui. At pellentesque senectus sed volutpat vitae nulla. Nisl\n      cursus dignissim sed eget neque tristique interdum pretium elit.\n    \u003C\u002Fp>\n\n    \u003Cdiv class=\"card__tags\">\n      \u003COnyxTag v-for=\"i in 4\" :key=\"i\" label=\"Tag\" color=\"neutral\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003COnyxButton class=\"card__button\" label=\"Button\" \u002F>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  --onyx-card-gap: var(--onyx-density-md);\n\n  &__image {\n    width: 100%;\n  }\n\n  &__category {\n    color: var(--onyx-color-text-icons-neutral-medium);\n  }\n\n  &__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--onyx-card-gap);\n  }\n\n  &__description {\n    color: var(--onyx-color-text-icons-neutral-medium);\n  }\n\n  &__tags {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--onyx-density-xs);\n  }\n\n  &__button {\n    width: 100%;\n  }\n}\n\u003C\u002Fstyle>",{"id":1407,"title":1408,"titles":1409,"content":1410,"level":84},"\u002Fcomponents\u002Fcards\u002Fcard#details-card","Details card",[1386,400],"A details card can be used to represent and focus on data-heavy use cases. \u003Cscript lang=\"ts\" setup>\nimport { iconCheck, iconFileCopy, iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxButton,\n  OnyxCard,\n  OnyxHeadline,\n  OnyxIcon,\n  OnyxSeparator,\n  OnyxSystemButton,\n  OnyxTag,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\">\n    \u003Cdiv class=\"card__header\">\n      \u003Cdiv class=\"card__icon-wrapper\">\n        \u003COnyxIcon class=\"card__icon\" :icon=\"iconCheck\" size=\"16px\" \u002F>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv>\n        \u003COnyxHeadline is=\"h2\">Action successful!\u003C\u002FOnyxHeadline>\n        \u003Cdiv class=\"card__description onyx-text--small\">\n          Lorem ipsum dolor sit amet consectetur.\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003COnyxSeparator \u002F>\n\n    \u003Cdiv class=\"card__details\">\n      \u003Cdiv class=\"detail\">\n        \u003Cspan class=\"detail__label\">Number\u003C\u002Fspan>\n        \u003Cspan class=\"detail__value onyx-text--monospace\">\n          48164100740\n          \u003COnyxSystemButton label=\"Copy number\" :icon=\"iconFileCopy\" \u002F>\n        \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"detail\">\n        \u003Cspan class=\"detail__label\">Date\u003C\u002Fspan>\n        \u003Cspan class=\"detail__value\"> 10\u002F08\u002F25 \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"detail\">\n        \u003Cspan class=\"detail__label\">Time\u003C\u002Fspan>\n        \u003Cspan class=\"detail__value\"> 10:42 \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"detail\">\n        \u003Cspan class=\"detail__label\">Status\u003C\u002Fspan>\n        \u003Cspan class=\"detail__value\">\n          \u003COnyxTag label=\"waiting\" color=\"warning\" \u002F>\n        \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003COnyxButton class=\"card__button\" label=\"Button\" mode=\"outline\" :icon=\"iconPlaceholder\" \u002F>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  --onyx-card-gap: var(--onyx-density-md);\n  text-align: center;\n\n  &__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-card-gap);\n    align-items: center;\n  }\n\n  &__icon-wrapper {\n    border-radius: var(--onyx-radius-full);\n    background-color: var(--onyx-color-base-success-100);\n    padding: var(--onyx-density-lg);\n    width: max-content;\n  }\n\n  &__icon {\n    color: #fff;\n    background-color: var(--onyx-color-text-icons-success-intense);\n    border-radius: var(--onyx-radius-full);\n    padding: var(--onyx-density-xs);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n  }\n\n  &__description {\n    color: var(--onyx-color-text-icons-neutral-medium);\n    margin-top: var(--onyx-density-3xs);\n  }\n\n  &__details {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-xs);\n  }\n\n  &__button {\n    width: 100%;\n  }\n}\n\n.detail {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--onyx-density-xs);\n\n  &__label {\n    color: var(--onyx-color-text-icons-neutral-soft);\n    font-size: var(--onyx-font-size-sm);\n    line-height: var(--onyx-font-line-height-sm);\n  }\n\n  &__value {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--onyx-density-2xs);\n  }\n}\n\u003C\u002Fstyle>",{"id":1412,"title":1413,"titles":1414,"content":1415,"level":84},"\u002Fcomponents\u002Fcards\u002Fcard#kpi-card","KPI card",[1386,400],"KPI cards can be used to prominently display specific import values. \u003Cscript lang=\"ts\" setup>\nimport { iconArrowSmallUp, iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxCard, OnyxIcon, OnyxTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCard class=\"card\">\n    \u003Cdiv class=\"card__header\">\n      Example KPI name\n\n      \u003Cdiv class=\"card__icon\">\n        \u003COnyxIcon :icon=\"iconPlaceholder\" size=\"16px\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card__content\">\n      \u003Cspan class=\"card__value\"> 5.0 \u003C\u002Fspan>\n      \u003COnyxTag label=\"4.2 %\" :icon=\"iconArrowSmallUp\" density=\"compact\" color=\"success\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxCard>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  &__header {\n    color: var(--onyx-color-text-icons-neutral-medium);\n    display: flex;\n    justify-content: space-between;\n    gap: var(--onyx-card-gap);\n    width: 100%;\n  }\n\n  &__icon {\n    color: #fff;\n    background-color: var(--onyx-color-text-icons-primary-intense);\n    border-radius: var(--onyx-radius-full);\n    padding: var(--onyx-density-xs);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: content-box;\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--onyx-density-md);\n  }\n\n  &__value {\n    font-size: 3rem;\n    line-height: 2.75rem;\n    font-weight: var(--onyx-font-weight-semibold);\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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}",{"id":1417,"title":1418,"titles":1419,"content":1420,"level":9},"\u002Fcomponents\u002Fcards\u002Ffile-card","File card",[],"The file card is used to represent a selected or upload file. It is mainly used by the file upload component but can also be used individually.",{"id":1422,"title":400,"titles":1423,"content":367,"level":19},"\u002Fcomponents\u002Fcards\u002Ffile-card#examples",[1418],{"id":1425,"title":439,"titles":1426,"content":1427,"level":84},"\u002Fcomponents\u002Fcards\u002Ffile-card#basic",[1418,400],"The file card shows file metadata such as the file name and size. If set, the filename is clickable and will open a link to the file. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { MediaType, OnyxFileCard } from \"sit-onyx\";\nimport { onBeforeUnmount } from \"vue\";\n\n\u002F\u002F create an initial dummy file for this example\nconst file = new File([iconPlaceholder], \"icon-placeholder.svg\", { type: \"image\u002Fsvg+xml\" });\nconst link = URL.createObjectURL(file);\nonBeforeUnmount(() => URL.revokeObjectURL(link));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileCard\n    :filename=\"file.name\"\n    :size=\"file.size\"\n    :type=\"file.type as MediaType\"\n    :link=\"{ href: link, target: '_blank' }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1429,"title":1430,"titles":1431,"content":1432,"level":84},"\u002Fcomponents\u002Fcards\u002Ffile-card#actions","Actions",[1418,400],"Custom actions can be provided to support additional functionality like deleting, downloading etc. \u003Cscript lang=\"ts\" setup>\nimport { iconMoreVerticalSmall, iconTrash } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFileCard, OnyxFlyoutMenu, OnyxIconButton, OnyxMenuItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileCard filename=\"example.pdf\" size=\"42MiB\" type=\"application\u002Fpdf\">\n    \u003Ctemplate #actions>\n      \u003COnyxFlyoutMenu label=\"More actions\" trigger=\"click\">\n        \u003Ctemplate #button=\"{ trigger }\">\n          \u003COnyxIconButton\n            v-bind=\"trigger\"\n            label=\"Toggle more actions\"\n            color=\"neutral\"\n            :icon=\"iconMoreVerticalSmall\"\n          \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #options>\n          \u003COnyxMenuItem label=\"Action 1\" \u002F>\n          \u003COnyxMenuItem label=\"Action 2\" \u002F>\n          \u003COnyxMenuItem label=\"Action 3\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxFlyoutMenu>\n\n      \u003COnyxIconButton color=\"danger\" :icon=\"iconTrash\" label=\"Remove file\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFileCard>\n\u003C\u002Ftemplate>",{"id":1434,"title":1435,"titles":1436,"content":1437,"level":84},"\u002Fcomponents\u002Fcards\u002Ffile-card#status","Status",[1418,400],"Multiple status can be used to represent states like uploaded, error, warning etc. A optional progress bar can be shown.\nSee our color documentation for when to use which color. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFileCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Primary', color: 'primary', progress: 50 }\"\n  \u002F>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Neutral', color: 'neutral', progress: 50 }\"\n  \u002F>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Danger', color: 'danger', progress: 50 }\"\n  \u002F>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Warning', color: 'warning', progress: 50 }\"\n  \u002F>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Success', color: 'success', progress: 50 }\"\n  \u002F>\n  \u003COnyxFileCard\n    filename=\"example.pdf\"\n    size=\"42MiB\"\n    type=\"application\u002Fpdf\"\n    :status=\"{ text: 'Info', color: 'info', progress: 50 }\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1439,"title":1440,"titles":1441,"content":1442,"level":84},"\u002Fcomponents\u002Fcards\u002Ffile-card#interactive-upload","Interactive upload",[1418,400],"The file card itself only displays the file but has no actual upload logic since this heavily depends on the backend that is uploaded to. This examples shows how a upload process can look like. \u003Cscript lang=\"ts\" setup>\nimport {\n  iconCircleX,\n  iconCloudArrowUp,\n  iconMediaPause,\n  iconMediaPlay,\n  iconTrash,\n} from \"@sit-onyx\u002Ficons\";\nimport { OnyxFileCard, OnyxIconButton, type FileCardStatus } from \"sit-onyx\";\nimport { computed, onUnmounted, ref } from \"vue\";\n\ntype UploadStatus = \"ready\" | \"paused\" | \"canceled\" | \"processing\" | \"done\";\n\n\u002F**\n * Re-usable composable for managing the file upload state.\n * Should be extracted to a different .ts file in a real project.\n *\u002F\nconst useFileUpload = () => {\n  const progress = ref(0);\n  const status = ref\u003CUploadStatus>(\"ready\");\n\n  let intervalId: ReturnType\u003Ctypeof setInterval> | undefined;\n\n  const removeInterval = () => {\n    clearInterval(intervalId);\n    intervalId = undefined;\n  };\n\n  onUnmounted(removeInterval);\n\n  const start = () => {\n    if (intervalId != undefined) return;\n    status.value = \"processing\";\n\n    \u002F\u002F TODO: implement your actual upload here\n    \u002F\u002F for this demo purpose, we will just use an interval\n    intervalId = setInterval(() => {\n      progress.value++;\n\n      if (progress.value >= 100) {\n        removeInterval();\n        status.value = \"done\";\n        progress.value = 0;\n      }\n    }, 50);\n  };\n\n  const pause = () => {\n    removeInterval();\n    status.value = \"paused\";\n  };\n\n  const cancel = () => {\n    removeInterval();\n    status.value = \"canceled\";\n    progress.value = 0;\n  };\n\n  return { progress, status, start, pause, cancel };\n};\n\nconst { status, progress, start, pause, cancel } = useFileUpload();\n\nconst cardStatus = computed\u003CFileCardStatus>(() => {\n  let _status: FileCardStatus;\n\n  switch (status.value) {\n    case \"ready\":\n      _status = { text: \"Ready to upload\", color: \"neutral\" };\n      break;\n    case \"paused\":\n      _status = { text: \"Paused\", color: \"neutral\" };\n      break;\n    case \"canceled\":\n      _status = { text: \"Canceled\", color: \"danger\" };\n      break;\n    case \"done\":\n      _status = { text: \"Uploaded\", color: \"success\" };\n      break;\n    default:\n      _status = { text: `${progress.value}%`, color: \"primary\" };\n  }\n\n  return { ..._status, progress: progress.value };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileCard filename=\"example.pdf\" type=\"application\u002Fpdf\" size=\"42MiB\" :status=\"cardStatus\">\n    \u003Ctemplate #actions>\n      \u003COnyxIconButton\n        v-if=\"status === 'ready' || status === 'canceled'\"\n        label=\"Start upload\"\n        :icon=\"iconCloudArrowUp\"\n        color=\"primary\"\n        @click=\"start()\"\n      \u002F>\n      \u003COnyxIconButton\n        v-if=\"status === 'processing'\"\n        label=\"Pause upload\"\n        :icon=\"iconMediaPause\"\n        color=\"neutral\"\n        @click=\"pause()\"\n      \u002F>\n      \u003COnyxIconButton\n        v-if=\"status === 'paused'\"\n        label=\"Continue upload\"\n        :icon=\"iconMediaPlay\"\n        color=\"neutral\"\n        @click=\"start()\"\n      \u002F>\n      \u003COnyxIconButton\n        v-if=\"status === 'processing' || status === 'paused'\"\n        label=\"Cancel upload\"\n        :icon=\"iconCircleX\"\n        color=\"neutral\"\n        @click=\"cancel()\"\n      \u002F>\n\n      \u003COnyxIconButton\n        v-if=\"status === 'done'\"\n        label=\"Delete file\"\n        :icon=\"iconTrash\"\n        color=\"danger\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxFileCard>\n\u003C\u002Ftemplate>",{"id":1444,"title":574,"titles":1445,"content":1446,"level":84},"\u002Fcomponents\u002Fcards\u002Ffile-card#skeleton",[1418,400],"The skeleton should be used on initial page load when the data for the page \u002F file is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFileCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFileCard filename=\"example.pdf\" size=\"42MiB\" type=\"application\u002Fpdf\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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);}",{"id":1448,"title":1449,"titles":1450,"content":1451,"level":9},"\u002Fcomponents\u002Fcards\u002Finfo-card","Info card",[],"Info cards are used to display informational content to the user or implement error handling within components. They can e.g. be used in cases where the user needs to manually review changes or to inform him about a system-related status.",{"id":1453,"title":400,"titles":1454,"content":367,"level":19},"\u002Fcomponents\u002Fcards\u002Finfo-card#examples",[1449],{"id":1456,"title":439,"titles":1457,"content":1458,"level":84},"\u002Fcomponents\u002Fcards\u002Finfo-card#basic",[1449,400],"A basic info card includes a headline and description text but can also only contain one of them. The default icon can be changed using the icon property or removed completely by setting the value to false. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInfoCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInfoCard headline=\"Example headline\">\n    Lorem ipsum dolor sit amet consectetur. Felis euismod sit amet nulla nulla amet libero sed. Id\n    non adipiscing duis felis volutpat.\n  \u003C\u002FOnyxInfoCard>\n\u003C\u002Ftemplate>",{"id":1460,"title":76,"titles":1461,"content":1462,"level":84},"\u002Fcomponents\u002Fcards\u002Finfo-card#colors",[1449,400],"Different colors are supported depending on the semantical meaning of the information. See our color documentation for when to use which color. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInfoCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInfoCard headline=\"Primary\" color=\"primary\"> Example description \u003C\u002FOnyxInfoCard>\n  \u003COnyxInfoCard headline=\"Neutral\" color=\"neutral\"> Example description \u003C\u002FOnyxInfoCard>\n  \u003COnyxInfoCard headline=\"Danger\" color=\"danger\"> Example description \u003C\u002FOnyxInfoCard>\n  \u003COnyxInfoCard headline=\"Warning\" color=\"warning\"> Example description \u003C\u002FOnyxInfoCard>\n  \u003COnyxInfoCard headline=\"Success\" color=\"success\"> Example description \u003C\u002FOnyxInfoCard>\n  \u003COnyxInfoCard headline=\"Info\"> Example description \u003C\u002FOnyxInfoCard>\n\u003C\u002Ftemplate>",{"id":1464,"title":1465,"titles":1466,"content":1467,"level":84},"\u002Fcomponents\u002Fcards\u002Finfo-card#closable","Closable",[1449,400],"For temporary or one-time information, the info card can be closable which allows the user to close it. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInfoCard } from \"sit-onyx\";\n\nconst handleClose = () => {\n  \u002F\u002F your close logic here, e.g. store a flag in the browsers local storage\n  \u002F\u002F so the info card is not visible when re-loading the application\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInfoCard headline=\"Example headline\" closable @close=\"handleClose\">\n    Lorem ipsum dolor sit amet consectetur. Felis euismod sit amet nulla nulla amet libero sed. Id\n    non adipiscing duis felis volutpat.\n  \u003C\u002FOnyxInfoCard>\n\u003C\u002Ftemplate>",{"id":1469,"title":1470,"titles":1471,"content":1472,"level":84},"\u002Fcomponents\u002Fcards\u002Finfo-card#buttons","Buttons",[1449,400],"Additional buttons are supported to perform custom actions. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxInfoCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInfoCard headline=\"Example headline\">\n    Lorem ipsum dolor sit amet consectetur. Felis euismod sit amet nulla nulla amet libero sed. Id\n    non adipiscing duis felis volutpat.\n\n    \u003Ctemplate #buttons>\n      \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n      \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxInfoCard>\n\u003C\u002Ftemplate>",{"id":1474,"title":1475,"titles":1476,"content":1477,"level":84},"\u002Fcomponents\u002Fcards\u002Finfo-card#header-actions","Header actions",[1449,400],"Custom actions can be displayed inside the header using a flyout menu. See the menu item component for all available options. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInfoCard, OnyxMenuItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInfoCard headline=\"Example headline\">\n    Lorem ipsum dolor sit amet consectetur. Felis euismod sit amet nulla nulla amet libero sed. Id\n    non adipiscing duis felis volutpat.\n\n    \u003Ctemplate #headerActions>\n      \u003COnyxMenuItem label=\"Action 1\" \u002F>\n      \u003COnyxMenuItem label=\"Action 2\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxInfoCard>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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}",{"id":1479,"title":1480,"titles":1481,"content":1482,"level":9},"\u002Fcomponents\u002Fdata\u002Fcalendar","Calendar",[],"The calendar displays or selects dates across several selection modes (single, multiple, range). For form input workflows, consider our specialized components:",{"id":1484,"title":400,"titles":1485,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Fcalendar#examples",[1480],{"id":1487,"title":1488,"titles":1489,"content":1490,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#default","Default",[1480,400],"The calendar defaults to a display-only view. Custom slot content can be injected into individual date cells. The calendar size adapts automatically based on available container width, or can be pinned using the size prop. Weekdays, month headers, and locale conventions synchronize automatically with the application's active language. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBadge, OnyxCalendar, OnyxColor } from \"sit-onyx\";\n\ntype Event = { date: Date; color: OnyxColor; description: string };\n\nconst getDummyDate = (dayOffset: number) => {\n  const today = new Date();\n  today.setDate(today.getDate() + dayOffset);\n  return today;\n};\n\nconst events: Event[] = [\n  { date: getDummyDate(-2), color: \"primary\", description: \"Meeting\" },\n  { date: getDummyDate(-7), color: \"success\", description: \"Anna's birthday\" },\n  { date: getDummyDate(3), color: \"info\", description: \"Dentist\" },\n  { date: getDummyDate(7), color: \"success\", description: \"Max's birthday\" },\n  { date: getDummyDate(12), color: \"primary\", description: \"Team-Event\" },\n];\n\nconst findEvent = (date: Date) => {\n  return events.find((event) => event.date.toDateString() === date.toDateString());\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar show-calendar-weeks>\n    \u003Ctemplate #day=\"{ date, size }\">\n      \u003Cdiv v-if=\"findEvent(date)\" class=\"event\">\n        \u003COnyxBadge :color=\"findEvent(date)?.color\" dot \u002F>\n        \u003Cspan\n          v-if=\"size === 'big'\"\n          class=\"event__description onyx-text--small onyx-truncation-ellipsis\"\n        >\n          {{ findEvent(date)?.description }}\n        \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxCalendar>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.event {\n  display: flex;\n  align-items: center;\n  gap: var(--onyx-density-xs);\n  text-align: left;\n  margin-top: var(--onyx-density-2xs);\n\n  &__description {\n    color: var(--onyx-color-text-icons-neutral-medium);\n  }\n\n  .onyx-calendar--small & {\n    justify-content: center;\n  }\n}\n\u003C\u002Fstyle>",{"id":1492,"title":1493,"titles":1494,"content":1495,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#single-select","Single select",[1480,400],"Allows selecting an individual date. \u003Cscript lang=\"ts\" setup>\nimport { OnyxCalendar } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar v-model=\"date\" selection-mode=\"single\" \u002F>\n\u003C\u002Ftemplate>",{"id":1497,"title":1498,"titles":1499,"content":1500,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#multiselect","Multiselect",[1480,400],"Allows selecting multiple distinct dates. \u003Cscript lang=\"ts\" setup>\nimport { OnyxCalendar } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst dates = ref\u003CDate[]>([]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar v-model=\"dates\" selection-mode=\"multiple\" \u002F>\n\u003C\u002Ftemplate>",{"id":1502,"title":1503,"titles":1504,"content":1505,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#range-select","Range select",[1480,400],"Allows selecting a continuous date range with start and end dates. When calendar weeks are enabled, clicking a week number selects the entire week. \u003Cscript lang=\"ts\" setup>\nimport { DateRange, OnyxCalendar } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst dateRange = ref\u003CDateRange>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar v-model=\"dateRange\" selection-mode=\"range\" show-calendar-weeks \u002F>\n\u003C\u002Ftemplate>",{"id":1507,"title":602,"titles":1508,"content":1509,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#min-max-and-disabled-dates",[1480,400],"Disable date ranges using min and max bounds, or supply individual dates to disable specific days (e.g. holidays). In this example, only the past and upcoming 7 days are selectable, with Wednesdays disabled: \u003Cscript lang=\"ts\" setup>\nimport { OnyxCalendar } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst date = ref\u003CDate>();\n\n\u002F\u002F dynamically determine min and max date based on today\nconst today = new Date();\n\nconst min = new Date(today);\nmin.setDate(min.getDate() - 7);\n\nconst max = new Date(today);\nmax.setDate(max.getDate() + 7);\n\nconst disabledDays = (date: Date) => {\n  \u002F\u002F disable individual days, e.g. every Wednesday\n  return date.getDay() === 3;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar v-model=\"date\" selection-mode=\"single\" :min :max :disabled-days \u002F>\n\u003C\u002Ftemplate>",{"id":1511,"title":574,"titles":1512,"content":1513,"level":84},"\u002Fcomponents\u002Fdata\u002Fcalendar#skeleton",[1480,400],"Use the skeleton during initial calendar data loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxCalendar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCalendar skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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}",{"id":1515,"title":1516,"titles":1517,"content":1518,"level":9},"\u002Fcomponents\u002Fdata\u002Fchart","Chart",[],"Charts visualize quantitative datasets through graphical representations such as bars, lines, or slices, allowing users to identify patterns and trends at a glance.",{"id":1520,"title":22,"titles":1521,"content":1522,"level":19},"\u002Fcomponents\u002Fdata\u002Fchart#installation",[1516],"Onyx integrates with the Chart.js library. To configure chart support in your project: Install dependencies Install the required packages:",{"id":1524,"title":400,"titles":1525,"content":1526,"level":19},"\u002Fcomponents\u002Fdata\u002Fchart#examples",[1516],"The following examples are only a few common examples for how to use Chart.js. For the full sample gallery, see:",{"id":1528,"title":1529,"titles":1530,"content":1531,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#line","Line",[1516,400],"Connects sequential data points with continuous lines to illustrate trends over time (e.g. daily active users). \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Line } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"line\"> = {\n  labels: [\"01.01.2024\", \"01.02.2024\", \"01.03.2024\", \"01.04.2024\", \"01.05.2024\"],\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [1, 8, 4, 6, 2],\n      \u002F\u002F fill: true,\n    },\n    {\n      label: \"Dataset B\",\n      data: [4, 2, 3, 1, 7],\n      \u002F\u002F fill: true,\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"line\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CLine :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1533,"title":1534,"titles":1535,"content":1536,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#bar","Bar",[1516,400],"Compares discrete categories using horizontal or vertical bars, ideal for comparing metrics across distinct groups. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Bar } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"bar\"> = {\n  labels: [\"01.01.2024\", \"01.02.2024\", \"01.03.2024\", \"01.04.2024\", \"01.05.2024\"],\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [1, 8, 4, 6, 2],\n      borderWidth: 2,\n    },\n    {\n      label: \"Dataset B\",\n      data: [4, 2, 3, 1, 7],\n      borderWidth: 2,\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"bar\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CBar :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1538,"title":1539,"titles":1540,"content":1541,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#doughnut","Doughnut",[1516,400],"Displays proportional breakdowns as slices of a ring, suitable for displaying percentage distributions with summary metrics in the center. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Doughnut } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"doughnut\"> = {\n  labels: [\"Label 1\", \"Label 2\", \"Label 3\", \"Label 4\"],\n  datasets: [\n    {\n      data: [40, 20, 80, 10],\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"doughnut\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CDoughnut :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1543,"title":1544,"titles":1545,"content":1546,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#pie","Pie",[1516,400],"Displays proportional data as slices summing to 100%, best for simple composition across mutually exclusive categories. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Pie } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"pie\"> = {\n  labels: [\"Label 1\", \"Label 2\", \"Label 3\", \"Label 4\"],\n  datasets: [{ data: [40, 20, 80, 10] }],\n};\n\nconst options: ChartOptions\u003C\"pie\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CPie :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1548,"title":1549,"titles":1550,"content":1551,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#bubble","Bubble",[1516,400],"Plots three-dimensional data on a 2D coordinate system, using bubble radius as the third metric dimension. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Bubble } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"bubble\"> = {\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [\n        { x: 20, y: 25, r: 5 },\n        { x: 40, y: 10, r: 10 },\n        { x: 30, y: 22, r: 30 },\n      ],\n    },\n    {\n      label: \"Dataset B\",\n      data: [\n        { x: 10, y: 30, r: 15 },\n        { x: 20, y: 20, r: 10 },\n        { x: 15, y: 8, r: 30 },\n      ],\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"bubble\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CBubble :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1553,"title":1554,"titles":1555,"content":1556,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#polar-area","Polar area",[1516,400],"Divides a circle into equal sectors where each value corresponds to radius distance from center, simplifying magnitude comparisons. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { PolarArea } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"polarArea\"> = {\n  labels: [\"Label 1\", \"Label 2\", \"Label 3\", \"Label 4\", \"Label 5\", \"Label 6\", \"Label 7\"],\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [65, 59, 90, 81, 56, 55, 40],\n    },\n    {\n      label: \"Dataset B\",\n      data: [28, 48, 40, 19, 96, 27, 100],\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"polarArea\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CPolarArea :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1558,"title":1559,"titles":1560,"content":1561,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#radar","Radar",[1516,400],"Plots multivariate data along axes originating from a central point, suited for comparing performance across shared dimensions. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Radar } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"radar\"> = {\n  labels: [\"Eating\", \"Drinking\", \"Sleeping\", \"Designing\", \"Coding\", \"Cycling\", \"Running\"],\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [65, 59, 90, 81, 56, 55, 40],\n    },\n    {\n      label: \"Dataset B\",\n      data: [28, 48, 40, 19, 96, 27, 100],\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"radar\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CRadar :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1563,"title":1564,"titles":1565,"content":1566,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#scatter","Scatter",[1516,400],"Plots individual data points using numeric Cartesian coordinates to expose correlations, clusters, or outliers. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Scatter } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"scatter\"> = {\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [\n        { x: -2, y: 4 },\n        { x: -1, y: 1 },\n        { x: 0, y: 0 },\n        { x: 1, y: 1 },\n        { x: 2, y: 4 },\n      ],\n    },\n    {\n      label: \"Dataset B\",\n      data: [\n        { x: -2, y: -4 },\n        { x: -1, y: -1 },\n        { x: 0, y: 1 },\n        { x: 1, y: -1 },\n        { x: 2, y: -4 },\n      ],\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"scatter\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CScatter :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle>",{"id":1568,"title":76,"titles":1569,"content":1570,"level":84},"\u002Fcomponents\u002Fdata\u002Fchart#colors",[1516,400],"Datasets cycle through our quantitative color palette by default. Use getDatasetColors() to assign explicit palette tokens or semantic system colors. \u003Cscript lang=\"ts\" setup>\nimport { getDatasetColors, registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Bar } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst exampleData = [\n  { color: \"primary\", value: 88 },\n  { color: \"neutral\", value: 74 },\n  { color: \"danger\", value: 92 },\n  { color: \"warning\", value: 65 },\n  { color: \"success\", value: 78 },\n  { color: \"info\", value: 85 },\n  { color: \"quantitatives-100\", value: 95 },\n  { color: \"quantitatives-200\", value: 70 },\n  { color: \"quantitatives-300\", value: 82 },\n  { color: \"quantitatives-400\", value: 60 },\n  { color: \"quantitatives-500\", value: 89 },\n  { color: \"quantitatives-600\", value: 94 },\n  { color: \"quantitatives-700\", value: 76 },\n  { color: \"quantitatives-800\", value: 83 },\n  { color: \"quantitatives-900\", value: 91 },\n  { color: \"quantitatives-1000\", value: 68 },\n  { color: \"quantitatives-1100\", value: 84 },\n  { color: \"quantitatives-1200\", value: 79 },\n] as const;\n\nconst data: ChartData\u003C\"bar\"> = {\n  labels: exampleData.map((data) => data.color),\n  datasets: [\n    {\n      data: exampleData.map((data) => data.value),\n      borderWidth: 2,\n      backgroundColor: exampleData.map((color) => getDatasetColors(color.color).backgroundColor()),\n      borderColor: exampleData.map((color) => getDatasetColors(color.color).borderColor()),\n    },\n  ],\n};\n\nconst options: ChartOptions\u003C\"bar\"> = {\n  responsive: true,\n  maintainAspectRatio: false, \u002F\u002F allow chart to stretch\u002Fshrink dynamically\n  indexAxis: \"y\", \u002F\u002F horizontal bars\n  plugins: {\n    legend: {\n      display: false,\n    },\n  },\n  scales: {\n    x: {\n      beginAtZero: true,\n    },\n    y: {\n      grid: {\n        display: false,\n      },\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CBar :data :options \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 42rem;\n}\n\u003C\u002Fstyle>",{"id":1572,"title":1573,"titles":1574,"content":1575,"level":19},"\u002Fcomponents\u002Fdata\u002Fchart#usage-with-nuxt-ssr","Usage with Nuxt \u002F SSR",[1516],"When using Nuxt or SSR, wrap chart components in \u003CClientOnly> because canvas rendering depends on browser DOM APIs. \u003Cscript lang=\"ts\" setup>\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport { type ChartData, registerables, Chart, type ChartOptions } from \"chart.js\";\nimport { Bar } from \"vue-chartjs\";\n\n\u002F\u002F register Chart.js and onyx plugin\nChart.register(...registerables);\nregisterOnyxPlugin(Chart);\n\nconst data: ChartData\u003C\"bar\"> = {\n    \u002F\u002F chart dataset config...\n};\n\nconst options: ChartOptions\u003C\"bar\"> = {\n  \u002F\u002F chart options...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"chart\">\n    \u003CClientOnly>\n        \u003CBar :data :options \u002F>\n    \u003C\u002FClientOnly>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.chart {\n  width: 100%;\n  height: 24rem;\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1577,"title":1578,"titles":1579,"content":1580,"level":9},"\u002Fcomponents\u002Fdata\u002Fdata-grid","Data grid",[],"A highly customizable and modular table for displaying complex datasets. The data grid supports features like sorting, filtering, grouping columns and rows, and much more, giving both developers and users extensive control. We recommend using the data grid in most cases since it supports advanced built-in features. The table component is a simple styled wrapper for the HTML \u003Ctable> element without additional features. The table can be used in rare edge cases where maximum flexibility and customization is required or where the data grid overhead is unwanted. If you are unsure which component to use or there is no reasonable explicit requirement for the table, use the data grid.",{"id":1582,"title":400,"titles":1583,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Fdata-grid#examples",[1578],{"id":1585,"title":439,"titles":1586,"content":1587,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#basic",[1578,400],"A very basic data grid contains one or multiple columns and a set of data to display in rows. Each column has a type that defines how the value is displayed. See the available column types below. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>",{"id":1589,"title":1590,"titles":1591,"content":1592,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#column-types","Column types",[1578,400],"The data grid supports several built-in column types with predefined rendering, sorting, and filtering. To implement custom types, see custom features below. String \u002F Text Displays the value as text and is the default type for all columns. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nNumber Displays the value as a formatted number depending on the current application language. Optionally, a custom format can be defined using Intl.NumberFormat. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  quantity: number;\n  price: number;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, quantity: 42, price: 1.99 },\n    { id: 2, quantity: 512, price: 259.99 },\n    { id: 3, quantity: 1028, price: 6 },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"quantity\", label: \"Quantity\", type: \"number\" },\n    {\n      key: \"price\",\n      label: \"Price\",\n      type: {\n        name: \"number\",\n        options: {\n          format: {\n            style: \"currency\",\n            currency: \"USD\",\n          },\n        },\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nDate & Time Multiple column types are supported to display date, datetime, time and timestamp depending on the current application language. Optionally, a custom format can be defined using Intl.DateTimeFormat. \u003Cscript setup lang=\"ts\">\nimport { DateValue, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  date: DateValue;\n  datetime: DateValue;\n  time: DateValue;\n  timestamp: DateValue;\n  custom: DateValue;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    {\n      id: 1,\n      date: new Date(),\n      datetime: new Date(),\n      time: new Date(),\n      timestamp: new Date(),\n      custom: new Date(),\n    },\n    {\n      id: 2,\n      date: new Date(),\n      datetime: new Date(),\n      time: new Date(),\n      timestamp: new Date(),\n      custom: new Date(),\n    },\n    {\n      id: 3,\n      date: new Date(),\n      datetime: new Date(),\n      time: new Date(),\n      timestamp: new Date(),\n      custom: new Date(),\n    },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"date\", label: \"Date\", type: \"date\" },\n    { key: \"datetime\", label: \"Datetime\", type: \"datetime-local\" },\n    { key: \"time\", label: \"Time\", type: \"time\" },\n    { key: \"timestamp\", label: \"Timestamp\", type: \"timestamp\" },\n    {\n      key: \"custom\",\n      label: \"Custom format\",\n      type: {\n        name: \"date\",\n        options: {\n          format: {\n            dateStyle: \"short\",\n          },\n        },\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nSelect The select type allows the developer to define a set of available options where the corresponding text is displayed depending on the value. This is particularly useful when the value is technically an enum but a user-friendly translated label should be shown. When used in combination with the editing feature, the user can change the value based on the predefined list of options. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, SelectOption, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  role: UserRole;\n};\n\ntype UserRole = \"user\" | \"editor\" | \"admin\";\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, role: \"user\" },\n    { id: 2, role: \"admin\" },\n    { id: 3, role: \"editor\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    {\n      key: \"role\",\n      label: \"User role\",\n      type: {\n        name: \"select\",\n        options: {\n          options: [\n            { label: \"User\", value: \"user\" },\n            { label: \"Administrator\", value: \"admin\" },\n            { label: \"Editor\", value: \"editor\" },\n          ] satisfies SelectOption\u003CUserRole>[],\n        },\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nLink Allows displaying links to other pages or applications. Optionally supports defining a custom display label. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig, type EditLinkValue } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  link?: string | EditLinkValue;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, link: \"https:\u002F\u002Fexample.com\" },\n    { id: 2, link: { href: \"\u002Fcomponents\u002Fdata\u002Fdata-grid\", label: \"Custom label\" } },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    {\n      key: \"link\",\n      label: \"Link\",\n      type: {\n        name: \"link\",\n        \u002F\u002F optionally add options such as open links in a new tab\n        options: {\n          target: \"_blank\",\n        },\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nFallback text For every column, a fallback text is shown when the cell is empty. By default, \"-\" is used but a custom text can be defined if needed. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name?: string;\n  email?: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [{ id: 1 }, { id: 2 }, { id: 3 }];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    {\n      key: \"email\",\n      label: \"Email\",\n      type: {\n        name: \"string\",\n        options: {\n          fallback: \"not defined\",\n        },\n      },\n    },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>\nCustom types Custom column types can be implemented for full flexibility on how the data is displayed. See the custom feature section for further information.",{"id":1594,"title":1595,"titles":1596,"content":1597,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#column-width","Column width",[1578,400],"All columns are equally sized by default. The width of every column can be adjusted if needed using any valid value accepted by grid-template-columns. So the column can e.g. have a fixed width using a static value like 4rem, a flexible value like 1fr or max-content, or a minimum and maximum width using the minmax function. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  description: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    {\n      id: 1,\n      name: \"Alice\",\n      age: 30,\n      description: \"This is a example description that could be very long\",\n    },\n    {\n      id: 2,\n      name: \"Charlie\",\n      age: 35,\n      description: \"This is a example description that could be very long\",\n    },\n    {\n      id: 3,\n      name: \"Bob\",\n      age: 25,\n      description: \"This is a example description that could be very long\",\n    },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"description\", label: \"Description\", width: \"minmax(10rem, 20rem)\" },\n    { key: \"age\", label: \"Age\", type: \"number\", width: \"max-content\" },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data \u002F>\n\u003C\u002Ftemplate>",{"id":1599,"title":574,"titles":1600,"content":1601,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#skeleton",[1578,400],"The skeleton should be used on initial page load when the data for the page \u002F data grid is initially loaded. \u003Cscript setup lang=\"ts\">\nimport { OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    \u002F\u002F your date here once loaded\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data skeleton \u002F>\n\u003C\u002Ftemplate>",{"id":1603,"title":1604,"titles":1605,"content":1606,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#grouped-columns","Grouped columns",[1578,400],"Column groups can be used to visually group columns that are related. \u003Cscript setup lang=\"ts\">\nimport { ColumnGroupConfig, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  birthday: Date;\n  role: string;\n  active?: boolean;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    {\n      id: 1,\n      name: \"Alice\",\n      age: 30,\n      birthday: new Date(\"1990-01-01\"),\n      role: \"User\",\n      active: true,\n    },\n    {\n      id: 2,\n      name: \"Charlie\",\n      age: 35,\n      birthday: new Date(\"1998-02-11\"),\n      role: \"Editor\",\n      active: false,\n    },\n    {\n      id: 3,\n      name: \"Bob\",\n      age: 25,\n      birthday: new Date(\"1995-06-15\"),\n      role: \"Administrator\",\n      active: true,\n    },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry, typeof columnGroups>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"age\", label: \"Age\", type: \"number\", columnGroupKey: \"group1\" },\n    { key: \"birthday\", label: \"Birthday\", type: \"date\", columnGroupKey: \"group1\" },\n    { key: \"role\", label: \"Role\", columnGroupKey: \"group2\" },\n    { key: \"active\", label: \"Active?\", type: \"boolean\", columnGroupKey: \"group2\" },\n  ];\n});\n\nconst columnGroups = {\n  group1: { label: \"Group 1\" },\n  group2: { label: \"Group 2\" },\n} satisfies ColumnGroupConfig;\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid\n    :headline=\"{ text: 'Example headline', rowCount: true }\"\n    :columns\n    :data\n    :column-groups\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1608,"title":1609,"titles":1610,"content":1611,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#global-actions","Global actions",[1578,400],"Global actions allow the user to trigger custom actions for the data that are placed at the top right of the data grid. Example use cases are edit, save or share actions. Actions can be displayed as text or icon buttons and can optionally be visually grouped. The actions automatically collapse into a flyout menu if the available width is too small. Actions are defined using a custom feature. See the custom feature section below for further information. \u003Cscript setup lang=\"ts\">\nimport { iconEdit, iconShareIos } from \"@sit-onyx\u002Ficons\";\nimport { createFeature, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\nconst withCustomActions = createFeature(() => ({\n  name: Symbol(\"customActions\"),\n  \u002F\u002F if your actions are conditionally displayed based on external conditions,\n  \u002F\u002F make sure to add them to the \"watch\" here so the data grid re-renders when the conditions changes\n  \u002F\u002F watch: [],\n  actions: () => {\n    return [\n      {\n        label: \"Share\",\n        icon: iconShareIos,\n        color: \"neutral\",\n        onClick: () => {\n          \u002F\u002F your logic here...\n        },\n      },\n      {\n        label: \"Edit\",\n        icon: iconEdit,\n        displayAs: \"button\",\n        onClick: () => {\n          \u002F\u002F your logic here...\n        },\n      },\n    ];\n  },\n}));\n\nconst features = [withCustomActions];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1613,"title":1614,"titles":1615,"content":1616,"level":19},"\u002Fcomponents\u002Fdata\u002Fdata-grid#features","Features",[1578],"Data grid features are reusable plugins that extend data grid capabilities via a unified API. Onyx provides built-in features for sorting, filtering, and pagination. See custom features below to create application-specific extensions. In fact, every internal functionality of the data grid such as the different column types is built using a feature.",{"id":1618,"title":1619,"titles":1620,"content":1621,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#sorting","Sorting",[1578,1614],"Allows sorting rows by column. You can specify initial sorting, define custom comparator logic, or toggle sorting per column. For built-in column types, sorting is preconfigured. For custom data types, provide a custom sorting function when alphabetical ordering is insufficient. Internal The data is sorted internally by default considering all available data. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  birthday: Date;\n  active?: boolean;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", age: 30, birthday: new Date(\"1990-01-01\"), active: true },\n    { id: 4, name: \"Robin\", age: 28, birthday: new Date(\"2001-02-22\"), active: true },\n    { id: 5, name: \"John\", age: 42, birthday: new Date(\"1997-04-18\"), active: false },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"age\", label: \"Age\", type: \"number\" },\n    { key: \"birthday\", label: \"Birthday\", type: \"date\" },\n    { key: \"active\", label: \"Active?\", type: \"boolean\" },\n  ];\n});\n\nconst withSorting = DataGridFeatures.useSorting\u003CEntry>({\n  \u002F\u002F options here...\n});\n\nconst features = [withSorting];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nAsync Alternatively, the sorting can be done asynchronously by an external service, e.g. by a backend or API so the data grid does not sort the data itself. Important: Set the async property on the data grid to disable the internal data transformations. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = ref\u003CEntry[]>([\n  { id: 1, name: \"Alice\" },\n  { id: 4, name: \"Robin\" },\n  { id: 5, name: \"John\" },\n]);\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst sortState = ref\u003CDataGridFeatures.SortState\u003CEntry>>({\n  column: undefined,\n  direction: \"none\",\n});\n\nconst withSorting = DataGridFeatures.useSorting\u003CEntry>({\n  \u002F\u002F options here...\n  sortState,\n});\n\nconst features = [withSorting];\n\nconst isLoading = ref(false);\n\nwatch(sortState, async () => {\n  \u002F\u002F TODO: send a request with the sort state to your backend here to get the new sorted data\n  \u002F\u002F for this example, we fake a request here\n  isLoading.value = true;\n  await new Promise((resolve) => setTimeout(resolve, 1000));\n  data.value.sort((a, b) => a.name.localeCompare(b.name));\n  if (sortState.value.direction === \"desc\") data.value.reverse();\n  isLoading.value = false;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid\n    :headline=\"{ text: 'Example headline', rowCount: true }\"\n    :columns\n    :data\n    :features\n    async\n    :skeleton=\"isLoading\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1623,"title":1624,"titles":1625,"content":1626,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#filtering-search","Filtering \u002F Search",[1578,1614],"Allows the user to filter \u002F search a column. The developer can optionally customize the filter logic and disable\u002Fenable filtering for specific columns. Internal The data is filtered internally by default considering all available data. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withFiltering = DataGridFeatures.useFiltering\u003CEntry>({\n  \u002F\u002F options here...\n});\n\nconst features = [withFiltering];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nAsync Alternatively, the filtering can be done asynchronously by an external service, e.g. by a backend or API so the data grid does not filter the data itself. Important: Set the async property on the data grid to disable the internal data transformations. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, normalizedIncludes, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nfunction getData(): Entry[] {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n}\n\nconst data = ref\u003CEntry[]>(getData());\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst filterState = ref\u003CDataGridFeatures.FilterState\u003CEntry>>({});\n\nconst withFiltering = DataGridFeatures.useFiltering\u003CEntry>({\n  \u002F\u002F options here...\n  filterState,\n});\n\nconst features = [withFiltering];\n\nconst isLoading = ref(false);\n\nwatch(\n  filterState,\n  async () => {\n    \u002F\u002F TODO: send a request with the filter state to your backend here to get the new filtered data\n    \u002F\u002F for this example, we fake a request here\n    isLoading.value = true;\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n\n    data.value = getData().filter((entry) => {\n      const search = filterState.value.name?.trim();\n      if (!search) return true;\n      return normalizedIncludes(entry.name, search);\n    });\n\n    isLoading.value = false;\n  },\n  { deep: true },\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid\n    :headline=\"{ text: 'Example headline', rowCount: true }\"\n    :columns\n    :data\n    :features\n    :skeleton=\"isLoading\"\n    async\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1628,"title":1629,"titles":1630,"content":1631,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#pagination","Pagination",[1578,1614],"Use pagination to handle data grids where a lot of data is available which would be too much to show all at once, in order to optimize performance. Different pagination modes are supported as described below. Each pagination mode also supports a select where the user can choose how many items per page should be displayed. Select The select type uses our pagination component to show a page select on the bottom right. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  \u002F\u002F generating some dummy data\n  return Array.from({ length: 128 }, (_, index) => {\n    const id = index + 1;\n    return { id, name: `Name ${id}` };\n  });\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withPagination = DataGridFeatures.usePagination({\n  \u002F\u002F options here...\n  pageSize: 10,\n  itemsPerPage: [10, 15, 20],\n});\n\nconst features = [withPagination];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nLazy loading With lazy loading, more data is automatically displayed when the user scrolls to the end of the data grid. You must set a maximum height when using lazy loading. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  \u002F\u002F generating some dummy data\n  return Array.from({ length: 128 }, (_, index) => {\n    const id = index + 1;\n    return { id, name: `Name ${id}` };\n  });\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withPagination = DataGridFeatures.usePagination({\n  \u002F\u002F options here...\n  type: \"lazy\",\n});\n\nconst features = [withPagination];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid\n    class=\"data-grid\"\n    :headline=\"{ text: 'Example headline', rowCount: true }\"\n    :columns\n    :data\n    :features\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.data-grid {\n  max-height: 32rem;\n}\n\u003C\u002Fstyle>\nButton loading Button loading is similar to lazy loading but requires the user to manually click a \"load more\" button to load the next page of data. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  \u002F\u002F generating some dummy data\n  return Array.from({ length: 20 }, (_, index) => {\n    const id = index + 1;\n    return { id, name: `Name ${id}` };\n  });\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withPagination = DataGridFeatures.usePagination({\n  \u002F\u002F options here...\n  type: \"button\",\n  pageSize: 5,\n});\n\nconst features = [withPagination];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nAsync Alternatively, the pagination can be done asynchronously by an external service, e.g. by a backend or API. This is especially useful for performance optimization when not all available data should be loaded at once. Async pagination is compatible with all modes mentioned above. Important: Set the async property on the data grid to disable the internal data transformations. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\n\u002F**\n * Our \"dummy\" API response for this example\n *\u002F\ntype PaginatedEntries = {\n  items: Entry[];\n  total: number;\n};\n\nconst data = ref\u003CPaginatedEntries>({ items: [], total: 0 });\nconst isLoading = ref(false);\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst paginationState = ref\u003CDataGridFeatures.PaginationState>({\n  current: 1,\n  pages: 1,\n  pageSize: 10,\n});\n\n\u002F\u002F update the number of pages when the data is loaded from the API\n\u002F\u002F so the data grid is aware of them\nwatch(\n  () => data.value.total,\n  (newTotal) => {\n    paginationState.value.pages = Math.ceil(newTotal \u002F paginationState.value.pageSize);\n  },\n  { immediate: true },\n);\n\nconst withPagination = DataGridFeatures.usePagination({\n  \u002F\u002F options here...\n  paginationState,\n  loading: isLoading,\n  disabled: isLoading,\n});\n\nconst features = [withPagination];\n\n\u002F\u002F fetch new data when the user switches to another page\nwatch(\n  () => paginationState.value.current,\n  async () => {\n    \u002F\u002F TODO: send a request with the pagination state to your backend here to get the new data\n    \u002F\u002F for this example, we fake a request here\n    isLoading.value = true;\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n    data.value = loadData(paginationState.value);\n    isLoading.value = false;\n  },\n  { immediate: true, deep: true },\n);\n\nfunction loadData(pagination: DataGridFeatures.PaginationState): PaginatedEntries {\n  const total = 128;\n  const offset = (pagination.current - 1) * pagination.pageSize + 1;\n  const itemCount = Math.min(pagination.pageSize, total - offset);\n\n  \u002F\u002F generating some dummy data\n  const items = Array.from({ length: itemCount }, (_, index) => {\n    const id = offset + index;\n    return { id, name: `Name ${id}` } satisfies Entry;\n  });\n\n  return { items, total };\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid\n    :headline=\"{ text: 'Example headline', rowCount: data.total }\"\n    :columns\n    :data=\"data.items\"\n    :features\n    :skeleton=\"isLoading\"\n    async\n  \u002F>\n\u003C\u002Ftemplate>",{"id":1633,"title":1634,"titles":1635,"content":1636,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#editing","Editing",[1578,1614],"Allows the user to edit the data. Multiple editing modes are supported depending on the requirements. For built-in column types, a corresponding edit component is used automatically. Some examples below use custom features, see the custom feature section for further information. Manual All rows are editable at once and the rows do not switch between display and edit mode automatically. You have full control over how the editing is enabled, saved, cancelled, etc. In this example we use custom buttons but you can also use auto-save or custom logic. \u003Cscript setup lang=\"ts\">\nimport { iconDisc, iconEdit, iconX } from \"@sit-onyx\u002Ficons\";\nimport {\n  createFeature,\n  DataGridFeatures,\n  OnyxDataGrid,\n  SelectOption,\n  type ColumnConfig,\n  type EditLinkValue,\n} from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  birthday: Date;\n  time: string;\n  role: UserRole;\n  link: string | EditLinkValue;\n  active?: boolean;\n};\n\ntype UserRole = \"user\" | \"editor\" | \"admin\";\n\nconst data = ref\u003CEntry[]>([\n  {\n    id: 1,\n    name: \"Alice\",\n    age: 30,\n    birthday: new Date(\"1990-01-01\"),\n    time: \"10:00\",\n    active: true,\n    role: \"user\",\n    link: { href: \"https:\u002F\u002Fexample.com\", label: \"Link\" },\n  },\n  {\n    id: 4,\n    name: \"Robin\",\n    age: 28,\n    birthday: new Date(\"2001-02-22\"),\n    time: \"12:30\",\n    active: true,\n    role: \"editor\",\n    link: { href: \"https:\u002F\u002Fexample.com\", label: \"Link\" },\n  },\n  {\n    id: 5,\n    name: \"John\",\n    age: 42,\n    birthday: new Date(\"1997-04-18\"),\n    time: \"09:00\",\n    active: false,\n    role: \"admin\",\n    link: { href: \"https:\u002F\u002Fexample.com\", label: \"Link\" },\n  },\n]);\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"age\", label: \"Age\", type: \"number\" },\n    { key: \"birthday\", label: \"Birthday\", type: \"date\" },\n    { key: \"time\", label: \"Time\", type: \"time\" },\n    { key: \"active\", label: \"Active?\", type: \"boolean\" },\n    { key: \"link\", label: \"Link\", type: \"link\" },\n    {\n      key: \"role\",\n      label: \"User role\",\n      type: {\n        name: \"select\",\n        options: {\n          options: [\n            { label: \"User\", value: \"user\" },\n            { label: \"Administrator\", value: \"admin\" },\n            { label: \"Editor\", value: \"editor\" },\n          ] satisfies SelectOption\u003CUserRole>[],\n        },\n      },\n    },\n  ];\n});\n\nconst isEditable = ref(false);\nconst editState = ref\u003CDataGridFeatures.EditState\u003CEntry>>({});\n\nconst withEditing = DataGridFeatures.useEditing\u003CEntry>({\n  \u002F\u002F options here...\n  mode: \"manual\",\n  enabled: isEditable,\n  editState,\n});\n\n\u002F\u002F The logic when and how the editing is enabled, saved and cancelled is completely up to the developer.\n\u002F\u002F In this example we use a custom feature to add buttons to interact with the feature\nconst withEditingActions = createFeature(() => ({\n  name: Symbol(\"editingActions\"),\n  watch: [isEditable],\n  actions: () => {\n    if (isEditable.value) {\n      return [\n        {\n          label: \"Cancel\",\n          displayAs: \"button\",\n          color: \"neutral\",\n          mode: \"plain\",\n          icon: iconX,\n          onClick: handleCancel,\n        },\n        {\n          label: \"Save\",\n          displayAs: \"button\",\n          icon: iconDisc,\n          onClick: handleSave,\n        },\n      ];\n    }\n\n    return [\n      {\n        label: \"Edit\",\n        displayAs: \"button\",\n        icon: iconEdit,\n        onClick: () => (isEditable.value = true),\n      },\n    ];\n  },\n}));\n\nconst features = [withEditing, withEditingActions];\n\nconst handleSave = () => {\n  for (const id in editState.value) {\n    const changes = editState.value[id];\n\n    const index = data.value.findIndex((row) => row.id === Number.parseInt(id));\n    if (index === -1) continue;\n\n    \u002F\u002F the edit state only includes actually changed data so we need to make sure keep\n    \u002F\u002F all previous data\n    data.value[index] = { ...data.value[index], ...changes };\n  }\n\n  isEditable.value = false;\n};\n\nconst handleCancel = () => {\n  editState.value = {};\n  isEditable.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1638,"title":1639,"titles":1640,"content":1641,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#sticky-columns","Sticky columns",[1578,1614],"Columns can be pinned to the left or right edge of the data grid. Use sticky columns sparingly, as excessive pinned columns obscure content on smaller displays. Scroll the data grid horizontally below to inspect sticky columns. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  column1: string;\n  column2: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    {\n      id: 1,\n      column1: \"Content\",\n      column2:\n        \"Scroll me to see the sticky columns in action. This is a very large example column.\",\n    },\n    {\n      id: 4,\n      column1: \"Content\",\n      column2:\n        \"Scroll me to see the sticky columns in action. This is a very large example column.\",\n    },\n    {\n      id: 5,\n      column1: \"Content\",\n      column2:\n        \"Scroll me to see the sticky columns in action. This is a very large example column.\",\n    },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"column1\", label: \"Column 1\", width: \"max-content\" },\n    \u002F\u002F for this example, we make the second column very large so the data grid gets scrollable\n    \u002F\u002F don't do this in your project\n    { key: \"column2\", label: \"Column 2\", width: \"64rem\" },\n  ];\n});\n\nconst withStickyColumns = DataGridFeatures.useStickyColumns\u003CEntry>({\n  columns: [\"column1\"],\n  position: \"left\",\n});\n\nconst features = [withStickyColumns];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1643,"title":1644,"titles":1645,"content":1646,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#selection","Selection",[1578,1614],"Allows selecting multiple rows. With paginated or filtered datasets, a single select-all toggle is often insufficient because unrendered rows remain hidden. To solve this, OnyxDataGrid switches between two selection modes: The data grid tracks the selection using a \"contingent\" - which is simply the specific list of rows the user has manually interacted with. How the selection behaves depends on the mode: Include mode Only the rows that the user explicitly checked are included. The \"contingent\" is the list of checked rows. Exclude mode When checking the \"Select all\" checkbox in the column header, the data grid automatically switches to the \"exclude\" mode. It assumes the user wants to select every single row in the entire dataset (even the ones on other pages). Everything except the rows the user manually unchecks is selected. The \"contingent\" becomes the \"blacklist\" of unchecked rows. The data grid only stores the rows that the user unchecked. You need to write custom logic to calculate the final list of selected rows based on your project's specific requirements. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst selectionState = ref\u003CDataGridFeatures.SelectionState>({\n  selectMode: \"include\",\n  \u002F\u002F optionally add initially checked rows here\n  contingent: new Set([2]),\n});\n\nconst withSelection = DataGridFeatures.useSelection\u003CEntry>({\n  selectionState,\n});\n\nconst features = [withSelection];\n\n\u002F**\n * All selected rows, considering the selection mode.\n *\u002F\nconst selectedRows = computed(() => {\n  const { selectMode, contingent } = selectionState.value;\n\n  return data.value.filter((row) => {\n    if (selectMode === \"exclude\") return !contingent.has(row.id);\n    return contingent.has(row.id);\n  });\n});\n\n\u002F\u002F TODO: only used for this example, remove in your project\n\u002F**\n * All rows in the selection contingent.\n *\u002F\nconst contingentRows = computed(() => {\n  return data.value.filter((row) => selectionState.value.contingent.has(row.id));\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxDataGrid\n      :headline=\"{ text: 'Example headline', rowCount: true }\"\n      :columns\n      :data\n      :features\n    \u002F>\n\n    \u003Cdiv class=\"example onyx-text--small\">\n      \u003Cp>Mode: {{ selectionState.selectMode }}\u003C\u002Fp>\n      \u003Cp>Contingent: {{ contingentRows.map((row) => row.name).join(\", \") || \"-\" }}\u003C\u002Fp>\n      \u003Cp>=> Selected rows: {{ selectedRows.map((row) => row.name).join(\", \") || \"-\" }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.example {\n  margin-top: var(--onyx-density-sm);\n  color: var(--onyx-color-text-icons-neutral-medium);\n}\n\u003C\u002Fstyle> The checkboxes can optionally be only shown on hover: \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst selectionState = ref\u003CDataGridFeatures.SelectionState>({\n  selectMode: \"include\",\n  \u002F\u002F optionally add initially checked rows here\n  contingent: new Set([2]),\n});\n\nconst withSelection = DataGridFeatures.useSelection\u003CEntry>({\n  selectionState,\n  hover: true,\n});\n\nconst features = [withSelection];\n\n\u002F**\n * All selected rows, considering the selection mode.\n *\u002F\nconst selectedRows = computed(() => {\n  const { selectMode, contingent } = selectionState.value;\n\n  return data.value.filter((row) => {\n    if (selectMode === \"exclude\") return !contingent.has(row.id);\n    return contingent.has(row.id);\n  });\n});\n\n\u002F\u002F TODO: only used for this example, remove in your project\n\u002F**\n * All rows in the selection contingent.\n *\u002F\nconst contingentRows = computed(() => {\n  return data.value.filter((row) => selectionState.value.contingent.has(row.id));\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxDataGrid\n      :headline=\"{ text: 'Example headline', rowCount: true }\"\n      :columns\n      :data\n      :features\n    \u002F>\n\n    \u003Cdiv class=\"example onyx-text--small\">\n      \u003Cp>Mode: {{ selectionState.selectMode }}\u003C\u002Fp>\n      \u003Cp>Contingent: {{ contingentRows.map((row) => row.name).join(\", \") || \"-\" }}\u003C\u002Fp>\n      \u003Cp>=> Selected rows: {{ selectedRows.map((row) => row.name).join(\", \") || \"-\" }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.example {\n  margin-top: var(--onyx-density-sm);\n  color: var(--onyx-color-text-icons-neutral-medium);\n}\n\u003C\u002Fstyle> Selection can be combined with global actions to execute operations on selected rows, such as batch deletion. \u003Cscript setup lang=\"ts\">\nimport { iconTrash } from \"@sit-onyx\u002Ficons\";\nimport { createFeature, DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = ref\u003CEntry[]>([\n  { id: 1, name: \"Alice\" },\n  { id: 2, name: \"Charlie\" },\n  { id: 3, name: \"Bob\" },\n  { id: 4, name: \"Robin\" },\n  { id: 5, name: \"John\" },\n]);\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst selectionState = ref\u003CDataGridFeatures.SelectionState>({\n  selectMode: \"include\",\n  contingent: new Set([2]), \u002F\u002F pre-select row 2 for this example\n});\n\nconst withSelection = DataGridFeatures.useSelection\u003CEntry>({ selectionState });\n\n\u002F**\n * All selected rows, considering the selection mode.\n *\u002F\nconst selectedRows = computed(() => {\n  const { selectMode, contingent } = selectionState.value;\n\n  return data.value.filter((row) => {\n    if (selectMode === \"exclude\") return !contingent.has(row.id);\n    return contingent.has(row.id);\n  });\n});\n\nconst deleteSelectedRows = () => {\n  data.value = data.value.filter((row) => !selectedRows.value.find((r) => r.id === row.id));\n  selectionState.value = { selectMode: \"include\", contingent: new Set() };\n};\n\nconst withCustomActions = createFeature(() => ({\n  name: Symbol(\"customActions\"),\n  watch: [selectedRows],\n  actions: () => {\n    if (!selectedRows.value.length) return [];\n\n    return [\n      {\n        label: `Delete (${selectedRows.value.length})`,\n        icon: iconTrash,\n        displayAs: \"button\",\n        color: \"danger\",\n        onClick: () => deleteSelectedRows(),\n      },\n    ];\n  },\n}));\n\nconst features = [withSelection, withCustomActions];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1648,"title":1649,"titles":1650,"content":1651,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#resizing","Resizing",[1578,1614],"Allows the user to manually change the width of columns by dragging the right border of the column header. Double-clicking the right border adjusts the size to the content width. To ensure the overall table size does not shrink, an empty filler column is added to the right if the columns do not take up the full width. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\nconst withResizing = DataGridFeatures.useResizing\u003CEntry>({\n  \u002F\u002F options here..\n});\n\nconst features = [withResizing];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1653,"title":1654,"titles":1655,"content":1656,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#hide-columns","Hide columns",[1578,1614],"Allows the user to hide or show columns. Can also be used by the developer to hide specific columns by default that the user can show manually if needed. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  birthday: Date;\n  active?: boolean;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", age: 30, birthday: new Date(\"1990-01-01\"), active: true },\n    { id: 4, name: \"Robin\", age: 28, birthday: new Date(\"2001-02-22\"), active: true },\n    { id: 5, name: \"John\", age: 42, birthday: new Date(\"1997-04-18\"), active: false },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"age\", label: \"Age\", type: \"number\" },\n    { key: \"birthday\", label: \"Birthday\", type: \"date\" },\n    { key: \"active\", label: \"Active?\", type: \"boolean\" },\n  ];\n});\n\nconst hiddenColumns = ref\u003CDataGridFeatures.HideColumnsState\u003CEntry>>(\n  new Set([\"birthday\", \"active\"]),\n);\n\nconst withHideColumns = DataGridFeatures.useHideColumns\u003CEntry>({\n  \u002F\u002F options here...\n  state: hiddenColumns,\n});\n\nconst features = [withHideColumns];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1658,"title":1659,"titles":1660,"content":1661,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#expandable-rows","Expandable rows",[1578,1614],"Allows expanding additional content for each row. We do NOT recommend showing nested tables inside the expanded rows. Prefer using e.g. a modal instead if needed. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, OnyxInfoCard, type ColumnConfig } from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withExpandableRows = DataGridFeatures.useExpandableRows\u003CEntry>({\n  component: (row) =>\n    h(\n      \u002F\u002F Tip: We recommend creating a single custom Vue component for the content\n      \u002F\u002F and simply render it here and pass the required props.\n      OnyxInfoCard,\n      { headline: `Slot content for \"${row.name}\"` },\n      () => \"Place any components here that fit your needs.\",\n    ),\n});\n\nconst features = [withExpandableRows];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1663,"title":1664,"titles":1665,"content":1666,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#row-click","Row click",[1578,1614],"Enables row-level click actions, such as routing to detail views or opening modals. Click handlers can be disabled per row, column, or cell. We recommend disabling row clicks on columns containing interactive controls like buttons or links. Row clicks are automatically suppressed when the user selects or highlights cell text. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, useToast, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst toast = useToast();\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\nconst withRowClick = DataGridFeatures.useRowClick\u003CEntry>({\n  label: \"Show details\",\n  onClick: (row) => {\n    toast.show({\n      headline: \"Clicked row!\",\n      description: `Row \"${row.name}\" was clicked. Implement your custom logic here.`,\n    });\n  },\n  \u002F\u002F if needed, you can disable specific rows, columns or cells here:\n  \u002F\u002F enabled: (row, column) => {},\n});\n\nconst features = [withRowClick];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1668,"title":1669,"titles":1670,"content":1671,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#rearrange-rows","Rearrange rows",[1578,1614],"Allows the user to rearrange the order of rows using drag-and-drop. Technically, the rearrange state contains a map of changed row IDs and their corresponding new order (starting from 1 for the first row). The global action buttons can also be overridden when custom triggers are used to active the rearrange mode. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\n\u002F\u002F you can e.g. watch this state to save the re-arranged order in the backend\nconst rearrangeState = ref\u003CDataGridFeatures.RowRearrangeState\u003CEntry>>({\n  active: false,\n  order: new Map(),\n});\n\nconst withRowRearrange = DataGridFeatures.useRowRearrange\u003CEntry>({\n  state: rearrangeState,\n});\n\nconst features = [withRowRearrange];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1673,"title":1674,"titles":1675,"content":1676,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#rearrange-columns","Rearrange columns",[1578,1614],"Allows the user to rearrange the order of columns using drag-and-drop. Technically, the rearrange state contains a map of changed column keys and their corresponding new order (starting from 1 for the first column). The global action buttons can also be overridden when custom triggers are used to active the rearrange mode. \u003Cscript setup lang=\"ts\">\nimport { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  age: number;\n  birthday: Date;\n  isActive?: boolean;\n};\n\nconst data: Entry[] = [\n  { id: 1, name: \"Alice\", age: 30, birthday: new Date(\"1990-01-01\"), isActive: true },\n  { id: 2, name: \"Charlie\", age: 35, birthday: new Date(\"1998-02-11\"), isActive: false },\n  { id: 3, name: \"Bob\", age: 25, birthday: new Date(\"1995-06-15\"), isActive: false },\n  { id: 4, name: \"Robin\", age: 28, birthday: new Date(\"2001-02-22\"), isActive: true },\n  { id: 5, name: \"John\", age: 42, birthday: new Date(\"1997-04-18\"), isActive: false },\n];\n\nconst columns: ColumnConfig\u003CEntry>[] = [\n  { key: \"name\", label: \"Name\" },\n  { key: \"age\", label: \"Rank\" },\n  { key: \"birthday\", label: \"Birthday\", type: \"date\" },\n  { key: \"isActive\", label: \"Is active?\", width: \"max-content\", type: \"boolean\" },\n];\n\n\u002F\u002F you can e.g. watch this state to save the re-arranged order in the backend\nconst rearrangeState = ref\u003CDataGridFeatures.ColumnRearrangeState>({\n  active: false,\n  order: new Map(),\n});\n\nconst withRColumnRearrange = DataGridFeatures.useColumnRearrange\u003CEntry>({\n  state: rearrangeState,\n});\n\nconst features = [withRColumnRearrange];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1678,"title":1679,"titles":1680,"content":1681,"level":19},"\u002Fcomponents\u002Fdata\u002Fdata-grid#build-a-custom-feature","Build a custom feature",[1578],"Features are the fundamental building blocks that power the data grid. They are used internally to implement core data grid functionality and built-in features but can also be used to extend the data grid with custom functionality. This means that every functionality available for the data grid can be implemented\u002Fused within a feature. Using the feature API has powerful benefits: Compatibility Since features use a uniform and consistent API, multiple features are compatible with each other, ensuring that e.g. filtering and sorting is supported even when displaying the data with custom components. Reusability Data grid features are reusable by design, which allows sharing them across the application, team or beyond. This section will cover how to build a custom reusable data grid feature. For built-in features, see the feature examples above. Many feature APIs rely on Vue render (h) functions. If you are not familiar with this syntax, please refer to the Vue documentation.",{"id":1683,"title":1684,"titles":1685,"content":1686,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#basic-structure","Basic structure",[1578,1679],"Create a new feature by using the createFeature() utility. Without options If the feature does not need any options to e.g. customize how the feature behaves, define the feature like this: import { createFeature } from \"sit-onyx\";\n\nconst withMyFeature = createFeature(() => ({\n  name: Symbol(\"myFeature\"),\n}));\nWith options To support custom feature options to customize its behavior and make it more flexible when reused for several use cases, return the feature from a custom function that accepts the feature options: import { createFeature } from \"sit-onyx\";\nimport type { MaybeRef } from \"vue\";\n\nexport type MyFeatureOptions = {\n  someOption?: MaybeRef\u003Cboolean | undefined>;\n};\n\nconst useMyFeature = (options?: MyFeatureOptions) =>\n  createFeature(() => {\n    \u002F\u002F e.g. use the options here...\n\n    return {\n      name: Symbol(\"myFeature\"),\n    };\n  });\n\n\u002F\u002F usage:\n\u002F\u002F const withMyFeature = useMyFeature({ someOption: true });",{"id":1688,"title":1689,"titles":1690,"content":1691,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#type-renderer-column-types","Type renderer \u002F Column types",[1578,1679],"Type renderers are used to define how a cell should visually be rendered\u002Fdisplayed. While several built-in column types are supported, custom types can be implemented for use-case specific requirements. For generic \u002F reusable types, we recommend moving the feature to a dedicated .ts file so it can be reused by other data grids. Simple type A simple custom type displays the value for every column in the same way, e.g. by adding a copy button to copy the cell content. \u003Cscript setup lang=\"ts\">\nimport { iconCopy } from \"@sit-onyx\u002Ficons\";\nimport {\n  ColumnGroupConfig,\n  ColumnTypesFromFeatures,\n  createFeature,\n  DataGridFeatures,\n  OnyxDataGrid,\n  OnyxSystemButton,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\ntype CustomColumnTypes = ColumnTypesFromFeatures\u003C[typeof withCustomTypes]>;\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry, ColumnGroupConfig, CustomColumnTypes>[]>(() => {\n  return [{ key: \"name\", label: \"Name\", type: \"copy\" }];\n});\n\nconst withCustomTypes = createFeature(() => ({\n  name: Symbol(\"customTypes\"),\n  typeRenderer: {\n    copy: DataGridFeatures.createTypeRenderer({\n      cell: {\n        \u002F\u002F optionally set attributes on the \u003Ctd> element if needed\n        \u002F\u002F tdAttributes: {},\n        component: ({ modelValue }) => {\n          return h(\"div\", { class: \"copy-cell\" }, [\n            h(\"span\", modelValue),\n            h(OnyxSystemButton, { label: \"Copy\", icon: iconCopy }),\n          ]);\n        },\n      },\n      \u002F\u002F you can also customize the header rendering for the column\n      \u002F\u002F header: {},\n    }),\n  },\n}));\n\nconst features = [withCustomTypes];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n:deep(.copy-cell) {\n  display: flex;\n  align-items: center;\n  gap: var(--onyx-density-2xs);\n}\n\u003C\u002Fstyle>\nData-specific type Column types have access to the full row data. This can be useful to create a custom column type that e.g. combines multiple values of the row to display them inside a single cell. The example below adds an email link to the name. \u003Cscript setup lang=\"ts\">\nimport {\n  ColumnGroupConfig,\n  ColumnTypesFromFeatures,\n  createFeature,\n  DataGridFeatures,\n  OnyxDataGrid,\n  OnyxLink,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\ntype CustomColumnTypes = ColumnTypesFromFeatures\u003C[typeof withCustomTypes]>;\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry, ColumnGroupConfig, CustomColumnTypes>[]>(() => {\n  return [{ key: \"name\", label: \"Name\", type: \"customName\" }];\n});\n\nconst withCustomTypes = createFeature(() => ({\n  name: Symbol(\"customTypes\"),\n  typeRenderer: {\n    customName: DataGridFeatures.createTypeRenderer\u003Cobject, Entry>({\n      cell: {\n        component: ({ row }) => {\n          return h(OnyxLink, { href: `mailto:${row.email}` }, () => row.name);\n        },\n      },\n    }),\n  },\n}));\n\nconst features = [withCustomTypes];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nReusable type with options Options can be defined for a custom column type that can then be set per data grid to customize how the column type is rendered. This is especially useful for reusable types that are used across multiple data grids. The following example defines a \"tag\" column type that can be used in multiple data grids but can be customized via options to change the tag properties (color, icon etc.) based on the row data. \u003Cscript setup lang=\"ts\">\nimport {\n  ColumnGroupConfig,\n  ColumnTypesFromFeatures,\n  createFeature,\n  DataGridEntry,\n  DataGridFeatures,\n  OnyxDataGrid,\n  OnyxTag,\n  OnyxTagProps,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  status: \"online\" | \"offline\";\n};\n\ntype CustomColumnTypes = ColumnTypesFromFeatures\u003C[typeof withCustomTypes]>;\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", status: \"online\" },\n    { id: 2, name: \"Charlie\", status: \"offline\" },\n    { id: 3, name: \"Bob\", status: \"offline\" },\n    { id: 4, name: \"Robin\", status: \"online\" },\n    { id: 5, name: \"John\", status: \"online\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry, ColumnGroupConfig, CustomColumnTypes>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    {\n      key: \"status\",\n      label: \"Status\",\n      width: \"max-content\",\n      type: {\n        name: \"tag\",\n        options: {\n          tag: (row) => {\n            if (row.status === \"online\") {\n              return {\n                color: \"success\",\n              };\n            }\n            if (row.status === \"offline\") {\n              return {\n                color: \"danger\",\n              };\n            }\n          },\n        },\n      },\n    },\n  ];\n});\n\n\u002F\u002F place this feature in a dedicated .ts file so it can be reused by other data grids\ntype IconColumnTypeOptions\u003CTEntry extends DataGridEntry> = {\n  tag?: (row: TEntry) => Partial\u003COnyxTagProps> | undefined;\n};\n\nconst useCustomTypes = \u003CTEntry extends DataGridEntry>() =>\n  createFeature(() => ({\n    name: Symbol(\"customTypes\"),\n    typeRenderer: {\n      tag: DataGridFeatures.createTypeRenderer\u003CIconColumnTypeOptions\u003CTEntry>, TEntry>({\n        cell: {\n          component: ({ modelValue, metadata, row }) => {\n            if (!modelValue) return \"-\";\n            const tagProps = metadata?.typeOptions?.tag?.(row) ?? {};\n            return h(OnyxTag, { label: String(modelValue), ...tagProps });\n          },\n        },\n      }),\n    },\n  }));\n\nconst withCustomTypes = useCustomTypes\u003CEntry>();\n\nconst features = [withCustomTypes];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1693,"title":1694,"titles":1695,"content":1696,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#modify-columns","Modify columns",[1578,1679],"Columns can be modified within a feature to e.g. add additional columns or edit\u002Fremove existing ones. You can optionally define an order when the modification is executed in cases where it should be executed before or after other features (the higher the order, the earlier it is applied). You can also add additional attributes to the \u003Ctd> and \u003Cth> element of the columns, e.g. for changing styles etc. In the example below, a new column is added automatically combined with a custom column type to display row actions. \u003Cscript setup lang=\"ts\">\nimport { iconTrash } from \"@sit-onyx\u002Ficons\";\nimport {\n  createFeature,\n  DataGridFeatures,\n  type InternalColumnConfig,\n  OnyxDataGrid,\n  OnyxIconButton,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst CUSTOM_COLUMN_KEY = Symbol();\nconst CUSTOM_COLUMN_TYPE = Symbol();\n\nconst withMyFeature = createFeature(() => ({\n  name: Symbol(\"myFeature\"),\n  modifyColumns: {\n    \u002F\u002F optionally set the order to define if the modification should be done before\u002Fafter other features\n    \u002F\u002F order: -1,\n    func: (columns) => {\n      return [\n        ...columns,\n        {\n          key: CUSTOM_COLUMN_KEY,\n          label: \"Actions\",\n          width: \"max-content\",\n          type: {\n            name: CUSTOM_COLUMN_TYPE,\n          },\n        },\n        \u002F\u002F type-cast is needed because we are adding a new column that does not exist in\n        \u002F\u002F our original entry \u002F data type\n      ] as InternalColumnConfig\u003CEntry>[];\n    },\n  },\n  typeRenderer: {\n    [CUSTOM_COLUMN_TYPE]: DataGridFeatures.createTypeRenderer({\n      cell: {\n        component: () => {\n          return h(OnyxIconButton, {\n            label: \"Delete\",\n            icon: iconTrash,\n            color: \"danger\",\n            density: \"compact\",\n            onClick: () => {\n              \u002F\u002F your custom logic here...\n            },\n          });\n        },\n      },\n    }),\n  },\n}));\n\nconst features = [withMyFeature];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1698,"title":1699,"titles":1700,"content":1701,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#modify-rows","Modify rows",[1578,1679],"Rows can be modified within a feature to e.g. add additional rows or edit\u002Fremove existing ones. You can optionally define an order when the modification is executed in cases where it should be executed before or after other features (the higher the order, the earlier it is applied). You can also add additional row options such as \u003Ctr> attributes which are useful for adding event\u002Fclick handlers, classes for changing styles etc. \u003Cscript setup lang=\"ts\">\nimport {\n  createFeature,\n  DataGridEntry,\n  DataGridFeature,\n  DataGridRowOptionsSymbol,\n  mergeVueProps,\n  OnyxDataGrid,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withMyFeature: DataGridFeature\u003CEntry> = createFeature(() => ({\n  name: Symbol(\"myFeature\"),\n  mutation: {\n    \u002F\u002F optionally set the order to define if the modification should be done before\u002Fafter other features\n    \u002F\u002F order: -1,\n    func: (rows) => {\n      return rows.map((row) => {\n        const currentAttributes =\n          (row as DataGridEntry)[DataGridRowOptionsSymbol]?.trAttributes ?? {};\n\n        return {\n          ...row,\n          [DataGridRowOptionsSymbol]: {\n            \u002F\u002F make sure to merge with existing attributes, otherwise attributes added by other features will be overridden\n            trAttributes: mergeVueProps(currentAttributes, {\n              class: { \"row--highlighted\": row.name === \"Charlie\" },\n            } satisfies typeof currentAttributes),\n          },\n        } satisfies typeof row & DataGridEntry;\n      });\n    },\n  },\n}));\n\nconst features = [withMyFeature];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n:deep(.row--highlighted) {\n  --onyx-table-row-background-color: var(--onyx-color-base-primary-100);\n}\n\u003C\u002Fstyle>",{"id":1703,"title":1704,"titles":1705,"content":1706,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#header","Header",[1578,1679],"Use the header option of a custom feature to add custom content to the column header. There are two main ways to customize the header: Header actions Header actions are a unified API to add user interactions to the column header that you might already know from built-in features like sorting and filtering. If there are multiple actions defined for a single column (e.g. by using sorting and filtering at the same time), the actions are automatically moved to a flyout menu. Otherwise, it is displayed directly inside the header if there is only a single action. When creating custom header actions, you can define both an iconComponent and menuItems for the same action which will then be automatically switched depending on whether additional header actions exist from other features. For example, our built-in sorting feature uses this approach to either render a single sort button to toggle through the different sorting modes (ascending, descending and none) if there are no other actions but show separate menu items for each mode inside the flyout when used together with other features. Set the showFlyoutMenu option to force showing the action inside the flyout menu, even if there is only a single action. Similarly, the iconComponent can set alwaysShowInHeader to force showing it directly inside the header but this should be used very rarely to prevent an overload of always visible header actions. We strongly recommend using the system button as iconComponent and the menu item component for menuItems. \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  createFeature,\n  HeaderAction,\n  OnyxDataGrid,\n  OnyxMenuItem,\n  OnyxSystemButton,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n  email: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\", email: \"alice@example.com\" },\n    { id: 2, name: \"Charlie\", email: \"charlie@example.com\" },\n    { id: 3, name: \"Bob\", email: \"bob@example.com\" },\n    { id: 4, name: \"Robin\", email: \"robin@example.com\" },\n    { id: 5, name: \"John\", email: \"john@example.com\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [\n    { key: \"name\", label: \"Name\" },\n    { key: \"email\", label: \"Email\" },\n  ];\n});\n\nconst withCustomHeaderActions = createFeature(() => ({\n  name: Symbol(\"customHeaderActions\"),\n  header: {\n    actions: (column) => {\n      const headerActions: HeaderAction[] = [\n        {\n          iconComponent: {\n            iconComponent: h(OnyxSystemButton, {\n              label: \"Example action\",\n              icon: iconPlaceholder,\n              color: \"medium\",\n            }),\n            \u002F\u002F optionally set \"alwaysShowInHeader\" if the iconComponent should always be shown directly inside the header\n            \u002F\u002F even if multiple actions exist, should we used rarely!\n            \u002F\u002F alwaysShowInHeader: true,\n          },\n          menuItems: [h(OnyxMenuItem, { label: \"Action 1\", icon: iconPlaceholder })],\n          \u002F\u002F optionally set \"showFlyoutMenu\" to always show the menuItems inside the flyout instead of the iconComponent\n          \u002F\u002F even if there is only a single action for the column\n          \u002F\u002F showFlyoutMenu: true,\n        },\n      ];\n\n      \u002F\u002F for this example, we add another header action only for the \"email\" column to demonstrate\n      \u002F\u002F how multiple actions are wrapped inside a flyout menu\n      if (column.key === \"email\") {\n        headerActions.push({\n          iconComponent: h(OnyxSystemButton, {\n            label: \"Example action\",\n            icon: iconPlaceholder,\n            color: \"medium\",\n          }),\n          menuItems: [h(OnyxMenuItem, { label: \"Action 2\", icon: iconPlaceholder })],\n        });\n      }\n\n      return headerActions;\n    },\n  },\n}));\n\nconst features = [withCustomHeaderActions];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nHeader wrapper In addition to the header actions, a wrapper component can be defined that is placed\u002Fwrapped around the whole header content. This can be used to e.g. add additional content or apply custom styles. The wrapper component must define a default slot where the header content is placed. Hover over the column header in this example to see a tooltip. \u003Cscript setup lang=\"ts\">\nimport { createFeature, OnyxDataGrid, OnyxTooltip, type ColumnConfig } from \"sit-onyx\";\nimport { computed, defineComponent, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withHeaderTooltip = createFeature(() => ({\n  name: Symbol(\"headerTooltip\"),\n  header: {\n    wrapper: (column) => {\n      \u002F\u002F ideally you create a dedicated .vue file for the component and import it here\n      const TooltipHeaderWrapper = defineComponent({\n        props: {\n          tooltipText: {\n            type: String,\n            required: true,\n          },\n        },\n        setup(props, { slots }) {\n          return () => {\n            return h(OnyxTooltip, { text: props.tooltipText }, {\n              default: ({ trigger }) => h(\"div\", { ...trigger }, slots),\n            } as InstanceType\u003Ctypeof OnyxTooltip>[\"$slots\"]);\n          };\n        },\n      });\n\n      return h(TooltipHeaderWrapper, { tooltipText: column.label });\n    },\n  },\n}));\n\nconst features = [withHeaderTooltip];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>",{"id":1708,"title":626,"titles":1709,"content":1710,"level":84},"\u002Fcomponents\u002Fdata\u002Fdata-grid#slots",[1578,1679],"All slots available on the underlying table component are supported. Be careful when overriding slots, as custom slot implementations can overwrite content provided by other active features. Headline Use the headline prop on OnyxDataGrid to render headers with automatic row counts and formatting. For advanced requirements, the headline slot can be extended via a custom feature: \u003Cscript setup lang=\"ts\">\nimport { createFeature, OnyxDataGrid, OnyxInfoTooltip, type ColumnConfig } from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withCustomSlots = createFeature(() => ({\n  name: Symbol(\"customSlots\"),\n  slots: {\n    headline: (slotContent) => {\n      return [\n        h(\"div\", { class: \"headline-wrapper\" }, [\n          \u002F\u002F make sure to keep existing slot content from other features\n          ...slotContent(),\n          h(OnyxInfoTooltip, { text: \"Example tooltip text\" }),\n        ]),\n      ];\n    },\n  },\n}));\n\nconst features = [withCustomSlots];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n:deep(.headline-wrapper) {\n  display: flex;\n  align-items: center;\n  gap: var(--onyx-density-xs);\n}\n\u003C\u002Fstyle>\nActions Global actions appear in the top-right corner. We recommend defining actions via features so that actions collapse gracefully into a flyout menu on narrow viewports. If custom elements are required, use the actions slot: \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  createFeature,\n  OnyxDataGrid,\n  OnyxMenuItem,\n  OnyxSplitButton,\n  type ColumnConfig,\n} from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withCustomSlots = createFeature(() => ({\n  name: Symbol(\"customSlots\"),\n  \u002F\u002F prefer the build-in \"actions\" API for using actions\n  actions: () => {\n    return [{ label: \"Example action\", icon: iconPlaceholder, color: \"neutral\" }];\n  },\n  slots: {\n    \u002F\u002F use the \"actions\" slots directly only if needed for custom content\n    actions: (slotContent) => {\n      return [\n        ...slotContent(),\n        h(\n          OnyxSplitButton,\n          { label: \"Button\" },\n          {\n            options: () => [\n              h(OnyxMenuItem, { label: \"Action 1\" }),\n              h(OnyxMenuItem, { label: \"Action 2\" }),\n              h(OnyxMenuItem, { label: \"Action 3\" }),\n            ],\n          },\n        ),\n      ];\n    },\n  },\n}));\n\nconst features = [withCustomSlots];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nBottom left Renders custom content in the bottom-left area below the grid (e.g. status summaries or legends). \u003Cscript setup lang=\"ts\">\nimport { createFeature, OnyxDataGrid, type ColumnConfig } from \"sit-onyx\";\nimport { computed, h } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst withCustomSlots = createFeature(() => ({\n  name: Symbol(\"customSlots\"),\n  slots: {\n    bottomLeft: (slotContent) => {\n      return [\n        \u002F\u002F make sure to keep existing slot content from other features\n        ...slotContent(),\n        h(\"p\", { class: \"onyx-text--small\" }, \"Example data grid description.\"),\n      ];\n    },\n  },\n}));\n\nconst features = [withCustomSlots];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nPagination We recommend the pagination feature over using the raw slot. For specialized controls, the pagination slot can be extended with a custom feature: \u003Cscript setup lang=\"ts\">\nimport { createFeature, OnyxDataGrid, OnyxPagination, type ColumnConfig } from \"sit-onyx\";\nimport { computed, h, ref } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [\n    { id: 1, name: \"Alice\" },\n    { id: 2, name: \"Charlie\" },\n    { id: 3, name: \"Bob\" },\n    { id: 4, name: \"Robin\" },\n    { id: 5, name: \"John\" },\n  ];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\nconst page = ref(1);\n\nconst withCustomSlots = createFeature(() => ({\n  name: Symbol(\"customSlots\"),\n  watch: [page],\n  slots: {\n    pagination: (slotContent) => {\n      return [\n        h(OnyxPagination, {\n          modelValue: page.value,\n          pages: 42,\n          type: \"compact\",\n          \"onUpdate:modelValue\": (newPage) => (page.value = newPage),\n        }),\n        \u002F\u002F make sure to keep existing slot content from other features\n        ...slotContent(),\n      ];\n    },\n  },\n}));\n\nconst features = [withCustomSlots];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data :features \u002F>\n\u003C\u002Ftemplate>\nEmpty Customizes the fallback view when no data is available. We recommend rendering OnyxEmpty. \u003Cscript setup lang=\"ts\">\nimport { iconPlus } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxDataGrid, OnyxEmpty, type ColumnConfig } from \"sit-onyx\";\nimport { computed } from \"vue\";\n\ntype Entry = {\n  id: number;\n  name: string;\n};\n\nconst data = computed\u003CEntry[]>(() => {\n  return [];\n});\n\nconst columns = computed\u003CColumnConfig\u003CEntry>[]>(() => {\n  return [{ key: \"name\", label: \"Name\" }];\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDataGrid :headline=\"{ text: 'Example headline', rowCount: true }\" :columns :data>\n    \u003Ctemplate #empty=\"{ defaultMessage }\">\n      \u003COnyxEmpty>\n        \u003C!-- re-use the default message here or place a custom message -->\n        {{ defaultMessage }}\n\n        \u003Ctemplate #description>This is an example description.\u003C\u002Ftemplate>\n\n        \u003Ctemplate #buttons>\n          \u003COnyxButton label=\"Go back\" color=\"neutral\" mode=\"plain\" \u002F>\n          \u003COnyxButton label=\"Add data\" :icon=\"iconPlus\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxEmpty>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxDataGrid>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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}",{"id":1712,"title":1713,"titles":1714,"content":1715,"level":9},"\u002Fcomponents\u002Fdata\u002Fempty","Empty",[],"The empty component is used to indicate to the user that there is currently no data available.",{"id":1717,"title":400,"titles":1718,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Fempty#examples",[1713],{"id":1720,"title":439,"titles":1721,"content":1722,"level":84},"\u002Fcomponents\u002Fdata\u002Fempty#basic",[1713,400],"A basic empty component contains at least a headline and can optionally include a description and buttons. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxEmpty } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxEmpty>\n    No data found\n    \u003Ctemplate #description> There is no data available that match your selected filters. \u003C\u002Ftemplate>\n\n    \u003Ctemplate #buttons>\n      \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n      \u003COnyxButton label=\"Button\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxEmpty>\n\u003C\u002Ftemplate>",{"id":1724,"title":1725,"titles":1726,"content":1727,"level":84},"\u002Fcomponents\u002Fdata\u002Fempty#custom-icon","Custom icon",[1713,400],"Use the icon slot to override the default illustration, e.g. using the icon component. \u003Cscript lang=\"ts\" setup>\nimport { iconCircleX } from \"@sit-onyx\u002Ficons\";\nimport { OnyxEmpty, OnyxIcon } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxEmpty>\n    Access denied\n    \u003Ctemplate #description> You don't have permissions to access this page. \u003C\u002Ftemplate>\n\n    \u003Ctemplate #icon>\n      \u003COnyxIcon :icon=\"iconCircleX\" color=\"danger\" size=\"48px\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxEmpty>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1729,"title":1730,"titles":1731,"content":1732,"level":9},"\u002Fcomponents\u002Fdata\u002Fitems-per-page","Items per page",[],"The items per page component allows users to select how many items are displayed per page in a paginated list or table.",{"id":1734,"title":400,"titles":1735,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Fitems-per-page#examples",[1730],{"id":1737,"title":439,"titles":1738,"content":1739,"level":84},"\u002Fcomponents\u002Fdata\u002Fitems-per-page#basic",[1730,400],"\u003Cscript lang=\"ts\" setup>\nimport { OnyxItemsPerPage } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options = [25, 50, 100];\nconst itemsPerPage = ref(options[0]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxItemsPerPage v-model=\"itemsPerPage\" :options \u002F>\n  \u003COnyxItemsPerPage v-model=\"itemsPerPage\" :options :label=\"{ position: 'left' }\" \u002F>\n\u003C\u002Ftemplate>",{"id":1741,"title":574,"titles":1742,"content":1743,"level":84},"\u002Fcomponents\u002Fdata\u002Fitems-per-page#skeleton",[1730,400],"The skeleton can be used on initial page load when the data for the page \u002F component is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxItemsPerPage } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options = [25, 50, 100];\nconst itemsPerPage = ref(options[0]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxItemsPerPage v-model=\"itemsPerPage\" :options skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1745,"title":1629,"titles":1746,"content":1747,"level":9},"\u002Fcomponents\u002Fdata\u002Fpagination",[],"Pagination can be used in cases where a lot of data exists that should not be shown or loaded all at once. The user can select a page for which data should be shown, e.g. inside a data grid.",{"id":1749,"title":400,"titles":1750,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Fpagination#examples",[1629],{"id":1752,"title":816,"titles":1753,"content":1754,"level":84},"\u002Fcomponents\u002Fdata\u002Fpagination#select",[1629,400],"The pagination supports different display types. The default \"select\" allows the user to either navigate using a previous\u002Fnext button or jump to a specific page using a select which can optionally be disabled. \u003Cscript lang=\"ts\" setup>\nimport { OnyxPagination } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPagination v-model=\"page\" :pages=\"42\" \u002F>\n\u003C\u002Ftemplate>",{"id":1756,"title":1757,"titles":1758,"content":1759,"level":84},"\u002Fcomponents\u002Fdata\u002Fpagination#inline","Inline",[1629,400],"The inline type is a more classic-style pagination. When using it, keep in mind that the component might not work ideally on small screen sizes. \u003Cscript lang=\"ts\" setup>\nimport { OnyxPagination } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPagination v-model=\"page\" :pages=\"42\" type=\"inline\" \u002F>\n\u003C\u002Ftemplate>",{"id":1761,"title":1762,"titles":1763,"content":1764,"level":84},"\u002Fcomponents\u002Fdata\u002Fpagination#compact","Compact",[1629,400],"A compact type of the pagination, ideally for small screen sizes. It supports a previous\u002Fnext button and page select which can optionally be disabled. For all pagination types, you can enable the autoCompact property which will automatically switch to the compact type when the available width is smaller than the specified breakpoint. \u003Cscript lang=\"ts\" setup>\nimport { OnyxPagination } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPagination v-model=\"page\" :pages=\"42\" type=\"compact\" \u002F>\n\u003C\u002Ftemplate>",{"id":1766,"title":426,"titles":1767,"content":1768,"level":84},"\u002Fcomponents\u002Fdata\u002Fpagination#disabled",[1629,400],"The pagination can be disabled to prevent the user to switch to another page. For types that include a page select (such as select and compact), the select can be disabled individually if needed using the disableFlyout property. \u003Cscript lang=\"ts\" setup>\nimport { OnyxPagination } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPagination v-model=\"page\" :pages=\"42\" disabled \u002F>\n\u003C\u002Ftemplate>",{"id":1770,"title":574,"titles":1771,"content":1772,"level":84},"\u002Fcomponents\u002Fdata\u002Fpagination#skeleton",[1629,400],"The skeleton can be used on initial page load when the data for the page \u002F pagination is initially loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxPagination } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPagination v-model=\"page\" :pages=\"42\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1774,"title":1775,"titles":1776,"content":1777,"level":9},"\u002Fcomponents\u002Fdata\u002Ftable","Table",[],"A lightweight component for displaying smaller, structured datasets. For complex datasets requiring sorting, filtering, or advanced actions, use OnyxDataGrid instead. See the data grid documentation for a feature comparison.",{"id":1779,"title":400,"titles":1780,"content":367,"level":19},"\u002Fcomponents\u002Fdata\u002Ftable#examples",[1775],{"id":1782,"title":439,"titles":1783,"content":1784,"level":84},"\u002Fcomponents\u002Fdata\u002Ftable#basic",[1775,400],"A standard table displays rows across predefined columns. Headers are optional, and cell contents can be customized with template slots. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTable } from \"sit-onyx\";\n\nconst data = [\n  { fruit: \"Strawberry\", price: 4.5, weight: 200, quantity: 100, rating: 5 },\n  { fruit: \"Apple\", price: 1.99, weight: 3_000, quantity: 200, rating: 3 },\n  { fruit: \"Banana\", price: 3.75, weight: 18_000, quantity: 300, rating: 4 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTable>\n    \u003Ctemplate #head>\n      \u003Ctr>\n        \u003Cth>Fruit\u003C\u002Fth>\n        \u003Cth>Price (€\u002Fkg)\u003C\u002Fth>\n        \u003Cth>Inventory (kg)\u003C\u002Fth>\n        \u003Cth>Inventory (pieces)\u003C\u002Fth>\n        \u003Cth>Rating\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Ftemplate>\n\n    \u003Ctr v-for=\"row in data\" :key=\"row.fruit\">\n      \u003Ctd>{{ row.fruit }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.price }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.weight }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.quantity }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.rating }}\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002FOnyxTable>\n\u003C\u002Ftemplate>",{"id":1786,"title":1787,"titles":1788,"content":1789,"level":84},"\u002Fcomponents\u002Fdata\u002Ftable#striped","Striped",[1775,400],"Alternating row backgrounds can be enabled to improve readability in dense tables. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTable } from \"sit-onyx\";\n\nconst data = [\n  { fruit: \"Strawberry\", price: 4.5, weight: 200, quantity: 100, rating: 5 },\n  { fruit: \"Apple\", price: 1.99, weight: 3_000, quantity: 200, rating: 3 },\n  { fruit: \"Banana\", price: 3.75, weight: 18_000, quantity: 300, rating: 4 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTable striped>\n    \u003Ctemplate #head>\n      \u003Ctr>\n        \u003Cth>Fruit\u003C\u002Fth>\n        \u003Cth>Price (€\u002Fkg)\u003C\u002Fth>\n        \u003Cth>Inventory (kg)\u003C\u002Fth>\n        \u003Cth>Inventory (pieces)\u003C\u002Fth>\n        \u003Cth>Rating\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Ftemplate>\n\n    \u003Ctr v-for=\"row in data\" :key=\"row.fruit\">\n      \u003Ctd>{{ row.fruit }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.price }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.weight }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.quantity }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.rating }}\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002FOnyxTable>\n\u003C\u002Ftemplate>",{"id":1791,"title":1792,"titles":1793,"content":1794,"level":84},"\u002Fcomponents\u002Fdata\u002Ftable#vertical-borders","Vertical borders",[1775,400],"Vertical dividing borders can be added to clearly distinguish adjacent columns. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTable } from \"sit-onyx\";\n\nconst data = [\n  { fruit: \"Strawberry\", price: 4.5, weight: 200, quantity: 100, rating: 5 },\n  { fruit: \"Apple\", price: 1.99, weight: 3_000, quantity: 200, rating: 3 },\n  { fruit: \"Banana\", price: 3.75, weight: 18_000, quantity: 300, rating: 4 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTable with-vertical-borders>\n    \u003Ctemplate #head>\n      \u003Ctr>\n        \u003Cth>Fruit\u003C\u002Fth>\n        \u003Cth>Price (€\u002Fkg)\u003C\u002Fth>\n        \u003Cth>Inventory (kg)\u003C\u002Fth>\n        \u003Cth>Inventory (pieces)\u003C\u002Fth>\n        \u003Cth>Rating\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Ftemplate>\n\n    \u003Ctr v-for=\"row in data\" :key=\"row.fruit\">\n      \u003Ctd>{{ row.fruit }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.price }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.weight }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.quantity }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.rating }}\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002FOnyxTable>\n\u003C\u002Ftemplate>",{"id":1796,"title":626,"titles":1797,"content":1798,"level":84},"\u002Fcomponents\u002Fdata\u002Ftable#slots",[1775,400],"The table provides slots around its core layout for elements like headlines, toolbar actions, or pagination controls. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxHeadline, OnyxIconButton, OnyxPagination, OnyxTable } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst data = [\n  { fruit: \"Strawberry\", price: 4.5, weight: 200, quantity: 100, rating: 5 },\n  { fruit: \"Apple\", price: 1.99, weight: 3_000, quantity: 200, rating: 3 },\n  { fruit: \"Banana\", price: 3.75, weight: 18_000, quantity: 300, rating: 4 },\n];\n\nconst page = ref(1);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTable>\n    \u003Ctemplate #head>\n      \u003Ctr>\n        \u003Cth>Fruit\u003C\u002Fth>\n        \u003Cth>Price (€\u002Fkg)\u003C\u002Fth>\n        \u003Cth>Inventory (kg)\u003C\u002Fth>\n        \u003Cth>Inventory (pieces)\u003C\u002Fth>\n        \u003Cth>Rating\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Ftemplate>\n\n    \u003Ctr v-for=\"row in data\" :key=\"row.fruit\">\n      \u003Ctd>{{ row.fruit }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.price }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.weight }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.quantity }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.rating }}\u003C\u002Ftd>\n    \u003C\u002Ftr>\n\n    \u003Ctemplate #headline>\n      \u003COnyxHeadline is=\"h3\">Example headline\u003C\u002FOnyxHeadline>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #actions>\n      \u003COnyxIconButton :icon=\"iconPlaceholder\" label=\"Example action\" \u002F>\n      \u003COnyxButton label=\"Button\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #bottomLeft>\n      \u003Cp class=\"onyx-text--small\">Additional example description.\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #pagination>\n      \u003COnyxPagination v-model=\"page\" :pages=\"42\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTable>\n\u003C\u002Ftemplate>",{"id":1800,"title":1801,"titles":1802,"content":1803,"level":84},"\u002Fcomponents\u002Fdata\u002Ftable#column-groups","Column groups",[1775,400],"Headers can be merged into column groups to represent hierarchical data relationships. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTable, TableColumnGroup } from \"sit-onyx\";\n\nconst data = [\n  { fruit: \"Strawberry\", price: 4.5, weight: 200, quantity: 100, rating: 5 },\n  { fruit: \"Apple\", price: 1.99, weight: 3_000, quantity: 200, rating: 3 },\n  { fruit: \"Banana\", price: 3.75, weight: 18_000, quantity: 300, rating: 4 },\n];\n\nconst columnGroups: TableColumnGroup[] = [\n  { key: \"general\", header: \"General\", span: 2 },\n  { key: \"inventory\", header: \"Inventory\", span: 2 },\n  { key: \"rest\", span: 1 },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTable :column-groups with-vertical-borders>\n    \u003Ctemplate #head>\n      \u003Ctr>\n        \u003Cth>Fruit\u003C\u002Fth>\n        \u003Cth>Price (€\u002Fkg)\u003C\u002Fth>\n        \u003Cth>Inventory (kg)\u003C\u002Fth>\n        \u003Cth>Inventory (pieces)\u003C\u002Fth>\n        \u003Cth>Rating\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Ftemplate>\n\n    \u003Ctr v-for=\"row in data\" :key=\"row.fruit\">\n      \u003Ctd>{{ row.fruit }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.price }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.weight }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.quantity }}\u003C\u002Ftd>\n      \u003Ctd>{{ row.rating }}\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002FOnyxTable>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1805,"title":1806,"titles":1807,"content":1808,"level":9},"\u002Fcomponents\u002Ffeedback\u002Falert-modal","Alert modal",[],"The alert modal is used to provide important information to the user. It interrupts the user's workflow to communicate an important message and acquires a response, e.g. a delete confirmation.",{"id":1810,"title":400,"titles":1811,"content":367,"level":19},"\u002Fcomponents\u002Ffeedback\u002Falert-modal#examples",[1806],{"id":1813,"title":439,"titles":1814,"content":1815,"level":84},"\u002Fcomponents\u002Ffeedback\u002Falert-modal#basic",[1806,400],"\u003Cscript lang=\"ts\" setup>\nimport { iconCircleAttention } from \"@sit-onyx\u002Ficons\";\nimport { OnyxAlertModal, OnyxButton } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\nconst handleDelete = () => {\n  \u002F\u002F your delete logic here...\n  isOpen.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxButton label=\"Show alert\" @click=\"isOpen = true\" \u002F>\n\n    \u003COnyxAlertModal\n      v-model:open=\"isOpen\"\n      label=\"Confirm deletion\"\n      :icon=\"{ icon: iconCircleAttention, color: 'danger' }\"\n    >\n      Are you sure that you want to delete the selected item? This action can NOT be reverted.\n\n      \u003Ctemplate #actions>\n        \u003COnyxButton label=\"Cancel\" color=\"neutral\" mode=\"plain\" autofocus @click=\"isOpen = false\" \u002F>\n        \u003COnyxButton label=\"Delete\" color=\"danger\" @click=\"handleDelete\" \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxAlertModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":1817,"title":1818,"titles":1819,"content":1820,"level":9},"\u002Fcomponents\u002Ffeedback\u002Fdialog","Dialog",[],"The dialog is used to provide additional information to the user. It is always attached to a parent element, similar to a tooltip.",{"id":1822,"title":400,"titles":1823,"content":367,"level":19},"\u002Fcomponents\u002Ffeedback\u002Fdialog#examples",[1818],{"id":1825,"title":439,"titles":1826,"content":1827,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fdialog#basic",[1818,400],"The dialog content is fully customizable. It contains a header and body section as well as an optional footer. The dialog placement can be adjusted if needed using the position and alignment property. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBottomBar, OnyxButton, OnyxDialog } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDialog v-model:open=\"isOpen\" class=\"dialog\" label=\"Example dialog\">\n    \u003Ctemplate #trigger=\"{ trigger }\">\n      \u003COnyxButton label=\"Show dialog\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Cdiv class=\"dialog__content\">\n      Note: The dialog component is fully flexible. It can be adjusted with any content.\n    \u003C\u002Fdiv>\n\n    \u003Ctemplate #footer>\n      \u003COnyxBottomBar hide-border>\n        \u003COnyxButton label=\"Close\" color=\"neutral\" mode=\"plain\" @click=\"isOpen = false\" \u002F>\n        \u003COnyxButton label=\"Save\" @click=\"isOpen = false\" \u002F>\n      \u003C\u002FOnyxBottomBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxDialog>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.dialog {\n  &__content {\n    padding: var(--onyx-density-md) var(--onyx-dialog-padding-inline);\n    color: var(--onyx-color-text-icons-info-intense);\n  }\n}\n\u003C\u002Fstyle>",{"id":1829,"title":1830,"titles":1831,"content":1832,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fdialog#slides","Slides",[1818,400],"This example shows a dialog with multiple slides of content that the user can navigate through. \u003Cscript lang=\"ts\" setup>\nimport { iconChevronLeftSmall, iconChevronRightSmall } from \"@sit-onyx\u002Ficons\";\nimport { OnyxBottomBar, OnyxButton, OnyxDialog, OnyxHeadline, OnyxSystemButton } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\nconst currentSlide = ref(0);\n\nconst slides = [\n  { id: 1, title: \"First slide\" },\n  { id: 2, title: \"Second slide\" },\n  { id: 3, title: \"Third slide\" },\n];\n\nconst previousSlide = () => {\n  if (currentSlide.value > 0) {\n    currentSlide.value--;\n  }\n};\n\nconst nextSlide = () => {\n  if (currentSlide.value \u003C slides.length - 1) {\n    currentSlide.value++;\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDialog v-model:open=\"isOpen\" class=\"dialog\" label=\"Example label\">\n    \u003Ctemplate #trigger=\"{ trigger }\">\n      \u003COnyxButton label=\"Show dialog\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Cdiv class=\"dialog__content\">\n      \u003Cdiv\n        v-for=\"(slide, index) in slides\"\n        :key=\"slide.id\"\n        class=\"dialog__slide\"\n        :style=\"{\n          left: `${(index - currentSlide) * 100}%`,\n        }\"\n      >\n        \u003COnyxHeadline is=\"h3\">{{ slide.title }}\u003C\u002FOnyxHeadline>\n\n        \u003Cp>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident aspernatur cumque enim\n          deserunt officia nostrum nihil sit blanditiis quos. Ullam deleniti perferendis eum a!\n          Mollitia veniam quae eaque facere voluptates.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Ctemplate #footer>\n      \u003COnyxBottomBar class=\"dialog__footer\" hide-border>\n        \u003Ctemplate #left>\n          \u003COnyxSystemButton\n            label=\"Previous slide\"\n            class=\"dialog__nav-button\"\n            :icon=\"iconChevronLeftSmall\"\n            :disabled=\"currentSlide === 0\"\n            @click=\"previousSlide\"\n          \u002F>\n          \u003COnyxSystemButton\n            label=\"Next slide\"\n            class=\"dialog__nav-button\"\n            :icon=\"iconChevronRightSmall\"\n            :disabled=\"currentSlide >= slides.length - 1\"\n            @click=\"nextSlide\"\n          \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003COnyxButton label=\"Button\" color=\"neutral\" mode=\"plain\" \u002F>\n        \u003COnyxButton label=\"Button\" \u002F>\n      \u003C\u002FOnyxBottomBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxDialog>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.dialog {\n  &__content {\n    position: relative;\n    width: 26rem;\n    height: 10rem;\n    overflow: hidden;\n  }\n\n  &__slide {\n    position: absolute;\n    top: 0;\n    width: inherit;\n    height: inherit;\n    padding-inline: var(--onyx-density-md);\n    transition: left var(--onyx-duration-md) ease-in-out;\n  }\n\n  &__nav-button {\n    align-content: center;\n  }\n}\n\u003C\u002Fstyle>",{"id":1834,"title":1835,"titles":1836,"content":1837,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fdialog#help","Help",[1818,400],"This example shows a help dialog that provides additional information related to the current workflow. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxDialog, OnyxHeadline, OnyxTab, OnyxTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedTab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDialog class=\"dialog\" label=\"Help\">\n    \u003Ctemplate #trigger=\"{ trigger }\">\n      \u003COnyxButton label=\"Show dialog\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Cdiv class=\"dialog__content\">\n      \u003Cp>\n        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ut voluptatibus\n        laboriosam dolor repudiandae nam, porro sapiente magni officia quibusdam tempore, quasi\n        neque possimus repellat iste dolorem totam optio est.\n      \u003C\u002Fp>\n\n      \u003COnyxTabs v-model=\"selectedTab\" label=\"Example tabs\" size=\"h3\">\n        \u003COnyxTab label=\"Tab 1\" value=\"tab-1\">\n          \u003COnyxHeadline is=\"h3\">Important\u003C\u002FOnyxHeadline>\n\n          \u003Cul>\n            \u003Cli>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odit explicabo quia\n              modi dolores eos, dolor optio eligendi.\n            \u003C\u002Fli>\n            \u003Cli>\n              Lorem ipsum dolor sit amet consectetur adipisicing elit. Non praesentium, amet\n              reiciendis eum, autem eveniet cum nam, commodi minima temporibus nihil.\n            \u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002FOnyxTab>\n\n        \u003COnyxTab label=\"Tab 2\" value=\"tab-2\">Content of tab 2...\u003C\u002FOnyxTab>\n\n        \u003COnyxTab label=\"Tab 3\" value=\"tab-3\">Content of tab 3...\u003C\u002FOnyxTab>\n      \u003C\u002FOnyxTabs>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxDialog>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.dialog {\n  &__content {\n    padding: var(--onyx-density-md) var(--onyx-dialog-padding-inline);\n    width: 20rem;\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-lg);\n  }\n}\n\u003C\u002Fstyle>",{"id":1839,"title":1840,"titles":1841,"content":1842,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fdialog#link-input","Link input",[1818,400],"This example shows a dialog where the user can enter a link. When using interactive \u002F dynamic content, you should set a fixed width for the dialog content to prevent layout shifts. \u003Cscript lang=\"ts\" setup>\nimport { iconCopy, iconLink } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxButton,\n  OnyxDialog,\n  OnyxIcon,\n  OnyxInput,\n  OnyxUnstableFormElementAction,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxDialog class=\"dialog\" label=\"Edit link\">\n    \u003Ctemplate #trigger=\"{ trigger }\">\n      \u003COnyxButton label=\"Show dialog\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Cdiv class=\"dialog__content\">\n      \u003COnyxInput\n        v-model=\"value\"\n        label=\"URL\"\n        placeholder=\"https:\u002F\u002Fonyx.schwarz\"\n        type=\"url\"\n        autofocus\n      >\n        \u003Ctemplate #leading>\n          \u003COnyxIcon :icon=\"iconLink\" \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #trailingIcons>\n          \u003COnyxUnstableFormElementAction :icon=\"iconCopy\" label=\"Copy\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxInput>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxDialog>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.dialog {\n  &__content {\n    padding: var(--onyx-density-md) var(--onyx-dialog-padding-inline);\n    color: var(--onyx-color-text-icons-info-intense);\n    width: 20rem;\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":1844,"title":1845,"titles":1846,"content":1847,"level":9},"\u002Fcomponents\u002Ffeedback\u002Fmodal","Modal",[],"Modals display dialog content over an active backdrop, requiring user interaction or dismissal before returning to the main page. Use modals for focused workflows, such as form inputs or critical confirmation steps.",{"id":1849,"title":400,"titles":1850,"content":367,"level":19},"\u002Fcomponents\u002Ffeedback\u002Fmodal#examples",[1845],{"id":1852,"title":439,"titles":1853,"content":1854,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fmodal#basic",[1845,400],"Modal contents are fully customizable, with optional description and footer slots. To prevent layout shifts with dynamic content, set a explicit width on the modal container. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBottomBar, OnyxButton, OnyxModal } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxButton label=\"Show modal\" @click=\"isOpen = true\" \u002F>\n\n    \u003COnyxModal v-model:open=\"isOpen\" class=\"modal\" label=\"Example modal\">\n      \u003Ctemplate #description> This is an example description about the modal. \u003C\u002Ftemplate>\n\n      \u003Cdiv class=\"modal__content\">\n        Note: The modal component is fully flexible. It can be adjusted with any content.\n      \u003C\u002Fdiv>\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Button\" color=\"neutral\" mode=\"plain\" @click=\"isOpen = false\" \u002F>\n          \u003COnyxButton label=\"Button\" @click=\"isOpen = false\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 32rem;\n  container-type: inline-size; \u002F\u002F this is needed so when using the onyx grid, it uses the actual modal width to determine the breakpoint\n\n  &__content {\n    padding: var(--onyx-density-xl) var(--onyx-modal-padding-inline);\n    color: var(--onyx-color-text-icons-info-intense);\n  }\n}\n\u003C\u002Fstyle>",{"id":1856,"title":700,"titles":1857,"content":1858,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fmodal#form",[1845,400],"When rendering forms within modals, place the primary submit action in the #footer slot. Link the button to the form via the form attribute matching the form's id. See OnyxForm for details on external submit actions. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBottomBar, OnyxButton, OnyxForm, OnyxInput, OnyxModal, OnyxStepper } from \"sit-onyx\";\nimport { ref, useId, watch } from \"vue\";\n\ntype FormState = {\n  email: string;\n  age?: number;\n};\n\nconst isOpen = ref(false);\nconst formId = useId();\nconst state = ref\u003CPartial\u003CFormState>>({});\n\n\u002F\u002F make sure to reset the state so there is not leftover data if e.g. re-opening the modal\nwatch(isOpen, () => {\n  if (isOpen.value) {\n    state.value = {};\n  }\n});\n\nconst handleSubmit = () => {\n  \u002F\u002F when passing the data to other components, you most likely want to make a copy of the data\n  \u002F\u002F so the object is not passed by reference to avoid side effects\n  \u002F\u002F the type cast is considered safe since the submit is only triggered when all required validations is passed\n  const data = structuredClone(state.value) as FormState;\n\n  window.alert(`Form submitted: ${JSON.stringify(data, null, 2)}`);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Open modal\" @click=\"isOpen = true\" \u002F>\n\n  \u003COnyxModal v-model:open=\"isOpen\" class=\"modal\" label=\"Example modal label\">\n    \u003COnyxForm\n      :id=\"formId\"\n      class=\"onyx-grid modal__content\"\n      reserve-message-space\n      @submit.prevent=\"handleSubmit\"\n    >\n      \u003C!-- tip: use autofocus on the first form element so the user can directly start typing after opening the modal -->\n      \u003COnyxInput\n        v-model=\"state.email\"\n        class=\"onyx-grid-span-4\"\n        label=\"Email\"\n        type=\"email\"\n        required\n        autofocus\n      \u002F>\n      \u003COnyxStepper\n        v-model=\"state.age\"\n        class=\"onyx-grid-span-4\"\n        label=\"Age\"\n        :min=\"18\"\n        :maxlength=\"99\"\n      \u002F>\n    \u003C\u002FOnyxForm>\n\n    \u003Ctemplate #footer>\n      \u003COnyxBottomBar>\n        \u003COnyxButton label=\"Cancel\" color=\"neutral\" mode=\"plain\" @click=\"isOpen = false\" \u002F>\n        \u003COnyxButton label=\"Submit\" type=\"submit\" :form=\"formId\" \u002F>\n      \u003C\u002FOnyxBottomBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxModal>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 24rem;\n  container-type: inline-size;\n\n  &__content {\n    padding: var(--onyx-density-xl) var(--onyx-modal-padding-inline);\n  }\n}\n\u003C\u002Fstyle>",{"id":1860,"title":170,"titles":1861,"content":1862,"level":84},"\u002Fcomponents\u002Ffeedback\u002Fmodal#grid",[1845,400],"Modals can host responsive grids using our grid system. Set an explicit modal width and apply container-type: inline-size so nested grid classes respond to the modal width. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxCard, OnyxModal } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxButton label=\"Show modal\" @click=\"isOpen = true\" \u002F>\n\n    \u003COnyxModal v-model:open=\"isOpen\" class=\"modal\" label=\"Example modal\">\n      \u003Cdiv class=\"modal__content\">\n        \u003Cdiv class=\"onyx-grid\">\n          \u003COnyxCard class=\"grid-element onyx-grid-span-2\">2\u003C\u002FOnyxCard>\n          \u003COnyxCard class=\"grid-element onyx-grid-span-2\">2\u003C\u002FOnyxCard>\n          \u003COnyxCard class=\"grid-element onyx-grid-span-3\">3\u003C\u002FOnyxCard>\n          \u003COnyxCard class=\"grid-element onyx-grid-span-1\">1\u003C\u002FOnyxCard>\n          \u003COnyxCard class=\"grid-element onyx-grid-span-4\">4\u003C\u002FOnyxCard>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 32rem;\n  container-type: inline-size; \u002F\u002F this is needed so when using the onyx grid, it uses the actual modal width to determine the breakpoint\n\n  &__content {\n    padding: var(--onyx-density-xl) var(--onyx-modal-padding-inline);\n  }\n\n  .grid-element {\n    text-align: center;\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":1864,"title":1865,"titles":1866,"content":1867,"level":9},"\u002Fcomponents\u002Ffeedback\u002Ftoast","Toast",[],"Toasts provide non-disruptive feedback following user actions, displaying concise, temporary messages that auto-dismiss. We recommend displaying at most 5 toasts simultaneously to prevent screen clutter.",{"id":1869,"title":400,"titles":1870,"content":367,"level":19},"\u002Fcomponents\u002Ffeedback\u002Ftoast#examples",[1865],{"id":1872,"title":439,"titles":1873,"content":1874,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftoast#basic",[1865,400],"Use the useToast() composable to dispatch toasts from anywhere in your application. Toasts dismiss automatically after a default duration, or you can pass duration: 0 to require manual dismissal. Keep headlines concise and action-oriented. Use the description field for additional details or error messages. \u003Cscript lang=\"ts\" setup>\nimport { iconBellRing } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, useToast } from \"sit-onyx\";\n\nconst toast = useToast();\n\nconst showExampleToasts = () => {\n  toast.show({\n    headline: \"Information\",\n    description: \"This is an example description\",\n  });\n  toast.show({\n    headline: \"Error\",\n    description: \"This is an example description\",\n    color: \"danger\",\n  });\n  toast.show({\n    headline: \"Warning\",\n    description: \"This is an example description\",\n    color: \"warning\",\n  });\n  toast.show({\n    headline: \"Success\",\n    description: \"This is an example description\",\n    color: \"success\",\n  });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Show toasts\" :icon=\"iconBellRing\" @click=\"showExampleToasts\" \u002F>\n\u003C\u002Ftemplate>",{"id":1876,"title":1184,"titles":1877,"content":1878,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftoast#clickable",[1865,400],"Toasts can be interactive, triggering a custom callback when clicked. \u003Cscript lang=\"ts\" setup>\nimport { iconBellRing } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, useToast } from \"sit-onyx\";\n\nconst toast = useToast();\n\nconst showToast = () => {\n  toast.show({\n    headline: \"Information\",\n    description: \"Click this toast to trigger a custom action.\",\n    clickable: true,\n    onClick: () => {\n      window.alert(\"Toast clicked!\");\n    },\n  });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Show toast\" :icon=\"iconBellRing\" @click=\"showToast\" \u002F>\n\u003C\u002Ftemplate>",{"id":1880,"title":1881,"titles":1882,"content":1883,"level":19},"\u002Fcomponents\u002Ffeedback\u002Ftoast#prerequisites","Prerequisites",[1865],"Toasts require OnyxAppLayout at the root of your application. Not using OnyxAppLayout? If you cannot use OnyxAppLayout, mount the \u003COnyxToast \u002F> container component manually at the root of your app: \u003Cscript lang=\"ts\" setup>\nimport { OnyxToast } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COnyxToast \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1885,"title":1886,"titles":1887,"content":1888,"level":9},"\u002Fcomponents\u002Ffeedback\u002Ftooltip","Tooltip",[],"Tooltips offer additional, contextual information for a parent element, appearing subtly to aid understanding without diverting the user’s focus. The component supports text and icons only.",{"id":1890,"title":400,"titles":1891,"content":367,"level":19},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#examples",[1886],{"id":1893,"title":439,"titles":1894,"content":1895,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#basic",[1886,400],"A tooltip can be placed on any element and shows on hover by default. Alternatively, it can be shown on click. For accessibility, the parent element must be an interactive element such as a button when using the click trigger. \u003Cscript lang=\"ts\" setup>\nimport { iconCircleInformation } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxTooltip } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTooltip text=\"Example tooltip text.\" :icon=\"iconCircleInformation\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxButton label=\"Hover me\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\n  \u003COnyxTooltip text=\"Example tooltip text.\" :icon=\"iconCircleInformation\" trigger=\"click\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxButton label=\"Click me\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\u003C\u002Ftemplate>",{"id":1897,"title":76,"titles":1898,"content":1899,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#colors",[1886,400],"Multiple tooltip colors are supported depending on the semantical meaning of the information. Refer to our color documentation about further information. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTag, OnyxTooltip } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTooltip text=\"Example tooltip text.\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxTag label=\"Neutral\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\n  \u003COnyxTooltip text=\"Example tooltip text.\" color=\"danger\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxTag label=\"Danger\" color=\"danger\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\n  \u003COnyxTooltip text=\"Example tooltip text.\" color=\"success\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxTag label=\"Success\" color=\"success\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\u003C\u002Ftemplate>",{"id":1901,"title":1243,"titles":1902,"content":1903,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#position-and-alignment",[1886,400],"The position (placement of the tooltip around the trigger) and alignment (relative to the trigger, based on the position) are calculated automatically depending on the placement on the screen. This ensures optimized visibility across multiple layouts and screen sizes. The position and alignment can be changed if needed but be aware that the tooltip might not be ideally placed or not fully visible on all devices and layouts then. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxTooltip } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTooltip text=\"Example tooltip text.\" position=\"right\" alignment=\"center\">\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxButton label=\"Hover me\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\u003C\u002Ftemplate>",{"id":1905,"title":1906,"titles":1907,"content":1908,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#fit-parent","Fit parent",[1886,400],"Use the fitParent property to set the tooltip width to the same width as the parent element. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxTooltip } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTooltip text=\"Example tooltip text.\" fit-parent>\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxButton label=\"Hover me\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\u003C\u002Ftemplate>",{"id":1910,"title":1134,"titles":1911,"content":1912,"level":84},"\u002Fcomponents\u002Ffeedback\u002Ftooltip#custom-content",[1886,400],"Custom content can be placed inside the tooltip using the tooltip slot. For accessibility, do not place interactive elements here. Use the dialog component instead. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxTooltip } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTooltip>\n    \u003Ctemplate #default=\"{ trigger }\">\n      \u003COnyxButton label=\"Hover me\" v-bind=\"trigger\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #tooltip>\n      This is\n      \u003Cstrong>custom content\u003C\u002Fstrong>\n      inside the tooltip.\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxTooltip>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1914,"title":1915,"titles":1916,"content":1917,"level":9},"\u002Fcomponents\u002Fnotifications\u002Fnotification-center","Notification center",[],"The notification center is a combination of multiple components to achieve displaying and managing global notifications for the application. When a new notification is coming in (e.g. sent by the backend), a temporary notification is shown in the top right of the screen. To view all available notifications, the notification center can be opened (typically using a bell icon inside the nav bar).",{"id":1919,"title":400,"titles":1920,"content":1921,"level":19},"\u002Fcomponents\u002Fnotifications\u002Fnotification-center#examples",[1915],"Since a notification center is very specific to an application, we only provide an example here and no dedicated notification center component. This way, it can be fully customized as needed.",{"id":1923,"title":439,"titles":1924,"content":1925,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotification-center#basic",[1915,400],"To show a new temporary notification, use the useNotifications() composable. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  iconBell,\n  iconBellRing,\n  iconCheckRead,\n  iconCircleAttention,\n  iconInbox,\n  iconLogout,\n} from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAccordion,\n  OnyxAccordionItem,\n  OnyxAppLayout,\n  OnyxBadge,\n  OnyxBottomBar,\n  OnyxButton,\n  OnyxEmpty,\n  OnyxHeadline,\n  OnyxIcon,\n  OnyxMenuItem,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxNotificationCard,\n  OnyxNotificationDot,\n  OnyxNotifications,\n  OnyxSidebar,\n  OnyxUnstableNavButton,\n  OnyxUserMenu,\n  useNotification,\n  type OnyxNotificationCardProps,\n} from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\n\u002F**\n * Custom notification type for your project. This can also include custom properties depending in\n * your needs (e.g. an ID etc.).\n *\u002F\ntype MyNotification = OnyxNotificationCardProps & {\n  \u002F**\n   * Description\u002Fcontent of the notification.\n   *\u002F\n  description: string;\n};\n\n\u002F**\n * Store that will persist all user notifications of the application.\n * In a real project, this could e.g. be a pinia store.\n *\u002F\nconst useNotificationStore = () => {\n  const notifications = ref\u003CMyNotification[]>([]);\n\n  const unreadNotifications = computed(() => notifications.value.filter(({ unread }) => unread));\n  const readNotifications = computed(() => notifications.value.filter(({ unread }) => !unread));\n\n  \u002F**\n   * Marks all existing notifications as read.\n   *\u002F\n  const markAllAsRead = () => {\n    notifications.value = notifications.value.map((notification) => ({\n      ...notification,\n      unread: false,\n    }));\n  };\n\n  \u002F**\n   * Adds a new unread notification.\n   *\u002F\n  const add = (notification: Omit\u003CMyNotification, \"unread\">) => {\n    notifications.value.unshift({ ...notification, unread: true });\n  };\n\n  return {\n    notifications,\n    unreadNotifications,\n    readNotifications,\n    markAllAsRead,\n    add,\n  };\n};\n\nconst { show: showNotification } = useNotification();\nconst store = useNotificationStore();\n\nconst openAccordions = ref([\"unread\"]);\nconst isSidebarOpen = ref(false);\n\nconst isLoading = ref(false);\n\n\u002F\u002F simulate loading time when opening the notification center to demonstrate the skeleton\nwatch(isSidebarOpen, (open) => {\n  if (!open) return;\n  isLoading.value = true;\n  setTimeout(() => (isLoading.value = false), 2000);\n});\n\n\u002F**\n * Adds a new example notifications. Usually this should be provided by your backend \u002F API\n *\u002F\nconst addExampleNotification = () => {\n  const icon = iconCircleAttention;\n\n  const notification: MyNotification = {\n    headline: `Example notification ${store.notifications.value.length + 1}`,\n    createdAt: Date.now(),\n    icon,\n    description:\n      \"Lorem ipsum dolor sit amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam pulvinar velit mollis cursus eu ut.\",\n  };\n\n  \u002F\u002F persist the notification in our store\n  store.add(notification);\n\n  \u002F\u002F temporarily show a notification message to the user in the top right of the page to grab the users attention\n  showNotification({ ...notification, icon });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003C!-- NAV BAR -->\n      \u003COnyxNavBar app-name=\"Notification center\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" \u002F>\n\n        \u003Ctemplate #globalContextArea>\n          \u003COnyxNotificationDot :hidden=\"!store.unreadNotifications.value.length\">\n            \u003COnyxUnstableNavButton\n              label=\"Notifications\"\n              :icon=\"iconBell\"\n              hide-label\n              @click=\"isSidebarOpen = true\"\n            \u002F>\n          \u003C\u002FOnyxNotificationDot>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #contextArea>\n          \u003COnyxUserMenu full-name=\"Jane Doe\">\n            \u003COnyxMenuItem color=\"danger\">\n              \u003COnyxIcon :icon=\"iconLogout\" \u002F>\n              Logout\n            \u003C\u002FOnyxMenuItem>\n          \u003C\u002FOnyxUserMenu>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003C!-- EXAMPLE PAGE CONTENT -->\n    \u003Cdiv class=\"onyx-grid-layout page\">\n      \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n\n      \u003Cp>\n        This is an example for the notification center. Click on the bell icon inside the nav bar at\n        the top of the page to open the notification center.\n      \u003C\u002Fp>\n\n      \u003COnyxButton label=\"Show notification\" :icon=\"iconBellRing\" @click=\"addExampleNotification\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003C!-- NOTIFICATION CENTER -->\n    \u003COnyxSidebar\n      class=\"notification-center\"\n      label=\"Notifications\"\n      alignment=\"right\"\n      :temporary=\"{ open: isSidebarOpen, floating: true }\"\n      @close=\"isSidebarOpen = false\"\n    >\n      \u003Ctemplate #headline=\"{ label }\">\n        \u003COnyxHeadline is=\"h2\">{{ label }}\u003C\u002FOnyxHeadline>\n        \u003COnyxBadge v-if=\"store.unreadNotifications.value.length\" color=\"neutral\" density=\"compact\">\n          {{ store.unreadNotifications.value.length }}\n        \u003C\u002FOnyxBadge>\n      \u003C\u002Ftemplate>\n\n      \u003Ctemplate #description> See all notifications from all touchpoints here. \u003C\u002Ftemplate>\n\n      \u003Cdiv v-if=\"isLoading\" class=\"notification-center__skeletons\">\n        \u003COnyxNotificationCard\n          v-for=\"n in 6\"\n          :key=\"n\"\n          headline=\"Loading\"\n          created-at=\"Loading\"\n          skeleton\n        \u002F>\n      \u003C\u002Fdiv>\n\n      \u003COnyxAccordion\n        v-else\n        v-model=\"openAccordions\"\n        class=\"notification-center__accordions\"\n        type=\"nested-small\"\n      >\n        \u003C!-- unread notifications -->\n        \u003COnyxAccordionItem value=\"unread\">\n          \u003Ctemplate #header>Unread\u003C\u002Ftemplate>\n\n          \u003COnyxEmpty\n            v-if=\"!store.unreadNotifications.value.length\"\n            class=\"notification-center__empty\"\n          >\n            \u003Ctemplate #icon>\n              \u003COnyxIcon :icon=\"iconInbox\" size=\"48px\" \u002F>\n            \u003C\u002Ftemplate>\n            No new messages in your inbox\n          \u003C\u002FOnyxEmpty>\n\n          \u003COnyxNotificationCard\n            v-for=\"notification in store.unreadNotifications.value\"\n            :key=\"notification.createdAt.toString()\"\n            v-bind=\"notification\"\n          >\n            {{ notification.description }}\n\n            \u003Ctemplate #actions>\n              \u003COnyxButton label=\"Button\" color=\"neutral\" \u002F>\n              \u003COnyxButton label=\"Button\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxNotificationCard>\n        \u003C\u002FOnyxAccordionItem>\n\n        \u003C!-- read notifications -->\n        \u003COnyxAccordionItem value=\"read\">\n          \u003Ctemplate #header>Read\u003C\u002Ftemplate>\n\n          \u003COnyxEmpty\n            v-if=\"!store.readNotifications.value.length\"\n            class=\"notification-center__empty\"\n          >\n            \u003Ctemplate #icon>\n              \u003COnyxIcon :icon=\"iconInbox\" size=\"48px\" \u002F>\n            \u003C\u002Ftemplate>\n            No new messages in your inbox\n          \u003C\u002FOnyxEmpty>\n\n          \u003COnyxNotificationCard\n            v-for=\"notification in store.readNotifications.value\"\n            :key=\"notification.createdAt.toString()\"\n            v-bind=\"notification\"\n          >\n            {{ notification.description }}\n          \u003C\u002FOnyxNotificationCard>\n        \u003C\u002FOnyxAccordionItem>\n      \u003C\u002FOnyxAccordion>\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar density=\"compact\">\n          \u003COnyxButton\n            label=\"Mark as all read\"\n            :icon=\"iconCheckRead\"\n            color=\"neutral\"\n            :disabled=\"!store.unreadNotifications.value.length\"\n            @click=\"store.markAllAsRead\"\n          \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxSidebar>\n\n    \u003COnyxNotifications \u002F>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.page {\n  display: flex;\n  flex-direction: column;\n  gap: var(--onyx-grid-gutter);\n}\n\n.notification-center {\n  --onyx-sidebar-width: 26rem;\n\n  &__accordions {\n    :deep(.onyx-accordion-item__panel) {\n      padding: 0;\n    }\n  }\n\n  &__empty {\n    margin-inline: auto;\n  }\n\n  &__skeletons {\n    display: flex;\n    flex-direction: column;\n    padding: var(--onyx-density-md);\n    gap: var(--onyx-density-md);\n  }\n\n  \u002F\u002F we use the OnyxBottomBar which already provides its own padding + border\n  :deep(.onyx-sidebar__footer) {\n    padding: 0;\n    border-top: none;\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"id":1927,"title":1928,"titles":1929,"content":1930,"level":9},"\u002Fcomponents\u002Fnotifications\u002Fnotification-card","Notification card",[],"Used to display (system \u002F user) notifications, e.g. to build a notification center.",{"id":1932,"title":400,"titles":1933,"content":367,"level":19},"\u002Fcomponents\u002Fnotifications\u002Fnotification-card#examples",[1928],{"id":1935,"title":439,"titles":1936,"content":1937,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotification-card#basic",[1928,400],"The notification shows a required headline, description and creation date. A relative time is displayed automatically. Optionally, an icon and unread indicator (dot) can be displayed. \u003Cscript lang=\"ts\" setup>\nimport { iconCircleAttention } from \"@sit-onyx\u002Ficons\";\nimport { OnyxNotificationCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNotificationCard\n    headline=\"Example notification\"\n    :icon=\"iconCircleAttention\"\n    :created-at=\"new Date()\"\n    unread\n  >\n    Lorem ipsum dolor sit amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam\n    pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit amet consectetur. Dui purus quisque\n    est varius vulputate. Ut odio dui diam pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit\n    amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam pulvinar velit mollis\n    cursus eu ut.\n  \u003C\u002FOnyxNotificationCard>\n\u003C\u002Ftemplate>",{"id":1939,"title":1430,"titles":1940,"content":1941,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotification-card#actions",[1928,400],"Two types of custom actions can be displayed to provide additional functionality such as marking as read, view more details or delete: Always-visible actions at the bottom or header actions at the top right that are only disabled on hover. Hover the card to see the header actions. \u003Cscript lang=\"ts\" setup>\nimport { iconCheckSmall, iconTrash } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, OnyxMenuItem, OnyxNotificationCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNotificationCard headline=\"Example notification\" :created-at=\"new Date()\">\n    Lorem ipsum dolor sit amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam\n    pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit amet consectetur. Dui purus quisque\n    est varius vulputate. Ut odio dui diam pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit\n    amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam pulvinar velit mollis\n    cursus eu ut.\n\n    \u003Ctemplate #actions>\n      \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n      \u003COnyxButton label=\"Button\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #headerActions>\n      \u003COnyxMenuItem label=\"Mark as read\" :icon=\"iconCheckSmall\" \u002F>\n      \u003COnyxMenuItem label=\"Delete\" :icon=\"iconTrash\" color=\"danger\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxNotificationCard>\n\u003C\u002Ftemplate>",{"id":1943,"title":574,"titles":1944,"content":1945,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotification-card#skeleton",[1928,400],"Use the skeleton on initial load while the data for the notification is being loaded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxNotificationCard } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNotificationCard headline=\"Example notification\" :created-at=\"new Date()\" skeleton>\n    Lorem ipsum dolor sit amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam\n    pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit amet consectetur. Dui purus quisque\n    est varius vulputate. Ut odio dui diam pulvinar velit mollis cursus eu ut. Lorem ipsum dolor sit\n    amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam pulvinar velit mollis\n    cursus eu ut.\n  \u003C\u002FOnyxNotificationCard>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1947,"title":1948,"titles":1949,"content":1950,"level":9},"\u002Fcomponents\u002Fnotifications\u002Fnotification-dot","Notification dot",[],"Renders a dot indicator badge on target components to highlight unread activity or updates (e.g. on navigation items or action buttons).",{"id":1952,"title":400,"titles":1953,"content":367,"level":19},"\u002Fcomponents\u002Fnotifications\u002Fnotification-dot#examples",[1948],{"id":1955,"title":439,"titles":1956,"content":1957,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotification-dot#basic",[1948,400],"The notification dot can wrap any element, but is most commonly paired with an icon button or nav button. Multiple semantic colors are supported. See the color documentation for semantic usage guidelines. \u003Cscript lang=\"ts\" setup>\nimport { iconBell } from \"@sit-onyx\u002Ficons\";\nimport { OnyxNotificationDot, OnyxUnstableNavButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNotificationDot>\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\n  \u003COnyxNotificationDot color=\"primary\">\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\n  \u003COnyxNotificationDot color=\"neutral\">\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\n  \u003COnyxNotificationDot color=\"danger\">\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\n  \u003COnyxNotificationDot color=\"success\">\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\n  \u003COnyxNotificationDot color=\"info\">\n    \u003COnyxUnstableNavButton :icon=\"iconBell\" label=\"Notifications\" hide-label \u002F>\n  \u003C\u002FOnyxNotificationDot>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":1959,"title":1960,"titles":1961,"content":1962,"level":9},"\u002Fcomponents\u002Fnotifications\u002Fnotifications","Notifications",[],"Notifications display persistent or temporary status updates to users, typically integrating with a notification center. We recommend displaying at most 5 notifications simultaneously to maintain visual clarity.",{"id":1964,"title":400,"titles":1965,"content":367,"level":19},"\u002Fcomponents\u002Fnotifications\u002Fnotifications#examples",[1960],{"id":1967,"title":439,"titles":1968,"content":1969,"level":84},"\u002Fcomponents\u002Fnotifications\u002Fnotifications#basic",[1960,400],"Use the useNotification() composable to dispatch notifications anywhere in your application. Notifications auto-dismiss after a preset duration, or pass duration: 0 to require manual dismissal by the user. \u003Cscript lang=\"ts\" setup>\nimport { iconBellRing, iconCircleAttention } from \"@sit-onyx\u002Ficons\";\nimport { OnyxButton, useNotification } from \"sit-onyx\";\n\nconst notification = useNotification();\n\nconst showExampleNotifications = () => {\n  notification.show({\n    headline: \"Example notification\",\n    icon: iconCircleAttention,\n    description:\n      \"Lorem ipsum dolor sit amet consectetur. Dui purus quisque est varius vulputate. Ut odio dui diam pulvinar velit mollis cursus eu ut.\",\n    buttons: [\n      { label: \"Button\", color: \"neutral\", onClick: () => alert(\"Button clicked\") },\n      { label: \"Button\", onClick: () => alert(\"Button clicked\") },\n    ],\n  });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxButton label=\"Show notification\" :icon=\"iconBellRing\" @click=\"showExampleNotifications\" \u002F>\n\u003C\u002Ftemplate>",{"id":1971,"title":1881,"titles":1972,"content":1973,"level":19},"\u002Fcomponents\u002Fnotifications\u002Fnotifications#prerequisites",[1960],"Notifications require OnyxAppLayout at the root of your application. Not using OnyxAppLayout? If you cannot use OnyxAppLayout, mount the \u003COnyxNotifications \u002F> component manually at the root of your app: \u003Cscript lang=\"ts\" setup>\nimport { OnyxNotifications } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003COnyxNotifications \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":1975,"title":1976,"titles":1977,"content":1978,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fbottom-bar","Bottom bar",[],"A bottom bar is a navigation bar at the bottom of a page, component or whole application. Preferably used together with the page layout component. The bottom bar is positioned sticky so the content becomes scrollable if its too long.",{"id":1980,"title":400,"titles":1981,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fbottom-bar#examples",[1976],{"id":1983,"title":439,"titles":1984,"content":1985,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbottom-bar#basic",[1976,400],"The default bottom bar shows right aligned action buttons. Optional left aligned actions can be display if needed. \u003Cscript lang=\"ts\" setup>\nimport { iconChevronLeftSmall, iconChevronRightSmall } from \"@sit-onyx\u002Ficons\";\nimport { OnyxAppLayout, OnyxPageLayout, OnyxBottomBar, OnyxButton, OnyxIconButton } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      Example page content here...\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003Ctemplate #left>\n            \u003COnyxIconButton label=\"Previous\" :icon=\"iconChevronLeftSmall\" color=\"neutral\" \u002F>\n            \u003COnyxIconButton label=\"Next\" :icon=\"iconChevronRightSmall\" color=\"neutral\" \u002F>\n          \u003C\u002Ftemplate>\n\n          \u003COnyxButton label=\"Cancel\" color=\"neutral\" mode=\"plain\" \u002F>\n          \u003COnyxButton label=\"Save\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":1987,"title":1845,"titles":1988,"content":1989,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbottom-bar#modal",[1976,400],"The bottom bar can also be used in combination with the modal. \u003Cscript lang=\"ts\" setup>\nimport { OnyxBottomBar, OnyxButton, OnyxModal } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst open = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxButton label=\"Show modal\" @click=\"open = true\" \u002F>\n\n    \u003COnyxModal v-model:open=\"open\" class=\"modal\" label=\"Example modal\">\n      \u003Cdiv class=\"modal__content\">This is an example modal.\u003C\u002Fdiv>\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Close\" color=\"neutral\" mode=\"plain\" @click=\"open = false\" \u002F>\n          \u003COnyxButton label=\"Save\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxModal>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 32rem;\n\n  &__content {\n    padding: var(--onyx-density-xl) var(--onyx-modal-padding-inline);\n  }\n}\n\u003C\u002Fstyle>",{"id":1991,"title":700,"titles":1992,"content":1993,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbottom-bar#form",[1976,400],"When used together with a form where the submit button is placed inside a bottom bar, the button is often technically placed outside of the form so you need to manually \"connect\" the form with the button. See the form component for further information how to connect external submit buttons. \u003Cscript lang=\"ts\" setup>\nimport {\n  OnyxAppLayout,\n  OnyxPageLayout,\n  OnyxBottomBar,\n  OnyxButton,\n  OnyxForm,\n  OnyxInput,\n  useToast,\n} from \"sit-onyx\";\nimport { ref, useId } from \"vue\";\n\nconst toast = useToast();\nconst formId = useId();\n\nconst data = ref({ email: \"\", password: \"\" });\n\nconst handleSubmit = () => {\n  toast.show({\n    headline: \"Form submitted\",\n    description: \"This is only an example.\",\n    color: \"success\",\n  });\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003COnyxForm :id=\"formId\" class=\"onyx-grid\" @submit.prevent=\"handleSubmit\">\n        \u003COnyxInput\n          v-model=\"data.email\"\n          class=\"onyx-grid-span-4\"\n          label=\"Email\"\n          type=\"email\"\n          required\n        \u002F>\n\n        \u003COnyxInput\n          v-model=\"data.password\"\n          class=\"onyx-grid-span-4\"\n          label=\"Password\"\n          type=\"password\"\n          :minlength=\"3\"\n          required\n        \u002F>\n      \u003C\u002FOnyxForm>\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Save\" type=\"submit\" :form=\"formId\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":1995,"title":1996,"titles":1997,"content":1998,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","Breadcrumb",[],"A breadcrumb component is a secondary navigation element that displays a user's current location within the application's structural hierarchy. It enables users to understand their current context and trace their path back to parent pages.",{"id":2000,"title":400,"titles":2001,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb#examples",[1996],{"id":2003,"title":439,"titles":2004,"content":2005,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb#basic",[1996,400],"The breadcrumb is always positioned above the main page content and contains the previous and current page of the application's navigation hierarchy. The breadcrumb items are automatically highlighted based on the current route\u002Fpage of the application. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  OnyxAppLayout,\n  OnyxBreadcrumb,\n  OnyxBreadcrumbItem,\n  OnyxHeadline,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxPageLayout,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout no-padding>\n      \u003COnyxBreadcrumb class=\"onyx-grid-layout breadcrumb\">\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\">Users\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\">Jane Doe\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\">Orders\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\u002F123456\">#123456\u003C\u002FOnyxBreadcrumbItem>\n      \u003C\u002FOnyxBreadcrumb>\n\n      \u003Cdiv class=\"onyx-grid-layout\">\n        \u003COnyxHeadline is=\"h2\">Page headline\u003C\u002FOnyxHeadline>\n\n        Example page content...\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.breadcrumb {\n  padding-block: var(--onyx-grid-gutter);\n\n  + .onyx-grid-layout {\n    padding-top: 0;\n  }\n}\n\u003C\u002Fstyle>",{"id":2007,"title":2008,"titles":2009,"content":2010,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb#container","Container",[1996,400],"The container breadcrumb can optionally be used and placed directly below the nav bar. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  OnyxAppLayout,\n  OnyxBreadcrumb,\n  OnyxBreadcrumbItem,\n  OnyxHeadline,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxPageLayout,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout no-padding>\n      \u003COnyxBreadcrumb container>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\">Users\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\">Jane Doe\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\">Orders\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\u002F123456\">#123456\u003C\u002FOnyxBreadcrumbItem>\n      \u003C\u002FOnyxBreadcrumb>\n\n      \u003Cdiv class=\"onyx-grid-layout\">\n        \u003COnyxHeadline is=\"h2\">Page headline\u003C\u002FOnyxHeadline>\n\n        Example page content...\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2012,"title":574,"titles":2013,"content":2014,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb#skeleton",[1996,400],"Use the skeleton while the data for either the whole breadcrumb of specific items \u002F pages is loaded on initial page load. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  OnyxAppLayout,\n  OnyxBreadcrumb,\n  OnyxBreadcrumbItem,\n  OnyxHeadline,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxPageLayout,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout no-padding>\n      \u003COnyxBreadcrumb class=\"onyx-grid-layout breadcrumb\">\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\">Users\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\" skeleton>Jane Doe\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\">Orders\u003C\u002FOnyxBreadcrumbItem>\n        \u003COnyxBreadcrumbItem href=\"\u002Fusers\u002Fjane-doe\u002Forders\u002F123456\" skeleton>\n          #123456\n        \u003C\u002FOnyxBreadcrumbItem>\n      \u003C\u002FOnyxBreadcrumb>\n\n      \u003Cdiv class=\"onyx-grid-layout\">\n        \u003COnyxHeadline is=\"h2\">Page headline\u003C\u002FOnyxHeadline>\n\n        Example page content...\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.breadcrumb {\n  padding-block: var(--onyx-grid-gutter);\n\n  + .onyx-grid-layout {\n    padding-top: 0;\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":2016,"title":2017,"titles":2018,"content":2019,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-dialog","Color scheme dialog",[],"Pre-built dialog where the user can select which color scheme (light\u002Fdark mode) to use for the application.",{"id":2021,"title":400,"titles":2022,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-dialog#examples",[2017],{"id":2024,"title":439,"titles":2025,"content":2026,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-dialog#basic",[2017,400],"\u003Cscript lang=\"ts\" setup>\nimport { ColorSchemeValue, OnyxButton, OnyxColorSchemeDialog } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\nconst open = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxButton label=\"Show dialog\" @click=\"open = true\" \u002F>\n    \u003COnyxColorSchemeDialog v-model=\"colorScheme\" v-model:open=\"open\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2028,"title":2029,"titles":2030,"content":2031,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-menu-item","Color scheme menu item",[],"Pre-built menu item for the user menu that can be used inside the nav bar to display the current color scheme (light\u002Fdark mode) to the user and allow changing it using a dialog. You can also use a custom trigger instead of this menu item by manually using the color scheme dialog component.",{"id":2033,"title":400,"titles":2034,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-menu-item#examples",[2029],{"id":2036,"title":439,"titles":2037,"content":2038,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fcolor-scheme-menu-item#basic",[2029,400],"Hover the user menu to see the color scheme menu item. \u003Cscript lang=\"ts\" setup>\nimport { ColorSchemeValue, OnyxColorSchemeMenuItem, OnyxUserMenu } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUserMenu full-name=\"Jane Doe\">\n    \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n  \u003C\u002FOnyxUserMenu>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2040,"title":2041,"titles":2042,"content":2043,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fheadline","Headline",[],"Headlines organize and structure content, guiding the user through different sections and conveying the hierarchy of information.\nFor all information about our typography system, please refer to:",{"id":2045,"title":400,"titles":2046,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fheadline#examples",[2041],{"id":2048,"title":1124,"titles":2049,"content":2050,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fheadline#types",[2041,400],"The headline supports six semantical types (h1 to h6) which should match the page hierarchy and should not skip levels. Visually, only h1 to h4 are supported so h5 and h6 will have the same styles as h4. The visual size can be changed independently from the semantic type using the showAs property. \u003Cscript lang=\"ts\" setup>\nimport { OnyxHeadline } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxHeadline is=\"h1\">Headline 1\u003C\u002FOnyxHeadline>\n  \u003COnyxHeadline is=\"h2\">Headline 2\u003C\u002FOnyxHeadline>\n  \u003COnyxHeadline is=\"h3\">Headline 3\u003C\u002FOnyxHeadline>\n  \u003COnyxHeadline is=\"h4\">Headline 4\u003C\u002FOnyxHeadline>\n  \u003COnyxHeadline is=\"h5\">Headline 5\u003C\u002FOnyxHeadline>\n  \u003COnyxHeadline is=\"h6\">Headline 6\u003C\u002FOnyxHeadline>\n\u003C\u002Ftemplate>",{"id":2052,"title":2053,"titles":2054,"content":2055,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fheadline#hash","Hash",[2041,400],"Mostly known from documentations, the headline can optionally define a \"hash\". This way, the headline can be clicked to automatically copy the headline link to the users clipboard. The page will also automatically scroll to the headline when clicked. The \"hash\" is the part at the end of the link after the # (e.g. about-us for https:\u002F\u002Fexample.com#about-us) and must be unique on the current page. You can also pass a regular text as hash, it will then be formatter automatically. Hover over and click the headline to copy the link to it. \u003Cscript lang=\"ts\" setup>\nimport { OnyxHeadline } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxHeadline is=\"h2\" hash=\"about-us\">About Us\u003C\u002FOnyxHeadline>\n\u003C\u002Ftemplate>",{"id":2057,"title":574,"titles":2058,"content":2059,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fheadline#skeleton",[2041,400],"Use the skeleton on initial page load while the data for the headline is currently loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxHeadline } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxHeadline is=\"h2\" skeleton>Example headline\u003C\u002FOnyxHeadline>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":2061,"title":2062,"titles":2063,"content":2064,"level":9},"\u002Fcomponents\u002Fnavigation\u002Flanguage-menu-item","Language menu item",[],"Pre-built menu item for the user menu that can be used inside the nav bar to display the current application language to the user and allow changing it using a dialog.",{"id":2066,"title":400,"titles":2067,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Flanguage-menu-item#examples",[2062],{"id":2069,"title":439,"titles":2070,"content":2071,"level":84},"\u002Fcomponents\u002Fnavigation\u002Flanguage-menu-item#basic",[2062,400],"Hover the user menu to see the language menu item. \u003Cscript lang=\"ts\" setup>\nimport { flagUS, flagDE } from \"@sit-onyx\u002Fflags\";\nimport { OnyxLanguageMenuItem, OnyxUserMenu, SelectDialogOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst locale = ref(\"en\");\n\nconst languages: SelectDialogOption[] = [\n  { label: \"English\", value: \"en\", icon: flagUS },\n  { label: \"Deutsch\", value: \"de\", icon: flagDE },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUserMenu full-name=\"Jane Doe\">\n    \u003COnyxLanguageMenuItem v-model=\"locale\" :options=\"languages\" \u002F>\n  \u003C\u002FOnyxUserMenu>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2073,"title":2074,"titles":2075,"content":2076,"level":9},"\u002Fcomponents\u002Fnavigation\u002Flink","Link",[],"Links are navigational elements that direct users to other (internal or external) pages.",{"id":2078,"title":400,"titles":2079,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Flink#examples",[2074],{"id":2081,"title":439,"titles":2082,"content":2083,"level":84},"\u002Fcomponents\u002Fnavigation\u002Flink#basic",[2074,400],"External links are indicated by an arrow icon behind the label and open in a new browser tab by default. \u003Cscript lang=\"ts\" setup>\nimport { OnyxLink } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxLink href=\"\u002Fcomponents\u002Fnavigation\u002Flink\">Internal link\u003C\u002FOnyxLink>\n  \u003COnyxLink href=\"https:\u002F\u002Fexample.com\">External link\u003C\u002FOnyxLink>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":2085,"title":2086,"titles":2087,"content":2088,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar","Nav bar",[],"The navigation bar provides the primary routing header for an application, allowing users to navigate between sections. It also accommodates global actions such as authentication, language switching, theme selection, global search, and notification centers. The navigation bar is designed to be placed inside the #navBar slot of OnyxAppLayout.",{"id":2090,"title":400,"titles":2091,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#examples",[2086],{"id":2093,"title":439,"titles":2094,"content":2095,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#basic",[2086,400],"A basic navigation bar displays the application title, logo, and top-level navigation links. On compact viewports, it switches automatically to mobile mode. Navigation items can be standalone links or parent menus with nested links revealed on hover or click. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> Explore navigation item variants and configuration options.",{"id":2097,"title":2098,"titles":2099,"content":2100,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#nested-nav-items","Nested nav items",[2086,400],"Navigation items support multilevel nested hierarchies. Children Child items open in a dropdown menu from the parent item. The parent item can optionally link to an overview page. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\">\n          \u003Ctemplate #children>\n            \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\" \u002F>\n            \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n            \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxNavItem>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nInternal drilldown When navigating deeper hierarchies, nested submenus slide smoothly within the same dropdown panel. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\">\n          \u003Ctemplate #children>\n            \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\">\n              \u003Ctemplate #children>\n                \u003COnyxNavItem label=\"Page 1.1.1\" link=\"\u002Fpage-1\u002F1\u002F1\" \u002F>\n                \u003COnyxNavItem label=\"Page 1.1.2\" link=\"\u002Fpage-1\u002F1\u002F2\" \u002F>\n\n                \u003COnyxNavItem label=\"Page 1.1.3\" link=\"\u002Fpage-1\u002F1\u002F3\">\n                  \u003Ctemplate #children>\n                    \u003COnyxNavItem label=\"Page 1.1.3.1\" link=\"\u002Fpage-1\u002F1\u002F3\u002F1\" \u002F>\n                    \u003COnyxNavItem label=\"Page 1.1.3.2\" link=\"\u002Fpage-1\u002F1\u002F3\u002F2\" \u002F>\n                    \u003COnyxNavItem label=\"Page 1.1.3.3\" link=\"\u002Fpage-1\u002F1\u002F3\u002F3\" \u002F>\n                  \u003C\u002Ftemplate>\n                \u003C\u002FOnyxNavItem>\n              \u003C\u002Ftemplate>\n            \u003C\u002FOnyxNavItem>\n\n            \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n            \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxNavItem>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nExternal drilldown Displays child layers in cascading flyout panels. Limit nesting depth when using external drilldowns to prevent viewport overflow. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" drilldown-mode=\"external\">\n          \u003Ctemplate #children>\n            \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\">\n              \u003Ctemplate #children>\n                \u003COnyxNavItem label=\"Page 1.1.1\" link=\"\u002Fpage-1\u002F1\u002F1\" \u002F>\n                \u003COnyxNavItem label=\"Page 1.1.2\" link=\"\u002Fpage-1\u002F1\u002F2\" \u002F>\n\n                \u003COnyxNavItem label=\"Page 1.1.3\" link=\"\u002Fpage-1\u002F1\u002F3\">\n                  \u003Ctemplate #children>\n                    \u003COnyxNavItem label=\"Page 1.1.3.1\" link=\"\u002Fpage-1\u002F1\u002F3\u002F1\" \u002F>\n                    \u003COnyxNavItem label=\"Page 1.1.3.2\" link=\"\u002Fpage-1\u002F1\u002F3\u002F2\" \u002F>\n                    \u003COnyxNavItem label=\"Page 1.1.3.3\" link=\"\u002Fpage-1\u002F1\u002F3\u002F3\" \u002F>\n                  \u003C\u002Ftemplate>\n                \u003C\u002FOnyxNavItem>\n              \u003C\u002Ftemplate>\n            \u003C\u002FOnyxNavItem>\n\n            \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n            \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxNavItem>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2102,"title":2103,"titles":2104,"content":2105,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#context-area","Context area",[2086,400],"The context area on the right hosts global actions such as account settings, notifications, or locale selectors. Items placed in globalContextArea remain pinned and visible in mobile views rather than collapsing into the hamburger menu. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { iconLogin, iconLogout, iconSettings, iconTranslate } from \"@sit-onyx\u002Ficons\";\nimport {\n  ColorSchemeValue,\n  OnyxAppLayout,\n  OnyxColorSchemeMenuItem,\n  OnyxFlyoutMenu,\n  OnyxMenuItem,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxSeparator,\n  OnyxUnstableNavButton,\n  OnyxUserMenu,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst user = ref\u003C{ name: string } | undefined>({ name: \"Jane Doe\" });\nconst locale = ref(\"en\");\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\n\nconst handleLogin = () => {\n  \u002F\u002F your logout logic here...\n  user.value = { name: \"Jane Doe\" };\n};\n\nconst handleLogout = () => {\n  \u002F\u002F your logout logic here...\n  user.value = undefined;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n\n        \u003Ctemplate #contextArea>\n          \u003COnyxFlyoutMenu label=\"Choose application language\">\n            \u003Ctemplate #button=\"{ trigger }\">\n              \u003COnyxUnstableNavButton\n                v-bind=\"trigger\"\n                :label=\"locale.toUpperCase()\"\n                :icon=\"iconTranslate\"\n              \u002F>\n            \u003C\u002Ftemplate>\n\n            \u003Ctemplate #options>\n              \u003COnyxMenuItem label=\"English\" :active=\"locale === 'en'\" @click=\"locale = 'en'\" \u002F>\n              \u003COnyxMenuItem label=\"Deutsch\" :active=\"locale === 'de'\" @click=\"locale = 'de'\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxFlyoutMenu>\n\n          \u003COnyxSeparator orientation=\"vertical\" \u002F>\n\n          \u003COnyxUserMenu v-if=\"user\" :full-name=\"user.name\" description=\"Description\">\n            \u003COnyxMenuItem label=\"Settings\" :icon=\"iconSettings\" link=\"\u002Fsettings\" \u002F>\n            \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n            \u003COnyxMenuItem label=\"Logout\" :icon=\"iconLogout\" color=\"danger\" @click=\"handleLogout\" \u002F>\n\n            \u003Ctemplate #footer>\n              App version\n              \u003Cspan class=\"onyx-text--monospace\">1.0.0\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxUserMenu>\n\n          \u003COnyxUnstableNavButton\n            v-else\n            label=\"Login\"\n            :icon=\"iconLogin\"\n            color=\"primary\"\n            @click=\"handleLogin\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> Available components designed for the context area: User profile summary with logout, settings, and profile links.\n\nContext buttons for custom dialogs, locale triggers, or alerts.\n\nSession countdown and auto-logout warning display.\n\nIn-app notification drawer and feed.\n\nKeyboard-driven search trigger for cross-app navigation.\n\nDropdown trigger to switch application locales.\n\nTheme switcher menu for light, dark, and system modes.\n\nTheme selection modal dialog.",{"id":2107,"title":2108,"titles":2109,"content":2110,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#back-button","Back button",[2086,400],"An optional back button enables navigation to the previous route. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\nimport { useRouter } from \"vue-router\";\n\nconst router = useRouter();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url with-back-button @navigate-back=\"router.back\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2112,"title":2113,"titles":2114,"content":2115,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-bar#vertical","Vertical",[2086,400],"The navigation bar can also render vertically along the side of the application. Vertical mode supports expanding and collapsing. Every nav item must include an icon so it remains identifiable when collapsed. We recommend switching to a horizontal navigation bar on small viewports. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { iconLogin, iconLogout, iconPlaceholder, iconSearch, iconSettings } from \"@sit-onyx\u002Ficons\";\nimport {\n  ColorSchemeValue,\n  ONYX_BREAKPOINTS,\n  OnyxAppLayout,\n  OnyxColorSchemeMenuItem,\n  OnyxMenuItem,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxUnstableNavButton,\n  OnyxUserMenu,\n  useResizeObserver,\n} from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\nconst user = ref\u003C{ name: string } | undefined>({ name: \"Jane Doe\" });\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\n\nconst handleLogin = () => {\n  \u002F\u002F your logout logic here...\n  user.value = { name: \"Jane Doe\" };\n};\n\nconst handleLogout = () => {\n  \u002F\u002F your logout logic here...\n  user.value = undefined;\n};\n\nconst { width: viewportWidth } = useResizeObserver();\n\n\u002F**\n * Whether to use a horizontal nav bar for small \u002F mobile viewports.\n *\u002F\nconst isMobile = computed(() => viewportWidth.value \u003C= ONYX_BREAKPOINTS.xs);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout :nav-bar-alignment=\"isMobile ? 'top' : 'left'\">\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url :orientation=\"isMobile ? 'horizontal' : 'vertical'\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" :icon=\"iconPlaceholder\" \u002F>\n\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" :icon=\"iconPlaceholder\">\n          \u003Ctemplate #children>\n            \u003COnyxNavItem label=\"Child 1\" link=\"\u002Fpage-2\u002F1\" \u002F>\n            \u003COnyxNavItem label=\"Child 2\" link=\"\u002Fpage-2\u002F2\" \u002F>\n            \u003COnyxNavItem label=\"Child 3\" link=\"\u002Fpage-2\u002F3\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxNavItem>\n\n        \u003Ctemplate #globalContextArea>\n          \u003COnyxUnstableNavButton label=\"Search\" :icon=\"iconSearch\" hide-label \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #contextArea>\n          \u003COnyxUserMenu v-if=\"user\" full-name=\"Jane Doe\" description=\"Description\" position=\"right\">\n            \u003COnyxMenuItem label=\"Settings\" :icon=\"iconSettings\" link=\"\u002Fsettings\" \u002F>\n            \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n            \u003COnyxMenuItem label=\"Logout\" :icon=\"iconLogout\" color=\"danger\" @click=\"handleLogout\" \u002F>\n\n            \u003Ctemplate #footer>\n              App version\n              \u003Cspan class=\"onyx-text--monospace\">1.0.0\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxUserMenu>\n\n          \u003COnyxUnstableNavButton\n            v-else\n            label=\"Login\"\n            :icon=\"iconLogin\"\n            color=\"primary\"\n            @click=\"handleLogin\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":2117,"title":2118,"titles":2119,"content":2120,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fnav-button","Nav button",[],"The nav button is intended to be used exclusively inside the nav bar for providing (custom) actions inside the context area. Do NOT use the icon button inside the nav bar.",{"id":2122,"title":400,"titles":2123,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fnav-button#examples",[2118],{"id":2125,"title":439,"titles":2126,"content":2127,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-button#basic",[2118,400],"The button can either trigger a custom action or open a link. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxUnstableNavButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F handle click here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableNavButton label=\"Example action\" :icon=\"iconPlaceholder\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate>",{"id":2129,"title":469,"titles":2130,"content":2131,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-button#icon-button",[2118,400],"The label can optionally be hidden to use an icon-only button. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxUnstableNavButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F handle click here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableNavButton\n    label=\"Example action\"\n    :icon=\"iconPlaceholder\"\n    hide-label\n    @click=\"handleClick\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":2133,"title":87,"titles":2134,"content":2135,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-button#primary",[2118,400],"The primary color is exclusively intended for \"Login\" buttons. \u003Cscript lang=\"ts\" setup>\nimport { iconLogin } from \"@sit-onyx\u002Ficons\";\nimport { OnyxUnstableNavButton } from \"sit-onyx\";\n\nconst handleClick = () => {\n  \u002F\u002F handle click here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableNavButton label=\"Login\" :icon=\"iconLogin\" color=\"primary\" @click=\"handleClick\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":2137,"title":2138,"titles":2139,"content":2140,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fnav-item","Nav item",[],"The nav item is used to build the navigation bar component and not intended to be used standalone. Please refer to the nav bar component for a full list of examples.",{"id":2142,"title":400,"titles":2143,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fnav-item#examples",[2138],{"id":2145,"title":439,"titles":2146,"content":2147,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-item#basic",[2138,400],"The nav item is automatically highlighted active if the current page matches the nav item link. Custom content is supported. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxBadge, OnyxIcon, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNavItem label=\"Example page\" link=\"#example-page\" \u002F>\n\n  \u003COnyxNavItem label=\"Example page\" link=\"#example-page-2\">\n    \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n    Example page\n    \u003COnyxBadge color=\"warning\" dot \u002F>\n  \u003C\u002FOnyxNavItem>\n\u003C\u002Ftemplate>",{"id":2149,"title":2150,"titles":2151,"content":2152,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-item#children","Children",[2138,400],"Hierarchical page structures can be displayed using children that are shown when hovering the parent item. \u003Cscript lang=\"ts\" setup>\nimport { OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\">\n    \u003Ctemplate #children>\n      \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\" \u002F>\n      \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n      \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxNavItem>\n\u003C\u002Ftemplate>",{"id":2154,"title":2155,"titles":2156,"content":2157,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-item#internal-drilldown","Internal drilldown",[2138,400],"When multiple layers of children are defined, an internal drilldown is used by default that supports navigation between the child layers. \u003Cscript lang=\"ts\" setup>\nimport { OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\">\n    \u003Ctemplate #children>\n      \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\">\n        \u003Ctemplate #children>\n          \u003COnyxNavItem label=\"Page 1.1.1\" link=\"\u002Fpage-1\u002F1\u002F1\" \u002F>\n          \u003COnyxNavItem label=\"Page 1.1.2\" link=\"\u002Fpage-1\u002F1\u002F2\" \u002F>\n\n          \u003COnyxNavItem label=\"Page 1.1.3\" link=\"\u002Fpage-1\u002F1\u002F3\">\n            \u003Ctemplate #children>\n              \u003COnyxNavItem label=\"Page 1.1.3.1\" link=\"\u002Fpage-1\u002F1\u002F3\u002F1\" \u002F>\n              \u003COnyxNavItem label=\"Page 1.1.3.2\" link=\"\u002Fpage-1\u002F1\u002F3\u002F2\" \u002F>\n              \u003COnyxNavItem label=\"Page 1.1.3.3\" link=\"\u002Fpage-1\u002F1\u002F3\u002F3\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxNavItem>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavItem>\n\n      \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n      \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxNavItem>\n\u003C\u002Ftemplate>",{"id":2159,"title":2160,"titles":2161,"content":2162,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fnav-item#external-drilldown","External drilldown",[2138,400],"Additional, the drilldown can be external which displays the nested child layers using multiple flyouts. Please only use a limit amount of layers with the external drilldown since the available screen size can be limited on smaller screens. \u003Cscript lang=\"ts\" setup>\nimport { OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" drilldown-mode=\"external\">\n    \u003Ctemplate #children>\n      \u003COnyxNavItem label=\"Page 1.1\" link=\"\u002Fpage-1\u002F1\">\n        \u003Ctemplate #children>\n          \u003COnyxNavItem label=\"Page 1.1.1\" link=\"\u002Fpage-1\u002F1\u002F1\" \u002F>\n          \u003COnyxNavItem label=\"Page 1.1.2\" link=\"\u002Fpage-1\u002F1\u002F2\" \u002F>\n\n          \u003COnyxNavItem label=\"Page 1.1.3\" link=\"\u002Fpage-1\u002F1\u002F3\">\n            \u003Ctemplate #children>\n              \u003COnyxNavItem label=\"Page 1.1.3.1\" link=\"\u002Fpage-1\u002F1\u002F3\u002F1\" \u002F>\n              \u003COnyxNavItem label=\"Page 1.1.3.2\" link=\"\u002Fpage-1\u002F1\u002F3\u002F2\" \u002F>\n              \u003COnyxNavItem label=\"Page 1.1.3.3\" link=\"\u002Fpage-1\u002F1\u002F3\u002F3\" \u002F>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxNavItem>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavItem>\n\n      \u003COnyxNavItem label=\"Page 1.2\" link=\"\u002Fpage-1\u002F2\" \u002F>\n      \u003COnyxNavItem label=\"Page 1.3\" link=\"\u002Fpage-1\u002F3\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxNavItem>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":2164,"title":2165,"titles":2166,"content":2167,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control","Segmented control",[],"The segmented control is an interactive component that allows users to select a single option from a set of mutually exclusive choices. It is commonly used for view toggles (such as switching between card and table layouts) or compact filter bars.",{"id":2169,"title":400,"titles":2170,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control#examples",[2165],{"id":2172,"title":439,"titles":2173,"content":2174,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control#basic",[2165,400],"The segmented control consists of two or more options displaying a label and optional icon. We recommend displaying icons across all options or omitting them entirely, rather than mixing icon and text-only buttons. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxSegmentedControl, OnyxSegmentedControlOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options: OnyxSegmentedControlOption[] = [\n  { label: \"Option 1\", value: \"option-1\", icon: iconPlaceholder },\n  { label: \"Option 2\", value: \"option-2\", icon: iconPlaceholder },\n  { label: \"Option 3\", value: \"option-3\", icon: iconPlaceholder },\n];\n\nconst selectedOption = ref(options[0].value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSegmentedControl v-model=\"selectedOption\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":2176,"title":2177,"titles":2178,"content":2179,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control#icons-only","Icons only",[2165,400],"Option labels can be visually hidden to render an icon-only segment. In this configuration, the control fits its content rather than stretching to fill the container width. Accessible labels are still required for screen readers. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxSegmentedControl, OnyxSegmentedControlOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options: OnyxSegmentedControlOption[] = [\n  { label: \"Option 1\", value: \"option-1\", icon: iconPlaceholder, hideLabel: true },\n  { label: \"Option 2\", value: \"option-2\", icon: iconPlaceholder, hideLabel: true },\n  { label: \"Option 3\", value: \"option-3\", icon: iconPlaceholder, hideLabel: true },\n];\n\nconst selectedOption = ref(options[0].value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSegmentedControl v-model=\"selectedOption\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":2181,"title":426,"titles":2182,"content":2183,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control#disabled",[2165,400],"Individual segments can be disabled to prevent interaction. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSegmentedControl, OnyxSegmentedControlOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options: OnyxSegmentedControlOption[] = [\n  { label: \"Option 1\", value: \"option-1\" },\n  { label: \"Option 2\", value: \"option-2\", disabled: true },\n  { label: \"Option 3\", value: \"option-3\" },\n];\n\nconst selectedOption = ref(options[0].value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSegmentedControl v-model=\"selectedOption\" :options \u002F>\n\u003C\u002Ftemplate>",{"id":2185,"title":574,"titles":2186,"content":2187,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsegmented-control#skeleton",[2165,400],"Use the skeleton during data fetching or initial page load. \u003Cscript lang=\"ts\" setup>\nimport { OnyxSegmentedControl, OnyxSegmentedControlOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst options: OnyxSegmentedControlOption[] = [\n  { label: \"Option 1\", value: \"option-1\" },\n  { label: \"Option 2\", value: \"option-2\" },\n  { label: \"Option 3\", value: \"option-3\" },\n];\n\nconst selectedOption = ref(options[0].value);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxSegmentedControl v-model=\"selectedOption\" :options skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2189,"title":2190,"titles":2191,"content":2192,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fsidebar","Sidebar",[],"A sidebar is displayed either on the left or right edge of the application to show additional information. It can be shown either permanently or only temporarily based on the user interaction.",{"id":2194,"title":400,"titles":2195,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fsidebar#examples",[2190],{"id":2197,"title":2198,"titles":2199,"content":2200,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsidebar#alignments","Alignments",[2190,400],"A basic sidebar is shown permanently on the left or right side of the application. It contains up to three sections: header, body and footer. The header and footer are sticky while the body becomes scrollable if the content is too large for the available height. The sidebar can manually be resized by the user by dragging the border. Double clicking the border will reset the width to the default. Resizing can be disabling using the resizable property. Left \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxHeadline,\n  OnyxPageLayout,\n  OnyxSidebar,\n  OnyxIcon,\n  OnyxSidebarItem,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar class=\"sidebar\" label=\"Example sidebar\">\n          \u003Ctemplate #header> Header content \u003C\u002Ftemplate>\n\n          \u003Cdiv class=\"sidebar__content\">\n            \u003COnyxSidebarItem v-for=\"i in 6\" :key=\"i\" :link=\"`#link-${i}`\">\n              \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n              Item {{ i }}\n            \u003C\u002FOnyxSidebarItem>\n          \u003C\u002Fdiv>\n\n          \u003Ctemplate #footer>\n            \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n            \u003COnyxButton label=\"Button\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.sidebar {\n  &__content {\n    padding: var(--onyx-sidebar-padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n  }\n}\n\u003C\u002Fstyle>\nRight \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxHeadline,\n  OnyxPageLayout,\n  OnyxSidebar,\n  OnyxIcon,\n  OnyxSidebarItem,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebarRight>\n        \u003COnyxSidebar class=\"sidebar\" label=\"Example sidebar\" alignment=\"right\">\n          \u003Ctemplate #header> Header content \u003C\u002Ftemplate>\n\n          \u003Cdiv class=\"sidebar__content\">\n            \u003COnyxSidebarItem v-for=\"i in 6\" :key=\"i\" :link=\"`#link-${i}`\">\n              \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n              Item {{ i }}\n            \u003C\u002FOnyxSidebarItem>\n          \u003C\u002Fdiv>\n\n          \u003Ctemplate #footer>\n            \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n            \u003COnyxButton label=\"Button\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.sidebar {\n  &__content {\n    padding: var(--onyx-sidebar-padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n  }\n}\n\u003C\u002Fstyle>",{"id":2202,"title":2203,"titles":2204,"content":2205,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsidebar#temporary","Temporary",[2190,400],"Use a temporary sidebar to show the additional content only after user interaction, e.g. when clicking a row inside a data grid. \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxPageLayout,\n  OnyxSidebar,\n  OnyxIcon,\n  OnyxSidebarItem,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar\n          class=\"sidebar\"\n          label=\"Example sidebar\"\n          :temporary=\"{ open: isOpen }\"\n          alignment=\"right\"\n          @close=\"isOpen = false\"\n        >\n          \u003Ctemplate #header> Header content \u003C\u002Ftemplate>\n          \u003Ctemplate #description>\n            Lorem ipsum dolor sit amet consectetur. Dui purus quisque est.\n          \u003C\u002Ftemplate>\n\n          \u003Cdiv class=\"sidebar__content\">\n            \u003COnyxSidebarItem v-for=\"i in 6\" :key=\"i\" :link=\"`#link-${i}`\">\n              \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n              Item {{ i }}\n            \u003C\u002FOnyxSidebarItem>\n          \u003C\u002Fdiv>\n\n          \u003Ctemplate #footer>\n            \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n            \u003COnyxButton label=\"Button\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      \u003COnyxButton label=\"Open sidebar\" @click=\"isOpen = true\" \u002F>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.sidebar {\n  &__content {\n    padding: var(--onyx-sidebar-padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n  }\n}\n\u003C\u002Fstyle>",{"id":2207,"title":2208,"titles":2209,"content":2210,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsidebar#tree-view","Tree view",[2190,400],"To display hierarchical data, use a tree view component inside the sidebar. \u003Cscript setup lang=\"ts\">\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxHeadline,\n  OnyxIcon,\n  OnyxPageLayout,\n  OnyxSidebar,\n  OnyxSidebarItem,\n  OnyxUnstableTreeView,\n  OnyxUnstableTreeViewItem,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar\">\n          \u003Ctemplate #header> Header content \u003C\u002Ftemplate>\n\n          \u003Cdiv class=\"sidebar__content\">\n            \u003COnyxUnstableTreeView label=\"Example tree view\">\n              \u003COnyxSidebarItem link=\"#link-1\">\n                \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                Item 1\n              \u003C\u002FOnyxSidebarItem>\n\n              \u003COnyxUnstableTreeViewItem label=\"Item 2\" :icon=\"iconPlaceholder\">\n                \u003COnyxSidebarItem link=\"#link-2.1\">\n                  \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                  Item 2.1\n                \u003C\u002FOnyxSidebarItem>\n\n                \u003COnyxUnstableTreeViewItem label=\"Item 2.2\" :icon=\"iconPlaceholder\">\n                  \u003COnyxSidebarItem link=\"#link-2.2.1\">\n                    \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                    Item 2.2.1\n                  \u003C\u002FOnyxSidebarItem>\n                  \u003COnyxSidebarItem link=\"#link-2.2.2\">\n                    \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                    Item 2.2.2\n                  \u003C\u002FOnyxSidebarItem>\n                \u003C\u002FOnyxUnstableTreeViewItem>\n              \u003C\u002FOnyxUnstableTreeViewItem>\n\n              \u003COnyxUnstableTreeViewItem label=\"Item 3\" :icon=\"iconPlaceholder\">\n                \u003COnyxSidebarItem link=\"#link-3.1\">\n                  \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                  Item 3.1\n                \u003C\u002FOnyxSidebarItem>\n                \u003COnyxSidebarItem link=\"#link-3.2\">\n                  \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                  Item 3.2\n                \u003C\u002FOnyxSidebarItem>\n                \u003COnyxSidebarItem link=\"#link-3.3\">\n                  \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                  Item 3.3\n                \u003C\u002FOnyxSidebarItem>\n              \u003C\u002FOnyxUnstableTreeViewItem>\n\n              \u003COnyxSidebarItem link=\"#link-4\">\n                \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n                Item 4\n              \u003C\u002FOnyxSidebarItem>\n            \u003C\u002FOnyxUnstableTreeView>\n          \u003C\u002Fdiv>\n\n          \u003Ctemplate #footer>\n            \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n            \u003COnyxButton label=\"Button\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.sidebar {\n  &__content {\n    padding: var(--onyx-sidebar-padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xs);\n  }\n}\n\u003C\u002Fstyle>",{"id":2212,"title":170,"titles":2213,"content":2214,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fsidebar#grid",[2190,400],"The sidebar also supports using our grid system to easy build responsive layouts. For further information, please refer to our grid documentation. Resize the sidebar by dragging the border to see the grid in action. \u003Cscript setup lang=\"ts\">\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxHeadline,\n  OnyxPageLayout,\n  OnyxSidebar,\n  OnyxCard,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar\">\n          \u003Ctemplate #header> Header content \u003C\u002Ftemplate>\n          \u003Cdiv class=\"onyx-grid-layout\">\n            \u003Cdiv class=\"onyx-grid\">\n              \u003COnyxCard v-for=\"i in 6\" :key=\"i\" class=\"card\"> {{ i }} \u003C\u002FOnyxCard>\n              \u003COnyxCard class=\"card onyx-grid-span-2\">2 columns\u003C\u002FOnyxCard>\n              \u003COnyxCard class=\"card onyx-grid-span-full\">full width\u003C\u002FOnyxCard>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n\n          \u003Ctemplate #footer>\n            \u003COnyxButton color=\"neutral\" label=\"Button\" \u002F>\n            \u003COnyxButton label=\"Button\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.card {\n  flex-direction: row;\n  justify-content: center;\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":2216,"title":2217,"titles":2218,"content":2219,"level":9},"\u002Fcomponents\u002Fnavigation\u002Ftable-of-contents","Table Of Contents",[],"The table of contents component is used to display a list of sections\u002Fheadings in a page with links to the corresponding sections.",{"id":2221,"title":400,"titles":2222,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Ftable-of-contents#examples",[2217],{"id":2224,"title":439,"titles":2225,"content":2226,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftable-of-contents#basic",[2217,400],"The table of contents should be on the right of the content with a minimum width of 8rem and a maximum width of 15rem. It should also use position: fixed, so it does not scroll with the page content. The links are highlighted as active automatically based on the current link and scroll position (requires headline components inside the page content with a matching hash property). \u003Cscript lang=\"ts\" setup>\nimport {\n  OnyxAppLayout,\n  OnyxHeadline,\n  OnyxPageLayout,\n  OnyxTableOfContents,\n  OnyxTableOfContentsItem,\n} from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Cdiv class=\"layout\">\n        \u003Cdiv class=\"layout__content\">\n          \u003COnyxHeadline is=\"h1\">Page content\u003C\u002FOnyxHeadline>\n        \u003C\u002Fdiv>\n\n        \u003COnyxTableOfContents class=\"layout__toc\">\n          \u003COnyxTableOfContentsItem link=\"#section-1\"> Section 1 \u003C\u002FOnyxTableOfContentsItem>\n          \u003COnyxTableOfContentsItem link=\"#section-2\">\n            Section 2\n\n            \u003Ctemplate #children>\n              \u003COnyxTableOfContentsItem link=\"#section-2-1\">\n                Sub section 2.1\n              \u003C\u002FOnyxTableOfContentsItem>\n              \u003COnyxTableOfContentsItem link=\"#section-2-2\">\n                Sub section 2.2\n              \u003C\u002FOnyxTableOfContentsItem>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxTableOfContentsItem>\n          \u003COnyxTableOfContentsItem link=\"#section-3\"> Section 3 \u003C\u002FOnyxTableOfContentsItem>\n        \u003C\u002FOnyxTableOfContents>\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n@use \"sit-onyx\u002Fbreakpoints.scss\";\n\n.layout {\n  display: grid;\n  \u002F\u002F gap between page content and TOC. Equivalent to one grid column + 2 * grid gutter\u002Fgap\n  gap: calc(2 * var(--onyx-grid-gutter) + (100 \u002F var(--onyx-grid-columns)) * 1%);\n  grid-template-columns: 1fr minmax(8rem, 15rem);\n\n  &__toc {\n    position: sticky;\n    top: var(--onyx-grid-margin-vertical);\n    max-height: calc(100dvh - var(--onyx-nav-bar-height) - 2 * var(--onyx-grid-margin-vertical));\n  }\n\n  &__content {\n    \u002F\u002F when using a grid inside the content, it should reflect only the available\n    \u002F\u002F content width as breakpoint instead of the whole page (including the TOC)\n    container-type: inline-size;\n  }\n\n  \u002F\u002F hide TOC on smaller screens\n  @include breakpoints.container(max, md) {\n    display: flex;\n    flex-direction: column;\n\n    .layout__toc {\n      display: none;\n    }\n  }\n}\n\u003C\u002Fstyle>",{"id":2228,"title":574,"titles":2229,"content":2230,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftable-of-contents#skeleton",[2217,400],"Use the skeleton on initial page load while the data for the table of contents is loading. Can be set on either the whole table of contents or only individual items. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTableOfContents } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTableOfContents skeleton>\n    \u003C!-- place the OnyxTableOfContentsItem components here once loaded -->\n  \u003C\u002FOnyxTableOfContents>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"id":2232,"title":2233,"titles":2234,"content":2235,"level":9},"\u002Fcomponents\u002Fnavigation\u002Ftabs","Tabs",[],"Tabs organize content into separate views within the same page, helping users to navigate and manage large sets of information without page reloads, improving accessibility and flow. They are perfect for single page web applications, or for web pages capable of displaying different subjects.",{"id":2237,"title":400,"titles":2238,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Ftabs#examples",[2233],{"id":2240,"title":439,"titles":2241,"content":2242,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftabs#basic",[2233,400],"Each tab has a required label and can optionally show an icon or custom content such as a badge indicator. Specific tabs can be disabled if the user should not be able to view and interact with it. One tab must always be active. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxBadge, OnyxIcon, OnyxTab, OnyxTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst tab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTabs v-model=\"tab\" label=\"Example tabs\">\n    \u003COnyxTab value=\"tab-1\">\n      \u003Ctemplate #tab>\n        \u003COnyxIcon :icon=\"iconPlaceholder\" \u002F>\n        Tab 1\n      \u003C\u002Ftemplate>\n\n      Content for tab 1...\n    \u003C\u002FOnyxTab>\n\n    \u003COnyxTab label=\"Tab 2\" value=\"tab-2\">Content for tab 2...\u003C\u002FOnyxTab>\n\n    \u003COnyxTab value=\"tab-3\">\n      \u003Ctemplate #tab>\n        Tab 3\n        \u003COnyxBadge color=\"warning\" dot \u002F>\n      \u003C\u002Ftemplate>\n\n      Content for tab 3...\n    \u003C\u002FOnyxTab>\n\n    \u003COnyxTab label=\"Tab 4\" value=\"tab-4\" disabled> Content for tab 4... \u003C\u002FOnyxTab>\n  \u003C\u002FOnyxTabs>\n\u003C\u002Ftemplate>",{"id":2244,"title":1430,"titles":2245,"content":2246,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftabs#actions",[2233,400],"Custom actions or content can be placed at the end of the tabs if needed. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxTab, OnyxTabs, OnyxTag } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst tab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTabs v-model=\"tab\" label=\"Example tabs\">\n    \u003Ctemplate #actions>\n      \u003COnyxTag label=\"Tag\" color=\"primary\" \u002F>\n      \u003COnyxSystemButton label=\"Example action\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxTab label=\"Tab 1\" value=\"tab-1\">Content for tab 1...\u003C\u002FOnyxTab>\n    \u003COnyxTab label=\"Tab 2\" value=\"tab-2\">Content for tab 2...\u003C\u002FOnyxTab>\n  \u003C\u002FOnyxTabs>\n\u003C\u002Ftemplate>",{"id":2248,"title":2249,"titles":2250,"content":2251,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftabs#stretched","Stretched",[2233,400],"Stretch tabs to make them occupy the full available width. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTab, OnyxTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst tab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTabs v-model=\"tab\" label=\"Example tabs\" stretched>\n    \u003COnyxTab label=\"Tab 1\" value=\"tab-1\">Content for tab 1...\u003C\u002FOnyxTab>\n    \u003COnyxTab label=\"Tab 2\" value=\"tab-2\">Content for tab 2...\u003C\u002FOnyxTab>\n  \u003C\u002FOnyxTabs>\n\u003C\u002Ftemplate>",{"id":2253,"title":574,"titles":2254,"content":2255,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftabs#skeleton",[2233,400],"Use the skeleton on initial page load to indicate that the data for the tabs is currently loading. Can also be defined only for specific tabs. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTab, OnyxTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst tab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTabs v-model=\"tab\" label=\"Example tabs\" skeleton>\n    \u003COnyxTab label=\"Tab 1\" value=\"tab-1\">\n      \u003C!-- place content here once loaded -->\n    \u003C\u002FOnyxTab>\n\n    \u003COnyxTab label=\"Tab 2\" value=\"tab-2\">\n      \u003C!-- place content here once loaded -->\n    \u003C\u002FOnyxTab>\n  \u003C\u002FOnyxTabs>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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}",{"id":2257,"title":2258,"titles":2259,"content":2260,"level":9},"\u002Fcomponents\u002Fnavigation\u002Ftimer","Timer",[],"Countdown timer, e.g. for when the user's login session expires.",{"id":2262,"title":400,"titles":2263,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Ftimer#examples",[2258],{"id":2265,"title":439,"titles":2266,"content":2267,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftimer#basic",[2258,400],"The timer automatically shows the remaining time in an appropriate format, e.g. hours, minutes or seconds, depending on the time. \u003Cscript lang=\"ts\" setup>\nimport { OnyxTimer } from \"sit-onyx\";\n\nconst endTime = new Date();\nendTime.setMinutes(endTime.getMinutes() + 15);\n\nconst handleTimerEnd = () => {\n  \u002F\u002F your logic when the timer has ended...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxTimer label=\"Logged out in:\" :end-time @timer-ended=\"handleTimerEnd\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":2269,"title":2208,"titles":2270,"content":2271,"level":9},"\u002Fcomponents\u002Fnavigation\u002Ftree-view",[],"A tree view is used to display hierarchical data such as products grouped by category, files inside folders etc.",{"id":2273,"title":400,"titles":2274,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Ftree-view#examples",[2208],{"id":2276,"title":439,"titles":2277,"content":2278,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftree-view#basic",[2208,400],"A tree view can display an arbitrary amount of nested levels that can be collapsed and expanded. Each tree view item supports a label and optional icon or custom content. The displayed content at the end of the hierarchy can be fully customized. \u003Cscript lang=\"ts\" setup>\nimport { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\nimport { OnyxUnstableTreeView, OnyxUnstableTreeViewItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableTreeView label=\"Example tree view\">\n    \u003COnyxUnstableTreeViewItem label=\"Item 1\" :icon=\"iconPlaceholder\">\n      \u003COnyxUnstableTreeViewItem label=\"Item 1.1\" :icon=\"iconPlaceholder\">\n        \u003COnyxUnstableTreeViewItem label=\"Item 1.1.1\" :icon=\"iconPlaceholder\" \u002F>\n        \u003COnyxUnstableTreeViewItem label=\"Item 1.1.2\" :icon=\"iconPlaceholder\" \u002F>\n      \u003C\u002FOnyxUnstableTreeViewItem>\n\n      \u003COnyxUnstableTreeViewItem label=\"Item 1.2\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002FOnyxUnstableTreeViewItem>\n\n    \u003COnyxUnstableTreeViewItem label=\"Item 2\" :icon=\"iconPlaceholder\">\n      \u003COnyxUnstableTreeViewItem label=\"Item 2.1\" :icon=\"iconPlaceholder\" \u002F>\n      \u003COnyxUnstableTreeViewItem label=\"Item 2.2\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002FOnyxUnstableTreeViewItem>\n\n    \u003COnyxUnstableTreeViewItem label=\"Item 3\" :icon=\"iconPlaceholder\" disabled>\n      \u003COnyxUnstableTreeViewItem label=\"Item 3.1\" :icon=\"iconPlaceholder\" \u002F>\n    \u003C\u002FOnyxUnstableTreeViewItem>\n  \u003C\u002FOnyxUnstableTreeView>\n\u003C\u002Ftemplate>",{"id":2280,"title":2190,"titles":2281,"content":2282,"level":84},"\u002Fcomponents\u002Fnavigation\u002Ftree-view#sidebar",[2208,400],"Refer to the sidebar documentation for an example on how to use the tree view within a sidebar. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}",{"id":2284,"title":2285,"titles":2286,"content":2287,"level":9},"\u002Fcomponents\u002Fnavigation\u002Fuser-menu","User menu",[],"The user menu displays user-related information and actions and is intended to be used inside the navigation bar.",{"id":2289,"title":400,"titles":2290,"content":367,"level":19},"\u002Fcomponents\u002Fnavigation\u002Fuser-menu#examples",[2285],{"id":2292,"title":439,"titles":2293,"content":2294,"level":84},"\u002Fcomponents\u002Fnavigation\u002Fuser-menu#basic",[2285,400],"Refer to the menu item component for further information on how to customize the flyout options. Hover over the user menu to open the flyout with actions. \u003Cscript lang=\"ts\" setup>\nimport { flagUS, flagDE } from \"@sit-onyx\u002Fflags\";\nimport { iconLogout, iconSettings } from \"@sit-onyx\u002Ficons\";\nimport {\n  ColorSchemeValue,\n  OnyxColorSchemeMenuItem,\n  OnyxLanguageMenuItem,\n  OnyxMenuItem,\n  OnyxUserMenu,\n  SelectDialogOption,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\nconst locale = ref(\"en\");\n\nconst languages: SelectDialogOption[] = [\n  { label: \"English\", value: \"en\", icon: flagUS },\n  { label: \"Deutsch\", value: \"de\", icon: flagDE },\n];\n\nconst handleLogout = () => {\n  \u002F\u002F your logout logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUserMenu full-name=\"Jane Doe\" description=\"Company Name\">\n    \u003COnyxMenuItem label=\"Settings\" :icon=\"iconSettings\" link=\"\u002Fsettings\" \u002F>\n    \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n    \u003COnyxLanguageMenuItem v-model=\"locale\" :options=\"languages\" \u002F>\n    \u003COnyxMenuItem label=\"Logout\" :icon=\"iconLogout\" color=\"danger\" @click=\"handleLogout\" \u002F>\n\n    \u003Ctemplate #footer>\n      App version\n      \u003Cspan class=\"onyx-text--monospace\">1.0.0\u003C\u002Fspan>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxUserMenu>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":2296,"title":2297,"titles":2298,"content":2299,"level":9},"\u002Fcomponents\u002Fprogress\u002Fprogress-item","Progress item",[],"The progress item represents a single step inside of a multi-step progress. It is mainly used inside the progress steps component.",{"id":2301,"title":400,"titles":2302,"content":367,"level":19},"\u002Fcomponents\u002Fprogress\u002Fprogress-item#examples",[2297],{"id":2304,"title":1435,"titles":2305,"content":2306,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-item#status",[2297,400],"The step can be in several status, depending on the interaction within the multi-step progress. The step number is displayed by default but optionally an icon can be displayed instead using the icon property. Default The step is upcoming in the progress. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"2\" \u002F>\n\u003C\u002Ftemplate>\nActive The step is currently active so the user works with the data associated with this step. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"1\" status=\"active\" \u002F>\n\u003C\u002Ftemplate>\nCompleted The step is already completed by the user and a later step is currently active. The user is allowed to go back to this step. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"1\" status=\"completed\" \u002F>\n\u003C\u002Ftemplate>\nVisited The step was already active in the past, is not completed yet but the user is currently working in another step. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"1\" status=\"visited\" \u002F>\n\u003C\u002Ftemplate>\nInvalid The step is invalid, e.g. to errors regarding the associated data. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"1\" status=\"invalid\" \u002F>\n\u003C\u002Ftemplate>",{"id":2308,"title":1134,"titles":2309,"content":2310,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-item#custom-content",[2297,400],"Custom content can be used for the step label, e.g. to show an additional short description. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Custom label\" :value=\"1\">\n    \u003Ctemplate #default=\"{ label }\">\n      {{ label }}\n      \u003Cdiv class=\"description\">Description\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxProgressItem>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.description {\n  color: var(--onyx-color-text-icons-neutral-soft);\n  font-weight: var(--onyx-font-weight-regular);\n  font-size: var(--onyx-font-size-sm);\n  line-height: var(--onyx-font-line-height-sm);\n}\n\u003C\u002Fstyle>",{"id":2312,"title":574,"titles":2313,"content":2314,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-item#skeleton",[2297,400],"Use the skeleton on initial page load while the data for the step is currently loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressItem label=\"Step\" :value=\"1\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":2316,"title":2317,"titles":2318,"content":2319,"level":9},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps","Progress steps",[],"The progress steps are used to indicate a linear multi-step workflow that the user has to go through step by step. Upcoming steps can not be skipped, going back to already visited steps is always possible. Continuing to the next step is up the projects's logic so custom components or logic needs to be implemented for this.",{"id":2321,"title":400,"titles":2322,"content":367,"level":19},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps#examples",[2317],{"id":2324,"title":560,"titles":2325,"content":2326,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps#horizontal",[2317,400],"The default progress steps are display horizontally. If not all steps fit into the available width, they will become scrollable. Each step can optionally also display an icon instead of the numeric step value. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressSteps, type ControlledProgressStep } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst activeStep = ref(3);\n\nconst steps: ControlledProgressStep[] = [\n  { label: \"Cart\" },\n  { label: \"Shipping\" },\n  { label: \"Payment\" },\n  { label: \"Checkout\" },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressSteps v-model=\"activeStep\" :steps \u002F>\n\u003C\u002Ftemplate>",{"id":2328,"title":2113,"titles":2329,"content":2330,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps#vertical",[2317,400],"The steps can also be displayed vertically, e.g. if used inside a sidebar. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressSteps, type ControlledProgressStep } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst activeStep = ref(3);\n\nconst steps: ControlledProgressStep[] = [\n  { label: \"Cart\" },\n  { label: \"Shipping\" },\n  { label: \"Payment\" },\n  { label: \"Checkout\" },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressSteps v-model=\"activeStep\" :steps orientation=\"vertical\" \u002F>\n\u003C\u002Ftemplate>",{"id":2332,"title":1134,"titles":2333,"content":2334,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps#custom-content",[2317,400],"Custom content can be used for the steps, e.g. to show an additional short description. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressSteps, type ControlledProgressStep } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst activeStep = ref(3);\n\nconst steps: ControlledProgressStep[] = [\n  { label: \"Cart\" },\n  { label: \"Shipping\" },\n  { label: \"Payment\" },\n  { label: \"Checkout\" },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressSteps v-model=\"activeStep\" :steps>\n    \u003Ctemplate #step=\"{ step }\">\n      {{ step.label }}\n      \u003Cdiv class=\"description\">Description\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxProgressSteps>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.description {\n  color: var(--onyx-color-text-icons-neutral-soft);\n  font-weight: var(--onyx-font-weight-regular);\n  font-size: var(--onyx-font-size-sm);\n  line-height: var(--onyx-font-line-height-sm);\n}\n\u003C\u002Fstyle>",{"id":2336,"title":574,"titles":2337,"content":2338,"level":84},"\u002Fcomponents\u002Fprogress\u002Fprogress-steps#skeleton",[2317,400],"Use the skeleton on initial page load while the data for the steps are currently loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxProgressSteps, type ControlledProgressStep } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst activeStep = ref(3);\n\nconst steps: ControlledProgressStep[] = [\n  { label: \"Cart\" },\n  { label: \"Shipping\" },\n  { label: \"Payment\" },\n  { label: \"Checkout\" },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxProgressSteps v-model=\"activeStep\" :steps skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":2340,"title":2341,"titles":2342,"content":2343,"level":9},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-badge","Filter badge",[],"The filter badge is a specialized variant of the general badge component that is optimized for usage inside search and filter components. It can e.g. display interactive filters that are applied on click.",{"id":2345,"title":400,"titles":2346,"content":367,"level":19},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-badge#examples",[2341],{"id":2348,"title":76,"titles":2349,"content":2350,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-badge#colors",[2341,400],"The filter badge can be clicked to toggle its active state. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFilterBadge } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst active = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" \u002F>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" color=\"neutral\" \u002F>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" color=\"danger\" \u002F>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" color=\"warning\" \u002F>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" color=\"success\" \u002F>\n  \u003COnyxFilterBadge v-model:active=\"active\" label=\"Shirts & Pullovers\" color=\"info\" \u002F>\n\u003C\u002Ftemplate>",{"id":2352,"title":574,"titles":2353,"content":2354,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-badge#skeleton",[2341,400],"Use the skeleton on initial page load while the data for the badge is loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFilterBadge } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFilterBadge label=\"Shirts & Pullovers\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2356,"title":2357,"titles":2358,"content":2359,"level":9},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-tag","Filter tag",[],"The filter tag is a specialized variant of the general tag component that is optimized for usage inside search and filter components. It can e.g. display interactive filters that are applied on click.",{"id":2361,"title":400,"titles":2362,"content":367,"level":19},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-tag#examples",[2357],{"id":2364,"title":76,"titles":2365,"content":2366,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-tag#colors",[2357,400],"The filter tag can be clicked to toggle its active state. \u003Cscript lang=\"ts\" setup>\nimport { iconChocolate } from \"@sit-onyx\u002Ficons\";\nimport { OnyxFilterTag } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst active = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFilterTag v-model:active=\"active\" label=\"Chocolate & Sweets\" :icon=\"iconChocolate\" \u002F>\n\u003C\u002Ftemplate>",{"id":2368,"title":574,"titles":2369,"content":2370,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Ffilter-tag#skeleton",[2357,400],"Use the skeleton on initial page load while the data for the tag is loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxFilterTag } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxFilterTag label=\"Shirts & Pullovers\" skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",{"id":2372,"title":2373,"titles":2374,"content":2375,"level":9},"\u002Fcomponents\u002Fsearch-and-filter\u002Fglobal-search","Global search",[],"The global search is used to provide a application-wide search functionality to e.g. quickly find a wide variety of data. While it can be triggered \u002F opened using any custom component or logic, it is commonly placed as search button inside the nav bar component.",{"id":2377,"title":400,"titles":2378,"content":367,"level":19},"\u002Fcomponents\u002Fsearch-and-filter\u002Fglobal-search#examples",[2373],{"id":2380,"title":439,"titles":2381,"content":2382,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fglobal-search#basic",[2373,400],"This example simulates asynchronous data loading after a search term is entered. When not searched, project or user specific suggestions can be displayed if needed. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport {\n  iconCircleContrast,\n  iconFile,\n  iconSearch,\n  iconSettings,\n  iconTranslate,\n} from \"@sit-onyx\u002Ficons\";\nimport { refDebounced, useAsyncState } from \"@vueuse\u002Fcore\";\nimport {\n  normalizedIncludes,\n  OnyxAppLayout,\n  OnyxGlobalSearch,\n  OnyxGlobalSearchGroup,\n  OnyxGlobalSearchOption,\n  OnyxInfoCard,\n  OnyxNavBar,\n  OnyxPageLayout,\n  OnyxUnstableNavButton,\n  OnyxFilterBadge,\n  type OnyxGlobalSearchOptionProps,\n} from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\ntype SearchGroup = {\n  label: string;\n  options: OnyxGlobalSearchOptionProps[];\n};\n\nconst isOpen = ref(false);\nconst searchTerm = ref(\"\");\n\u002F\u002F using a debounce here so the search logic is not triggered on every key stroke\nconst debouncedSearchTerm = refDebounced(searchTerm, 500);\nwatch(debouncedSearchTerm, () => refetchResults());\n\n\u002F\u002F clear search term when modal is closed\nwatch(isOpen, (newOpen) => {\n  if (!newOpen) searchTerm.value = \"\";\n});\n\nconst {\n  state: searchResults,\n  isLoading,\n  executeImmediate: refetchResults,\n} = useAsyncState\u003COnyxGlobalSearchOptionProps[]>(\n  async () => {\n    \u002F\u002F implement your custom search behavior here, we just fake it for this example\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n\n    if (!debouncedSearchTerm.value) return [];\n\n    \u002F\u002F generate some dummy search results, change this to your project-specific logic\n    return Array.from({ length: 6 }, (_, index) => {\n      const id = index + 1;\n      return {\n        label: `Result ${id} ${debouncedSearchTerm.value}`,\n        value: `result-${id}`,\n        link: `#result-${id}`,\n        icon: iconFile,\n      } satisfies OnyxGlobalSearchOptionProps;\n    });\n  },\n  [],\n  {\n    immediate: false,\n  },\n);\n\nconst searchGroups = computed(() => {\n  const groups: SearchGroup[] = [];\n\n  if (debouncedSearchTerm.value) {\n    groups.push({\n      label: \"Search results\",\n      options: searchResults.value,\n    });\n  } else {\n    \u002F\u002F if the user hasn't searched anything yet, we want to suggest common options (depending on your specific project)\n    groups.push({\n      label: \"Suggestions\",\n      options: [\n        { label: \"Suggestion 1\", value: \"suggestion-1\", link: \"#suggestion-link-1\" },\n        { label: \"Suggestion 2\", value: \"suggestion-2\", link: \"#suggestion-link-2\" },\n        { label: \"Suggestion 3\", value: \"suggestion-3\", link: \"#suggestion-link-3\" },\n      ],\n    });\n  }\n\n  \u002F\u002F always add some fixed system-wide actions\n  groups.push({\n    label: \"System\",\n    \u002F\u002F for the locale and colorScheme option, you can use\u002Fopen the following components (when clicking on the options):\n    \u002F\u002F OnyxColorSchemeDialog, OnyxSelectDialog\n    options: [\n      { label: \"Change language\", value: \"locale\", icon: iconTranslate },\n      { label: \"Change appearance\", value: \"colorScheme\", icon: iconCircleContrast },\n      { label: \"Settings\", value: \"settings\", icon: iconSettings, link: \"#settings\" },\n    ],\n  });\n\n  return groups\n    .map((group) => ({\n      ...group,\n      options: group.options.filter((option) =>\n        normalizedIncludes(option.label, debouncedSearchTerm.value),\n      ),\n    }))\n    .filter((group) => group.options.length > 0);\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url>\n        \u003C!-- using the \"globalContextArea\" instead of the regular \"contextArea\" here so the search is also always visible on mobile screens -->\n        \u003Ctemplate #globalContextArea>\n          \u003COnyxUnstableNavButton\n            label=\"Open global search\"\n            :icon=\"iconSearch\"\n            hide-label\n            @click=\"isOpen = true\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout>\n      \u003COnyxInfoCard headline=\"Example\">\n        Click on the search icon button in the nav bar (top right) to trigger the global search.\n      \u003C\u002FOnyxInfoCard>\n\n      \u003C!-- your page content would go here... -->\n    \u003C\u002FOnyxPageLayout>\n\n    \u003COnyxGlobalSearch v-model:open=\"isOpen\" v-model=\"searchTerm\">\n      \u003Ctemplate #leading>\n        \u003COnyxGlobalSearchGroup orientation=\"horizontal\" label=\"Filters\">\n          \u003COnyxFilterBadge label=\"Filter 1\" \u002F>\n          \u003COnyxFilterBadge label=\"Filter 2\" \u002F>\n          \u003COnyxFilterBadge label=\"Filter 3\" \u002F>\n        \u003C\u002FOnyxGlobalSearchGroup>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- show skeleton while search results are loading -->\n      \u003COnyxGlobalSearchGroup v-if=\"isLoading\" label=\"Search results\" skeleton \u002F>\n\n      \u003Ctemplate v-else>\n        \u003COnyxGlobalSearchGroup\n          v-for=\"group in searchGroups\"\n          :key=\"group.label\"\n          :label=\"group.label\"\n        >\n          \u003COnyxGlobalSearchOption\n            v-for=\"option in group.options\"\n            :key=\"option.value\"\n            v-bind=\"option\"\n          \u002F>\n        \u003C\u002FOnyxGlobalSearchGroup>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxGlobalSearch>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2384,"title":2385,"titles":2386,"content":2387,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fglobal-search#show-all-results","Show all results",[2373,400],"When working with many search results, you can also use a \"Show all results\" button to either navigate to a dedicated search results page or to load more results. \u003Cscript lang=\"ts\" setup>\nimport {\n  iconArrowSmallRight,\n  iconCircleContrast,\n  iconFile,\n  iconSearch,\n  iconSettings,\n  iconTranslate,\n} from \"@sit-onyx\u002Ficons\";\nimport { refDebounced, useAsyncState } from \"@vueuse\u002Fcore\";\nimport {\n  normalizedIncludes,\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxGlobalSearch,\n  OnyxGlobalSearchGroup,\n  OnyxGlobalSearchOption,\n  OnyxInfoCard,\n  OnyxNavBar,\n  OnyxPageLayout,\n  OnyxUnstableNavButton,\n  type OnyxGlobalSearchOptionProps,\n} from \"sit-onyx\";\nimport { computed, ref, watch } from \"vue\";\n\ntype SearchGroup = {\n  label: string;\n  options: OnyxGlobalSearchOptionProps[];\n};\n\nconst isOpen = ref(false);\nconst searchTerm = ref(\"\");\n\u002F\u002F using a debounce here so the search logic is not triggered on every key stroke\nconst debouncedSearchTerm = refDebounced(searchTerm, 500);\nwatch(debouncedSearchTerm, () => refetchResults());\n\n\u002F\u002F clear search term when modal is closed\nwatch(isOpen, (newOpen) => {\n  if (!newOpen) searchTerm.value = \"\";\n});\n\nconst {\n  state: searchResults,\n  isLoading,\n  executeImmediate: refetchResults,\n} = useAsyncState\u003COnyxGlobalSearchOptionProps[]>(\n  async () => {\n    \u002F\u002F implement your custom search behavior here, we just fake it for this example\n    await new Promise((resolve) => setTimeout(resolve, 1000));\n\n    if (!debouncedSearchTerm.value) return [];\n\n    \u002F\u002F generate some dummy search results, change this to your project-specific logic\n    return Array.from({ length: 20 }, (_, index) => {\n      const id = index + 1;\n      return {\n        label: `Result ${id} ${debouncedSearchTerm.value}`,\n        value: `result-${id}`,\n        link: `#result-${id}`,\n        icon: iconFile,\n      } satisfies OnyxGlobalSearchOptionProps;\n    });\n  },\n  [],\n  {\n    immediate: false,\n  },\n);\n\n\u002F**\n * Calculates the groups to be displayed in the search.\n * Limits the \"Search results\" to a maximum of 10 entries for the display.\n *\u002F\nconst searchGroups = computed(() => {\n  const groups: SearchGroup[] = [];\n\n  if (debouncedSearchTerm.value) {\n    groups.push({\n      label: \"Search results\",\n      options: searchResults.value,\n    });\n  } else {\n    \u002F\u002F if the user hasn't searched anything yet, we want to suggest common options (depending on your specific project)\n    groups.push({\n      label: \"Suggestions\",\n      options: [\n        { label: \"Suggestion 1\", value: \"suggestion-1\", link: \"#suggestion-link-1\" },\n        { label: \"Suggestion 2\", value: \"suggestion-2\", link: \"#suggestion-link-2\" },\n        { label: \"Suggestion 3\", value: \"suggestion-3\", link: \"#suggestion-link-3\" },\n      ],\n    });\n  }\n\n  \u002F\u002F always add some fixed system-wide actions\n  groups.push({\n    label: \"System\",\n    \u002F\u002F for the locale and colorScheme option, you can use\u002Fopen the following components (when clicking on the options):\n    \u002F\u002F OnyxColorSchemeDialog, OnyxSelectDialog\n    options: [\n      { label: \"Change language\", value: \"locale\", icon: iconTranslate },\n      { label: \"Change appearance\", value: \"colorScheme\", icon: iconCircleContrast },\n      { label: \"Settings\", value: \"settings\", icon: iconSettings, link: \"#settings\" },\n    ],\n  });\n\n  return groups\n    .map((group) => {\n      const filtered = group.options.filter((option) =>\n        normalizedIncludes(option.label, debouncedSearchTerm.value),\n      );\n\n      \u002F\u002F Logic: Show only the first 10 options if it is the search results group\n      const isResultGroup = group.label === \"Search results\";\n      return {\n        ...group,\n        options: isResultGroup ? filtered.slice(0, 10) : filtered,\n        \u002F\u002F we store the original length to check if there are \"more\" items later\n        hasMore: isResultGroup && filtered.length > 10,\n      };\n    })\n    .filter((group) => group.options.length > 0);\n});\n\n\u002F**\n * Checks if the \"Show all results\" button should be displayed.\n *\u002F\nconst showMoreButton = computed(() => {\n  return searchGroups.value.some((group) => group.hasMore);\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Global search example\">\n        \u003C!-- using the \"globalContextArea\" instead of the regular \"contextArea\" here so the search is also always visible on mobile screens -->\n        \u003Ctemplate #globalContextArea>\n          \u003COnyxUnstableNavButton\n            label=\"Open global search\"\n            :icon=\"iconSearch\"\n            hide-label\n            @click=\"isOpen = true\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout>\n      \u003COnyxInfoCard headline=\"Example\">\n        Click on the search icon button in the nav bar (top right) to trigger the global search.\n        \u003Cbr \u002F>\n        \u003Cbr \u002F>\n        If there are more results than 10, a \"Show all results\" button will be displayed at the end\n        of the search results.\n      \u003C\u002FOnyxInfoCard>\n\n      \u003C!-- your page content would go here... -->\n    \u003C\u002FOnyxPageLayout>\n\n    \u003COnyxGlobalSearch v-model:open=\"isOpen\" v-model=\"searchTerm\" :loading=\"isLoading\">\n      \u003C!-- show skeleton while search results are loading -->\n      \u003COnyxGlobalSearchGroup v-if=\"isLoading\" label=\"Search results\" skeleton \u002F>\n\n      \u003Ctemplate v-else>\n        \u003COnyxGlobalSearchGroup\n          v-for=\"group in searchGroups\"\n          :key=\"group.label\"\n          :label=\"group.label\"\n        >\n          \u003COnyxGlobalSearchOption\n            v-for=\"option in group.options\"\n            :key=\"option.value\"\n            v-bind=\"option\"\n          \u002F>\n        \u003C\u002FOnyxGlobalSearchGroup>\n      \u003C\u002Ftemplate>\n\n      \u003C!--\n          The #endOfList slot provides the 'getOptionProps' helper and 'activeValue' state.\n          - Binding 'getOptionProps' with a unique identifier is required for accessibility (ARIA roles\u002FIDs)\n            and to enable keyboard navigation (arrow keys + enter).\n          - 'activeValue' can be used to implement custom conditional logic or styling.\n\n          If you use a component other than OnyxButton, you must implement the selection styling yourself using the [aria-selected=\"true\"] CSS selector.\n      -->\n      \u003Ctemplate v-if=\"showMoreButton && !isLoading\" #endOfList=\"{ getOptionProps }\">\n        \u003C!-- you can e.g. either link to a dedicated search results page here or show all results inside the global search itself -->\n        \u003COnyxButton\n          v-bind=\"getOptionProps('show-all')\"\n          label=\"Show all results\"\n          mode=\"plain\"\n          class=\"show-all-button\"\n          :icon=\"iconArrowSmallRight\"\n          icon-position=\"right\"\n          link=\"#search-results-page\"\n        \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxGlobalSearch>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"id":2389,"title":832,"titles":2390,"content":2391,"level":9},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch",[],"The search component provides a straightforward text search functionality, allowing users to type in a keyword or phrase and receive results that directly match their input. It can optionally include additional filters, e.g. when working with complex tables.",{"id":2393,"title":400,"titles":2394,"content":367,"level":19},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#examples",[832],{"id":2396,"title":439,"titles":2397,"content":2398,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#basic",[832,400],"A basic search supports the user to enter a search text. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableSearch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch v-model=\"value\" placeholder=\"Search...\" \u002F>\n\u003C\u002Ftemplate>",{"id":2400,"title":1322,"titles":2401,"content":2402,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#shortcut",[832,400],"When enabling the shortcut, the keyboard can be used to focus the search. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableSearch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch v-model=\"value\" with-shortcut \u002F>\n\u003C\u002Ftemplate>",{"id":2404,"title":2405,"titles":2406,"content":2407,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#visual-styles","Visual styles",[832,400],"Multiple visual styles are supported to customize the search, depending on where it is placed, e.g. inside a sidebar. Tinted Use the tinted search when the component is used on a blank background. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableSearch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch v-model=\"value\" placeholder=\"Search...\" color=\"tinted\" \u002F>\n\u003C\u002Ftemplate>\nStrong border radius The search can optionally display with a stronger border radius. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableSearch } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst value = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch v-model=\"value\" placeholder=\"Search...\" corner-radius=\"strong\" \u002F>\n\u003C\u002Ftemplate>",{"id":2409,"title":2410,"titles":2411,"content":2412,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#filters","Filters",[832,400],"In addition to the text search, custom additional filters can be displayed. You can use any form or custom elements for this. Underneath Displays the filters underneath \u002F below the main search. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxSelect, OnyxUnstableSearch, SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype FilterState = Partial\u003C{\n  search: string;\n  status: string;\n  category: string;\n}>;\n\nconst filters = ref\u003CFilterState>({});\nconst showFilters = ref(true);\n\nconst statusOptions = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\" },\n] satisfies SelectOption[];\n\nconst categoryOptions = [\n  { value: \"documents\", label: \"Documents\" },\n  { value: \"images\", label: \"Images\" },\n  { value: \"videos\", label: \"Videos\" },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch v-model:show-filters=\"showFilters\" v-model=\"filters.search\" class=\"search\">\n    \u003COnyxSelect\n      v-model=\"filters.status\"\n      class=\"select\"\n      :label=\"{ label: 'Status', hidden: true }\"\n      :options=\"statusOptions\"\n      placeholder=\"Select status\"\n      list-label=\"Available status\"\n    \u002F>\n    \u003COnyxSelect\n      v-model=\"filters.category\"\n      class=\"select\"\n      :label=\"{ label: 'Category', hidden: true }\"\n      :options=\"categoryOptions\"\n      placeholder=\"Select category\"\n      list-label=\"Available categories\"\n    \u002F>\n    \u003COnyxButton label=\"Clear\" @click=\"filters = {}\" \u002F>\n  \u003C\u002FOnyxUnstableSearch>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.search {\n  --onyx-search-input-width: 20rem;\n}\n.select {\n  width: 16rem;\n}\n\u003C\u002Fstyle>\nInline Displays the filters inline \u002F beside the main search. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxSelect, OnyxUnstableSearch, type SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype FilterState = Partial\u003C{\n  search: string;\n  status: string;\n  category: string;\n}>;\n\nconst filters = ref\u003CFilterState>({});\nconst showFilters = ref(true);\n\nconst statusOptions = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\" },\n] satisfies SelectOption[];\n\nconst categoryOptions = [\n  { value: \"documents\", label: \"Documents\" },\n  { value: \"images\", label: \"Images\" },\n  { value: \"videos\", label: \"Videos\" },\n] satisfies SelectOption[];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch\n    v-model:show-filters=\"showFilters\"\n    v-model=\"filters.search\"\n    filter-position=\"inline\"\n  >\n    \u003COnyxSelect\n      v-model=\"filters.status\"\n      class=\"select\"\n      :label=\"{ label: 'Status', hidden: true }\"\n      :options=\"statusOptions\"\n      placeholder=\"Select status\"\n      list-label=\"Available status\"\n    \u002F>\n    \u003COnyxSelect\n      v-model=\"filters.category\"\n      class=\"select\"\n      :label=\"{ label: 'Category', hidden: true }\"\n      :options=\"categoryOptions\"\n      placeholder=\"Select category\"\n      list-label=\"Available categories\"\n    \u002F>\n    \u003COnyxButton label=\"Clear\" @click=\"filters = {}\" \u002F>\n  \u003C\u002FOnyxUnstableSearch>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.select {\n  width: 16rem;\n}\n\u003C\u002Fstyle>\nModal Displays the filters inside a dedicated modal. \u003Cscript lang=\"ts\" setup>\nimport { OnyxButton, OnyxSelect, OnyxUnstableSearch, type SelectOption } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype FilterState = Partial\u003C{\n  search: string;\n  status: string;\n  category: string;\n}>;\n\nconst filters = ref\u003CFilterState>({});\nconst showFilters = ref(false);\n\nconst statusOptions = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\" },\n] satisfies SelectOption[];\n\nconst categoryOptions = [\n  { value: \"documents\", label: \"Documents\" },\n  { value: \"images\", label: \"Images\" },\n  { value: \"videos\", label: \"Videos\" },\n] satisfies SelectOption[];\n\nconst handleClear = () => {\n  filters.value = {};\n  showFilters.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch\n    v-model:show-filters=\"showFilters\"\n    v-model=\"filters.search\"\n    filter-position=\"modal\"\n  >\n    \u003COnyxSelect\n      v-model=\"filters.status\"\n      :label=\"{ label: 'Status', hidden: true }\"\n      :options=\"statusOptions\"\n      placeholder=\"Select status\"\n      list-label=\"Available status\"\n    \u002F>\n    \u003COnyxSelect\n      v-model=\"filters.category\"\n      :label=\"{ label: 'Category', hidden: true }\"\n      :options=\"categoryOptions\"\n      placeholder=\"Select category\"\n      list-label=\"Available categories\"\n    \u002F>\n    \u003COnyxButton label=\"Clear\" color=\"neutral\" @click=\"handleClear\" \u002F>\n  \u003C\u002FOnyxUnstableSearch>\n\u003C\u002Ftemplate>\nSidebar Displays the filters inside a dedicated temporary sidebar. \u003Cscript lang=\"ts\" setup>\nimport {\n  OnyxButton,\n  OnyxSelect,\n  OnyxUnstableSearch,\n  type SelectOption,\n  OnyxSidebar,\n} from \"sit-onyx\";\nimport { ref } from \"vue\";\n\ntype FilterState = Partial\u003C{\n  search: string;\n  status: string;\n  category: string;\n}>;\n\nconst filters = ref\u003CFilterState>({});\nconst showFilters = ref(false);\n\nconst statusOptions = [\n  { value: \"active\", label: \"Active\" },\n  { value: \"pending\", label: \"Pending\" },\n  { value: \"archived\", label: \"Archived\" },\n] satisfies SelectOption[];\n\nconst categoryOptions = [\n  { value: \"documents\", label: \"Documents\" },\n  { value: \"images\", label: \"Images\" },\n  { value: \"videos\", label: \"Videos\" },\n] satisfies SelectOption[];\n\nconst handleClear = () => {\n  filters.value = {};\n  showFilters.value = false;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003COnyxUnstableSearch v-model:show-filters=\"showFilters\" v-model=\"filters.search\" \u002F>\n\n    \u003COnyxSidebar\n      label=\"Filters\"\n      :temporary=\"{ open: showFilters }\"\n      alignment=\"right\"\n      @close=\"showFilters = false\"\n    >\n      \u003Cdiv class=\"onyx-grid onyx-grid-layout\">\n        \u003COnyxSelect\n          v-model=\"filters.status\"\n          class=\"onyx-grid-span-4\"\n          :label=\"{ label: 'Status', hidden: true }\"\n          :options=\"statusOptions\"\n          placeholder=\"Select status\"\n          list-label=\"Available status\"\n        \u002F>\n        \u003COnyxSelect\n          v-model=\"filters.category\"\n          class=\"onyx-grid-span-4\"\n          :label=\"{ label: 'Category', hidden: true }\"\n          :options=\"categoryOptions\"\n          placeholder=\"Select category\"\n          list-label=\"Available categories\"\n        \u002F>\n      \u003C\u002Fdiv>\n\n      \u003Ctemplate #footer>\n        \u003COnyxButton label=\"Clear\" color=\"neutral\" @click=\"handleClear\" \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxSidebar>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>",{"id":2414,"title":574,"titles":2415,"content":2416,"level":84},"\u002Fcomponents\u002Fsearch-and-filter\u002Fsearch#skeleton",[832,400],"Use the skeleton on initial page load while the data for the search is currently loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxUnstableSearch } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxUnstableSearch skeleton \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":2418,"title":2419,"titles":2420,"content":2421,"level":9},"\u002Fcomponents\u002Flayouts\u002Fapp-layout","App layout",[],"The app layout provides the outer application shell, establishing viewport bounds, top-level scroll containers, and mounting points for global services like toasts and notifications. We strongly recommend mounting OnyxAppLayout once at the root of your application (typically App.vue).",{"id":2423,"title":400,"titles":2424,"content":367,"level":19},"\u002Fcomponents\u002Flayouts\u002Fapp-layout#examples",[2419],{"id":2426,"title":439,"titles":2427,"content":2428,"level":84},"\u002Fcomponents\u002Flayouts\u002Fapp-layout#basic",[2419,400],"A standard application shell includes an OnyxNavBar slot and a default slot containing the page content wrapped in OnyxPageLayout. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Nav bar\" :logo-url>\n        \u003COnyxNavItem label=\"Page 1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout> This is the main page content. \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2430,"title":2431,"titles":2432,"content":2433,"level":84},"\u002Fcomponents\u002Flayouts\u002Fapp-layout#vertical-navigation","Vertical navigation",[2419,400],"The layout also accommodates vertical navigation bars. See OnyxNavBar for vertical mode configuration. \u003Cscript lang=\"ts\" setup>\nimport logoUrl from \"@sit-onyx\u002Fassets\u002Fonyx-brand\u002Fsignet.svg\";\nimport { iconLogin, iconLogout, iconPlaceholder, iconSearch, iconSettings } from \"@sit-onyx\u002Ficons\";\nimport {\n  ColorSchemeValue,\n  ONYX_BREAKPOINTS,\n  OnyxAppLayout,\n  OnyxColorSchemeMenuItem,\n  OnyxMenuItem,\n  OnyxNavBar,\n  OnyxNavItem,\n  OnyxUnstableNavButton,\n  OnyxUserMenu,\n  useResizeObserver,\n} from \"sit-onyx\";\nimport { computed, ref } from \"vue\";\n\nconst user = ref\u003C{ name: string } | undefined>({ name: \"Jane Doe\" });\nconst colorScheme = ref\u003CColorSchemeValue>(\"auto\");\n\nconst handleLogin = () => {\n  \u002F\u002F your logout logic here...\n  user.value = { name: \"Jane Doe\" };\n};\n\nconst handleLogout = () => {\n  \u002F\u002F your logout logic here...\n  user.value = undefined;\n};\n\nconst { width: viewportWidth } = useResizeObserver();\n\n\u002F**\n * Whether to use a horizontal nav bar for small \u002F mobile viewports.\n *\u002F\nconst isMobile = computed(() => viewportWidth.value \u003C= ONYX_BREAKPOINTS.xs);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout :nav-bar-alignment=\"isMobile ? 'top' : 'left'\">\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" :logo-url :orientation=\"isMobile ? 'horizontal' : 'vertical'\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" :icon=\"iconPlaceholder\" \u002F>\n\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" :icon=\"iconPlaceholder\">\n          \u003Ctemplate #children>\n            \u003COnyxNavItem label=\"Child 1\" link=\"\u002Fpage-2\u002F1\" \u002F>\n            \u003COnyxNavItem label=\"Child 2\" link=\"\u002Fpage-2\u002F2\" \u002F>\n            \u003COnyxNavItem label=\"Child 3\" link=\"\u002Fpage-2\u002F3\" \u002F>\n          \u003C\u002Ftemplate>\n        \u003C\u002FOnyxNavItem>\n\n        \u003Ctemplate #globalContextArea>\n          \u003COnyxUnstableNavButton label=\"Search\" :icon=\"iconSearch\" hide-label \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate #contextArea>\n          \u003COnyxUserMenu v-if=\"user\" full-name=\"Jane Doe\" description=\"Description\" position=\"right\">\n            \u003COnyxMenuItem label=\"Settings\" :icon=\"iconSettings\" link=\"\u002Fsettings\" \u002F>\n            \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n            \u003COnyxMenuItem label=\"Logout\" :icon=\"iconLogout\" color=\"danger\" @click=\"handleLogout\" \u002F>\n\n            \u003Ctemplate #footer>\n              App version\n              \u003Cspan class=\"onyx-text--monospace\">1.0.0\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n          \u003C\u002FOnyxUserMenu>\n\n          \u003COnyxUnstableNavButton\n            v-else\n            label=\"Login\"\n            :icon=\"iconLogin\"\n            color=\"primary\"\n            @click=\"handleLogin\"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":2435,"title":2436,"titles":2437,"content":2438,"level":9},"\u002Fcomponents\u002Flayouts\u002Fpage-layout","Page layout",[],"The page layout structures a single page of the application and should be used on every page. It supports slots for common page layouts like sidebar, footer and more. It should be used together with the app layout component.",{"id":2440,"title":400,"titles":2441,"content":367,"level":19},"\u002Fcomponents\u002Flayouts\u002Fpage-layout#examples",[2436],{"id":2443,"title":439,"titles":2444,"content":2445,"level":84},"\u002Fcomponents\u002Flayouts\u002Fpage-layout#basic",[2436,400],"For a basic page, simply place your content directly inside of the page layout. Padded The page content is padded automatically by default depending on the screen breakpoint. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout> Place your main page content here... \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nNo padding Use the noPadding property to remove the default page padding if you want to place full with content such as a hero or footer. Use the onyx-grid-layout CSS class to then apply the padding to the part of the page that should be padded. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout no-padding>\n      \u003Csection class=\"hero\">\u003C\u002Fsection>\n\n      \u003Cdiv class=\"onyx-grid-layout\">Place your main page content here...\u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.hero {\n  background-color: var(--onyx-color-base-background-blank);\n  border-bottom: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);\n  height: 8rem;\n  background-image: url(\"https:\u002F\u002Fpicsum.photos\u002Fid\u002F13\u002F1920\u002F400\");\n  background-size: cover;\n  background-position: center;\n}\n\u003C\u002Fstyle>",{"id":2447,"title":2190,"titles":2448,"content":2449,"level":84},"\u002Fcomponents\u002Flayouts\u002Fpage-layout#sidebar",[2436,400],"A sidebar can be displayed on either side of the application. Please refer to our sidebar component for further information. Left sidebar \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout, OnyxSidebar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar\">\n          \u003C!-- place your sidebar content here... -->\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      Place your main page content here...\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nRight sidebar \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout, OnyxSidebar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebarRight>\n        \u003COnyxSidebar label=\"Example sidebar\" alignment=\"right\">\n          \u003C!-- place your sidebar content here... -->\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      Place your main page content here...\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2451,"title":2452,"titles":2453,"content":2454,"level":84},"\u002Fcomponents\u002Flayouts\u002Fpage-layout#footer","Footer",[2436,400],"The footer can be used to e.g. display page-related interactions such as a save button when working with forms or global information such as legal information. Fixed Use the footer slot to place fixed content such as a bottom bar that is always visible, even if the page content scrolls. You can e.g. place the submit button for a form here. \u003Cscript setup lang=\"ts\">\nimport { OnyxAppLayout, OnyxBottomBar, OnyxButton, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      Place your main page content here...\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Button\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nInline To add traditional footer content such as legal information that is placed below the page content but is not fixed so it shows at the end of the scrollable content, do not use the footer slot but place the footer directly after the page content. \u003Cscript setup lang=\"ts\">\nimport { OnyxAppLayout, OnyxLink, OnyxPageLayout } from \"sit-onyx\";\n\nconst currentYear = new Date().getFullYear();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout no-padding>\n      \u003Cdiv class=\"onyx-grid-layout\">\n        \u003C!-- using \"onyx-grid-layout\" because we add \"no-padding\" on the page layout so the footer can be full width -->\n        Place your main page content here...\n      \u003C\u002Fdiv>\n\n      \u003Cfooter class=\"footer\">\n        \u003C!-- we are using the \"onyx-grid-layout\" class here to sync the footer with the global application max-width, alignment and horizontal padding -->\n        \u003Cdiv class=\"footer__content onyx-grid-layout\">\n          \u003Cdiv class=\"footer__brand\">© {{ currentYear }} Example Brand Name\u003C\u002Fdiv>\n\n          \u003Cdiv class=\"footer__links\">\n            \u003COnyxLink href=\"#\">Link\u003C\u002FOnyxLink>\n            \u003COnyxLink href=\"#\">Link\u003C\u002FOnyxLink>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ffooter>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.footer {\n  border-top: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral);\n  background-color: var(--onyx-color-base-background-blank);\n\n  &__content {\n    padding-block: var(--onyx-density-sm);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: var(--onyx-density-md);\n    font-size: var(--onyx-font-size-sm);\n    line-height: var(--onyx-font-line-height-sm);\n  }\n\n  &__links {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--onyx-density-sm);\n  }\n}\n\u003C\u002Fstyle>\nSidebar with full width footer When using both a sidebar and a footer, the footer is placed across the full width by default. \u003Cscript setup lang=\"ts\">\nimport { OnyxAppLayout, OnyxBottomBar, OnyxButton, OnyxPageLayout, OnyxSidebar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout>\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar\">\n          \u003C!-- place your sidebar content here... -->\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      Place your main page content here...\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Button\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nSidebar with page footer When using both a sidebar and a footer, set the footer-alignment=\"page\" property to place the footer only below the page content but next to the sidebar. \u003Cscript setup lang=\"ts\">\nimport { OnyxAppLayout, OnyxBottomBar, OnyxButton, OnyxPageLayout, OnyxSidebar } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout footer-alignment=\"page\">\n      \u003Ctemplate #sidebar>\n        \u003COnyxSidebar label=\"Example sidebar\">\n          \u003C!-- place your sidebar content here... -->\n        \u003C\u002FOnyxSidebar>\n      \u003C\u002Ftemplate>\n\n      \u003C!-- page content -->\n      Place your main page content here...\n\n      \u003Ctemplate #footer>\n        \u003COnyxBottomBar>\n          \u003COnyxButton label=\"Button\" \u002F>\n        \u003C\u002FOnyxBottomBar>\n      \u003C\u002Ftemplate>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":2456,"title":574,"titles":2457,"content":2458,"level":84},"\u002Fcomponents\u002Flayouts\u002Fpage-layout#skeleton",[2436,400],"Use the skeleton on the page layout on initial page load while the data for the page is loading to automatically set all components within the page to skeleton. You can exclude components from the skeleton by explicitly disabling the skeleton for those components. \u003Cscript lang=\"ts\" setup>\nimport {\n  OnyxAppLayout,\n  OnyxButton,\n  OnyxForm,\n  OnyxHeadline,\n  OnyxInput,\n  OnyxPageLayout,\n  OnyxStepper,\n} from \"sit-onyx\";\n\nconst handleSubmit = () => {\n  \u002F\u002F implement your submit logic here...\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003COnyxPageLayout skeleton>\n      \u003Cdiv class=\"page__content\">\n        \u003Cdiv class=\"page__headline\">\n          \u003COnyxHeadline is=\"h1\" :skeleton=\"false\"> Example headline \u003C\u002FOnyxHeadline>\n          \u003COnyxButton label=\"Button\" \u002F>\n        \u003C\u002Fdiv>\n\n        \u003COnyxForm class=\"onyx-grid\" @submit.prevent=\"handleSubmit\">\n          \u003COnyxInput class=\"onyx-grid-span-4\" label=\"Name\" \u002F>\n          \u003COnyxStepper class=\"onyx-grid-span-4\" label=\"Age\" \u002F>\n        \u003C\u002FOnyxForm>\n      \u003C\u002Fdiv>\n    \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.page {\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--onyx-density-2xl);\n  }\n\n  &__headline {\n    display: flex;\n    align-items: center;\n    gap: var(--onyx-density-md);\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n}\n\u003C\u002Fstyle> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"id":2460,"title":2461,"titles":2462,"content":2463,"level":9},"\u002Fcomponents\u002Fdocs\u002Fmarkdown","Markdown",[],"Displays markdown content using onyx components, especially useful when working on documentation applications or displaying responses from AI integrations. Common markdown elements such as headlines, links, tables and more will be replaced with corresponding onyx components and styles.",{"id":2465,"title":22,"titles":2466,"content":2467,"level":19},"\u002Fcomponents\u002Fdocs\u002Fmarkdown#installation",[2461],"Our markdown component is based on Comark. Follow the steps below to get started: Install dependencies Install the npm package into your project: Import styles Next, import the styles. We recommend to import them globally in the root of your application: Import the styles in your main.ts file. Make sure to import them after the regular sit-onyx\u002Fstyle.css styles and before any of your components (usually the App.vue file). \u002F\u002F make sure to import the Comark styles AFTER the general \"sit-onyx\" styles\n\u002F\u002F import \"sit-onyx\u002Fstyle.css\";\nimport \"@sit-onyx\u002Fcomark\u002Fstyle.css\"\nImport the styles in your Nuxt config: export default defineNuxtConfig({\n    css: [\"@sit-onyx\u002Fcomark\u002Fstyle.css\"],\n});",{"id":2469,"title":400,"titles":2470,"content":367,"level":19},"\u002Fcomponents\u002Fdocs\u002Fmarkdown#examples",[2461],{"id":2472,"title":439,"titles":2473,"content":2474,"level":84},"\u002Fcomponents\u002Fdocs\u002Fmarkdown#basic",[2461,400],"The component renders the passed markdown which can also be changed dynamically. For more details, refer to the Comark documentation. \u003Cscript lang=\"ts\" setup>\nimport { OnyxMarkdown } from \"@sit-onyx\u002Fcomark\";\n\nconst markdown = `# Markdown example\n\nThis is **markdown** content rendered with [Comark](https:\u002F\u002Fcomark.dev) and [Onyx](https:\u002F\u002Fonyx.schwarz).\n\n---\n\n## Table\n\nIt can also render tables:\n\n| Column A | Column B | Column C |\n| -------- | :------: | -------: |\n| Test     |   Test   |     Test |\n| Test     |   Test   |     Test |\n\n## Accordions\n\n\u003Cdetails>\n\u003Csummary>Example accordion label\u003C\u002Fsummary>\nAccordion content here...this can also be markdown again.\n\u003C\u002Fdetails>\n`;\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSuspense>\n    \u003COnyxMarkdown>{{ markdown }}\u003C\u002FOnyxMarkdown>\n  \u003C\u002FSuspense>\n\u003C\u002Ftemplate> html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":2476,"title":2477,"titles":2478,"content":2479,"level":9},"\u002Fcomponents\u002Fdocs\u002Fmarkdown-document","Markdown document",[],"Renders a pre-parsed markdown document without any parsing. Use it when you parse on the server, in a build step, or via an API, so no parser or plugin code is shipped to the browser. If you need to render raw markdown instead, use our markdown component.",{"id":2481,"title":22,"titles":2482,"content":2483,"level":19},"\u002Fcomponents\u002Fdocs\u002Fmarkdown-document#installation",[2477],"If not already installed, please follow the installation guide for our markdown components.",{"id":2485,"title":400,"titles":2486,"content":367,"level":19},"\u002Fcomponents\u002Fdocs\u002Fmarkdown-document#examples",[2477],{"id":2488,"title":439,"titles":2489,"content":2490,"level":84},"\u002Fcomponents\u002Fdocs\u002Fmarkdown-document#basic",[2477,400],"Parse on the server Parse your raw markdown content on the server, API or during a build step. The actual content can be received from any custom source such as a file, database or more. import { createMarkdownParser } from 'comark'\nimport { readFile } from 'node:fs\u002Fpromises'\n\nconst parse = createMarkdownParser()\n\n\u002F\u002F In your server handler\nexport async function getContentDocument(slug: string) {\n  const markdown = await readFile(`content\u002F${slug}.md`, 'utf-8')\n  return parse(markdown)\n}\nRender on the client Load the pre-parsed markdown document from the server and render it using the OnyxMarkdownDocument component. \u003Cscript lang=\"ts\" setup>\nimport { OnyxMarkdownDocument } from '@sit-onyx\u002Fcomark'\n\nconst { slug } = defineProps\u003C{ slug: string }>()\n\nconst res = await fetch(`\u002Fapi\u002Fcontent\u002F${slug}`)\nconst document = await res.json()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxMarkdownDocument :value=\"document\" \u002F>\n\u003C\u002Ftemplate> html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":2492,"title":2493,"titles":2494,"content":2495,"level":9},"\u002Fcomponents\u002Fdocs\u002Fcode-tabs","Code tabs",[],"Displays one or multiple code snippets in tabbed views. This component does not perform syntax highlighting. To add syntax highlighting, use a tool like Shiki or Nuxt Content and pass the formatted HTML into the tab slot.",{"id":2497,"title":400,"titles":2498,"content":367,"level":19},"\u002Fcomponents\u002Fdocs\u002Fcode-tabs#examples",[2493],{"id":2500,"title":439,"titles":2501,"content":2502,"level":84},"\u002Fcomponents\u002Fdocs\u002Fcode-tabs#basic",[2493,400],"Display code tabs with a label and optional icon. Users can copy the active snippet using the top-right copy action. \u003Cscript lang=\"ts\" setup>\nimport { iconBrowserTerminal } from \"@sit-onyx\u002Ficons\";\nimport { OnyxCodeTab, OnyxCodeTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedTab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCodeTabs v-model=\"selectedTab\" label=\"Example code snippets\">\n    \u003COnyxCodeTab\n      code=\"export function sayHello(message: string) {\n  console.log(message);\n}\"\n      label=\"index.ts\"\n      language=\"ts\"\n      value=\"tab-1\"\n    \u002F>\n\n    \u003COnyxCodeTab\n      code=\".some-class {\n  color: var(--onyx-color-text-icons-neutral-intense);\n}\"\n      label=\"style.css\"\n      language=\"css\"\n      value=\"tab-2\"\n    \u002F>\n\n    \u003COnyxCodeTab\n      code='\u003Cscript lang=\"ts\" setup>\nimport { ref } from \"vue\";\n\nconst message = ref(\"Hello World\");\n\u003C\u002Fscript>\n\n\u003Ctemplate> {{ message }} \u003C\u002Ftemplate>'\n      :icon=\"iconBrowserTerminal\"\n      label=\"Component.vue\"\n      language=\"vue\"\n      value=\"tab-3\"\n    \u002F>\n  \u003C\u002FOnyxCodeTabs>\n\u003C\u002Ftemplate>",{"id":2504,"title":574,"titles":2505,"content":2506,"level":84},"\u002Fcomponents\u002Fdocs\u002Fcode-tabs#skeleton",[2493,400],"Use the skeleton placeholder while code snippets are loading. \u003Cscript lang=\"ts\" setup>\nimport { OnyxCodeTab, OnyxCodeTabs } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst selectedTab = ref(\"tab-1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxCodeTabs v-model=\"selectedTab\" label=\"Example code snippets\" skeleton>\n    \u003COnyxCodeTab code=\"console.log('Hello World');\" label=\"index.ts\" language=\"ts\" value=\"tab-1\" \u002F>\n    \u003COnyxCodeTab code=\"console.log('Hello World');\" label=\"index.ts\" language=\"ts\" value=\"tab-2\" \u002F>\n    \u003COnyxCodeTab code=\"console.log('Hello World');\" label=\"index.ts\" language=\"ts\" value=\"tab-3\" \u002F>\n  \u003C\u002FOnyxCodeTabs>\n\u003C\u002Ftemplate> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html 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}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);}",[2508],{"title":2509,"status":2510,"componentName":2510,"sidebar":2511,"path":2513,"stem":2514,"children":2515,"page":2545},"Components",null,{"root":2512},true,"\u002Fcomponents","components",[2516,2546,2623,2675,2695,2734,2763,2785,2840,2855,2880,2894],{"title":1470,"path":2517,"stem":2518,"children":2519,"page":2545},"\u002Fcomponents\u002Fbuttons","components\u002F01.buttons",[2520,2525,2530,2535,2540],{"title":395,"path":394,"stem":2521,"children":2522,"status":2510,"componentName":2524},"components\u002F01.buttons\u002Fbutton\u002Findex",[2523],{"title":395,"path":394,"stem":2521,"status":2510,"componentName":2524},"OnyxButton",{"title":431,"path":430,"stem":2526,"children":2527,"status":2510,"componentName":2529},"components\u002F01.buttons\u002Ffab\u002Findex",[2528],{"title":431,"path":430,"stem":2526,"status":2510,"componentName":2529},"OnyxFAB",{"title":469,"path":468,"stem":2531,"children":2532,"status":2510,"componentName":2534},"components\u002F01.buttons\u002Ficon-button\u002Findex",[2533],{"title":469,"path":468,"stem":2531,"status":2510,"componentName":2534},"OnyxIconButton",{"title":490,"path":489,"stem":2536,"children":2537,"status":2510,"componentName":2539},"components\u002F01.buttons\u002Fsplit-button\u002Findex",[2538],{"title":490,"path":489,"stem":2536,"status":2510,"componentName":2539},"OnyxSplitButton",{"title":523,"path":522,"stem":2541,"children":2542,"status":2510,"componentName":2544},"components\u002F01.buttons\u002Fsystem-button\u002Findex",[2543],{"title":523,"path":522,"stem":2541,"status":2510,"componentName":2544},"OnyxSystemButton",false,{"title":2547,"path":2548,"stem":2549,"children":2550,"page":2545},"Form Elements","\u002Fcomponents\u002Fform-elements","components\u002F02.form-elements",[2551,2556,2562,2568,2573,2578,2583,2588,2593,2598,2603,2608,2613,2618],{"title":548,"path":547,"stem":2552,"children":2553,"status":2510,"componentName":2555},"components\u002F02.form-elements\u002Fcheckbox-group\u002Findex",[2554],{"title":548,"path":547,"stem":2552,"status":2510,"componentName":2555},"OnyxCheckboxGroup",{"title":589,"path":588,"stem":2557,"children":2558,"status":2560,"componentName":2561},"components\u002F02.form-elements\u002Fdate-picker-v2\u002Findex",[2559],{"title":589,"path":588,"stem":2557,"status":2560,"componentName":2561},"experimental","OnyxDatePickerV2",{"title":641,"path":640,"stem":2563,"children":2564,"status":2566,"componentName":2567},"components\u002F02.form-elements\u002Fdate-picker\u002Findex",[2565],{"title":641,"path":640,"stem":2563,"status":2566,"componentName":2567},"deprecated","OnyxDatePicker",{"title":659,"path":658,"stem":2569,"children":2570,"status":2510,"componentName":2572},"components\u002F02.form-elements\u002Ffile-upload\u002Findex",[2571],{"title":659,"path":658,"stem":2569,"status":2510,"componentName":2572},"OnyxFileUpload",{"title":700,"path":699,"stem":2574,"children":2575,"status":2510,"componentName":2577},"components\u002F02.form-elements\u002Fform\u002Findex",[2576],{"title":700,"path":699,"stem":2574,"status":2510,"componentName":2577},"OnyxForm",{"title":736,"path":735,"stem":2579,"children":2580,"status":2510,"componentName":2582},"components\u002F02.form-elements\u002Finput\u002Findex",[2581],{"title":736,"path":735,"stem":2579,"status":2510,"componentName":2582},"OnyxInput",{"title":784,"path":783,"stem":2584,"children":2585,"status":2510,"componentName":2587},"components\u002F02.form-elements\u002Fradio-group\u002Findex",[2586],{"title":784,"path":783,"stem":2584,"status":2510,"componentName":2587},"OnyxRadioGroup",{"title":816,"path":815,"stem":2589,"children":2590,"status":2510,"componentName":2592},"components\u002F02.form-elements\u002Fselect\u002Findex",[2591],{"title":816,"path":815,"stem":2589,"status":2510,"componentName":2592},"OnyxSelect",{"title":872,"path":871,"stem":2594,"children":2595,"status":2510,"componentName":2597},"components\u002F02.form-elements\u002Fslider\u002Findex",[2596],{"title":872,"path":871,"stem":2594,"status":2510,"componentName":2597},"OnyxSlider",{"title":911,"path":910,"stem":2599,"children":2600,"status":2510,"componentName":2602},"components\u002F02.form-elements\u002Fstepper\u002Findex",[2601],{"title":911,"path":910,"stem":2599,"status":2510,"componentName":2602},"OnyxStepper",{"title":949,"path":948,"stem":2604,"children":2605,"status":2510,"componentName":2607},"components\u002F02.form-elements\u002Fswitch\u002Findex",[2606],{"title":949,"path":948,"stem":2604,"status":2510,"componentName":2607},"OnyxSwitch",{"title":982,"path":981,"stem":2609,"children":2610,"status":2560,"componentName":2612},"components\u002F02.form-elements\u002Ftext-editor\u002Findex",[2611],{"title":982,"path":981,"stem":2609,"status":2560,"componentName":2612},"OnyxTextEditor",{"title":1028,"path":1027,"stem":2614,"children":2615,"status":2510,"componentName":2617},"components\u002F02.form-elements\u002Ftextarea\u002Findex",[2616],{"title":1028,"path":1027,"stem":2614,"status":2510,"componentName":2617},"OnyxTextarea",{"title":1061,"path":1060,"stem":2619,"children":2620,"status":2560,"componentName":2622},"components\u002F02.form-elements\u002Ftime-picker\u002Findex",[2621],{"title":1061,"path":1060,"stem":2619,"status":2560,"componentName":2622},"OnyxTimePicker",{"title":439,"path":2624,"stem":2625,"children":2626,"page":2545},"\u002Fcomponents\u002Fbasic","components\u002F03.basic",[2627,2632,2637,2642,2647,2652,2656,2660,2665,2670],{"title":1116,"path":1115,"stem":2628,"children":2629,"status":2510,"componentName":2631},"components\u002F03.basic\u002Faccordion\u002Findex",[2630],{"title":1116,"path":1115,"stem":2628,"status":2510,"componentName":2631},"OnyxAccordion",{"title":1147,"path":1146,"stem":2633,"children":2634,"status":2510,"componentName":2636},"components\u002F03.basic\u002Favatar\u002Findex",[2635],{"title":1147,"path":1146,"stem":2633,"status":2510,"componentName":2636},"OnyxAvatar",{"title":1168,"path":1167,"stem":2638,"children":2639,"status":2510,"componentName":2641},"components\u002F03.basic\u002Fbadge\u002Findex",[2640],{"title":1168,"path":1167,"stem":2638,"status":2510,"componentName":2641},"OnyxBadge",{"title":1189,"path":1188,"stem":2643,"children":2644,"status":2510,"componentName":2646},"components\u002F03.basic\u002Fflag\u002Findex",[2645],{"title":1189,"path":1188,"stem":2643,"status":2510,"componentName":2646},"OnyxIcon",{"title":1221,"path":1220,"stem":2648,"children":2649,"status":2510,"componentName":2651},"components\u002F03.basic\u002Fflyout-menu\u002Findex",[2650],{"title":1221,"path":1220,"stem":2648,"status":2510,"componentName":2651},"OnyxFlyoutMenu",{"title":1252,"path":1251,"stem":2653,"children":2654,"status":2510,"componentName":2646},"components\u002F03.basic\u002Ficon\u002Findex",[2655],{"title":1252,"path":1251,"stem":2653,"status":2510,"componentName":2646},{"title":1280,"path":1279,"stem":2657,"children":2658,"status":2510,"componentName":2510},"components\u002F03.basic\u002Fimage\u002Findex",[2659],{"title":1280,"path":1279,"stem":2657,"status":2510,"componentName":2510},{"title":1306,"path":1305,"stem":2661,"children":2662,"status":2510,"componentName":2664},"components\u002F03.basic\u002Fmenu-item\u002Findex",[2663],{"title":1306,"path":1305,"stem":2661,"status":2510,"componentName":2664},"OnyxMenuItem",{"title":1322,"path":1321,"stem":2666,"children":2667,"status":2560,"componentName":2669},"components\u002F03.basic\u002Fshortcut\u002Findex",[2668],{"title":1322,"path":1321,"stem":2666,"status":2560,"componentName":2669},"OnyxShortcut",{"title":1362,"path":1361,"stem":2671,"children":2672,"status":2510,"componentName":2674},"components\u002F03.basic\u002Ftag\u002Findex",[2673],{"title":1362,"path":1361,"stem":2671,"status":2510,"componentName":2674},"OnyxTag",{"title":2676,"path":2677,"stem":2678,"children":2679,"page":2545},"Cards","\u002Fcomponents\u002Fcards","components\u002F04.cards",[2680,2685,2690],{"title":1386,"path":1385,"stem":2681,"children":2682,"status":2510,"componentName":2684},"components\u002F04.cards\u002Fcard\u002Findex",[2683],{"title":1386,"path":1385,"stem":2681,"status":2510,"componentName":2684},"OnyxCard",{"title":1418,"path":1417,"stem":2686,"children":2687,"status":2510,"componentName":2689},"components\u002F04.cards\u002Ffile-card\u002Findex",[2688],{"title":1418,"path":1417,"stem":2686,"status":2510,"componentName":2689},"OnyxFileCard",{"title":1449,"path":1448,"stem":2691,"children":2692,"status":2510,"componentName":2694},"components\u002F04.cards\u002Finfo-card\u002Findex",[2693],{"title":1449,"path":1448,"stem":2691,"status":2510,"componentName":2694},"OnyxInfoCard",{"title":2696,"path":2697,"stem":2698,"children":2699,"page":2545},"Data","\u002Fcomponents\u002Fdata","components\u002F05.data",[2700,2705,2709,2714,2719,2724,2729],{"title":1480,"path":1479,"stem":2701,"children":2702,"status":2510,"componentName":2704},"components\u002F05.data\u002Fcalendar\u002Findex",[2703],{"title":1480,"path":1479,"stem":2701,"status":2510,"componentName":2704},"OnyxCalendar",{"title":1516,"path":1515,"stem":2706,"children":2707,"status":2510,"componentName":2510},"components\u002F05.data\u002Fchart\u002Findex",[2708],{"title":1516,"path":1515,"stem":2706,"status":2510,"componentName":2510},{"title":1578,"path":1577,"stem":2710,"children":2711,"status":2510,"componentName":2713},"components\u002F05.data\u002Fdata-grid\u002Findex",[2712],{"title":1578,"path":1577,"stem":2710,"status":2510,"componentName":2713},"OnyxDataGrid",{"title":1713,"path":1712,"stem":2715,"children":2716,"status":2510,"componentName":2718},"components\u002F05.data\u002Fempty\u002Findex",[2717],{"title":1713,"path":1712,"stem":2715,"status":2510,"componentName":2718},"OnyxEmpty",{"title":1730,"path":1729,"stem":2720,"children":2721,"status":2510,"componentName":2723},"components\u002F05.data\u002Fitems-per-page\u002Findex",[2722],{"title":1730,"path":1729,"stem":2720,"status":2510,"componentName":2723},"OnyxItemsPerPage",{"title":1629,"path":1745,"stem":2725,"children":2726,"status":2510,"componentName":2728},"components\u002F05.data\u002Fpagination\u002Findex",[2727],{"title":1629,"path":1745,"stem":2725,"status":2510,"componentName":2728},"OnyxPagination",{"title":1775,"path":1774,"stem":2730,"children":2731,"status":2510,"componentName":2733},"components\u002F05.data\u002Ftable\u002Findex",[2732],{"title":1775,"path":1774,"stem":2730,"status":2510,"componentName":2733},"OnyxTable",{"title":2735,"path":2736,"stem":2737,"children":2738,"page":2545},"Feedback","\u002Fcomponents\u002Ffeedback","components\u002F06.feedback",[2739,2744,2749,2754,2758],{"title":1806,"path":1805,"stem":2740,"children":2741,"status":2510,"componentName":2743},"components\u002F06.feedback\u002Falert-modal\u002Findex",[2742],{"title":1806,"path":1805,"stem":2740,"status":2510,"componentName":2743},"OnyxAlertModal",{"title":1818,"path":1817,"stem":2745,"children":2746,"status":2510,"componentName":2748},"components\u002F06.feedback\u002Fdialog\u002Findex",[2747],{"title":1818,"path":1817,"stem":2745,"status":2510,"componentName":2748},"OnyxDialog",{"title":1845,"path":1844,"stem":2750,"children":2751,"status":2510,"componentName":2753},"components\u002F06.feedback\u002Fmodal\u002Findex",[2752],{"title":1845,"path":1844,"stem":2750,"status":2510,"componentName":2753},"OnyxModal",{"title":1865,"path":1864,"stem":2755,"children":2756,"status":2510,"componentName":2510},"components\u002F06.feedback\u002Ftoast\u002Findex",[2757],{"title":1865,"path":1864,"stem":2755,"status":2510,"componentName":2510},{"title":1886,"path":1885,"stem":2759,"children":2760,"status":2510,"componentName":2762},"components\u002F06.feedback\u002Ftooltip\u002Findex",[2761],{"title":1886,"path":1885,"stem":2759,"status":2510,"componentName":2762},"OnyxTooltip",{"title":1960,"path":2764,"stem":2765,"children":2766,"page":2545},"\u002Fcomponents\u002Fnotifications","components\u002F07.notifications",[2767,2771,2776,2781],{"title":1915,"path":1914,"stem":2768,"children":2769,"status":2510,"componentName":2510},"components\u002F07.notifications\u002F01.notification-center\u002Findex",[2770],{"title":1915,"path":1914,"stem":2768,"status":2510,"componentName":2510},{"title":1928,"path":1927,"stem":2772,"children":2773,"status":2510,"componentName":2775},"components\u002F07.notifications\u002Fnotification-card\u002Findex",[2774],{"title":1928,"path":1927,"stem":2772,"status":2510,"componentName":2775},"OnyxNotificationCard",{"title":1948,"path":1947,"stem":2777,"children":2778,"status":2510,"componentName":2780},"components\u002F07.notifications\u002Fnotification-dot\u002Findex",[2779],{"title":1948,"path":1947,"stem":2777,"status":2510,"componentName":2780},"OnyxNotificationDot",{"title":1960,"path":1959,"stem":2782,"children":2783,"status":2510,"componentName":2510},"components\u002F07.notifications\u002Fnotifications\u002Findex",[2784],{"title":1960,"path":1959,"stem":2782,"status":2510,"componentName":2510},{"title":2786,"path":2787,"stem":2788,"children":2789,"page":2545},"Navigation","\u002Fcomponents\u002Fnavigation","components\u002F08.navigation",[2790,2795,2800,2805,2810,2815,2820,2825,2830,2835],{"title":1976,"path":1975,"stem":2791,"children":2792,"status":2510,"componentName":2794},"components\u002F08.navigation\u002Fbottom-bar\u002Findex",[2793],{"title":1976,"path":1975,"stem":2791,"status":2510,"componentName":2794},"OnyxBottomBar",{"title":1996,"path":1995,"stem":2796,"children":2797,"status":2510,"componentName":2799},"components\u002F08.navigation\u002Fbreadcrumb\u002Findex",[2798],{"title":1996,"path":1995,"stem":2796,"status":2510,"componentName":2799},"OnyxBreadcrumb",{"title":2041,"path":2040,"stem":2801,"children":2802,"status":2510,"componentName":2804},"components\u002F08.navigation\u002Fheadline\u002Findex",[2803],{"title":2041,"path":2040,"stem":2801,"status":2510,"componentName":2804},"OnyxHeadline",{"title":2074,"path":2073,"stem":2806,"children":2807,"status":2510,"componentName":2809},"components\u002F08.navigation\u002Flink\u002Findex",[2808],{"title":2074,"path":2073,"stem":2806,"status":2510,"componentName":2809},"OnyxLink",{"title":2086,"path":2085,"stem":2811,"children":2812,"status":2510,"componentName":2814},"components\u002F08.navigation\u002Fnav-bar\u002Findex",[2813],{"title":2086,"path":2085,"stem":2811,"status":2510,"componentName":2814},"OnyxNavBar",{"title":2165,"path":2164,"stem":2816,"children":2817,"status":2510,"componentName":2819},"components\u002F08.navigation\u002Fsegmented-control\u002Findex",[2818],{"title":2165,"path":2164,"stem":2816,"status":2510,"componentName":2819},"OnyxSegmentedControl",{"title":2190,"path":2189,"stem":2821,"children":2822,"status":2510,"componentName":2824},"components\u002F08.navigation\u002Fsidebar\u002Findex",[2823],{"title":2190,"path":2189,"stem":2821,"status":2510,"componentName":2824},"OnyxSidebar",{"title":2217,"path":2216,"stem":2826,"children":2827,"status":2510,"componentName":2829},"components\u002F08.navigation\u002Ftable-of-contents\u002Findex",[2828],{"title":2217,"path":2216,"stem":2826,"status":2510,"componentName":2829},"OnyxTableOfContents",{"title":2233,"path":2232,"stem":2831,"children":2832,"status":2510,"componentName":2834},"components\u002F08.navigation\u002Ftabs\u002Findex",[2833],{"title":2233,"path":2232,"stem":2831,"status":2510,"componentName":2834},"OnyxTabs",{"title":2208,"path":2269,"stem":2836,"children":2837,"status":2510,"componentName":2839},"components\u002F08.navigation\u002Ftree-view\u002Findex",[2838],{"title":2208,"path":2269,"stem":2836,"status":2510,"componentName":2839},"OnyxTreeView",{"title":2841,"path":2842,"stem":2843,"children":2844,"page":2545},"Progress","\u002Fcomponents\u002Fprogress","components\u002F09.progress",[2845,2850],{"title":2297,"path":2296,"stem":2846,"children":2847,"status":2510,"componentName":2849},"components\u002F09.progress\u002Fprogress-item\u002Findex",[2848],{"title":2297,"path":2296,"stem":2846,"status":2510,"componentName":2849},"OnyxProgressItem",{"title":2317,"path":2316,"stem":2851,"children":2852,"status":2510,"componentName":2854},"components\u002F09.progress\u002Fprogress-steps\u002Findex",[2853],{"title":2317,"path":2316,"stem":2851,"status":2510,"componentName":2854},"OnyxProgressSteps",{"title":2856,"status":2510,"componentName":2510,"path":2857,"stem":2858,"children":2859,"page":2545},"Search & Filter","\u002Fcomponents\u002Fsearch-and-filter","components\u002F10.search-and-filter",[2860,2865,2870,2875],{"title":2341,"path":2340,"stem":2861,"children":2862,"status":2510,"componentName":2864},"components\u002F10.search-and-filter\u002Ffilter-badge\u002Findex",[2863],{"title":2341,"path":2340,"stem":2861,"status":2510,"componentName":2864},"OnyxFilterBadge",{"title":2357,"path":2356,"stem":2866,"children":2867,"status":2510,"componentName":2869},"components\u002F10.search-and-filter\u002Ffilter-tag\u002Findex",[2868],{"title":2357,"path":2356,"stem":2866,"status":2510,"componentName":2869},"OnyxFilterTag",{"title":2373,"path":2372,"stem":2871,"children":2872,"status":2874,"componentName":2510},"components\u002F10.search-and-filter\u002Fglobal-search\u002Findex",[2873],{"title":2373,"path":2372,"stem":2871,"status":2874,"componentName":2510},"new",{"title":832,"path":2389,"stem":2876,"children":2877,"status":2560,"componentName":2879},"components\u002F10.search-and-filter\u002Fsearch\u002Findex",[2878],{"title":832,"path":2389,"stem":2876,"status":2560,"componentName":2879},"OnyxSearch",{"title":275,"path":2881,"stem":2882,"children":2883,"page":2545},"\u002Fcomponents\u002Flayouts","components\u002F11.layouts",[2884,2889],{"title":2419,"path":2418,"stem":2885,"children":2886,"status":2510,"componentName":2888},"components\u002F11.layouts\u002Fapp-layout\u002Findex",[2887],{"title":2419,"path":2418,"stem":2885,"status":2510,"componentName":2888},"OnyxAppLayout",{"title":2436,"path":2435,"stem":2890,"children":2891,"status":2510,"componentName":2893},"components\u002F11.layouts\u002Fpage-layout\u002Findex",[2892],{"title":2436,"path":2435,"stem":2890,"status":2510,"componentName":2893},"OnyxPageLayout",{"title":2895,"status":2510,"componentName":2510,"path":2896,"stem":2897,"children":2898,"page":2545},"Documentation","\u002Fcomponents\u002Fdocs","components\u002F12.docs",[2899,2904,2909],{"title":2461,"path":2460,"stem":2900,"children":2901,"status":2560,"componentName":2903},"components\u002F12.docs\u002F01.markdown\u002Findex",[2902],{"title":2461,"path":2460,"stem":2900,"status":2560,"componentName":2903},"OnyxMarkdown",{"title":2477,"path":2476,"stem":2905,"children":2906,"status":2560,"componentName":2908},"components\u002F12.docs\u002F02.markdown-document\u002Findex",[2907],{"title":2477,"path":2476,"stem":2905,"status":2560,"componentName":2908},"OnyxMarkdownDocument",{"title":2493,"path":2492,"stem":2910,"children":2911,"status":2510,"componentName":2913},"components\u002F12.docs\u002Fcode-tabs\u002Findex",[2912],{"title":2493,"path":2492,"stem":2910,"status":2510,"componentName":2913},"OnyxCodeTabs",1793175244777]