@public-ui/sample-react 3.0.1-rc.0 → 3.0.1

package/src/components/toolbar/basic.tsx

@@ -1,10 +1,41 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
+import { KolBadge, KolHeading, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Back',
+			_hideLabel: true,
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			_label: 'Next',
+			_hideLabel: true,
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			_label: 'Bold',
+		},
+	];
 	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
@@ -16,41 +47,13 @@ export const ToolbarBasic: FC = () => {
 			</SampleDescription>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<KolToolbar
-				class="block w-fit"
-				_label="Toolbar"
-				_items={[
-					{
-						_label: 'Back',
-						_hideLabel: true,
-						_icons: {
-							left: {
-								icon: 'codicon codicon-arrow-left',
-							},
-						},
-					},
-					{
-						_label: 'Next',
-						_hideLabel: true,
-						_icons: {
-							right: {
-								icon: 'codicon codicon-arrow-right',
-							},
-						},
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/react.main.tsx

@@ -1,7 +1,7 @@
+import { setTagNameTransformer } from '@public-ui/react';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
-import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
@@ -129,7 +129,7 @@ void (async () => {
 		const root = createRoot(htmlDivElement);
 		root.render(
 			<StrictMode>
-				<Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+				<Router>
 					<App />
 				</Router>
 			</StrictMode>,

package/src/style.scss

@@ -83,9 +83,8 @@ hr {
 }
 
 @media print {
-
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -26,5 +26,5 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "e2e/**/*"]
+	"include": ["**/*.ts", "**/*.tsx"]
 }

package/unocss.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from '@unocss/webpack';
-import { presetUno } from '@unocss/preset-uno';
+import { defineConfig } from '@unocss/vite';
+import { presetMini } from '@unocss/preset-mini';
 
 function pxValueToRem(size: number): string {
 	return `calc(${size}rem / var(--kolibri-root-font-size, 16))`;
@@ -10,152 +10,251 @@ function convertRem(value: number): string {
 }
 
 function convertDynamicClassValueToRem(value: string) {
-	return pxValueToRem(Number.parseFloat(value) * 16 / 4);
+	return pxValueToRem((Number.parseFloat(value) * 16) / 4);
 }
 
 export default defineConfig({
 	rules: [
-		[/^p-(\d+)$/, ([, d]) => ({
-			padding: convertDynamicClassValueToRem(d)
-		})],
-
-		[/^px-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d),
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^py-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d),
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^ps-(\d+)$/, ([, d]) => ({
-			'padding-inline-start': convertDynamicClassValueToRem(d)
-		})],
-		[/^pe-(\d+)$/, ([, d]) => ({
-			'padding-inline-end': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^pt-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^pl-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^pr-(\d+)$/, ([, d]) => ({
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^pb-(\d+)$/, ([, d]) => ({
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^p-t-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-l-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-r-(\d+)$/, ([, d]) => ({
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-b-(\d+)$/, ([, d]) => ({
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^m-(\d+)$/, ([, d]) => ({
-			margin: convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mx-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d),
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^my-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d),
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^ms-(\d+)$/, ([, d]) => ({
-			'margin-inline-start': convertDynamicClassValueToRem(d)
-		})],
-		[/^me-(\d+)$/, ([, d]) => ({
-			'margin-inline-end': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mt$/, ([, d]) => ({
-			'margin-top': pxValueToRem(16)
-		})],
-		[/^ml$/, ([, d]) => ({
-			'margin-left': pxValueToRem(16)
-		})],
-		[/^mr$/, ([, d]) => ({
-			'margin-right': pxValueToRem(16)
-		})],
-		[/^mb$/, ([, d]) => ({
-			'margin-bottom': pxValueToRem(16)
-		})],
-
-		[/^mt-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^ml-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^mr-(\d+)$/, ([, d]) => ({
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^mb-(\d+)$/, ([, d]) => ({
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^m-t-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-l-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-r-(\d+)$/, ([, d]) => ({
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-b-(\d+)$/, ([, d]) => ({
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mb-sm$/, ([, d]) => ({
-			'margin-bottom': pxValueToRem(14)
-		})],
+		[
+			/^p-(\d+)$/,
+			([, d]) => ({
+				padding: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^px-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^py-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ps-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pe-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^pt-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pl-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pr-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pb-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^p-t-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-l-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-r-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-b-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-(\d+)$/,
+			([, d]) => ({
+				margin: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mx-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^my-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ms-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^me-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mt$/,
+			() => ({
+				'margin-top': pxValueToRem(16),
+			}),
+		],
+		[
+			/^ml$/,
+			() => ({
+				'margin-left': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mr$/,
+			() => ({
+				'margin-right': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mb$/,
+			() => ({
+				'margin-bottom': pxValueToRem(16),
+			}),
+		],
+
+		[
+			/^mt-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^ml-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mr-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mb-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-t-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-l-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-r-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-b-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mb-sm$/,
+			() => ({
+				'margin-bottom': pxValueToRem(14),
+			}),
+		],
 
 		[/^gap-(\d+)$/, ([, d]) => ({ gap: convertDynamicClassValueToRem(d) })],
 		[/^gap-x-(\d+)$/, ([, d]) => ({ 'column-gap': convertDynamicClassValueToRem(d) })],
 		[/^gap-y-(\d+)$/, ([, d]) => ({ 'row-gap': convertDynamicClassValueToRem(d) })],
 
-		[/^w-(\d+)rem$/, ([, d]) => ({
-			width: pxValueToRem(Number.parseInt(d) * 16)
-		})],
+		[
+			/^w-(\d+)rem$/,
+			([, d]) => ({
+				width: pxValueToRem(Number.parseInt(d) * 16),
+			}),
+		],
 
-		[/^w-sm$/, () => ({
-			width: pxValueToRem(24 * 16) // 24rem
-		})],
+		[
+			/^w-sm$/,
+			() => ({
+				width: pxValueToRem(24 * 16), // 24rem
+			}),
+		],
 	],
 	extendTheme: (theme: any) => {
 		return {
 			...theme,
 			fontSize: {
-				xs: [ convertRem(0.75), '1' ],
-				sm: [ convertRem(0.875), '1.25' ],
-				base: [ convertRem(1), '1.5' ],
-				lg: [ convertRem(1.125), '1.75' ],
-				xl: [ convertRem(1.25), '1.75' ],
-				'2xl': [ convertRem(1.5), '2' ],
-				'3xl': [ convertRem(1.875), '2.25' ],
-				'4xl': [ convertRem(2.25), '2.5' ],
-				'5xl': [ convertRem(3), '1' ],
-				'6xl': [ convertRem(3.75), '1' ],
-				'7xl': [ convertRem(4.5), '1' ],
-				'8xl': [ convertRem(6), '1' ],
-				'9xl': [ convertRem(8), '1' ],
-				'kol-test': ['625%', '1']
-			  },
-			  borderRadius: {
+				xs: [convertRem(0.75), '1'],
+				sm: [convertRem(0.875), '1.25'],
+				base: [convertRem(1), '1.5'],
+				lg: [convertRem(1.125), '1.75'],
+				xl: [convertRem(1.25), '1.75'],
+				'2xl': [convertRem(1.5), '2'],
+				'3xl': [convertRem(1.875), '2.25'],
+				'4xl': [convertRem(2.25), '2.5'],
+				'5xl': [convertRem(3), '1'],
+				'6xl': [convertRem(3.75), '1'],
+				'7xl': [convertRem(4.5), '1'],
+				'8xl': [convertRem(6), '1'],
+				'9xl': [convertRem(8), '1'],
+				'kol-test': ['625%', '1'],
+			},
+			borderRadius: {
 				DEFAULT: convertRem(0.25),
 				none: '0',
 				sm: convertRem(0.125),
@@ -164,9 +263,9 @@ export default defineConfig({
 				xl: convertRem(0.75),
 				'2xl': convertRem(1),
 				'3xl': convertRem(1.5),
-				full: '9999px'
-			  },
-			  containers: {
+				full: '9999px',
+			},
+			containers: {
 				xs: `(min-width: ${convertRem(20)})`,
 				sm: `(min-width: ${convertRem(24)})`,
 				md: `(min-width: ${convertRem(28)})`,
@@ -178,9 +277,9 @@ export default defineConfig({
 				'5xl': `(min-width: ${convertRem(64)})`,
 				'6xl': `(min-width: ${convertRem(72)})`,
 				'7xl': `(min-width: ${convertRem(80)})`,
-				prose: '(min-width: 65ch)'
-			  },
-			  spacing: {
+				prose: '(min-width: 65ch)',
+			},
+			spacing: {
 				DEFAULT: convertRem(1),
 				none: '0',
 				xs: convertRem(0.75),
@@ -194,9 +293,9 @@ export default defineConfig({
 				'6xl': convertRem(3.75),
 				'7xl': convertRem(4.5),
 				'8xl': convertRem(6),
-				'9xl': convertRem(8)
-			  },
-			  textIndent: {
+				'9xl': convertRem(8),
+			},
+			textIndent: {
 				DEFAULT: convertRem(1.5),
 				xs: convertRem(0.5),
 				sm: convertRem(1),
@@ -204,16 +303,16 @@ export default defineConfig({
 				lg: convertRem(2),
 				xl: convertRem(2.5),
 				'2xl': convertRem(3),
-				'3xl': convertRem(4)
-			  },
-			  textStrokeWidth: {
+				'3xl': convertRem(4),
+			},
+			textStrokeWidth: {
 				DEFAULT: convertRem(1.5),
 				none: '0',
 				sm: 'thin',
 				md: 'medium',
-				lg: 'thick'
-			  },
-		}
+				lg: 'thick',
+			},
+		};
 	},
-	presets: [presetUno()],
+	presets: [presetMini()],
 });

package/vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import { execSync } from 'node:child_process';
+import react from '@vitejs/plugin-react-swc';
+import UnoCSS from '@unocss/vite';
+
+function getGitCommitHash() {
+	try {
+		return execSync('git rev-parse --short HEAD 2>/dev/null').toString().trim();
+	} catch {
+		return null;
+	}
+}
+
+export default defineConfig({
+	plugins: [react(), UnoCSS()],
+	define: {
+		'process.env.THEME_MODULE': JSON.stringify(process.env.THEME_MODULE || ''),
+		'process.env.THEME_EXPORT': JSON.stringify(process.env.THEME_EXPORT || ''),
+		'process.env.ENABLE_I18N_OVERWRITING': JSON.stringify(process.env.ENABLE_I18N_OVERWRITING || ''),
+		'process.env.ENABLE_TAG_NAME_TRANSFORMER': JSON.stringify(process.env.ENABLE_TAG_NAME_TRANSFORMER || ''),
+		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
+		'process.env.BUILD_DATE': JSON.stringify(new Date().toISOString()),
+		'process.env.COMMIT_HASH': JSON.stringify(getGitCommitHash()),
+	},
+	build: {
+		outDir: 'dist',
+		sourcemap: true,
+	},
+	server: {
+		port: 9191,
+		strictPort: true,
+	},
+});

package/dist/1006.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1006.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1006],{753:(n,e,t)=>{t.d(e,{v:()=>a});var i=t(257);const a=(n,e,t={})=>{(0,i.h)(n,"_hideLabel",e,t)}},1615:(n,e,t)=>{t.d(e,{a:()=>o,r:()=>l});var i=t(257);const a=new Set;function o(n){a.has(n)?i.L.error(`There already is a nav element with the label "${n}"`,{forceLog:!0}):a.add(n)}function l(n){a.delete(n)}},3472:(n,e,t)=>{t.d(e,{a:()=>c,b:()=>s,c:()=>r,h:()=>a,v:()=>h});var i=t(257);const a=[0,1,2,3,4,5,6],o=/[a-zA-Z0-9äöüÄÖÜß]/g,l=/^\d+$/;function s(n,e=1){return function(n){var e;return"string"==typeof n&&(null===(e=n.match(o))||void 0===e?void 0:e.length)||0}(n)>=e}function r(n){return l.test(n)}const d=new Set(["string"]),h=(n,e,t={})=>{(0,i.w)(n,"_label",(n=>"string"==typeof n),d,e,function(n){var e;return Object.assign(Object.assign({},n),{hooks:{afterPatch:(e,t,a,o)=>{var l,d;"function"==typeof(null===(l=n.hooks)||void 0===l?void 0:l.afterPatch)&&(null===(d=n.hooks)||void 0===d||d.afterPatch(e,t,a,o)),"string"==typeof e&&!1===s(e,3)&&!1===r(e)&&(0,i.b)(`The heading or label ("${e}") is not accessible. A label should consist of at least three readable characters.`),"string"==typeof e&&e.length>80&&(0,i.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=n.hooks)||void 0===e?void 0:e.beforePatch}})}(t))},c=h},8045:(n,e,t)=>{function i(n){var e,t,a="";if("string"==typeof n||"number"==typeof n)a+=n;else if("object"==typeof n)if(Array.isArray(n)){var o=n.length;for(e=0;e<o;e++)n[e]&&(t=i(n[e]))&&(a&&(a+=" "),a+=t)}else for(t in n)n[t]&&(a&&(a+=" "),a+=t);return a}function a(){for(var n,e,t=0,a="",o=arguments.length;t<o;t++)(n=arguments[t])&&(e=i(n))&&(a&&(a+=" "),a+=e);return a}t.d(e,{c:()=>a})},8625:(n,e,t)=>{t.r(e),t.d(e,{kol_nav:()=>p});var i=t(6123),a=t(257),o=t(9272),l=t(1615),s=t(9638),r=t(1698),d=t(8045),h=t(753),c=t(3472);t(4269);const p=class{constructor(n){(0,i.r)(this,n),this.handleToggleExpansionClick=n=>{n&&(this.state._expandedChildren.includes(n)?this.collapseChildren(n):this.expandChildren(n))},this.linkList=n=>(0,i.h)("ul",{class:(0,d.c)("kol-nav__list",{"kol-nav__list--nested":n.deep>0,"kol-nav__list--horizontal":0===n.deep&&"horizontal"===n.orientation,"kol-nav__list--vertical":0!==n.deep||"vertical"===n.orientation}),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,n]})}collapseChildren(n){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((e=>e!=n))})}entry(n,e,t,a,o){const l=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return(0,i.h)("div",{class:"kol-nav__entry-wrapper"},"string"==typeof a._href?(0,i.h)(r.e,Object.assign({class:"kol-nav__entry kol-nav__entry--link"},a,{_hideLabel:e,_icons:l})):(0,i.h)(r.a,{class:"kol-nav__entry kol-nav__entry--button",_label:a._label,_hideLabel:e,_icons:l,_on:{onClick:(n,e)=>{var t,i;void 0===(t=a)._href&&"function"==typeof(null===(i=t._on)||void 0===i?void 0:i.onClick)&&"function"==typeof a._on.onClick?a._on.onClick(n,e):this.handleToggleExpansionClick(a._children)}}}),t?this.expandButton(n,a,o):"")}expandButton(n,e,t){return(0,i.h)(r.a,{class:(0,d.c)("kol-nav__expand-button",{"kol-nav__expand-button--expanded":t}),_ariaExpanded:t,_disabled:!n,_icons:"codicon codicon-"+(t?"remove":"add"),_hideLabel:!0,_label:`${t?(0,o.t)("kol-nav-label-close",{placeholders:{label:e._label}}):(0,o.t)("kol-nav-label-open",{placeholders:{label:e._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(e._children)}})}li(n,e,t,a,o,l){const s=!!o._active,r=Array.isArray(o._children)&&o._children.length>0,h=Boolean(o._children&&this.state._expandedChildren.includes(o._children));return(0,i.h)("li",{class:(0,d.c)("kol-nav__list-item",{"kol-nav__list-item--active":s,"kol-nav__list-item--expanded":h,"kol-nav__list-item--has-children":r}),key:a},this.entry(n,e,r,o,h),h&&(0,i.h)(this.linkList,{collapsible:n,hideLabel:e,deep:t+1,links:o._children||[],orientation:l}))}initializeExpandedChildren(){const n=e=>{if(e._active)return e._children&&this.expandChildren(e._children),!0;if(e._children)for(const t of e._children)if(n(t))return this.expandChildren(e._children),!0;return!1};this.state._links.forEach(n)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,(0,a.G)("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,t=!0===this.state._hideLabel,l=this.state._orientation;return(0,i.h)("div",{key:"93757665047c23f9ed1339e16911376068df4443",class:(0,d.c)("kol-nav",`kol-nav--${l}`,{"kol-nav--is-compact":this.state._hideLabel})},(0,i.h)("nav",{key:"8d97dbdf8327d63448873a83585944dad8f38bf4",class:"kol-nav__navigation","aria-label":this.state._label,id:"nav"},(0,i.h)(this.linkList,{key:"c4ad4bb554917c2705af4db9d2b1b55e194732cb",collapsible:e,hideLabel:t,deep:0,links:this.state._links,orientation:l})),n&&(0,i.h)("div",{key:"de8a895e442929203ea710d8754fc686e9fb3e85",class:"kol-nav__compact"},(0,i.h)(r.a,{key:"9b315aeea88bae247b48932a06c88309731fb9ad",class:"kol-nav__toggle-button",_ariaControls:"nav",_ariaExpanded:!t,_icons:t?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:(0,o.t)(t?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"})))}validateCollapsible(n){((n,e)=>{(0,a.h)(n,"_collapsible",e)})(this,n)}validateHasCompactButton(n){((n,e)=>{(0,a.h)(n,"_hasCompactButton",e)})(this,n)}validateHasIconsWhenExpanded(n){((n,e)=>{(0,a.h)(n,"_hasIconsWhenExpanded",e)})(this,n)}validateHideLabel(n){(0,h.v)(this,n)}validateLabel(n,e,t=!1){t||(0,l.r)(this.state._label),(0,c.v)(this,n,{required:!0}),(0,a.x)(n),(0,l.a)(this.state._label)}validateLinks(n){(0,s.w)("KolNav",this,n),(0,a.D)("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(n){(0,a.w)(this,"_orientation",(n=>"horizontal"===n||"vertical"===n),new Set(["Orientation {horizontal, vertical}"]),n,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){(0,l.r)(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};p.style={default:"/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-nav {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    place-items: center;\n  }\n  .kol-nav--horizontal {\n    width: 100%;\n  }\n  .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n    width: 100%;\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list--horizontal {\n    flex-wrap: wrap;\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-button {\n    text-align: left;\n  }\n}"}},9272:(n,e,t)=>{t.d(e,{t:()=>o});var i=t(4269),a=t(257);let o=(n,e)=>{var t;return(null!==(t=(0,i.g)())&&void 0!==t?t:(0,i.i)("de")).translate(n,e)};"test"===a.p&&(o=n=>n)},9638:(n,e,t)=>{t.d(e,{w:()=>a});var i=t(257);const a=(n,e,t)=>{(0,i.y)(e,"_links",(n=>"object"==typeof n&&("string"==typeof n._href||"string"==typeof n._label)),t),(0,i.z)(n,e.state._links.length)}}}]);

package/dist/1006.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */