@public-ui/sample-react 4.0.0-alpha.4 → 4.0.0-alpha.5

package/src/scenarios/react-hook-form/basic.tsx

@@ -14,9 +14,8 @@ import {
 	KolSingleSelectController,
 	KolTextareaController,
 } from '@public-ui/react-hook-form-adapter';
-import { KolButton } from '@public-ui/react-v19';
-import type { FC } from 'react';
-import React from 'react';
+import { KolButton, KolForm } from '@public-ui/react-v19';
+import React, { type BaseSyntheticEvent, type FC } from 'react';
 import type { FieldErrors, SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 
@@ -122,62 +121,74 @@ export const RHFBasic: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample demonstrates a form using React Hook Form with KoliBri adapters. All inputs are validated, and error messages are shown on submit.</p>
+				<p>
+					This sample demonstrates a form using React Hook Form with KoliBri adapters wrapped in a KolForm. All inputs are validated, and error messages are
+					shown on submit.
+				</p>
 			</SampleDescription>
 
-			<form onSubmit={handleSubmit(onSubmit, onError)} className="grid gap-4 w-full max-w-xl">
-				<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
-				<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
-				<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
-				<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
-				<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
-				<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
-				<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
-				<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
-				<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
-				<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
-				<KolComboboxController
-					control={control}
-					rules={{ required: 'Please select a country' }}
-					name="country"
-					_label="Country"
-					_suggestions={COUNTRY_SUGGESTIONS}
-					_required
-				/>
-				<KolSelectController
-					control={control}
-					rules={{ required: 'Please select a language' }}
-					name="language"
-					_label="Preferred Language"
-					_options={languageOptions}
-					_required
-				/>
-				<KolSingleSelectController
-					rules={{ required: 'Please select a framework' }}
-					control={control}
-					name="framework"
-					_label="Favorite Framework"
-					_options={frameworkOptions}
-					_required
-				/>
-				<KolInputRadioController
-					control={control}
-					rules={{ required: 'Please select your gender' }}
-					name="gender"
-					_label="Gender"
-					_options={genderOptions}
-					_required
-				/>
-				<KolInputCheckboxController
-					name="termsAccepted"
-					control={control}
-					_label="I accept the terms and conditions"
-					rules={{ required: 'You must accept the terms' }}
-					_required
-				/>
+			<KolForm
+				className="w-full max-w-xl"
+				_on={{
+					onSubmit: (event) => {
+						void handleSubmit(onSubmit, onError)(event as unknown as BaseSyntheticEvent);
+					},
+				}}
+			>
+				<div className="grid gap-4">
+					<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
+					<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
+					<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
+					<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
+					<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
+					<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
+					<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
+					<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
+					<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
+					<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
+					<KolComboboxController
+						control={control}
+						rules={{ required: 'Please select a country' }}
+						name="country"
+						_label="Country"
+						_suggestions={COUNTRY_SUGGESTIONS}
+						_required
+					/>
+					<KolSelectController
+						control={control}
+						rules={{ required: 'Please select a language' }}
+						name="language"
+						_label="Preferred Language"
+						_options={languageOptions}
+						_required
+					/>
+					<KolSingleSelectController
+						rules={{ required: 'Please select a framework' }}
+						control={control}
+						name="framework"
+						_label="Favorite Framework"
+						_options={frameworkOptions}
+						_required
+					/>
+					<KolInputRadioController
+						control={control}
+						rules={{ required: 'Please select your gender' }}
+						name="gender"
+						_label="Gender"
+						_options={genderOptions}
+						_required
+					/>
+					<KolInputCheckboxController
+						name="termsAccepted"
+						control={control}
+						_label="I accept the terms and conditions"
+						rules={{ required: 'You must accept the terms' }}
+						_required
+					/>
 
-				<KolButton _label="Submit" _type="submit" />
-			</form>
+					<KolButton _label="Submit" _type="submit" />
+				</div>
+			</KolForm>
 		</>
 	);
 };

package/src/scenarios/routes.ts

@@ -1,6 +1,8 @@
 import { Routes } from '../shares/types';
+import { ButtonShortkeyTable } from './button-shortkey-table';
 import { ChangeTabindex } from './change-tabindex';
-import { CustomTooltipWidth } from './custom-tooltip-width';
+import { CustomTooltipCssProperties } from './custom-tooltip-css-properties';
+import { DateInForm } from './date-in-form';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
@@ -16,8 +18,10 @@ import { TooltipPositioning } from './tooltip-positioning';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
+		'button-shortkey-table': ButtonShortkeyTable,
 		'change-tabindex': ChangeTabindex,
-		'custom-tooltip-width': CustomTooltipWidth,
+		'custom-tooltip-css-properties': CustomTooltipCssProperties,
+		'date-in-form': DateInForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
 		'input-group-with-error': InputGroupWithError,

package/src/scenarios/toolbar-item-order.tsx

@@ -32,6 +32,7 @@ export const ToolbarItemOrder: FC = () => {
 
 	const toolbarItems = useMemo(() => {
 		const items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({
+			type: 'button',
 			_label: `Button ${index + 1}`,
 			_on: { onClick: handleSubmit },
 			_icons: isSubmitting ? 'codicon codicon-loading codicon-modifier-spin' : void 0,
@@ -42,6 +43,7 @@ export const ToolbarItemOrder: FC = () => {
 
 	const brokenToolbarItems = useMemo(() => {
 		const items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({
+			type: 'button',
 			_label: `Button ${index + 1}`,
 			_on: { onClick: handleSubmit2 },
 			_disabled: isSubmitting2,

package/unocss.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from '@unocss/vite';
 import { presetMini } from '@unocss/preset-mini';
+import { defineConfig } from '@unocss/vite';
 
 function pxValueToRem(size: number): string {
 	return `calc(${size}rem / var(--kolibri-root-font-size, 16))`;

package/vite.config.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from 'vite';
-import { execSync } from 'node:child_process';
-import react from '@vitejs/plugin-react-swc';
 import UnoCSS from '@unocss/vite';
-import process from 'process';
+import react from '@vitejs/plugin-react-swc';
+import { execSync } from 'node:child_process';
 import path from 'path';
+import process from 'process';
+import { defineConfig } from 'vite';
 
 function getGitCommitHash(): string | null {
 	try {

package/dist/assets/controller-icon-BS8_hq0M-DxLPTb2Y.js

@@ -1,4 +0,0 @@
-import{h as r,w as O,e as v}from"./index-mMJ_1Otm.js";import{_ as u}from"./tslib.es6-CxX45GIN-BAJoBDh7.js";import{K as y}from"./Icon-4n78xl5U-f8DJChAS.js";import{c as g}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{c as P,I as B}from"./FormFieldStateWrapper-CMmlRSa1-Ce3IYbEY.js";import{i as _}from"./InternalUnderlinedBadgeText-Dqa3NiG4-BnRs2EcB.js";import{i as b}from"./isObject-DvSELytj-B0RigBxT.js";import{v as K}from"./icons-72ER78AW-XsxdnrnE.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const C=(n,o)=>{var{position:i="start",class:e}=n,t=u(n,["position","class"]);const c="kol-input-container__adornment",s=`${c}--${i}`;return r("div",Object.assign({class:g(c,s,e)},t),o)};function I(n){return n?Array.isArray(n)?n.length>0:!!n:!1}const N=(n,o)=>{var{class:i}=n,e=u(n,["class"]);return r("div",Object.assign({class:g("kol-input-container__container",i)},e),o)},L=(n,o)=>{const{class:i,startAdornment:e,endAdornment:t,disabled:c,msg:s,touched:a,containerProps:l,startAdornmentProps:d,endAdornmentProps:p}=n,m=u(n,["class","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps"]),j=P(s,a),k=typeof s=="string"?"error":s?._type,A={"kol-input-container--disabled":c,[`kol-input-container--${k||"error"}`]:j},f=Object.assign({class:g("kol-input-container",A,i)},m);return!I(e)&&!I(t)?r("div",Object.assign({},f),r(N,Object.assign({},l),o)):r("div",Object.assign({},f),r(C,Object.assign({},d,{position:"start"}),e),r(N,Object.assign({},l),o),r(C,Object.assign({},p,{position:"end"}),t))},F=n=>{const{label:o,icons:i,hideLabel:e,disabled:t,onClick:c}=n,s=u(n,["label","icons","hideLabel","disabled","onClick"]);return r(v,Object.assign({_label:o,_disabled:t,_icons:i,_hideLabel:e,_on:{onClick:c}},s))},h=n=>{const{componentName:o="button",label:i,icon:e,onClick:t}=n,c=u(n,["componentName","label","icon","onClick"]);return r(o==="button"?F:y,Object.assign({label:i||"",hideLabel:!0,icons:`codicon codicon-${e}`,onClick:t},c))};function $(n){let o,i;return"_icons"in n&&(o=n._icons),"_smartButton"in n&&(i=n._smartButton),{icons:o,smartButton:i,disabled:n._disabled,msg:n._msg,touched:n._touched}}const V=({state:n,endAdornment:o},i)=>{const{icons:e,smartButton:t,disabled:c,msg:s,touched:a}=$(n);let l=e?.left;_(l)&&(l={icon:l});let d=e?.right;_(d)&&(d={icon:d});const p=[],m=[];return o&&(Array.isArray(o)?m.push(...o):m.push(o)),l&&p.push(r(h,Object.assign({componentName:"icon",class:"kol-input-container__icon"},b(l)?l:{}))),b(t)&&m.push(r(h,Object.assign({componentName:"button",class:"kol-input-container__smart-button"},t,{hideLabel:!0,disabled:c}))),d&&m.push(r(h,Object.assign({componentName:"icon",class:"kol-input-container__icon"},b(d)?d:{}))),r(L,{disabled:c,msg:s,touched:a,startAdornment:p,endAdornment:m},i)};class q extends B{constructor(o,i,e){super(o,i,e),this.numberStringRegex=/^\d+(\.\d+)?$/,this.parseToNumber=t=>typeof t=="number"?isNaN(t)?null:t:this.isNumberString(t)?parseFloat(t):null,this.validateNumber=(t,c)=>O(this.component,t,s=>s==null||typeof s=="number"||typeof s=="string"&&this.numberStringRegex.test(s),new Set(["number","NumberString"]),c,{hooks:{beforePatch:(s,a)=>{a?.has(t)&&a?.set(t,this.parseToNumber(s))}}}),this.component=o}validateIcons(o){K(this.component,o)}isNumberString(o){return typeof o=="string"&&this.numberStringRegex.test(o)}componentWillLoad(){super.componentWillLoad(),this.validateIcons(this.component._icons)}}export{V as I,h as K,q as a};
-//# sourceMappingURL=controller-icon-BS8_hq0M-DxLPTb2Y.js.map

package/dist/assets/controller-icon-BS8_hq0M-DxLPTb2Y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller-icon-BS8_hq0M-DxLPTb2Y.js","sources":["../../../../components/dist/esm/controller-icon-BS8_hq0M.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { h } from './index-cjpLH5FK.js';\nimport { _ as __rest } from './tslib.es6-CxX45GIN.js';\nimport { d as KolButtonWcTag } from './component-names-CkE54Ym7.js';\nimport { K as KolIconFc } from './Icon-4n78xl5U.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { w as watchValidator } from './common-8fBdMvJM.js';\nimport { c as checkHasMsg, I as InputController } from './FormFieldStateWrapper-CMmlRSa1.js';\nimport { i as isString } from './InternalUnderlinedBadgeText-Dqa3NiG4.js';\nimport { i as isObject } from './isObject-DvSELytj.js';\nimport { v as validateIcons } from './icons-72ER78AW.js';\n\nconst InputAdornment = (_a, children) => {\n    var { position = 'start', class: className } = _a, other = __rest(_a, [\"position\", \"class\"]);\n    const rootClassName = `kol-input-container__adornment`;\n    const positionClassName = `${rootClassName}--${position}`;\n    return (h(\"div\", Object.assign({ class: clsx(rootClassName, positionClassName, className) }, other), children));\n};\n\nfunction hasItems(items) {\n    if (!items) {\n        return false;\n    }\n    return Array.isArray(items) ? items.length > 0 : Boolean(items);\n}\nconst Container = (_a, children) => {\n    var { class: className } = _a, other = __rest(_a, [\"class\"]);\n    return (h(\"div\", Object.assign({ class: clsx('kol-input-container__container', className) }, other), children));\n};\nconst KolInputContainerFc = (props, children) => {\n    const { class: classNames, startAdornment, endAdornment, disabled, msg, touched, containerProps, startAdornmentProps, endAdornmentProps } = props, other = __rest(props, [\"class\", \"startAdornment\", \"endAdornment\", \"disabled\", \"msg\", \"touched\", \"containerProps\", \"startAdornmentProps\", \"endAdornmentProps\"]);\n    const showMsg = checkHasMsg(msg, touched);\n    const msgType = typeof msg === 'string' ? 'error' : msg === null || msg === void 0 ? void 0 : msg._type;\n    const stateCssClasses = {\n        ['kol-input-container--disabled']: disabled,\n        [`kol-input-container--${msgType || 'error'}`]: showMsg,\n    };\n    const baseProps = Object.assign({ class: clsx('kol-input-container', stateCssClasses, classNames) }, other);\n    if (!hasItems(startAdornment) && !hasItems(endAdornment)) {\n        return (h(\"div\", Object.assign({}, baseProps), h(Container, Object.assign({}, containerProps), children)));\n    }\n    return (h(\"div\", Object.assign({}, baseProps), h(InputAdornment, Object.assign({}, startAdornmentProps, { position: \"start\" }), startAdornment), h(Container, Object.assign({}, containerProps), children), h(InputAdornment, Object.assign({}, endAdornmentProps, { position: \"end\" }), endAdornment)));\n};\n\nconst KolButtonFc = (props) => {\n    const { label, icons, hideLabel, disabled, onClick } = props, other = __rest(props, [\"label\", \"icons\", \"hideLabel\", \"disabled\", \"onClick\"]);\n    return h(KolButtonWcTag, Object.assign({ _label: label, _disabled: disabled, _icons: icons, _hideLabel: hideLabel, _on: { onClick } }, other));\n};\n\nconst KolIconButtonFc = (props) => {\n    const { componentName = 'button', label, icon, onClick } = props, other = __rest(props, [\"componentName\", \"label\", \"icon\", \"onClick\"]);\n    const Component = componentName === 'button' ? KolButtonFc : KolIconFc;\n    return h(Component, Object.assign({ label: label || '', hideLabel: true, icons: `codicon codicon-${icon}`, onClick: onClick }, other));\n};\n\nfunction getInputContainerProps(state) {\n    let icons = undefined;\n    let smartButton;\n    if ('_icons' in state) {\n        icons = state._icons;\n    }\n    if ('_smartButton' in state) {\n        smartButton = state._smartButton;\n    }\n    return {\n        icons,\n        smartButton,\n        disabled: state._disabled,\n        msg: state._msg,\n        touched: state._touched,\n    };\n}\nconst InputContainerStateWrapperFc = ({ state, endAdornment: defaultEndAdornment }, children) => {\n    const { icons, smartButton, disabled, msg, touched } = getInputContainerProps(state);\n    let leftIconProps = icons === null || icons === void 0 ? void 0 : icons.left;\n    if (isString(leftIconProps)) {\n        leftIconProps = { icon: leftIconProps };\n    }\n    let rightIconProps = icons === null || icons === void 0 ? void 0 : icons.right;\n    if (isString(rightIconProps)) {\n        rightIconProps = { icon: rightIconProps };\n    }\n    const startAdornment = [];\n    const endAdornment = [];\n    if (defaultEndAdornment) {\n        if (Array.isArray(defaultEndAdornment)) {\n            endAdornment.push(...defaultEndAdornment);\n        }\n        else {\n            endAdornment.push(defaultEndAdornment);\n        }\n    }\n    if (leftIconProps) {\n        startAdornment.push(h(KolIconButtonFc, Object.assign({ componentName: \"icon\", class: \"kol-input-container__icon\" }, (isObject(leftIconProps) ? leftIconProps : {}))));\n    }\n    if (isObject(smartButton)) {\n        endAdornment.push(h(KolIconButtonFc, Object.assign({ componentName: \"button\", class: \"kol-input-container__smart-button\" }, smartButton, { hideLabel: true, disabled: disabled })));\n    }\n    if (rightIconProps) {\n        endAdornment.push(h(KolIconButtonFc, Object.assign({ componentName: \"icon\", class: \"kol-input-container__icon\" }, (isObject(rightIconProps) ? rightIconProps : {}))));\n    }\n    return (h(KolInputContainerFc, { disabled: disabled, msg: msg, touched: touched, startAdornment: startAdornment, endAdornment: endAdornment }, children));\n};\n\nclass InputIconController extends InputController {\n    constructor(component, name, host) {\n        super(component, name, host);\n        this.numberStringRegex = /^\\d+(\\.\\d+)?$/;\n        this.parseToNumber = (value) => {\n            if (typeof value === 'number') {\n                return isNaN(value) ? null : value;\n            }\n            if (this.isNumberString(value)) {\n                return parseFloat(value);\n            }\n            return null;\n        };\n        this.validateNumber = (propName, value) => {\n            return watchValidator(this.component, propName, (value) => value === undefined || value === null || typeof value === 'number' || (typeof value === 'string' && this.numberStringRegex.test(value)), new Set(['number', 'NumberString']), value, {\n                hooks: {\n                    beforePatch: (value, nextState) => {\n                        if (nextState === null || nextState === void 0 ? void 0 : nextState.has(propName)) {\n                            nextState === null || nextState === void 0 ? void 0 : nextState.set(propName, this.parseToNumber(value));\n                        }\n                    },\n                },\n            });\n        };\n        this.component = component;\n    }\n    validateIcons(value) {\n        validateIcons(this.component, value);\n    }\n    isNumberString(value) {\n        return typeof value === 'string' && this.numberStringRegex.test(value);\n    }\n    componentWillLoad() {\n        super.componentWillLoad();\n        this.validateIcons(this.component._icons);\n    }\n}\n\nexport { InputIconController as I, KolIconButtonFc as K, InputContainerStateWrapperFc as a };\n//# sourceMappingURL=controller-icon-BS8_hq0M.js.map\n\n//# sourceMappingURL=controller-icon-BS8_hq0M.js.map"],"names":["InputAdornment","_a","children","position","className","other","__rest","rootClassName","positionClassName","h","clsx","hasItems","items","Container","KolInputContainerFc","props","classNames","startAdornment","endAdornment","disabled","msg","touched","containerProps","startAdornmentProps","endAdornmentProps","showMsg","checkHasMsg","msgType","stateCssClasses","baseProps","KolButtonFc","label","icons","hideLabel","onClick","KolButtonWcTag","KolIconButtonFc","componentName","icon","KolIconFc","getInputContainerProps","state","smartButton","InputContainerStateWrapperFc","defaultEndAdornment","leftIconProps","isString","rightIconProps","isObject","InputIconController","InputController","component","name","host","value","propName","watchValidator","nextState","validateIcons"],"mappings":"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"}

package/dist/assets/has-closer-BBMh8HY3-Ds2_DrNo.js

@@ -1,4 +0,0 @@
-import{m as s}from"./index-mMJ_1Otm.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-BBMh8HY3-Ds2_DrNo.js.map

package/dist/assets/has-closer-BBMh8HY3-Ds2_DrNo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"has-closer-BBMh8HY3-Ds2_DrNo.js","sources":["../../../../components/dist/esm/has-closer-BBMh8HY3.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { d as watchBoolean } from './common-8fBdMvJM.js';\n\nconst validateHasCloser = (component, value) => {\n    watchBoolean(component, '_hasCloser', value);\n};\n\nexport { validateHasCloser as v };\n//# sourceMappingURL=has-closer-BBMh8HY3.js.map\n\n//# sourceMappingURL=has-closer-BBMh8HY3.js.map"],"names":["validateHasCloser","component","value","watchBoolean"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAoB,CAACC,EAAWC,IAAU,CAC5CC,EAAaF,EAAW,aAAcC,CAAK,CAC/C"}

package/dist/assets/href-zZq6HYWf-Dxygtgwv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"href-zZq6HYWf-Dxygtgwv.js","sources":["../../../../components/dist/esm/href-zZq6HYWf.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { e as watchString } from './common-8fBdMvJM.js';\n\nconst validateHref = (component, value, options = {}) => {\n    watchString(component, '_href', value, options);\n};\n\nexport { validateHref as v };\n//# sourceMappingURL=href-zZq6HYWf.js.map\n\n//# sourceMappingURL=href-zZq6HYWf.js.map"],"names":["validateHref","component","value","options","watchString"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,EAAU,CAAA,IAAO,CACrDC,EAAYH,EAAW,QAASC,EAAOC,CAAO,CAClD"}

package/dist/assets/image-source-RWPv7frZ-CTjPW9bv.js

@@ -1,4 +0,0 @@
-import{n as o}from"./index-mMJ_1Otm.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-RWPv7frZ-CTjPW9bv.js.map

package/dist/assets/index-56fasavN.css

@@ -1 +0,0 @@
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5)}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5)}.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.static{position:static}.grid{display:grid}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-6{grid-column:span 6/span 6}.grid-cols-\[4fr_4fr_1fr\]{grid-template-columns:4fr 4fr 1fr}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.mx{margin-left:calc(16rem / var(--kolibri-root-font-size, 16));margin-right:calc(16rem / var(--kolibri-root-font-size, 16))}.mx-auto{margin-left:auto;margin-right:auto}.me{margin-inline-end:calc(16rem / var(--kolibri-root-font-size, 16))}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.h-\[1em\]{height:1em}.ha{height:auto}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-xl{max-width:36rem}.w-\[1em\]{width:1em}.w-\[400px\]{width:400px}.w-75px{width:75px}.w-fit{width:fit-content}.w-full{width:100%}.flex{display:flex}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.items-end{align-items:flex-end}.flex-items-center,.items-center{align-items:center}.items-stretch{align-items:stretch}.flex-justify-between,.justify-between{justify-content:space-between}.justify-items-center{justify-items:center}.b,.border{border-width:1px}.border-b-1{border-bottom-width:1px}.border-dark-100{--un-border-opacity:1;border-color:rgb(60 60 60 / var(--un-border-opacity))}.border-gray{--un-border-opacity:1;border-color:rgb(156 163 175 / var(--un-border-opacity))}.rounded{border-radius:calc(4rem / var(--kolibri-root-font-size, 16))}.border-solid{border-style:solid}.border-b-solid{border-bottom-style:solid}.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity))}.px{padding-left:calc(16rem / var(--kolibri-root-font-size, 16));padding-right:calc(16rem / var(--kolibri-root-font-size, 16))}.pb-sm{padding-bottom:calc(14rem / var(--kolibri-root-font-size, 16))}.text-center{text-align:center}.text-base{font-size:calc(16rem / var(--kolibri-root-font-size, 16));line-height:1.5}.text-lg{font-size:calc(18rem / var(--kolibri-root-font-size, 16));line-height:1.75}.text-sm{font-size:calc(14rem / var(--kolibri-root-font-size, 16));line-height:1.25}.text-red-600{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity))}.color-gray-5{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity))}.font-semibold{font-weight:600}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4}.tab-0{-moz-tab-size:0;-o-tab-size:0;tab-size:0}.tab-1{-moz-tab-size:1;-o-tab-size:1;tab-size:1}.tab-2{-moz-tab-size:2;-o-tab-size:2;tab-size:2}.tab-3{-moz-tab-size:3;-o-tab-size:3;tab-size:3}.opacity-80{opacity:.8}.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.p-0{padding:calc(0rem / var(--kolibri-root-font-size, 16))}.p-2{padding:calc(8rem / var(--kolibri-root-font-size, 16))}.p-3{padding:calc(12rem / var(--kolibri-root-font-size, 16))}.p-4{padding:calc(16rem / var(--kolibri-root-font-size, 16))}.p-6{padding:calc(24rem / var(--kolibri-root-font-size, 16))}.py-2{padding-top:calc(8rem / var(--kolibri-root-font-size, 16));padding-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.pl-5{padding-left:calc(20rem / var(--kolibri-root-font-size, 16))}.m-0{margin:calc(0rem / var(--kolibri-root-font-size, 16))}.m-4{margin:calc(16rem / var(--kolibri-root-font-size, 16))}.my-2{margin-top:calc(8rem / var(--kolibri-root-font-size, 16));margin-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.my-4{margin-top:calc(16rem / var(--kolibri-root-font-size, 16));margin-bottom:calc(16rem / var(--kolibri-root-font-size, 16))}.mt,.mt-4{margin-top:calc(16rem / var(--kolibri-root-font-size, 16))}.mr{margin-right:calc(16rem / var(--kolibri-root-font-size, 16))}.mt-0{margin-top:calc(0rem / var(--kolibri-root-font-size, 16))}.m-t-2,.mt-2{margin-top:calc(8rem / var(--kolibri-root-font-size, 16))}.mt-6{margin-top:calc(24rem / var(--kolibri-root-font-size, 16))}.mb-2{margin-bottom:calc(8rem / var(--kolibri-root-font-size, 16))}.mb-3{margin-bottom:calc(12rem / var(--kolibri-root-font-size, 16))}.mb-4{margin-bottom:calc(16rem / var(--kolibri-root-font-size, 16))}.mb-8{margin-bottom:calc(32rem / var(--kolibri-root-font-size, 16))}.gap-14{gap:calc(56rem / var(--kolibri-root-font-size, 16))}.gap-2{gap:calc(8rem / var(--kolibri-root-font-size, 16))}.gap-3{gap:calc(12rem / var(--kolibri-root-font-size, 16))}.gap-4{gap:calc(16rem / var(--kolibri-root-font-size, 16))}.gap-8{gap:calc(32rem / var(--kolibri-root-font-size, 16))}.w-8rem{width:calc(128rem / var(--kolibri-root-font-size, 16))}.w-sm{width:calc(384rem / var(--kolibri-root-font-size, 16))}@media (min-width: 640px){.sm\:col-span-6{grid-column:span 6/span 6}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:flex{display:flex}}@media (min-width: 768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-6{grid-column:span 6/span 6}.md\:grid-cols-\[auto_1fr_1fr\]{grid-template-columns:auto 1fr 1fr}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:col-span-2{grid-column:span 2/span 2}.xl\:col-span-3{grid-column:span 3/span 3}.xl\:col-span-5{grid-column:span 5/span 5}.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}:root{--kolibri-root-font-size: 100;font-size:625%}body{margin:0;font-family:Verdana;font-size:calc(16rem / var(--kolibri-root-font-size, 16));line-height:normal}dl,hr{margin:0}.grid-cols-2{grid-template-columns:auto auto}.indented-text p{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.black-background{background-color:#000;display:flex;padding:calc(8rem / var(--kolibri-root-font-size, 16));flex-direction:column}.w-image{width:500px}.drawer-content-vertical{width:calc(400rem / var(--kolibri-root-font-size, 16))}.list-none{margin:0;padding:0;list-style:none}@media (min-width: 1024px){.app-container{display:grid;height:100%;min-height:100vh;grid-template-columns:calc(360rem / var(--kolibri-root-font-size, 16)) calc(100% - 360rem / var(--kolibri-root-font-size, 16))}.app-sidebar{position:relative;z-index:1;border-right:1px solid gray}.app-sidebar .scrollable-container-wrapper{display:flex;position:fixed;top:0;bottom:0;left:0;width:calc(330rem / var(--kolibri-root-font-size, 16));margin:calc(16rem / var(--kolibri-root-font-size, 16));flex-direction:column}.app-sidebar .scrollable-container-wrapper .scrollable-container{overflow:auto;flex:1 auto}}@media print{.no-print,.no-print *{display:none!important}}.loader{border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;width:48px;height:48px;animation:pulse 1s linear infinite;border:5px solid #333}.loader:after{transform:translate(-50%,-50%);border-radius:50%;display:inline-block;position:absolute;top:50%;left:50%;box-sizing:border-box;width:48px;height:48px;content:"";animation:scaleUp 1s linear infinite;border:5px solid #f00}@keyframes scaleUp{0%{transform:translate(-50%,-50%) scale(0)}60%,to{transform:translate(-50%,-50%) scale(1)}}@keyframes pulse{0%,60%,to{transform:scale(1)}80%{transform:scale(1.2)}}@media (prefers-reduced-motion){.loader,.loader:after{animation-duration:2s}}.mainlayout{display:grid;width:100%;min-height:calc(100vh - 32rem / var(--kolibri-root-font-size, 16));column-gap:calc(16rem / var(--kolibri-root-font-size, 16));grid-template-areas:"nav content";grid-template-columns:calc(400rem / var(--kolibri-root-font-size, 16)) calc(100% - 460rem / var(--kolibri-root-font-size, 16));grid-template-rows:1fr}.mainlayout>.nav-area{grid-area:nav}.mainlayout>.content{grid-area:content}