@public-ui/sample-react 2.1.3 → 2.1.4

package/src/components/table/stateless-with-selection.tsx

@@ -12,24 +12,26 @@ type Data = (typeof DATA)[0];
 
 export const TableStatelessWithSelection: FC = () => {
 	const selection: KoliBriTableSelection = {
-		label: (row: Data) => `Selection for ${row.name}`,
+		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys: ['1002'],
 		keyPropertyName: 'id',
 	};
 
-	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>();
+	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event, selection) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: string[]) => {
 		console.log('Selection change via callback', selection);
 	};
 
 	useEffect(() => {
+		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
 		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
 
 		return () => {
+			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
 			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);

package/src/components/tabs/basic.tsx

@@ -9,7 +9,7 @@ const tabs = [
 		_icons: 'codicon codicon-pie-chart',
 		_label: 'Erster Tab',
 		_on: {
-			onSelect: (event) => {
+			onSelect: (event: Event) => {
 				console.log('Erster Tab ausgewählt', event);
 			},
 		},

package/src/components/tabs/icons-only.tsx

@@ -32,7 +32,8 @@ export const TabsIconsOnly: FC = () => (
 		<SampleDescription>
 			<p>Hier sind verschiedene Varianten von Tabs mit Icons. Nur der Inhalt eines Tabs wird gleichzeitig angezeigt.</p>
 		</SampleDescription>
-		<KolTabs _tabs={tabs}>
+
+		<KolTabs _label="Tabs with icons" _tabs={tabs}>
 			<div slot="tab-0">Inhalte von Tab 1</div>
 			<div slot="tab-1">Inhalte von Tab 2</div>
 			<div slot="tab-2">Inhalte von Tab 3</div>

package/src/scenarios/focus-elements.tsx

@@ -23,6 +23,7 @@ import type { FC, ForwardRefRenderFunction } from 'react';
 import { useMemo } from 'react';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();
@@ -115,14 +116,15 @@ const Fallback = (props: FallbackProps) => {
 };
 
 export const FocusElements: FC = () => {
-	const ref = useRef(null);
+	const ref = useRef<FocusableElement>(null);
 	const focusElements = useMemo(() => getFocusElements(), []);
 	const [searchParams] = useSearchParams();
 	const componentName = searchParams.get('component');
 
 	useLayoutEffect(() => {
 		setTimeout(() => {
-			(ref.current as unknown as HTMLElement)?.focus();
+			// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.
+			void ref.current?.kolFocus();
 		}, 500);
 	}, [ref]);
 

package/src/scenarios/inputs-get-value.tsx

@@ -16,12 +16,16 @@ import {
 	KolInputRange,
 	KolInputText,
 	KolSelect,
+	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react';
 
 import { SampleDescription } from '../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
 import type { HTMLStencilElement } from '@stencil/core/internal';
+import type { W3CInputValue } from '@public-ui/components';
+
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 const EventLoggerActiveContext = createContext<boolean>(false);
 
@@ -55,7 +59,7 @@ const Scenario = (props: Props) => {
 	const eventListeners = Object.fromEntries(
 		['onInput', 'onChange', 'onBlur', 'onClick', 'onFocus', 'onMouseDown'].map((eventName) => [
 			eventName,
-			(event, value) => {
+			(event: Event, value: W3CInputValue) => {
 				if (eventLoggerActive) {
 					console.log(props.inputProps._label, eventName, value, event);
 				}
@@ -148,6 +152,14 @@ export const InputsGetValue: FC = () => {
 								],
 							}}
 						/>
+						<Scenario
+							InputComponent={KolCombobox}
+							inputProps={{
+								_label: 'KolCombobox',
+								_suggestions: COUNTRY_SUGGESTIONS,
+								_value: 'Deutschland',
+							}}
+						/>
 						<Scenario
 							InputComponent={KolTextarea}
 							inputProps={{

package/src/scenarios/static-form.tsx

@@ -11,11 +11,13 @@ import {
 	KolInputRange,
 	KolInputText,
 	KolSelect,
+	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
 export const StaticForm: FC = () => {
 	const { searchParams } = new URL(location.href);
@@ -90,6 +92,7 @@ export const StaticForm: FC = () => {
 					]}
 					_rows={2}
 				/>
+				<KolCombobox _name="combobox" _label="Combobox" _suggestions={COUNTRY_SUGGESTIONS} />
 				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
 				<div className="flex flex-wrap gap-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />

package/src/shares/routes.ts

@@ -9,6 +9,7 @@ import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
 import { BUTTON_ROUTES } from '../components/button/routes';
 import { CARD_ROUTES } from '../components/card/routes';
 import { DETAILS_ROUTES } from '../components/details/routes';
+import { DRAWER_ROUTES } from '../components/drawer/routes';
 import { FORM_ROUTES } from '../components/form/routes';
 import { HANDOUT_ROUTES } from '../components/handout/routes';
 import { HEADING_ROUTES } from '../components/heading/routes';
@@ -63,6 +64,7 @@ export const ROUTES: Routes = {
 	...CARD_ROUTES,
 	...COMBOBOX_ROUTES,
 	...DETAILS_ROUTES,
+	...DRAWER_ROUTES,
 	...FORM_ROUTES,
 	...HEADING_ROUTES,
 	...ICON_ROUTES,

package/dist/1204.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1204.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1204],{8647:(t,e,n)=>{n.d(e,{a:()=>l,v:()=>i});var o=n(8921);const i=(t,e,n)=>{(0,o.w)(t,e,(t=>"string"==typeof t&&r.includes(t)),new Set(r),n,{defaultValue:"top"})},r=["left","right","top","bottom"],l=(t,e)=>{i(t,"_align",e)}},8410:(t,e,n)=>{n.d(e,{a:()=>xt,b:()=>mt});var o=n(1330),i=Object.defineProperty,r=Object.defineProperties,l=Object.getOwnPropertyDescriptors,c=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,a=(t,e,n)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,u=(t,e)=>{for(var n in e||(e={}))s.call(e,n)&&a(t,n,e[n]);if(c)for(var n of c(e))f.call(e,n)&&a(t,n,e[n]);return t},d=(t,e)=>r(t,l(e)),p=(t,e)=>{var n={};for(var o in t)s.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&c)for(var o of c(t))e.indexOf(o)<0&&f.call(t,o)&&(n[o]=t[o]);return n},m=(t,e,n)=>new Promise(((o,i)=>{var r=t=>{try{c(n.next(t))}catch(t){i(t)}},l=t=>{try{c(n.throw(t))}catch(t){i(t)}},c=t=>t.done?o(t.value):Promise.resolve(t.value).then(r,l);c((n=n.apply(t,e)).next())}));const h=Math.min,y=Math.max,g=Math.round,x=Math.floor,v=t=>({x:t,y:t}),w={left:"right",right:"left",bottom:"top",top:"bottom"},b={start:"end",end:"start"};function R(t,e,n){return y(t,h(e,n))}function E(t,e){return"function"==typeof t?t(e):t}function O(t){return t.split("-")[0]}function T(t){return t.split("-")[1]}function L(t){return"x"===t?"y":"x"}function A(t){return"y"===t?"height":"width"}function S(t){return["top","bottom"].includes(O(t))?"y":"x"}function P(t){return L(S(t))}function D(t){return t.replace(/start|end/g,(t=>b[t]))}function k(t){return t.replace(/left|right|bottom|top/g,(t=>w[t]))}function C(t){return"number"!=typeof t?function(t){return u({top:0,right:0,bottom:0,left:0},t)}(t):{top:t,right:t,bottom:t,left:t}}function F(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function H(t,e,n){let{reference:o,floating:i}=t;const r=S(e),l=P(e),c=A(l),s=O(e),f="y"===r,a=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[c]/2-i[c]/2;let p;switch(s){case"top":p={x:a,y:o.y-i.height};break;case"bottom":p={x:a,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(T(e)){case"start":p[l]-=d*(n&&f?-1:1);break;case"end":p[l]+=d*(n&&f?-1:1)}return p}function W(t,e){return m(this,null,(function*(){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:f="clippingAncestors",rootBoundary:a="viewport",elementContext:p="floating",altBoundary:m=!1,padding:h=0}=E(e,t),y=C(h),g=c[m?"floating"===p?"reference":"floating":p],x=F(yield r.getClippingRect({element:null==(n=yield null==r.isElement?void 0:r.isElement(g))||n?g:g.contextElement||(yield null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:f,rootBoundary:a,strategy:s})),v="floating"===p?d(u({},l.floating),{x:o,y:i}):l.reference,w=yield null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating),b=(yield null==r.isElement?void 0:r.isElement(w))&&(yield null==r.getScale?void 0:r.getScale(w))||{x:1,y:1},R=F(r.convertOffsetParentRelativeRectToViewportRelativeRect?yield r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:v,offsetParent:w,strategy:s}):v);return{top:(x.top-R.top+y.top)/b.y,bottom:(R.bottom-x.bottom+y.bottom)/b.y,left:(x.left-R.left+y.left)/b.x,right:(R.right-x.right+y.right)/b.x}}))}function j(t){return B(t)?(t.nodeName||"").toLowerCase():"#document"}function _(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(B(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function B(t){return t instanceof Node||t instanceof _(t).Node}function M(t){return t instanceof Element||t instanceof _(t).Element}function $(t){return t instanceof HTMLElement||t instanceof _(t).HTMLElement}function z(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof _(t).ShadowRoot)}function N(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=J(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function I(t){return["table","td","th"].includes(j(t))}function q(t){return[":popover-open",":modal"].some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function X(t){const e=Y(),n=J(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function Y(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function G(t){return["html","body","#document"].includes(j(t))}function J(t){return _(t).getComputedStyle(t)}function K(t){return M(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Q(t){if("html"===j(t))return t;const e=t.assignedSlot||t.parentNode||z(t)&&t.host||V(t);return z(e)?e.host:e}function U(t){const e=Q(t);return G(e)?t.ownerDocument?t.ownerDocument.body:t.body:$(e)&&N(e)?e:U(e)}function Z(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=U(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=_(i);return r?e.concat(l,l.visualViewport||[],N(i)?i:[],l.frameElement&&n?Z(l.frameElement):[]):e.concat(i,Z(i,[],n))}function tt(t){const e=J(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=$(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,c=g(n)!==r||g(o)!==l;return c&&(n=r,o=l),{width:n,height:o,$:c}}function et(t){return M(t)?t:t.contextElement}function nt(t){const e=et(t);if(!$(e))return v(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=tt(e);let l=(r?g(n.width):n.width)/o,c=(r?g(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),c&&Number.isFinite(c)||(c=1),{x:l,y:c}}const ot=v(0);function it(t){const e=_(t);return Y()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:ot}function rt(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=et(t);let l=v(1);e&&(o?M(o)&&(l=nt(o)):l=nt(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==_(t))&&e}(r,n,o)?it(r):v(0);let s=(i.left+c.x)/l.x,f=(i.top+c.y)/l.y,a=i.width/l.x,u=i.height/l.y;if(r){const t=_(r),e=o&&M(o)?_(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=nt(i),e=i.getBoundingClientRect(),o=J(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;s*=t.x,f*=t.y,a*=t.x,u*=t.y,s+=r,f+=l,n=_(i),i=n.frameElement}}return F({width:a,height:u,x:s,y:f})}function lt(t){return rt(V(t)).left+K(t).scrollLeft}function ct(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=_(t),o=V(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=Y();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=K(t),o=t.ownerDocument.body,i=y(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=y(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+lt(t);const c=-n.scrollTop;return"rtl"===J(o).direction&&(l+=y(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:c}}(V(t));else if(M(e))o=function(t,e){const n=rt(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=$(t)?nt(t):v(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=it(t);o=d(u({},e),{x:e.x-n.x,y:e.y-n.y})}return F(o)}function st(t,e){const n=Q(t);return!(n===e||!M(n)||G(n))&&("fixed"===J(n).position||st(n,e))}function ft(t,e,n){const o=$(e),i=V(e),r="fixed"===n,l=rt(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const s=v(0);if(o||!o&&!r)if(("body"!==j(e)||N(i))&&(c=K(e)),o){const t=rt(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=lt(i));return{x:l.left+c.scrollLeft-s.x,y:l.top+c.scrollTop-s.y,width:l.width,height:l.height}}function at(t){return"static"===J(t).position}function ut(t,e){return $(t)&&"fixed"!==J(t).position?e?e(t):t.offsetParent:null}function dt(t,e){const n=_(t);if(q(t))return n;if(!$(t)){let e=Q(t);for(;e&&!G(e);){if(M(e)&&!at(e))return e;e=Q(e)}return n}let o=ut(t,e);for(;o&&I(o)&&at(o);)o=ut(o,e);return o&&G(o)&&at(o)&&!X(o)?n:o||function(t){let e=Q(t);for(;$(e)&&!G(e);){if(q(e))return null;if(X(e))return e;e=Q(e)}return null}(t)||n}const pt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=V(o),c=!!e&&q(e.floating);if(o===l||c&&r)return n;let s={scrollLeft:0,scrollTop:0},f=v(1);const a=v(0),u=$(o);if((u||!u&&!r)&&(("body"!==j(o)||N(l))&&(s=K(o)),$(o))){const t=rt(o);f=nt(o),a.x=t.x+o.clientLeft,a.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+a.x,y:n.y*f.y-s.scrollTop*f.y+a.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?q(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=Z(t,[],!1).filter((t=>M(t)&&"body"!==j(t))),i=null;const r="fixed"===J(t).position;let l=r?Q(t):t;for(;M(l)&&!G(l);){const e=J(l),n=X(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||N(l)&&!n&&st(t,l))?o=o.filter((t=>t!==l)):i=e,l=Q(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=ct(e,n,i);return t.top=y(o.top,t.top),t.right=h(o.right,t.right),t.bottom=h(o.bottom,t.bottom),t.left=y(o.left,t.left),t}),ct(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:dt,getElementRects:function(t){return m(this,null,(function*(){const e=this.getOffsetParent||dt,n=this.getDimensions,o=yield n(t.floating);return{reference:ft(t.reference,yield e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}}))},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=tt(t);return{width:e,height:n}},getScale:nt,isElement:M,isRTL:function(t){return"rtl"===J(t).direction}};function mt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:c="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=et(t),a=i||r?[...f?Z(f):[],...Z(e)]:[];a.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const p=f&&c?function(t,e){let n,o=null;const i=V(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(c,s){void 0===c&&(c=!1),void 0===s&&(s=1),r();const{left:f,top:a,width:p,height:m}=t.getBoundingClientRect();if(c||e(),!p||!m)return;const g={rootMargin:-x(a)+"px "+-x(i.clientWidth-(f+p))+"px "+-x(i.clientHeight-(a+m))+"px "+-x(f)+"px",threshold:y(0,h(1,s))||1};let v=!0;function w(t){const e=t[0].intersectionRatio;if(e!==s){if(!v)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),1e3)}v=!1}try{o=new IntersectionObserver(w,d(u({},g),{root:i.ownerDocument}))}catch(t){o=new IntersectionObserver(w,g)}o.observe(t)}(!0),r}(f,n):null;let m,g=-1,v=null;l&&(v=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&v&&(v.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=v)||t.observe(e)}))),n()})),f&&!s&&v.observe(f),v.observe(e));let w=s?rt(t):null;return s&&function e(){const o=rt(t);!w||o.x===w.x&&o.y===w.y&&o.width===w.width&&o.height===w.height||n(),w=o,m=requestAnimationFrame(e)}(),n(),()=>{var t;a.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==p||p(),null==(t=v)||t.disconnect(),v=null,s&&cancelAnimationFrame(m)}}const ht=function(t){return void 0===t&&(t={}),{name:"shift",options:t,fn(e){return m(this,null,(function*(){const{x:n,y:o,placement:i}=e,r=E(t,e),{mainAxis:l=!0,crossAxis:c=!1,limiter:s={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}}}=r,f=p(r,["mainAxis","crossAxis","limiter"]),a={x:n,y:o},m=yield W(e,f),h=S(O(i)),y=L(h);let g=a[y],x=a[h];if(l){const t="y"===y?"bottom":"right";g=R(g+m["y"===y?"top":"left"],g,g-m[t])}if(c){const t="y"===h?"bottom":"right";x=R(x+m["y"===h?"top":"left"],x,x-m[t])}const v=s.fn(d(u({},e),{[y]:g,[h]:x}));return d(u({},v),{data:{x:v.x-n,y:v.y-o}})}))}}},yt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,fn(e){return m(this,null,(function*(){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:f}=e,a=E(t,e),{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:h="bestFit",fallbackAxisSideDirection:y="none",flipAlignment:g=!0}=a,x=p(a,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","fallbackAxisSideDirection","flipAlignment"]);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const v=O(i),w=O(c)===c,b=yield null==s.isRTL?void 0:s.isRTL(f.floating),R=m||(w||!g?[k(c)]:function(t){const e=k(t);return[D(t),e,D(e)]}(c));m||"none"===y||R.push(...function(t,e,n,o){const i=T(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(O(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(D)))),r}(c,g,y,b));const L=[c,...R],S=yield W(e,x),C=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&C.push(S[v]),d){const t=function(t,e,n){void 0===n&&(n=!1);const o=T(t),i=P(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=k(l)),[l,k(l)]}(i,l,b);C.push(S[t[0]],S[t[1]])}if(F=[...F,{placement:i,overflows:C}],!C.every((t=>t<=0))){var H,j;const t=((null==(H=r.flip)?void 0:H.index)||0)+1,e=L[t];if(e)return{data:{index:t,overflows:F},reset:{placement:e}};let n=null==(j=F.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:j.placement;if(!n)switch(h){case"bestFit":{var _;const t=null==(_=F.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:_[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}))}}},gt=t=>({name:"arrow",options:t,fn(e){return m(this,null,(function*(){const{x:n,y:o,placement:i,rects:r,platform:l,elements:c,middlewareData:s}=e,{element:f,padding:a=0}=E(t,e)||{};if(null==f)return{};const d=C(a),p={x:n,y:o},m=P(i),y=A(m),g=yield l.getDimensions(f),x="y"===m,v=x?"top":"left",w=x?"bottom":"right",b=x?"clientHeight":"clientWidth",O=r.reference[y]+r.reference[m]-p[m]-r.floating[y],L=p[m]-r.reference[m],S=yield null==l.getOffsetParent?void 0:l.getOffsetParent(f);let D=S?S[b]:0;D&&(yield null==l.isElement?void 0:l.isElement(S))||(D=c.floating[b]||r.floating[y]);const k=O/2-L/2,F=D/2-g[y]/2-1,H=h(d[v],F),W=h(d[w],F),j=H,_=D-g[y]-W,V=D/2-g[y]/2+k,B=R(j,V,_),M=!s.arrow&&null!=T(i)&&V!==B&&r.reference[y]/2-(V<j?H:W)-g[y]/2<0,$=M?V<j?V-j:V-_:0;return{[m]:p[m]+$,data:u({[m]:B,centerOffset:V-B-$},M&&{alignmentOffset:$}),reset:M}}))}}),xt=t=>m(void 0,[t],(function*({floatingElement:t,referenceElement:e,arrowElement:n,align:i="top"}){var r,l,c,s;if("test"!==o.p){const o=[(s=null!==(r=null==n?void 0:n.offsetHeight)&&void 0!==r?r:10,void 0===s&&(s=0),{name:"offset",options:s,fn(t){return m(this,null,(function*(){var e,n;const{x:o,y:i,placement:r,middlewareData:l}=t,c=yield function(t,e){return m(this,null,(function*(){const{placement:n,platform:o,elements:i}=t,r=yield null==o.isRTL?void 0:o.isRTL(i.floating),l=O(n),c=T(n),s="y"===S(n),f=["left","top"].includes(l)?-1:1,a=r&&s?-1:1,d=E(e,t);let{mainAxis:p,crossAxis:m,alignmentAxis:h}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:u({mainAxis:0,crossAxis:0,alignmentAxis:null},d);return c&&"number"==typeof h&&(m="end"===c?-1*h:h),s?{x:m*a,y:p*f}:{x:p*f,y:m*a}}))}(t,s);return r===(null==(e=l.offset)?void 0:e.placement)&&null!=(n=l.arrow)&&n.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:d(u({},c),{placement:r})}}))}}),yt(),ht()];n&&o.push(gt({element:n}));const{x:f,y:a,middlewareData:p,placement:h}=yield((t,e,n)=>{const o=new Map,i=u({platform:pt},n),r=d(u({},i.platform),{_c:o});return((t,e,n)=>m(void 0,null,(function*(){const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=yield null==l.isRTL?void 0:l.isRTL(e);let f=yield l.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:p}=H(f,o,s),m=o,h={},y=0;for(let n=0;n<c.length;n++){const{name:r,fn:g}=c[n],{x,y:v,data:w,reset:b}=yield g({x:a,y:p,initialPlacement:o,placement:m,strategy:i,middlewareData:h,rects:f,platform:l,elements:{reference:t,floating:e}});a=null!=x?x:a,p=null!=v?v:p,h=d(u({},h),{[r]:u(u({},h[r]),w)}),b&&y<=50&&(y++,"object"==typeof b&&(b.placement&&(m=b.placement),b.rects&&(f=!0===b.rects?yield l.getElementRects({reference:t,floating:e,strategy:i}):b.rects),({x:a,y:p}=H(f,m,s))),n=-1)}return{x:a,y:p,placement:m,strategy:i,middlewareData:h}})))(t,e,d(u({},i),{platform:r}))})(e,t,{placement:i,middleware:o,strategy:"fixed"});Object.assign(t.style,{left:`${f}px`,top:`${a}px`,visibility:"visible"}),n&&((null===(l=p.arrow)||void 0===l?void 0:l.x)?Object.assign(n.style,{left:`${p.arrow.x}px`,top:"bottom"===h?-n.offsetHeight/2+"px":"",bottom:"top"===h?-n.offsetHeight/2+"px":""}):(null===(c=p.arrow)||void 0===c?void 0:c.y)&&Object.assign(n.style,{left:"right"===h?-n.offsetWidth/2+"px":"",right:"left"===h?-n.offsetWidth/2+"px":"",top:`${p.arrow.y}px`}))}}))},1330:(t,e,n)=>{n.d(e,{S:()=>l,a:()=>c,b:()=>r,c:()=>o,h:()=>f,i:()=>i,p:()=>s,s:()=>a});const o=t=>"object"==typeof t&&null!==t,i=(t,e=0)=>"string"==typeof t&&t.length>=e,r=t=>{if("object"!=typeof t||null===t)return i(t,1);for(const e in t)if(!1===i(e,1))return!1;return!0},l=new Event("StateChange"),c=(t,e)=>{o(t)&&t&&(t.focus=t=>null==e?void 0:e.focus(t))};let s="development";try{s="production"}catch(t){s="production"}const f=(t,e,n)=>{if(t&&e&&"string"==typeof n){const o=t.querySelector(`[slot="${n}"]`);o&&e.appendChild(o)}},a=t=>""===t}}]);

package/dist/7909.js

@@ -1,2 +0,0 @@
-/*! For license information please see 7909.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[7909],{5507:(e,t,n)=>{n.d(t,{i:()=>l,n:()=>a,r:()=>s});var o=n(1330),i=n(3713);const r=()=>{let e=(0,i.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,i.d)(),"KoliBri",{value:e,writable:!1})),e},l=()=>{(()=>{const e=(0,i.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,i.s)(t.includes("dev-mode=true")),(0,i.b)(t.includes("experimental-mode=true")),(0,i.c)(t.includes("color-contrast-analysis=true")))}})(),i.L.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.1.3\n\t",{forceLog:!0})},s=()=>{!0!==r().adviceShown&&(Object.defineProperty(r(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let a=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(a=()=>"nonce")},7909:(e,t,n)=>{n.r(t),n.d(t,{initialize:()=>a});var o=n(5507),i=n(3713),r=n(8921);function l(e,t){try{Object.defineProperty((()=>{let e=(0,i.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,i.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){i.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>i.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,i.e)()){(0,o.r)(),l("a11yColorContrast",r.A),l("querySelector",r.v),l("querySelectorAll",r.B),l("querySelectorColors",r.C),l("utils",(function(){return r.z})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,i.g)().body,t=(0,i.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,i.g)().body.appendChild(t),s("Development mode",(0,i.e)()),s("Experimental mode",(0,i.a)()),s("Color contrast analysis",(0,i.f)()),(0,i.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.z.queryHtmlElementColors((0,i.g)().createElement("div"),(0,r.A)(e),!1,!1)}),1e4)}),2500)}}}},1330:(e,t,n)=>{n.d(t,{S:()=>l,a:()=>s,b:()=>r,c:()=>o,h:()=>c,i:()=>i,p:()=>a,s:()=>u});const o=e=>"object"==typeof e&&null!==e,i=(e,t=0)=>"string"==typeof e&&e.length>=t,r=e=>{if("object"!=typeof e||null===e)return i(e,1);for(const t in e)if(!1===i(t,1))return!1;return!0},l=new Event("StateChange"),s=(e,t)=>{o(e)&&e&&(e.focus=e=>null==t?void 0:t.focus(e))};let a="development";try{a="production"}catch(e){a="production"}const c=(e,t,n)=>{if(e&&t&&"string"==typeof n){const o=e.querySelector(`[slot="${n}"]`);o&&t.appendChild(o)}},u=e=>""===e}}]);

package/dist/8890.js

@@ -1,2 +0,0 @@
-/*! For license information please see 8890.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8890],{1565:(t,e,o)=>{o.d(e,{I:()=>i});var n=o(6981);const i=({accessKey:t,label:e})=>{let[o,...i]=e.split(t);return 0===i.length&&(t=t.toUpperCase(),[o,...i]=e.split(t)),0===i.length&&(t=t.toLowerCase(),[o,...i]=e.split(t)),(0,n.h)(n.F,null,o,i.length?(0,n.h)(n.F,null,(0,n.h)("u",null,t),i.join(t)):null)}},8647:(t,e,o)=>{o.d(e,{a:()=>a,v:()=>i});var n=o(8921);const i=(t,e,o)=>{(0,n.w)(t,e,(t=>"string"==typeof t&&s.includes(t)),new Set(s),o,{defaultValue:"top"})},s=["left","right","top","bottom"],a=(t,e)=>{i(t,"_align",e)}},4854:(t,e,o)=>{o.d(e,{A:()=>s});var n=o(3713),i=o(8921);class s{constructor(t,e,o){var s,a,r,l;if(this.experimentalMode=(0,n.a)(),this.setFormAssociatedValue=t=>{var e;const o=null===(e=this.formAssociated)||void 0===e?void 0:e.getAttribute("name");null!==o&&""!==o||(0,i.j)(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);const n=this.tryToStringifyValue(t);this.syncValue(t,n,this.formAssociated),this.syncValue(t,n,this.syncToOwnInput)},this.component=t,this.host=this.findHostWithShadowRoot(o),this.type=e,this.experimentalMode&&("KOL-BUTTON"===(l=null===(s=this.host)||void 0===s?void 0:s.tagName)||"KOL-INPUT-CHECKBOX"===l||"KOL-INPUT-COLOR"===l||"KOL-INPUT-DATE"===l||"KOL-INPUT-EMAIL"===l||"KOL-INPUT-FILE"===l||"KOL-INPUT-NUMBER"===l||"KOL-INPUT-PASSWORD"===l||"KOL-INPUT-RADIO"===l||"KOL-INPUT-RANGE"===l||"KOL-INPUT-TEXT"===l||"KOL-SELECT"===l||"KOL-TEXTAREA"===l)){switch(null===(a=this.host)||void 0===a||a.querySelectorAll("input,select,textarea").forEach((t=>{var e;null===(e=this.host)||void 0===e||e.removeChild(t)})),this.type){case"button":case"color":case"date":case"email":case"file":case"number":case"password":case"radio":case"range":case"text":this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type",this.type);break;case"select":this.formAssociated=document.createElement("select"),this.formAssociated.setAttribute("multiple","");break;case"textarea":this.formAssociated=document.createElement("textarea");break;default:this.formAssociated=document.createElement("input"),this.formAssociated.setAttribute("type","hidden")}this.formAssociated.setAttribute("aria-hidden","true"),this.formAssociated.setAttribute("data-form-associated",""),this.formAssociated.setAttribute("hidden",""),null===(r=this.host)||void 0===r||r.appendChild(this.formAssociated)}}findHostWithShadowRoot(t){for(;null===(null==t?void 0:t.shadowRoot)&&t!==document.body;)(t=null==t?void 0:t.parentNode).host&&(t=t.host);return t}setAttribute(t,e,o){if(this.experimentalMode)try{if("boolean"!=typeof(o="object"==typeof o&&null!==o?JSON.stringify(o):o)&&"number"!=typeof o&&"string"!=typeof o)throw new Error("Invalid value type: "+typeof o);null==e||e.setAttribute(t,`${o}`)}catch(o){null==e||e.removeAttribute(t)}}tryToStringifyValue(t){try{return"object"==typeof t&&null!==t?JSON.stringify(t).toString():null==t?null:t.toString()}catch(t){return(0,i.l)(`The form field raw value is not able to stringify! ${t}`),""}}syncValue(t,e,o){if(o)switch(this.type){case"file":o.files=t;break;case"select":o.querySelectorAll("option").forEach((t=>{o.removeChild(t)})),Array.isArray(t)&&t.forEach((t=>{const e=this.tryToStringifyValue(t);if("string"==typeof e){const t=document.createElement("option");t.setAttribute("value",e),t.setAttribute("selected",""),o.appendChild(t)}}));break;case"radio":"string"==typeof e&&(o.setAttribute("value",e),o.setAttribute("checked",""),o.value=e);break;default:"string"==typeof e?(o.setAttribute("value",e),o.value=e):(o.removeAttribute("value"),o.value="")}}validateName(t){((t,e,o)=>{(0,i.i)(t,"_name",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.setAttribute("name",this.formAssociated,this.component.state._name)}}}),void 0===t&&(0,i.j)("Ein Name am Eingabefeldern oder Schalter ist nicht zwingend erforderlich, kann aber für die Autocomplete-Funktion und für das statische Versenden des Eingabefeldes relevant sein.")}validateSyncValueBySelector(t){if(this.experimentalMode&&"string"==typeof t){const e=document.querySelector(t);e&&(this.syncToOwnInput=e)}}componentWillLoad(){this.validateName(this.component._name),this.validateSyncValueBySelector(this.component._syncValueBySelector)}}},1808:(t,e,o)=>{o.d(e,{I:()=>p,g:()=>d,v:()=>h});var n=o(5237),i=o(4854),s=o(8921),a=o(6192),r=o(6385),l=o(5988),c=o(5821);const h=(t,e)=>{(0,s.w)(t,"_msg",(t=>"object"==typeof t),new Set(["Object"]),e)},d=t=>{var e,o;const n=Boolean("error"===(null===(e=t._msg)||void 0===e?void 0:e._type)&&t._msg._description&&(null===(o=t._msg._description)||void 0===o?void 0:o.length)>0)&&!0===t._touched,i="string"==typeof t._hint&&t._hint.length>0,s=[];return!0===n&&s.push(`${t._id}-error`),!0===i&&s.push(`${t._id}-hint`),{hasError:n,hasHint:i,ariaDescribedBy:s}};class u extends i.A{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){(0,s.b)(this.component,"_alert",t)}validateTouched(t){((t,e)=>{(0,s.b)(t,"_touched",e)})(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class p extends u{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this),onInput:this.onInput.bind(this)},this.component=t}validateAccessKey(t){(0,s.i)(this.component,"_accessKey",t)}validateAdjustHeight(t){((t,e)=>{(0,s.b)(t,"_adjustHeight",e)})(this.component,t)}validateDisabled(t){(0,s.b)(this.component,"_disabled",t),!0===t&&(0,s.c)()}validateTooltipAlign(t){(0,c.v)(this.component,t)}validateError(t){const e=t?{_description:t,_type:"error"}:void 0;this.validateMsg(e)}validateHideError(t){((t,e,o)=>{(0,s.b)(t,"_hideError",e,o)})(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&(0,s.a)("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHideLabel(t){(0,a.v)(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&(0,s.a)("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){(0,s.i)(this.component,"_hint",t)}validateId(t){(0,s.i)(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||(0,s.j)("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){(0,r.a)(this.component,t,{required:!0})}validateMsg(t){h(this.component,t)}validateOn(t){"object"==typeof t&&(0,s.s)(this.component,"_on",t)}validateSmartButton(t){(0,s.o)(t,(()=>{try{t=(0,s.p)(t)}catch(t){}(0,s.s)(this.component,"_smartButton",t)}))}validateTabIndex(t){(0,l.v)(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateMsg(this.component._msg),this.validateDisabled(this.component._disabled),this.validateHideError(this.component._hideError),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,(0,n.s)(t),(0,n.t)("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t,e){var o;e=null!=e?e:t.target.value,(0,n.t)("change",this.host,e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e),this.valueChangeListeners.forEach((t=>t(e)))}onInput(t,e=!0,o){var i;o=null!=o?o:t.target.value,(0,n.s)(t),(0,n.t)("input",this.host,o),e&&this.setFormAssociatedValue(o),"function"==typeof(null===(i=this.component._on)||void 0===i?void 0:i.onInput)&&this.component._on.onInput(t,o)}onClick(t){var e;(0,n.s)(t),(0,n.t)("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,(0,n.s)(t),(0,n.t)("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}},5507:(t,e,o)=>{o.d(e,{i:()=>a,n:()=>l,r:()=>r});var n=o(1330),i=o(3713);const s=()=>{let t=(0,i.d)().KoliBri;return void 0===t&&(t={},Object.defineProperty((0,i.d)(),"KoliBri",{value:t,writable:!1})),t},a=()=>{(()=>{const t=(0,i.g)().querySelector('meta[name="kolibri"]');if(t&&t.hasAttribute("content")){const e=t.getAttribute("content");"string"==typeof e&&((0,i.s)(e.includes("dev-mode=true")),(0,i.b)(e.includes("experimental-mode=true")),(0,i.c)(e.includes("color-contrast-analysis=true")))}})(),i.L.debug("\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | `--' |  |) /_  ,--.--. `--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n`--' `--´  `---´  `--' `--' `------´  `--'    `--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.1.3\n\t",{forceLog:!0})},r=()=>{!0!==s().adviceShown&&(Object.defineProperty(s(),"adviceShown",{get:function(){return!0}}),i.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let l=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(l=()=>"nonce")},5237:(t,e,o)=>{function n(t){t.stopImmediatePropagation(),t.stopPropagation()}function i(t,e,o){e&&function(t,e,o){const n=t.dispatchEvent(function(t,e){return new CustomEvent(`kol-${t}`,{bubbles:!0,cancelable:!0,composed:!0,detail:e})}(e,o))}(e,t,o)}function s(t){t.preventDefault(),n(t)}o.d(e,{p:()=>s,s:()=>n,t:()=>i})},6192:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(8921);const i=(t,e,o={})=>{(0,n.b)(t,"_hideLabel",e,o)}},6385:(t,e,o)=>{o.d(e,{a:()=>d,b:()=>r,c:()=>l,h:()=>i,v:()=>h});var n=o(8921);const i=[0,1,2,3,4,5,6],s=/[a-zA-Z0-9äöüÄÖÜß]/g,a=/^\d+$/;function r(t,e=1){return function(t){var e;return"string"==typeof t&&(null===(e=t.match(s))||void 0===e?void 0:e.length)||0}(t)>=e}function l(t){return a.test(t)}const c=new Set(["string"]),h=(t,e,o={})=>{(0,n.w)(t,"_label",(t=>"string"==typeof t),c,e,function(t){var e;return Object.assign(Object.assign({},t),{hooks:{afterPatch:(e,o,i,s)=>{var a,c;"function"==typeof(null===(a=t.hooks)||void 0===a?void 0:a.afterPatch)&&(null===(c=t.hooks)||void 0===c||c.afterPatch(e,o,i,s)),"string"==typeof e&&!1===r(e,3)&&!1===l(e)&&(0,n.a)(`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,n.u)("A heading or label should not be longer than 80 characters.")},beforePatch:null===(e=t.hooks)||void 0===e?void 0:e.beforePatch}})}(o))},d=h},1330:(t,e,o)=>{o.d(e,{S:()=>a,a:()=>r,b:()=>s,c:()=>n,h:()=>c,i:()=>i,p:()=>l,s:()=>h});const n=t=>"object"==typeof t&&null!==t,i=(t,e=0)=>"string"==typeof t&&t.length>=e,s=t=>{if("object"!=typeof t||null===t)return i(t,1);for(const e in t)if(!1===i(e,1))return!1;return!0},a=new Event("StateChange"),r=(t,e)=>{n(t)&&t&&(t.focus=t=>null==e?void 0:e.focus(t))};let l="development";try{l="production"}catch(t){l="production"}const c=(t,e,o)=>{if(t&&e&&"string"==typeof o){const n=t.querySelector(`[slot="${o}"]`);n&&e.appendChild(n)}},h=t=>""===t},5988:(t,e,o)=>{o.d(e,{v:()=>s});var n=o(8921);const i={hooks:{afterPatch:t=>{-1!==t&&0!==t&&(0,n.a)("Don't Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},s=(t,e)=>{(0,n.k)(t,"_tabIndex",e,i)}},5821:(t,e,o)=>{o.d(e,{v:()=>i});var n=o(8647);const i=(t,e)=>{(0,n.v)(t,"_tooltipAlign",e)}}}]);

package/dist/8921.js

@@ -1,2 +0,0 @@
-/*! For license information please see 8921.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[8921],{8921:(e,t,r)=>{r.d(t,{A:()=>ce,B:()=>ne,C:()=>se,D:()=>Q,K:()=>de,a:()=>i,b:()=>B,c:()=>b,d:()=>A,e:()=>v,f:()=>h,g:()=>U,h:()=>m,i:()=>K,j:()=>u,k:()=>F,l:()=>d,m:()=>G,n:()=>c,o:()=>T,p:()=>ee,q:()=>R,r:()=>H,s:()=>J,t:()=>z,u:()=>p,v:()=>oe,w:()=>I,x:()=>te,y:()=>re,z:()=>ue});var o=r(229),n=r(3713);const a=new Set,i=(e,t)=>{(!1===a.has(e)||(null==t?void 0:t.force))&&(a.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},l=new Set,c=(e,t)=>{(!1===l.has(e)||(null==t?void 0:t.force))&&(l.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},s=new Set,u=(e,t)=>{(!1===s.has(e)||(null==t?void 0:t.force))&&(s.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},d=(e,t)=>{(!1===s.has(e)||(null==t?void 0:t.force))&&(s.add(e),n.L.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},f=new Set,h=(e,t=!1,r)=>{(!1===f.has(e)||(null==r?void 0:r.force))&&(f.add(e),e+=!0===t?" ✅":"",n.L.debug([e].concat((null==r?void 0:r.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==r?void 0:r.force),overwriteStyle:"; background-color: #309"}))};u("Wir freuen uns über jedes Feedback, Kommentare, Screenshots oder Demo-Links von einer auf KoliBri-basierenden Anwendung (kolibri@itzbund.de). Vielen Dank!");const g=new Set,p=(e,t)=>{(!1===g.has(e)||(null==t?void 0:t.force))&&(g.add(e),n.L.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},b=()=>{i('"Disabled" schränkt die Zugänglichkeit und Sichtbarkeit ein. Wir empfehlen aus Sicht der Barrierefreiheit readonly- statt disabled-Attribut zu verwenden.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},v=e=>{"string"==typeof e&&""!==e||i("Manche Strukturelemente, wie bspw. der nav-Tag, können mehrfach in einer Webseite verwendet werden. Damit die gleichnamigen Strukturelemente voneinander unterschieden werden können, ist es erforderlich ein Aria-Label zu setzen.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},m=(e,t=8)=>{t>7&&p(`[${e}] Innerhalb von Navigationsstrukturen wird empfohlen nicht mehr als 7 Menüpunkte zu verwenden.\n\nLinks:\n- https://de.ryte.com/wiki/Millersche_Zahl\n- https://de.wikipedia.org/wiki/Millersche_Zahl`)};var y=.2126,w=.7152,S=.0722,k=1/12.92;function x(e){return Math.pow((e+.055)/1.055,2.4)}function N(e){var t=e[0]/255,r=e[1]/255,o=e[2]/255,n=t<=.03928?t*k:x(t),a=r<=.03928?r*k:x(r),i=o<=.03928?o*k:x(o);return n*y+a*w+i*S}function L(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var r=parseInt(e,16);return[r>>16,r>>8&255,255&r,t]}function A(e,t){return function(e,t){return function(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}(N(e),N(t))}(L(e),L(t))}var M={exports:{}};function O(e){var t=C(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function C(e){return"string"==typeof e?("red"==(t=e=e.toLowerCase())?[255,0,0]:"green"==t?[0,255,0]:"blue"==t?[0,0,255]:"black"==t?[0,0,0]:"white"==t?[255,255,255]:"cyan"==t?[0,255,255]:"gray"==t||"grey"==t?[128,128,128]:"magenta"==t||"pink"==t?[255,0,255]:"yellow"==t?[255,255,0]:void 0)||function(e){var t=e.replace(/^#/,""),r=t.length;if(3==r||4==r){var o=j(t[0]),n=j(t[1]),a=j(t[2]),i=3==r?255:j(t[3]);if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(i))return;return[o,n,a,i]}}(e)||function(e){var t=e.replace(/^#/,""),r=t.length;if(6==r||8==r){var o=j(t.slice(0,2)),n=j(t.slice(2,4)),a=j(t.slice(4,6)),i=6==r?255:j(t.slice(6,8));if(isNaN(o)||isNaN(n)||isNaN(a)||isNaN(i))return;return[o,n,a,i]}}(e)||function(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=D(t[0],!0),o=D(t[1],!0),n=D(t[2],!0);if(-1!=r&&-1!=o&&-1!=n)return[r,o,n,255]}}(e)||function(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),r=D(t[0],!0),o=D(t[1],!0),n=D(t[2],!0),a=D(255*t[3]);if(-1!=r&&-1!=o&&-1!=n&&-1!=a)return[r,o,n,a]}}(e)||[0,0,0,255]:function(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=D(null!=e.r?e.r:null!=e.red?e.red:0,!0),r=D(null!=e.g?e.g:null!=e.green?e.green:0,!0),o=D(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),n=D(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}(e)||function(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=D(e[0],!0),r=D(e[1],!0),o=D(e[2],!0),n=D(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=r&&-1!=o&&-1!=n)return[t,r,o,n]}}(e)||function(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}(e)||[0,0,0,255];var t}function E(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function j(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function D(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}M.exports=O,M.exports.arr=O,M.exports.obj=function(e){var t=C(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}},M.exports.css=function(e){var t=C(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"},M.exports.hex=function(e){3==(a=C(e)).length&&a.push(255);var t=255==a[3],r=E(a[0]),o=E(a[1]),n=E(a[2]),a=E(Math.round(a[3])),i=function(e,t,r,o){var n=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=n.indexOf(e)&&-1!=n.indexOf(t)&&-1!=n.indexOf(r)&&-1!=n.indexOf(o)}(r,o,n,a);return t?i?"#"+r.charAt(0)+o.charAt(0)+n.charAt(0):"#"+r+o+n:i?"#"+r.charAt(0)+o.charAt(0)+n.charAt(0)+a.charAt(0):"#"+r+o+n+a},M.exports.num=function(e){var t=C(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0};const H=M.exports,q=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},P=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const r=new Set;q(r,t.querySelectorAll(e));const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;q(r,P(e,"object"==typeof n&&null!==n?n:o[t]))}return Array.from(r)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},$=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let r=t.querySelector(e);if(null===r){const o=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<o.length;t++){const n=o[t].shadowRoot;if(r=$(e,"object"==typeof n&&null!==n?n:o[t]),null!==r)break}}return r}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},_=/\[object Object\]/,T=(e,t)=>{"string"==typeof e&&_.test(e)||t()},z=(e,t)=>{"string"==typeof e&&""===e||t()},R=(e,t)=>{(0,n.a)()&&(n.L.debug([e,t]),n.L.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},J=(e,t,r,o={})=>{var n,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map),e.nextHooks.get(t)instanceof Map==0&&e.nextHooks.set(t,new Map),"function"==typeof o.afterPatch&&(null===(n=e.nextHooks.get(t))||void 0===n||n.set("afterPatch",o.afterPatch)),"function"==typeof o.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",o.beforePatch)),e.nextState.set(t,r),(e=>{var t,r,o;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,r)=>{var o;const n=t.get("beforePatch");"function"==typeof n&&n(null===(o=e.nextState)||void 0===o?void 0:o.get(r),e.nextState,e,r)})),(null===(r=e.nextState)||void 0===r?void 0:r.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(o=e.nextHooks)||void 0===o||o.forEach(((t,r)=>{const o=t.get("afterPatch");"function"==typeof o&&o(e.state[r],e.state,e,r)}))),delete e.nextHooks})(e)},W=(e,t,r,o)=>{u(`[${e.constructor.name}] Der Property-Wert (${r}) für '${t}' ist nicht valide. Folgende Werte sind erlaubt: ${Array.from(o).join(", ")}`)};function I(e,t,r,o,n,a={}){r(n)?J(e,t,n,a.hooks):void 0===n&&!0!==a.required&&r(a.defaultValue)?J(e,t,a.defaultValue,a.hooks):(a.required||o.add(null),W(e,t,n,o))}const B=(e,t,r,o)=>{I(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),r,o)},K=(e,t,r,o={})=>{const n="number"==typeof o.minLength?null==o?void 0:o.minLength:0;I(e,t,(e=>"string"==typeof e&&e.length>=n&&(void 0===(null==o?void 0:o.maxLength)||e.length<=o.maxLength)),new Set(["String"]),r,o)},F=(e,t,r,o)=>{I(e,t,(e=>"number"==typeof e&&(void 0===(null==o?void 0:o.min)||"number"==typeof(null==o?void 0:o.min)&&e>=o.min)&&(void 0===(null==o?void 0:o.max)||"number"==typeof(null==o?void 0:o.max)&&e<=o.max)),new Set(["Number"]),r,o)},U=(e,t,r,o,a=(e=>e==e),i={})=>{z(o,(()=>{T(o,(()=>{void 0===o&&(o=[]);try{try{o=ee(o)}catch(e){}if(Array.isArray(o)){const l=o.find((e=>!r(e)));void 0===l&&a(o)?J(e,t,o,i.hooks):T(l,(()=>{throw n.L.debug(l),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}else T(o,(()=>{throw n.L.debug(o),new Error("↑ Das Schema für das Property (_options) ist nicht valide. Der Wert wird nicht geändert.")}))}catch(e){n.L.debug(e)}}))}))},V=/^(true|false)$/,Z=/^-?(0|[1-9]\d*)$/,Y=/^-?(0.|[1-9]\d*.)\d*[1-9]$/,G=e=>{const t=typeof e,r=`${e}`;if("string"==typeof e)if(V.test(e))e="true"===e;else if(Z.test(e))e=parseInt(e);else if(Y.test(e))e=parseFloat(e);else if(X.test(e))try{e=ee(e)}catch(e){}return t!==typeof e&&u(`You have used a stringified property value (${r} to ${JSON.stringify(e)}) which type switched from ${t} to ${typeof e}!`),e},Q=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw n.L.warn(["stringifyJson",e]),n.L.error("↑ Das JSON konnte nicht in einen String umgewandelt werden. Es wird ein stringifizierbares JSON erwartet."),new Error}},X=/^[{[]/,ee=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(X.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){n.L.warn(["parseJson",e]),n.L.error("↑ Der JSON-String konnte nicht geparsed werden. Achten Sie darauf, dass einfache Anführungszeichen im Text maskiert werden (&#8216;).")}}throw new Error},te=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,re=e=>"string"==typeof e?e:te(e),oe=(e,t)=>$(e,t||(0,n.g)()),ne=(e,t)=>P(e,t||(0,n.g)());let ae=null;const ie=()=>(ae=ae||{backgroundColor:"#00000000",color:"#00000000",domNode:(0,n.g)().body,level:"Fail",score:1},ae),le=/(\d+, ){3}0\)/,ce=(e,t=ie())=>{const r=getComputedStyle(e),o=le.test(r.backgroundColor)?t.backgroundColor:H.hex(r.backgroundColor),a=le.test(r.color)?t.color:H.hex(r.color),i=A(o,a),l={backgroundColor:o,color:a,domNode:e,level:(c=i,c>=7?"AAA":c>=4.5?"AA":c>=3?"AA Large":"Fail"),score:i};var c;return i<4.5&&n.L.error(["Color-Contrast-Error",{backgroundColor:l.backgroundColor,color:l.color,level:l.level,score:l.score},l.domNode]),l},se=(e,t=ie())=>{t.domNode instanceof HTMLElement&&(t=ce(t.domNode,t));const r=t.domNode.querySelector(e);if(null===r){const r=t.domNode.querySelectorAll('[class="hydrated"]');for(let o=0;o<r.length&&(t.domNode=r[o],null===(t=se(e,t)).domNode);o++);return t}return ce(r,t)};class ue{static queryHtmlElementColors(e,t,r=!1,o=!0){let a=null;if(!0===r||!1===ue.executionLock)if(!1===r&&(ue.cache.clear(),ue.cache.set(t.domNode,t),ue.executionLock=!0,!0===o&&n.L.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)a=t;else{const r=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)r.add(e[t])}const o=t.domNode;if("function"==typeof o.assignedNodes){const e=o.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&r.add(e[t])}const n=t.domNode.children;for(let e=0;e<n.length;e++)r.add(n[e]);const i=Array.from(r);for(let r=0;r<i.length;r++){let o=ue.cache.get(i[r]);void 0===o&&(o=ce(i[r],t)),ue.cache.set(i[r],o);const n=ue.queryHtmlElementColors(e,o,!0,!1);if(null!==n){a=n;break}}}else n.L.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===r&&(!0===o&&n.L.debug(`[KoliBriUtils] Color contrast analysis finished (${ue.cache.size} DOM elements are analysed).`),ue.executionLock=!1,ue.cache.clear()),a}}ue.executionLock=!1,ue.cache=new Map;class de{}de.getCssStyle=o.p,de.patchTheme=o.x,de.patchThemeTag=o.z,de.querySelector=oe,de.querySelectorAll=ne,de.stringifyJson=Q}}]);

package/src/components/types.tsx

@@ -1,26 +0,0 @@
-import type { InputCheckboxVariants } from './input-checkbox/partials/variants';
-import type { InputColorVariants } from './input-color/partials/variants';
-import type { InputDateVariants } from './input-date/partials/variants';
-import type { InputEmailVariants } from './input-email/partials/variants';
-import type { InputFileVariants } from './input-file/partials/variants';
-import type { InputNumberVariants } from './input-number/partials/variants';
-import type { InputPasswordVariants } from './input-password/partials/variants';
-import type { InputRadioVariants } from './input-radio/partials/variants';
-import type { InputRangeVariants } from './input-range/partials/variants';
-import type { InputTextVariants } from './input-text/partials/variants';
-import type { SelectVariants } from './select/partials/variants';
-import type { TextareaVariants } from './textarea/partials/variants';
-
-export type RefFormComponent =
-	| typeof InputCheckboxVariants
-	| typeof InputColorVariants
-	| typeof InputDateVariants
-	| typeof InputEmailVariants
-	| typeof InputFileVariants
-	| typeof InputNumberVariants
-	| typeof InputPasswordVariants
-	| typeof InputRadioVariants
-	| typeof InputRangeVariants
-	| typeof InputTextVariants
-	| typeof SelectVariants
-	| typeof TextareaVariants;