diff --git a/assets/Color-KGDBMAHA-Boasea7f.js b/assets/Color-KGDBMAHA-CVJDYPJ0.js similarity index 99% rename from assets/Color-KGDBMAHA-Boasea7f.js rename to assets/Color-KGDBMAHA-CVJDYPJ0.js index 4edb39bf..01606a5d 100644 --- a/assets/Color-KGDBMAHA-Boasea7f.js +++ b/assets/Color-KGDBMAHA-CVJDYPJ0.js @@ -1,8 +1,8 @@ -import { an as isSymbol_1, ao as Tr, a2 as gB, a0 as FB, w as wL, ap as MarkupIcon, aq as getControlId } from "./index-CP0YfFHh.js"; +import { an as isSymbol_1, ao as Tr, a2 as gB, a0 as FB, w as wL, ap as MarkupIcon, aq as getControlId } from "./index-Dm9k26tp.js"; import { R as React, r as reactExports } from "./index-aC1ZMUrs.js"; import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-CcAunmGO.js"; import { _ as _root, i as isObject_1 } from "./index-DtSuK_9N.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/DocsRenderer-PKQXORMH-CSYdvAzt.js b/assets/DocsRenderer-PKQXORMH-BUDG7VlR.js similarity index 95% rename from assets/DocsRenderer-PKQXORMH-CSYdvAzt.js rename to assets/DocsRenderer-PKQXORMH-BUDG7VlR.js index d69336b0..c7a4ba7f 100644 --- a/assets/DocsRenderer-PKQXORMH-CSYdvAzt.js +++ b/assets/DocsRenderer-PKQXORMH-BUDG7VlR.js @@ -1,8 +1,8 @@ const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-DXHhUSGJ.js","./index-aC1ZMUrs.js","./_commonjsHelpers-CcAunmGO.js"])))=>i.map(i=>d[i]); -import { _ as __vitePreload } from "./iframe-DJBPzBCw.js"; +import { _ as __vitePreload } from "./iframe-BKVt7QvW.js"; import { R as React, r as reactExports } from "./index-aC1ZMUrs.js"; import { r as renderElement, u as unmountElement } from "./react-18-BEw2RJX7.js"; -import { aj as CodeOrSourceMdx, ak as AnchorMdx, al as HeadersMdx, am as Docs } from "./index-CP0YfFHh.js"; +import { aj as CodeOrSourceMdx, ak as AnchorMdx, al as HeadersMdx, am as Docs } from "./index-Dm9k26tp.js"; import "../sb-preview/runtime.js"; import "./_commonjsHelpers-CcAunmGO.js"; import "./index-B63kQkss.js"; diff --git a/assets/alert-DnQzLCYZ.js b/assets/alert-BCIx5Ubv.js similarity index 97% rename from assets/alert-DnQzLCYZ.js rename to assets/alert-BCIx5Ubv.js index ed20a173..0027d904 100644 --- a/assets/alert-DnQzLCYZ.js +++ b/assets/alert-BCIx5Ubv.js @@ -1,12 +1,12 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-Dm9k26tp.js"; import { m as markdown } from "./README-i1AxuvIj.js"; import { A as AlertStories, P as Playground, I as Info, O as Ok, W as Warning, E as Error, a as AriaRole } from "./alert.stories-DtFtqMG0.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/alert-BBHEEI20.js b/assets/alert-C6YkquFN.js similarity index 95% rename from assets/alert-BBHEEI20.js rename to assets/alert-C6YkquFN.js index b11ef46f..f2f7ff57 100644 --- a/assets/alert-BBHEEI20.js +++ b/assets/alert-C6YkquFN.js @@ -1,18 +1,18 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-Dm9k26tp.js"; import { m as markdown } from "./README-i1AxuvIj.js"; -import { A as AlertStories, P as Playground, I as InfoAlert, S as SuccessAlert, W as WarningAlert, E as ErrorAlert } from "./alert.stories-AROpagCn.js"; +import { A as AlertStories, P as Playground, I as InfoAlert, S as SuccessAlert, W as WarningAlert, E as ErrorAlert } from "./alert.stories-Bl6IZJFb.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-6FDpSq6u.js"; +import "./index-C4izKWdF.js"; import "./index-BLZ711uc.js"; function _createMdxContent(props) { const _components = { diff --git a/assets/alert.stories-AROpagCn.js b/assets/alert.stories-Bl6IZJFb.js similarity index 89% rename from assets/alert.stories-AROpagCn.js rename to assets/alert.stories-Bl6IZJFb.js index 1e29d3b6..47f8d007 100644 --- a/assets/alert.stories-AROpagCn.js +++ b/assets/alert.stories-Bl6IZJFb.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { L as LuxAlert, a as LuxHeading1, b as LuxParagraph } from "./index-6FDpSq6u.js"; +import { L as LuxAlert, a as LuxHeading1, b as LuxParagraph } from "./index-C4izKWdF.js"; import { t as tokens } from "./index-BLZ711uc.js"; const meta = { title: "React Components/Alert", @@ -31,16 +31,14 @@ const meta = { }; const AlertTemplate = { args: { - type: "info", - children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [ - /* @__PURE__ */ jsxRuntimeExports.jsx(LuxHeading1, { children: "Heading" }), - /* @__PURE__ */ jsxRuntimeExports.jsx(LuxParagraph, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus." }) - ] }) + type: "info" }, render: ({ - children, ...args - }) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxAlert, { ...args, children }) + }, context) => /* @__PURE__ */ jsxRuntimeExports.jsx(LuxAlert, { ...args, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [ + /* @__PURE__ */ jsxRuntimeExports.jsx(LuxHeading1, { children: context.name }), + /* @__PURE__ */ jsxRuntimeExports.jsx(LuxParagraph, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis massa lorem. Ut laoreet varius rhoncus." }) + ] }) }) }; const Playground = { ...AlertTemplate, diff --git a/assets/border-tokens-DekqgI9d.js b/assets/border-tokens-BP51XxT8.js similarity index 97% rename from assets/border-tokens-DekqgI9d.js rename to assets/border-tokens-BP51XxT8.js index 33d0cdac..4f961271 100644 --- a/assets/border-tokens-DekqgI9d.js +++ b/assets/border-tokens-BP51XxT8.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/border-tokens-BLSgnkZ0.js b/assets/border-tokens-DcHGvG_K.js similarity index 96% rename from assets/border-tokens-BLSgnkZ0.js rename to assets/border-tokens-DcHGvG_K.js index 3fa84d61..588330a2 100644 --- a/assets/border-tokens-BLSgnkZ0.js +++ b/assets/border-tokens-DcHGvG_K.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/button-BD7FEUbr.js b/assets/button-C9rwoaWH.js similarity index 97% rename from assets/button-BD7FEUbr.js rename to assets/button-C9rwoaWH.js index 1a079de4..90434ccd 100644 --- a/assets/button-BD7FEUbr.js +++ b/assets/button-C9rwoaWH.js @@ -1,18 +1,18 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-Dm9k26tp.js"; import { m as markdown } from "./README-8lw3oO5y.js"; -import { B as ButtonStories, P as Playground, a as Primary, S as Secondary, T as Tertiary, b as SmallButton, A as Active, F as Focus, H as Hover, D as Disabled, c as Busy, d as Toggle, e as ButtonWithIconAtPositionStart, f as ButtonWithIconAtPositionEnd } from "./button.stories-B0HghDqv.js"; +import { B as ButtonStories, P as Playground, a as Primary, S as Secondary, T as Tertiary, b as SmallButton, A as Active, F as Focus, H as Hover, D as Disabled, c as Busy, d as Toggle, e as ButtonWithIconAtPositionStart, f as ButtonWithIconAtPositionEnd } from "./button.stories-zcuqmVax.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-6FDpSq6u.js"; +import "./index-C4izKWdF.js"; import "./index-BLZ711uc.js"; import "./createDesignTokensStory-HiB5Jh-Q.js"; import "./createVisualRegressionStory-Ckg-wQz5.js"; diff --git a/assets/button-C-m6C7aO.js b/assets/button-CftOLSId.js similarity index 98% rename from assets/button-C-m6C7aO.js rename to assets/button-CftOLSId.js index 4a6005e2..6aca1f4c 100644 --- a/assets/button-C-m6C7aO.js +++ b/assets/button-CftOLSId.js @@ -1,12 +1,12 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-Dm9k26tp.js"; import { m as markdown } from "./README-8lw3oO5y.js"; import { B as ButtonStories, P as Playground, a as Primary, S as Secondary, T as Tertiary, A as Active, H as Hover, F as Focus, b as Busy, c as Toggle, W as WithStartIcon, d as WithEndIcon } from "./button.stories-Cla13ruH.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/button.stories-B0HghDqv.js b/assets/button.stories-zcuqmVax.js similarity index 99% rename from assets/button.stories-B0HghDqv.js rename to assets/button.stories-zcuqmVax.js index 98d4b446..01334912 100644 --- a/assets/button.stories-B0HghDqv.js +++ b/assets/button.stories-zcuqmVax.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { A as LuxButton } from "./index-6FDpSq6u.js"; +import { A as LuxButton } from "./index-C4izKWdF.js"; import { t as tokens } from "./index-BLZ711uc.js"; import { r as reactExports } from "./index-aC1ZMUrs.js"; import { c as createDesignTokensStory } from "./createDesignTokensStory-HiB5Jh-Q.js"; diff --git a/assets/checkbox-BoZ-1pTK.js b/assets/checkbox-PH15910i.js similarity index 98% rename from assets/checkbox-BoZ-1pTK.js rename to assets/checkbox-PH15910i.js index ad9e75db..df466eee 100644 --- a/assets/checkbox-BoZ-1pTK.js +++ b/assets/checkbox-PH15910i.js @@ -1,17 +1,17 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-CP0YfFHh.js"; -import { C as CheckboxStories, P as Playground, D as Default, a as Checked, b as Disabled, c as CheckedAndDisabled, H as Hover, F as Focus, W as WithTarget } from "./checkbox.stories-CkSjx0c7.js"; +import { ae as Meta, af as Markdown2, ag as Canvas, ah as Controls3 } from "./index-Dm9k26tp.js"; +import { C as CheckboxStories, P as Playground, D as Default, a as Checked, b as Disabled, c as CheckedAndDisabled, H as Hover, F as Focus, W as WithTarget } from "./checkbox.stories-CWKfYMbh.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-6FDpSq6u.js"; +import "./index-C4izKWdF.js"; import "./index-BLZ711uc.js"; const markdown = '\n\n# Checkbox\n\n## Terminologie\n\n- **checkbox**: `type="checkbox"` in HTML, [`role="checkbox"`](https://www.w3.org/TR/wai-aria-1.2/#checkbox) in WAI-ARIA 1.2, "checkbox" in [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).\n- **checked**: `checked` attribuut in HTML, `aria-checked="true"` in [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/#aria-checked), `:checked` pseudo-class in CSS.\n\n## Class names\n\n- `utrecht-checkbox`\n\n## Introduction\n\nCheckboxes are usually used to provide a way for users to make a range of selections (zero, one or more). They can also be used to tell users that they agree to specific terms.\n\n## When to use\n\nCheckboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.\n\n### Forms\n\nCan be used in forms on a full page or in modals.\n\n### Terms and conditions\n\nTurning the checkbox input on or off can indicate whether you agree to the terms.\n\n## Alternatives and related components\n\nUse radio buttons to display a list of options where users can only make one choice.\n\n## Anatomy\n\nThe checkbox consists of:\n\n1. Label (optional): indicates what should be selected below.\n2. Checkbox input: a checkbox input that indicates the correct status. By default it is not active.\n3. Checkbox label: describes the information you can select or deselect.\n4. Helper text (optional): displays more information about the checkboxes\n\n## (Interactive) states\n\nThe checkbox contains the states normal, hover, disabled, error and focus.\n\n## Accessibility\n\nScreen readers automatically report the status of the check box.\n\n### Labeling\n\n### External links\n\n### Keyboard support\n\n- Move focus to each checkbox using the tab key (or shift + tab when tabbing backwards)\n- Activate or deactivate checkboxes with the space key\n\n## Content guidelines\n\n### Checkbox labels\n\nCheckbox labels must:\n\n- Start with a capital letter\n- Not end in punctuation if it’s a single sentence, word, or a fragment\n- In case the checkbox asks to agree to the terms and conditions, use the first person\n\n## Best practices\n\n### Do\'s\n\nCheckboxes must:\n\n- Work independently of each other: selecting a checkbox may not change the selection status of another checkbox in the list.\n- Be positively boxed: for example “Enable notifications” instead of “Disable notifications”.\n- Always have a label handy when you use it to turn a setting on or off.\n- Use label tags as click targets.\n- Be arranged in a logical order, whether alphabetical, numeric, time-based or some other clear system.\n- Link to more information or have a subtitle for more explanation. Don\'t rely on tooltips to explain a checkbox.\n- If they are too long, run over the second line. This is preferable than truncation.\n- If they are too long, they will be aligned left\n- If they are too long, let the text flow under the checkbox so that the control and label are aligned at the top.\n\n### Don\'ts\n\nCheckboxes must:\n\n- Not cut with an omit task if the label is too long and run over 2 lines.\n\n## Relevante WCAG eisen\n\n- [WCAG eis 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html):\n - Gebruik `aria-controls` als de checkbox een regio zichtbaar of onzichtbaar maakt.\n- [WCAG eis 2.4.7](https://www.w3.org/TR/WCAG21/#focus-visible): focus moet zichtbaar zijn.\n- [WCAG eis 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): de checkbox moet groot genoeg zijn om aan te klikken, ten minste 44×44px.\n\n## References\n\n- [https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)\n- [https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41](https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41)\n'; function _createMdxContent(props) { diff --git a/assets/checkbox.stories-CkSjx0c7.js b/assets/checkbox.stories-CWKfYMbh.js similarity index 98% rename from assets/checkbox.stories-CkSjx0c7.js rename to assets/checkbox.stories-CWKfYMbh.js index 17bb2890..8f1f1f70 100644 --- a/assets/checkbox.stories-CkSjx0c7.js +++ b/assets/checkbox.stories-CWKfYMbh.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { c as LuxCheckbox } from "./index-6FDpSq6u.js"; +import { c as LuxCheckbox } from "./index-C4izKWdF.js"; import { t as tokens } from "./index-BLZ711uc.js"; const meta = { title: "React Components/Checkbox", diff --git a/assets/color-tokens-S2h4Ah5R.js b/assets/color-tokens-BgQ3fiRb.js similarity index 99% rename from assets/color-tokens-S2h4Ah5R.js rename to assets/color-tokens-BgQ3fiRb.js index 09b800ef..1a2db8cc 100644 --- a/assets/color-tokens-S2h4Ah5R.js +++ b/assets/color-tokens-BgQ3fiRb.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/color-tokens-DwJOUL9v.js b/assets/color-tokens-DA-TYo_b.js similarity index 99% rename from assets/color-tokens-DwJOUL9v.js rename to assets/color-tokens-DA-TYo_b.js index 86fb9932..48d761fa 100644 --- a/assets/color-tokens-DwJOUL9v.js +++ b/assets/color-tokens-DA-TYo_b.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/community-component-aanleveren-EAxmyJ7R.js b/assets/community-component-aanleveren-Duys2QYZ.js similarity index 99% rename from assets/community-component-aanleveren-EAxmyJ7R.js rename to assets/community-component-aanleveren-Duys2QYZ.js index fb024855..efe0dd47 100644 --- a/assets/community-component-aanleveren-EAxmyJ7R.js +++ b/assets/community-component-aanleveren-Duys2QYZ.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2 } from "./index-Dm9k26tp.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/community-components-CXoc_uGF.js b/assets/community-components-BqIm-fUx.js similarity index 97% rename from assets/community-components-CXoc_uGF.js rename to assets/community-components-BqIm-fUx.js index 561b763b..3ad6b62c 100644 --- a/assets/community-components-CXoc_uGF.js +++ b/assets/community-components-BqIm-fUx.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2 } from "./index-Dm9k26tp.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/design-tokens-BnycWWrh.js b/assets/design-tokens-C9X8xjvg.js similarity index 98% rename from assets/design-tokens-BnycWWrh.js rename to assets/design-tokens-C9X8xjvg.js index 6be23088..b2e6cd5d 100644 --- a/assets/design-tokens-BnycWWrh.js +++ b/assets/design-tokens-C9X8xjvg.js @@ -1,9 +1,9 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, af as Markdown2 } from "./index-CP0YfFHh.js"; +import { ae as Meta, af as Markdown2 } from "./index-Dm9k26tp.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/document-lTgQTI2w.js b/assets/document-BlG3l_oO.js similarity index 94% rename from assets/document-lTgQTI2w.js rename to assets/document-BlG3l_oO.js index de675f4a..b67a451a 100644 --- a/assets/document-lTgQTI2w.js +++ b/assets/document-BlG3l_oO.js @@ -1,16 +1,16 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta, ag as Canvas, ah as Controls3 } from "./index-CP0YfFHh.js"; -import { D as DocumentStories, P as Playground } from "./document.stories-DLUhHj_2.js"; +import { ae as Meta, ag as Canvas, ah as Controls3 } from "./index-Dm9k26tp.js"; +import { D as DocumentStories, P as Playground } from "./document.stories-C7uat1DF.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-6FDpSq6u.js"; +import "./index-C4izKWdF.js"; import "./index-BLZ711uc.js"; import "./createDesignTokensStory-HiB5Jh-Q.js"; import "./createVisualRegressionStory-Ckg-wQz5.js"; diff --git a/assets/document.stories-DLUhHj_2.js b/assets/document.stories-C7uat1DF.js similarity index 98% rename from assets/document.stories-DLUhHj_2.js rename to assets/document.stories-C7uat1DF.js index 8d244c19..669c97cb 100644 --- a/assets/document.stories-DLUhHj_2.js +++ b/assets/document.stories-C7uat1DF.js @@ -1,6 +1,6 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i; import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; -import { z as LuxDocument, b as LuxParagraph } from "./index-6FDpSq6u.js"; +import { z as LuxDocument, b as LuxParagraph } from "./index-C4izKWdF.js"; import { t as tokens } from "./index-BLZ711uc.js"; import { c as createDesignTokensStory } from "./createDesignTokensStory-HiB5Jh-Q.js"; import { c as createVisualRegressionStory, V as VisualRegressionWrapper } from "./createVisualRegressionStory-Ckg-wQz5.js"; diff --git a/assets/focus-tokens-Dq43ODEE.js b/assets/focus-tokens-DQgzHdfR.js similarity index 97% rename from assets/focus-tokens-Dq43ODEE.js rename to assets/focus-tokens-DQgzHdfR.js index 09c6dad8..168e9771 100644 --- a/assets/focus-tokens-Dq43ODEE.js +++ b/assets/focus-tokens-DQgzHdfR.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, b as DesignTokenColorPreview, a as DesignTokenBorderPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/font-tokens-DZ6kKRTr.js b/assets/font-tokens-CUF8IKze.js similarity index 99% rename from assets/font-tokens-DZ6kKRTr.js rename to assets/font-tokens-CUF8IKze.js index 186e4001..68be72f1 100644 --- a/assets/font-tokens-DZ6kKRTr.js +++ b/assets/font-tokens-CUF8IKze.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, c as DesignTokenFontPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/font-tokens-B47n532O.js b/assets/font-tokens-Deq0OelV.js similarity index 99% rename from assets/font-tokens-B47n532O.js rename to assets/font-tokens-Deq0OelV.js index 71357ca2..be77d00b 100644 --- a/assets/font-tokens-B47n532O.js +++ b/assets/font-tokens-Deq0OelV.js @@ -1,10 +1,10 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; -import { ae as Meta } from "./index-CP0YfFHh.js"; +import { ae as Meta } from "./index-Dm9k26tp.js"; import { D as DesignTokenOverview, c as DesignTokenFontPreview } from "./DesignTokenSpacingPreview-BcGKECY1.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-vKye6HrD.js"; diff --git a/assets/form-field-D_B72b-i.js b/assets/form-field-C6mjyHgF.js similarity index 94% rename from assets/form-field-D_B72b-i.js rename to assets/form-field-C6mjyHgF.js index 0bd61d4b..a7fde5cf 100644 --- a/assets/form-field-D_B72b-i.js +++ b/assets/form-field-C6mjyHgF.js @@ -1,24 +1,24 @@ import { j as jsxRuntimeExports } from "./jsx-runtime-DnIIMar6.js"; import { useMDXComponents } from "./index-DXHhUSGJ.js"; import { r as react_default } from "./index-cEa3Pm8r.js"; -import { af as Markdown2, ae as Meta, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-CP0YfFHh.js"; -import { F as FormFieldStories, P as Playground, a as FormFieldTextbox, b as FormFieldDescription, c as FormFieldError } from "./form-field.stories-QoDHV2IG.js"; +import { af as Markdown2, ae as Meta, ag as Canvas, ah as Controls3, ai as DescriptionContainer } from "./index-Dm9k26tp.js"; +import { F as FormFieldStories, P as Playground, a as FormFieldTextbox, b as FormFieldDescription, c as FormFieldError } from "./form-field.stories-DC3rzJX1.js"; import { C as CitationDocumentation } from "./CitationDocumentation-B3Shsstx.js"; -import { m as meta } from "./form-field-textbox.stories-DCxiyEbC.js"; +import { m as meta } from "./form-field-textbox.stories-xWYU31br.js"; import "./index-aC1ZMUrs.js"; import "./_commonjsHelpers-CcAunmGO.js"; import "./index-vKye6HrD.js"; -import "./iframe-DJBPzBCw.js"; +import "./iframe-BKVt7QvW.js"; import "../sb-preview/runtime.js"; import "./index-B63kQkss.js"; import "./index-DtSuK_9N.js"; import "./index-BdOSk9or.js"; -import "./index-6FDpSq6u.js"; +import "./index-C4izKWdF.js"; import "./index-BLZ711uc.js"; -import "./preview-B5f71FOk.js"; -import "./form-field-description.stories-D4K5d32N.js"; -import "./form-field-error-message.stories-DI-IINOw.js"; -import "./textbox.stories-Dt5MpFkE.js"; +import "./preview-B916UyCr.js"; +import "./form-field-description.stories-BElHjbMX.js"; +import "./form-field-error-message.stories-DFO5PYca.js"; +import "./textbox.stories-DDHd6Jbc.js"; const mdAnatomy = '\n\n# Anatomy\n\nGebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.\n\nDe volgende componenten zijn vaak onderdeel van een _form field_:\n\n- _form label_ component\n- _form field description_ component met extra beschrijving\n- _form field description_ component met een validatiemelding\n- een form control component zoals bijvoorbeeld:\n - _textbox_ component\n - _textarea_ component\n - _checkbox_ component\n - _radio button_ component\n - _form select_ component\n - etcetera\n- _form field description_ component met een foutmelding\n- _form field description_ component status van component\n\n## Gebruikte termen\n\n- `form` komt van `
` in HTML en `role="form"` in WAI-ARIA.\n- `field` komt van `
` in HTML.\n- `invalid` komt van `aria-invalid` in WAI-ARIA.\n- `radio` komt van `` in HTML.\n- `checkbox` komt van `` in HTML.\n- `label` komt van `