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

package/dist/assets/open-385de2c9-B0Tz5-Ak.js

@@ -0,0 +1,4 @@
+import{l as t}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const p=(o,a,e)=>{t(o,"_open",a,e)};export{p as v};
+//# sourceMappingURL=open-385de2c9-B0Tz5-Ak.js.map

package/dist/assets/open-385de2c9-B0Tz5-Ak.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"open-385de2c9-B0Tz5-Ak.js","sources":["../../../../components/dist/esm/open-385de2c9.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { i as watchBoolean } from './index-ebe5a881.js';\n\nconst validateOpen = (component, value, options) => {\n    watchBoolean(component, '_open', value, options);\n};\n\nexport { validateOpen as v };\n\n//# sourceMappingURL=open-385de2c9.js.map"],"names":["validateOpen","component","value","options","watchBoolean"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,IAAY,CAChDC,EAAaH,EAAW,QAASC,EAAOC,CAAO,CACnD"}

package/dist/assets/orientation-409d844a-DE62Y6A5.js

@@ -0,0 +1,4 @@
+import{w as a}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const o=["horizontal","vertical"],s=(i,n,r="horizontal")=>{a(i,"_orientation",t=>typeof t=="string"&&o.includes(t),new Set([`KoliBriOrientation {${o.join(", ")}`]),n,{defaultValue:r})};export{s as v};
+//# sourceMappingURL=orientation-409d844a-DE62Y6A5.js.map

package/dist/assets/orientation-409d844a-DE62Y6A5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientation-409d844a-DE62Y6A5.js","sources":["../../../../components/dist/esm/orientation-409d844a.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { w as watchValidator } from './index-ebe5a881.js';\n\nconst orientationPropTypeOptions = ['horizontal', 'vertical'];\nconst validateOrientation = (component, value, defaultValue = 'horizontal') => {\n    watchValidator(component, `_orientation`, (value) => typeof value === 'string' && orientationPropTypeOptions.includes(value), new Set([`KoliBriOrientation {${orientationPropTypeOptions.join(', ')}`]), value, {\n        defaultValue,\n    });\n};\n\nexport { validateOrientation as v };\n\n//# sourceMappingURL=orientation-409d844a.js.map"],"names":["orientationPropTypeOptions","validateOrientation","component","value","defaultValue","watchValidator"],"mappings":"wCAAA;AAAA;AAAA,GAKA,MAAMA,EAA6B,CAAC,aAAc,UAAU,EACtDC,EAAsB,CAACC,EAAWC,EAAOC,EAAe,eAAiB,CAC3EC,EAAeH,EAAW,eAAiBC,GAAU,OAAOA,GAAU,UAAYH,EAA2B,SAASG,CAAK,EAAG,IAAI,IAAI,CAAC,uBAAuBH,EAA2B,KAAK,IAAI,CAAC,EAAE,CAAC,EAAGG,EAAO,CAC5M,aAAAC,CACR,CAAK,CACL"}

package/dist/assets/rows-225b4f43-BDZo0oBX.js

@@ -0,0 +1,4 @@
+import{y as r}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const t=(o,a)=>{r(o,"_rows",a,{min:1})};export{t as v};
+//# sourceMappingURL=rows-225b4f43-BDZo0oBX.js.map

package/dist/assets/rows-225b4f43-BDZo0oBX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows-225b4f43-BDZo0oBX.js","sources":["../../../../components/dist/esm/rows-225b4f43.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { E as watchNumber } from './index-ebe5a881.js';\n\nconst validateRows = (component, value) => {\n    watchNumber(component, `_rows`, value, { min: 1 });\n};\n\nexport { validateRows as v };\n\n//# sourceMappingURL=rows-225b4f43.js.map"],"names":["validateRows","component","value","watchNumber"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAe,CAACC,EAAWC,IAAU,CACvCC,EAAYF,EAAW,QAASC,EAAO,CAAE,IAAK,EAAG,CACrD"}

package/dist/assets/show-fabfe6d7-BicnClu4.js

@@ -0,0 +1,4 @@
+import{l as s}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const h=(o,a,t)=>{s(o,"_show",a,t)};export{h as v};
+//# sourceMappingURL=show-fabfe6d7-BicnClu4.js.map

package/dist/assets/show-fabfe6d7-BicnClu4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-fabfe6d7-BicnClu4.js","sources":["../../../../components/dist/esm/show-fabfe6d7.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { i as watchBoolean } from './index-ebe5a881.js';\n\nconst validateShow = (component, value, hooks) => {\n    watchBoolean(component, '_show', value, hooks);\n};\n\nexport { validateShow as v };\n\n//# sourceMappingURL=show-fabfe6d7.js.map"],"names":["validateShow","component","value","hooks","watchBoolean"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAe,CAACC,EAAWC,EAAOC,IAAU,CAC9CC,EAAaH,EAAW,QAASC,EAAOC,CAAK,CACjD"}

package/dist/assets/spell-check-5559a801-DxgUHaIH.js

@@ -0,0 +1,4 @@
+import{l as a}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const t=(e,l)=>{a(e,"_spellCheck",l,{defaultValue:void 0})};export{t as v};
+//# sourceMappingURL=spell-check-5559a801-DxgUHaIH.js.map

package/dist/assets/spell-check-5559a801-DxgUHaIH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spell-check-5559a801-DxgUHaIH.js","sources":["../../../../components/dist/esm/spell-check-5559a801.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { i as watchBoolean } from './index-ebe5a881.js';\n\nconst validateSpellCheck = (component, value) => {\n    watchBoolean(component, '_spellCheck', value, {\n        defaultValue: undefined,\n    });\n};\n\nexport { validateSpellCheck as v };\n\n//# sourceMappingURL=spell-check-5559a801.js.map"],"names":["validateSpellCheck","component","value","watchBoolean"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAqB,CAACC,EAAWC,IAAU,CAC7CC,EAAaF,EAAW,cAAeC,EAAO,CAC1C,aAAc,MACtB,CAAK,CACL"}

package/dist/assets/suggestions-198125b7-Hpe1IgIz.js

@@ -0,0 +1,4 @@
+import{G as o,z as n}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const i=(e,t)=>{o(e,"_suggestions",s=>typeof s=="string"||typeof s=="number",t,void 0,{hooks:{afterPatch:s=>{Array.isArray(s)&&s.length&&n("Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.")}}})};export{i as v};
+//# sourceMappingURL=suggestions-198125b7-Hpe1IgIz.js.map

package/dist/assets/suggestions-198125b7-Hpe1IgIz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestions-198125b7-Hpe1IgIz.js","sources":["../../../../components/dist/esm/suggestions-198125b7.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { z as watchJsonArrayString, c as a11yHint } from './index-ebe5a881.js';\n\nconst validateSuggestions = (component, value) => {\n    watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {\n        hooks: {\n            afterPatch: (value) => {\n                if (Array.isArray(value) && value.length) {\n                    a11yHint('Property suggestions: Options have accessibility issues in how browsers implemented them and should not be used for now.');\n                }\n            },\n        },\n    });\n};\n\nexport { validateSuggestions as v };\n\n//# sourceMappingURL=suggestions-198125b7.js.map"],"names":["validateSuggestions","component","value","watchJsonArrayString","item","a11yHint"],"mappings":"+CAAA;AAAA;AAAA,GAKK,MAACA,EAAsB,CAACC,EAAWC,IAAU,CAC9CC,EAAqBF,EAAW,eAAiBG,GAAS,OAAOA,GAAS,UAAY,OAAOA,GAAS,SAAUF,EAAO,OAAW,CAC9H,MAAO,CACH,WAAaA,GAAU,CACf,MAAM,QAAQA,CAAK,GAAKA,EAAM,QAC9BG,EAAS,0HAA0H,CAE1I,CACJ,CACT,CAAK,CACL"}

package/dist/assets/table-settings-c12356ed-BXDUmIkp.js

@@ -0,0 +1,4 @@
+import{aa as i,w as s,s as r,p as c,Y as l,o as y}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const d=(a,t)=>{s(a,"_on",e=>typeof e=="object"&&e!==null,new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),t)},p=(a,t)=>{s(a,"_on",e=>typeof e=="object"&&e!==null,new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),t)},S=(a,t,e)=>{i(t,()=>{y(t,()=>{typeof t>"u"&&(t=[]);try{t=c(t)}catch{}Array.isArray(t)&&t.every(n=>typeof n=="object"&&n!==null)&&r(a,"_data",t,e)})})},T=(a,t,e)=>{i(t,()=>{y(t,()=>{typeof t>"u"&&(t=[]);try{t=c(t)}catch{}Array.isArray(t)&&t.every(n=>typeof n=="object"&&n!==null)&&r(a,"_dataFoot",t,e)})})},j=(a,t)=>{const e=()=>{try{return c(t)}catch{return}},n=o=>o&&l(o)&&typeof o.label=="function"&&(!o.selectedKeys||Array.isArray(o.selectedKeys)),b=typeof t=="string"?e():t;n(b)&&r(a,"_selection",t)},g=(a,t)=>{s(a,"_tableSettings",e=>typeof e=="object"&&e!==null,new Set(["TableSettings"]),t)};export{T as a,j as b,p as c,g as d,d as e,S as v};
+//# sourceMappingURL=table-settings-c12356ed-BXDUmIkp.js.map

package/dist/assets/table-settings-c12356ed-BXDUmIkp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-settings-c12356ed-BXDUmIkp.js","sources":["../../../../components/dist/esm/table-settings-c12356ed.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { w as watchValidator, M as emptyStringByArrayHandler, o as objectObjectHandler, k as parseJson, l as setState, x as isObject } from './index-ebe5a881.js';\n\nconst validateTableCallbacks = (component, value) => {\n    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableCallbacksPropType {Events.onSort, Events.onSelectionChange}']), value);\n};\nconst validateTableStatefulCallbacks = (component, value) => {\n    watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['TableStatefulCallbacksPropType {Events.onSelectionChange}']), value);\n};\n\nconst validateTableData = (component, value, setStateHooks) => {\n    emptyStringByArrayHandler(value, () => {\n        objectObjectHandler(value, () => {\n            if (typeof value === 'undefined') {\n                value = [];\n            }\n            try {\n                value = parseJson(value);\n            }\n            catch (e) {\n            }\n            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {\n                setState(component, '_data', value, setStateHooks);\n            }\n        });\n    });\n};\n\nconst validateTableDataFoot = (component, value, setStateHooks) => {\n    emptyStringByArrayHandler(value, () => {\n        objectObjectHandler(value, () => {\n            if (typeof value === 'undefined') {\n                value = [];\n            }\n            try {\n                value = parseJson(value);\n            }\n            catch (e) {\n            }\n            if (Array.isArray(value) && value.every((data) => typeof data === 'object' && data !== null)) {\n                setState(component, '_dataFoot', value, setStateHooks);\n            }\n        });\n    });\n};\n\nconst validateTableSelection = (component, value) => {\n    const parseSerializedValue = () => {\n        try {\n            return parseJson(value);\n        }\n        catch (e) {\n            return undefined;\n        }\n    };\n    const validateObject = (value) => {\n        return value && isObject(value) && typeof value.label === 'function' && (!value.selectedKeys || Array.isArray(value.selectedKeys));\n    };\n    const objectValue = typeof value === 'string' ? parseSerializedValue() : value;\n    if (validateObject(objectValue)) {\n        setState(component, '_selection', value);\n    }\n};\n\nconst validateTableSettings = (component, value) => {\n    watchValidator(component, `_tableSettings`, (value) => typeof value === 'object' && value !== null, new Set(['TableSettings']), value);\n};\n\nexport { validateTableDataFoot as a, validateTableSelection as b, validateTableStatefulCallbacks as c, validateTableSettings as d, validateTableCallbacks as e, validateTableData as v };\n\n//# sourceMappingURL=table-settings-c12356ed.js.map"],"names":["validateTableCallbacks","component","value","watchValidator","validateTableStatefulCallbacks","validateTableData","setStateHooks","emptyStringByArrayHandler","objectObjectHandler","parseJson","data","setState","validateTableDataFoot","validateTableSelection","parseSerializedValue","validateObject","isObject","objectValue","validateTableSettings"],"mappings":"4EAAA;AAAA;AAAA,GAKK,MAACA,EAAyB,CAACC,EAAWC,IAAU,CACjDC,EAAeF,EAAW,MAAQC,GAAU,OAAOA,GAAU,UAAYA,IAAU,KAAM,IAAI,IAAI,CAAC,kEAAkE,CAAC,EAAGA,CAAK,CACjL,EACME,EAAiC,CAACH,EAAWC,IAAU,CACzDC,EAAeF,EAAW,MAAQC,GAAU,OAAOA,GAAU,UAAYA,IAAU,KAAM,IAAI,IAAI,CAAC,2DAA2D,CAAC,EAAGA,CAAK,CAC1K,EAEMG,EAAoB,CAACJ,EAAWC,EAAOI,IAAkB,CAC3DC,EAA0BL,EAAO,IAAM,CACnCM,EAAoBN,EAAO,IAAM,CACzB,OAAOA,EAAU,MACjBA,EAAQ,CAAE,GAEd,GAAI,CACAA,EAAQO,EAAUP,CAAK,CACvC,MACsB,CACtB,CACgB,MAAM,QAAQA,CAAK,GAAKA,EAAM,MAAOQ,GAAS,OAAOA,GAAS,UAAYA,IAAS,IAAI,GACvFC,EAASV,EAAW,QAASC,EAAOI,CAAa,CAEjE,CAAS,CACT,CAAK,CACL,EAEMM,EAAwB,CAACX,EAAWC,EAAOI,IAAkB,CAC/DC,EAA0BL,EAAO,IAAM,CACnCM,EAAoBN,EAAO,IAAM,CACzB,OAAOA,EAAU,MACjBA,EAAQ,CAAE,GAEd,GAAI,CACAA,EAAQO,EAAUP,CAAK,CACvC,MACsB,CACtB,CACgB,MAAM,QAAQA,CAAK,GAAKA,EAAM,MAAOQ,GAAS,OAAOA,GAAS,UAAYA,IAAS,IAAI,GACvFC,EAASV,EAAW,YAAaC,EAAOI,CAAa,CAErE,CAAS,CACT,CAAK,CACL,EAEMO,EAAyB,CAACZ,EAAWC,IAAU,CACjD,MAAMY,EAAuB,IAAM,CAC/B,GAAI,CACA,OAAOL,EAAUP,CAAK,CAClC,MACkB,CACN,MACZ,CACK,EACKa,EAAkBb,GACbA,GAASc,EAASd,CAAK,GAAK,OAAOA,EAAM,OAAU,aAAe,CAACA,EAAM,cAAgB,MAAM,QAAQA,EAAM,YAAY,GAE9He,EAAc,OAAOf,GAAU,SAAWY,EAAsB,EAAGZ,EACrEa,EAAeE,CAAW,GAC1BN,EAASV,EAAW,aAAcC,CAAK,CAE/C,EAEMgB,EAAwB,CAACjB,EAAWC,IAAU,CAChDC,EAAeF,EAAW,iBAAmBC,GAAU,OAAOA,GAAU,UAAYA,IAAU,KAAM,IAAI,IAAI,CAAC,eAAe,CAAC,EAAGA,CAAK,CACzI"}

package/dist/assets/test-component.entry-82zlBLwW.js

@@ -0,0 +1,4 @@
+import{r as s}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const e=class{constructor(t){s(this,t)}};export{e as test_component};
+//# sourceMappingURL=test-component.entry-82zlBLwW.js.map

package/dist/assets/test-component.entry-82zlBLwW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-component.entry-82zlBLwW.js","sources":["../../../../components/dist/esm/test-component.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance } from './index-1ed13705.js';\n\nconst TestComponent = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n    }\n};\n\nexport { TestComponent as test_component };\n\n//# sourceMappingURL=test-component.entry.js.map"],"names":["TestComponent","hostRef","registerInstance"],"mappings":"wCAAA;AAAA;AAAA,GAKK,MAACA,EAAgB,KAAM,CACxB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,CACtC,CACA"}

package/dist/assets/tooltip-align-465a8590-IESrC2qu.js

@@ -0,0 +1,4 @@
+import{a as o}from"./align-d2572387-dyUBsp20.js";import"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const n=(t,i)=>{o(t,"_tooltipAlign",i)};export{n as v};
+//# sourceMappingURL=tooltip-align-465a8590-IESrC2qu.js.map

package/dist/assets/tooltip-align-465a8590-IESrC2qu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-align-465a8590-IESrC2qu.js","sources":["../../../../components/dist/esm/tooltip-align-465a8590.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { a as validateAlignment } from './align-d2572387.js';\nimport './index-ebe5a881.js';\n\nconst validateTooltipAlign = (component, value) => {\n    validateAlignment(component, '_tooltipAlign', value);\n};\n\nexport { validateTooltipAlign as v };\n\n//# sourceMappingURL=tooltip-align-465a8590.js.map"],"names":["validateTooltipAlign","component","value","validateAlignment"],"mappings":"6EAAA;AAAA;AAAA,GAMK,MAACA,EAAuB,CAACC,EAAWC,IAAU,CAC/CC,EAAkBF,EAAW,gBAAiBC,CAAK,CACvD"}

package/dist/assets/tslib.es6-1173d062-BAJoBDh7.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */function p(e,n){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var t=0,r=Object.getOwnPropertySymbols(e);t<r.length;t++)n.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(e,r[t])&&(o[r[t]]=e[r[t]]);return o}export{p as _};
+//# sourceMappingURL=tslib.es6-1173d062-BAJoBDh7.js.map

package/dist/assets/tslib.es6-1173d062-BAJoBDh7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tslib.es6-1173d062-BAJoBDh7.js","sources":["../../../../components/dist/esm/tslib.es6-1173d062.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\n/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n\r\nfunction __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\ntypeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\n\nexport { __rest as _ };\n\n//# sourceMappingURL=tslib.es6-1173d062.js.map"],"names":["__rest","s","e","t","p","i"],"mappings":"AAAA;AAAA;AAAA,GAkBA,SAASA,EAAOC,EAAGC,EAAG,CAClB,IAAIC,EAAI,CAAA,EACR,QAASC,KAAKH,EAAO,OAAO,UAAU,eAAe,KAAKA,EAAGG,CAAC,GAAKF,EAAE,QAAQE,CAAC,EAAI,IAC9ED,EAAEC,CAAC,EAAIH,EAAEG,CAAC,GACd,GAAIH,GAAK,MAAQ,OAAO,OAAO,uBAA0B,WACrD,QAASI,EAAI,EAAGD,EAAI,OAAO,sBAAsBH,CAAC,EAAGI,EAAID,EAAE,OAAQC,IAC3DH,EAAE,QAAQE,EAAEC,CAAC,CAAC,EAAI,GAAK,OAAO,UAAU,qBAAqB,KAAKJ,EAAGG,EAAEC,CAAC,CAAC,IACzEF,EAAEC,EAAEC,CAAC,CAAC,EAAIJ,EAAEG,EAAEC,CAAC,CAAC,GAE5B,OAAOF,CACX"}

package/dist/assets/unique-nav-labels-e20db0b7-X1HP_pWC.js

@@ -0,0 +1,4 @@
+import{L as t}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const a=new Set;function o(e){a.has(e)?t.warn(`There already is a nav element with the label "${e}"`):a.add(e)}function s(e){a.delete(e)}export{o as a,s as r};
+//# sourceMappingURL=unique-nav-labels-e20db0b7-X1HP_pWC.js.map

package/dist/assets/unique-nav-labels-e20db0b7-X1HP_pWC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unique-nav-labels-e20db0b7-X1HP_pWC.js","sources":["../../../../components/dist/esm/unique-nav-labels-e20db0b7.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { L as Log } from './index-ebe5a881.js';\n\nconst UNIQUE_LABELS = new Set();\nfunction addNavLabel(ariaLabel) {\n    if (UNIQUE_LABELS.has(ariaLabel)) {\n        Log.warn(`There already is a nav element with the label \"${ariaLabel}\"`);\n    }\n    else {\n        UNIQUE_LABELS.add(ariaLabel);\n    }\n}\nfunction removeNavLabel(ariaLabel) {\n    UNIQUE_LABELS.delete(ariaLabel);\n}\n\nexport { addNavLabel as a, removeNavLabel as r };\n\n//# sourceMappingURL=unique-nav-labels-e20db0b7.js.map"],"names":["UNIQUE_LABELS","addNavLabel","ariaLabel","Log","removeNavLabel"],"mappings":"wCAAA;AAAA;AAAA,GAKA,MAAMA,EAAgB,IAAI,IAC1B,SAASC,EAAYC,EAAW,CACxBF,EAAc,IAAIE,CAAS,EAC3BC,EAAI,KAAK,kDAAkDD,CAAS,GAAG,EAGvEF,EAAc,IAAIE,CAAS,CAEnC,CACA,SAASE,EAAeF,EAAW,CAC/BF,EAAc,OAAOE,CAAS,CAClC"}

package/dist/assets/validation-152ea092-CiVygBjK.js

@@ -0,0 +1,4 @@
+import{w as o}from"./index-DfN2w0z5.js";import{h as r}from"./label-bf9966d0-DwwEzCUj.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const l=(t,a)=>{o(t,"_level",e=>typeof e=="number"&&r.includes(e),new Set([`Number {${r.join(", ")}`]),a,{defaultValue:1,required:!0})};export{l as w};
+//# sourceMappingURL=validation-152ea092-CiVygBjK.js.map

package/dist/assets/validation-152ea092-CiVygBjK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-152ea092-CiVygBjK.js","sources":["../../../../components/dist/esm/validation-152ea092.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { w as watchValidator } from './index-ebe5a881.js';\nimport { h as headingLevelOptions } from './label-bf9966d0.js';\n\nconst watchHeadingLevel = (component, value) => {\n    watchValidator(component, '_level', (value) => {\n        return typeof value === 'number' && headingLevelOptions.includes(value);\n    }, new Set([`Number {${headingLevelOptions.join(', ')}`]), value, {\n        defaultValue: 1,\n        required: true,\n    });\n};\n\nexport { watchHeadingLevel as w };\n\n//# sourceMappingURL=validation-152ea092.js.map"],"names":["watchHeadingLevel","component","value","watchValidator","headingLevelOptions"],"mappings":"yFAAA;AAAA;AAAA,GAMK,MAACA,EAAoB,CAACC,EAAWC,IAAU,CAC5CC,EAAeF,EAAW,SAAWC,GAC1B,OAAOA,GAAU,UAAYE,EAAoB,SAASF,CAAK,EACvE,IAAI,IAAI,CAAC,WAAWE,EAAoB,KAAK,IAAI,CAAC,EAAE,CAAC,EAAGF,EAAO,CAC9D,aAAc,EACd,SAAU,EAClB,CAAK,CACL"}

package/dist/assets/validation-9d549145-DSDUxF4W.js

@@ -0,0 +1,4 @@
+import{G as r,Z as i}from"./index-DfN2w0z5.js";/*!
+ * KoliBri - The accessible HTML-Standard
+ */const h=(a,s,e)=>{r(s,"_links",t=>typeof t=="object"&&(typeof t._href=="string"||typeof t._label=="string"),e),i(a,s.state._links.length)};export{h as w};
+//# sourceMappingURL=validation-9d549145-DSDUxF4W.js.map

package/dist/assets/validation-9d549145-DSDUxF4W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-9d549145-DSDUxF4W.js","sources":["../../../../components/dist/esm/validation-9d549145.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { z as watchJsonArrayString, A as uiUxHintMillerscheZahl } from './index-ebe5a881.js';\n\nconst watchNavLinks = (className, component, value) => {\n    watchJsonArrayString(component, '_links', (link) => typeof link === 'object' && (typeof link._href === 'string' || typeof link._label === 'string'), value);\n    uiUxHintMillerscheZahl(className, component.state._links.length);\n};\n\nexport { watchNavLinks as w };\n\n//# sourceMappingURL=validation-9d549145.js.map"],"names":["watchNavLinks","className","component","value","watchJsonArrayString","link","uiUxHintMillerscheZahl"],"mappings":"+CAAA;AAAA;AAAA,GAKK,MAACA,EAAgB,CAACC,EAAWC,EAAWC,IAAU,CACnDC,EAAqBF,EAAW,SAAWG,GAAS,OAAOA,GAAS,WAAa,OAAOA,EAAK,OAAU,UAAY,OAAOA,EAAK,QAAW,UAAWF,CAAK,EAC1JG,EAAuBL,EAAWC,EAAU,MAAM,OAAO,MAAM,CACnE"}

package/dist/index.html

@@ -5,25 +5,26 @@
 		<meta charset="UTF-8" />
 		<meta name="description" content="Webapp demonstrating KolBri-components with React." />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
+		<link rel="shortcut icon" type="image/x-icon" href="/assets/kolibri.ico" />
 		<!-- We include all the important fonts in the index.html here so that they are available for the theme tests. -->
-		<link rel="stylesheet" href="assets/bundes/style.css" />
-		<link rel="stylesheet" href="assets/codicons/codicon.css" />
-		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
-		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />
-		<link rel="stylesheet" href="assets/kreon/style.css" />
-		<link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
-		<link rel="stylesheet" href="assets/material-icons/iconfont/material-icons.css" />
-		<link rel="stylesheet" href="assets/material-symbols/index.css" />
-		<link rel="stylesheet" href="assets/roboto/roboto.css" />
-		<link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
-		<link rel="stylesheet" href="main.css" />
+		<link rel="stylesheet" href="/assets/bundes/style.css" />
+		<link rel="stylesheet" href="/assets/codicons/codicon.css" />
+		<link rel="stylesheet" href="/assets/fontawesome-free/css/all.min.css" />
+		<link rel="stylesheet" href="/assets/icofont/icofont.min.css" />
+		<link rel="stylesheet" href="/assets/kreon/style.css" />
+		<link rel="stylesheet" href="/assets/noto-sans/noto-sans.css" />
+		<link rel="stylesheet" href="/assets/material-icons/iconfont/material-icons.css" />
+		<link rel="stylesheet" href="/assets/material-symbols/index.css" />
+		<link rel="stylesheet" href="/assets/roboto/roboto.css" />
+		<link rel="stylesheet" href="/assets/tabler-icons/tabler-icons.css" />
+		<link rel="stylesheet" href="/main.css" />
 		<meta name="robots" content="noindex" />
 		<meta name="kolibri" content="dev-mode=false;experimental-mode=true;" />
+		<script type="module" crossorigin src="/assets/index-DfN2w0z5.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-DTvHetS0.css">
 	</head>
 	<body>
 		<div id="app"></div>
-		<script async src="main.js"></script>
 		<noscript>This website requires JavaScript.</noscript>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.1-rc.0",
+  "version": "3.0.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -9,60 +9,44 @@
   },
   "dependencies": {
     "@leanup/stack": "1.3.54",
-    "@leanup/stack-react": "1.3.54",
-    "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.49.1",
-    "@stencil/core": "4.22.3",
-    "@types/node": "22.14.1",
+    "@playwright/test": "1.53.0",
+    "@stencil/core": "4.20.0",
+    "@types/node": "24.0.1",
     "@types/react": "18.3.4",
-    "@types/react-dom": "18.3.5",
-    "@typescript-eslint/eslint-plugin": "8.27.0",
-    "@typescript-eslint/parser": "8.27.0",
-    "@unocss/preset-uno": "0.58.9",
-    "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.9-rc.18",
-    "ajv": "8.17.1",
-    "chromedriver": "130.0.4",
+    "@types/react-dom": "18.3.7",
+    "@typescript-eslint/eslint-plugin": "8.34.0",
+    "@typescript-eslint/parser": "8.34.0",
+    "@unocss/preset-mini": "66.2.3",
+    "@unocss/vite": "66.2.3",
+    "@vitejs/plugin-react-swc": "3.10.2",
+    "adopted-style-sheets": "1.1.9-rc.19",
     "cpy-cli": "5.0.0",
-    "cross-env": "7.0.3",
-    "css-loader": "7.1.2",
-    "esbuild-loader": "4.3.0",
     "eslint": "8.57.1",
-    "eslint-plugin-html": "8.1.2",
+    "eslint-plugin-html": "8.1.3",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.4",
-    "file-loader": "6.2.0",
+    "eslint-plugin-react": "7.37.5",
     "formik": "2.4.6",
-    "knip": "5.46.0",
-    "less-loader": "12.2.0",
-    "mini-css-extract-plugin": "2.9.2",
-    "nightwatch-axe-verbose": "2.3.1",
-    "npm-run-all2": "7.0.2",
-    "postcss-loader": "8.1.1",
+    "knip": "5.61.0",
+    "npm-run-all2": "8.0.4",
     "prettier": "3.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-number-format": "5.4.3",
-    "react-router": "6.30.0",
-    "react-router-dom": "6.30.0",
-    "rimraf": "6.0.1",
-    "sass-loader": "16.0.5",
-    "string-replace-loader": "3.1.0",
-    "stylelint": "16.17.0",
-    "stylelint-config-recommended-scss": "14.1.0",
-    "stylelint-config-standard": "37.0.0",
-    "stylelint-scss": "6.11.1",
+    "react-number-format": "5.4.4",
+    "react-router": "7.6.2",
+    "react-router-dom": "7.6.2",
+    "stylelint": "16.20.0",
+    "stylelint-config-recommended-scss": "15.0.1",
+    "stylelint-config-standard": "38.0.0",
+    "stylelint-scss": "6.12.1",
     "tslib": "2.8.1",
-    "typescript": "5.8.2",
-    "webpack": "5.98.0",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.2.0",
-    "world_countries_lists": "2.9.0",
+    "typescript": "5.8.3",
+    "vite": "6.3.5",
+    "world_countries_lists": "3.1.0",
     "yup": "1.6.1",
-    "@public-ui/themes": "3.0.1-rc.0",
-    "@public-ui/react": "3.0.1-rc.0",
-    "@public-ui/components": "3.0.1-rc.0"
+    "@public-ui/components": "3.0.1",
+    "@public-ui/react": "3.0.1",
+    "@public-ui/themes": "3.0.1"
   },
   "files": [
     ".eslintignore",
@@ -76,20 +60,22 @@
     "test-build.sh",
     "tsconfig.json",
     "unocss.config.ts",
-    "webpack.config.js"
+    "build.mjs",
+    "vite.config.js"
   ],
   "scripts": {
-    "build": "rimraf dist && cross-env NODE_ENV=production webpack",
+    "build": "node build.mjs",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
     "lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
     "lint:eslint": "eslint src",
     "lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
     "lint:tsc": "tsc --noemit",
-    "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
-    "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
-    "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
-    "start": "npm run serve -- --open",
+    "prepare:components": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
+    "prepare:playwright": "npx playwright install --with-deps chromium firefox webkit",
+    "prepare:themes": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
+    "serve": "vite",
+    "start": "vite --open",
     "test": "pnpm test:e2e",
     "test:e2e": "playwright test",
     "unused": "knip"

package/src/components/abbr/basic.tsx

@@ -7,7 +7,7 @@ import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAbbr shows an abbreviation and the full form in parentheses, if provided.</p>
+			<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>
 		</SampleDescription>
 
 		<p>

package/src/components/button-link/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolButtonLink } from '@public-ui/react';
+import { KolButtonLink, KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -21,6 +21,8 @@ export const ButtonLinkBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<section className="text-base">
+				<KolHeading _level={2} _label="Button-Link with variant 'inline'" />
+
 				<p>
 					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
 					<strong>inline element</strong>.
@@ -35,14 +37,17 @@ export const ButtonLinkBasic: FC = () => {
 					<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
 					Therefore, I go over the entire width of the parent element to create a line break.
 				</p>
+
+				<KolHeading _level={2} _label="Button-Link with variant 'standalone'" />
+
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled />
+					<KolButtonLink _label="Disabled ButtonLink" _disabled _variant="standalone" />
 				</p>
 				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} />
+					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} _variant="standalone" />
 				</p>
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" />
+					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" _variant="standalone" />
 				</p>
 			</section>
 		</>

package/src/components/drawer/basic.tsx

@@ -30,7 +30,7 @@ export const DrawerBasic: FC = () => {
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
 				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<div className={align === 'left' || align == 'right' ? 'drawer-content-vertical' : ''}>
+					<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>
 						<p>
 							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
 							voluptua.

package/src/components/heading/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { HeadingBadged } from './badged';
 import { HeadingBasic } from './basic';
 import { HeadingParagraph } from './paragraph';
+import { HeadingSecondary } from './secondary';
 
 export const HEADING_ROUTES: Routes = {
 	heading: {
 		basic: HeadingBasic,
 		badge: HeadingBadged,
 		paragraph: HeadingParagraph,
+		secondary: HeadingSecondary,
 	},
 };

package/src/components/heading/secondary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { KolHeading } from '@public-ui/react';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const HeadingSecondary: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolHeading _label="This is a H1 headline" _secondaryHeadline="This is a secondary headline" _level={1} />
+		</div>
+	</>
+);

package/src/components/input-radio/horizontal.tsx

@@ -5,10 +5,10 @@ import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/
 
 import { SampleDescription } from '../SampleDescription';
 
-import type { Orientation } from '@public-ui/components';
+import type { OrientationPropType } from '@public-ui/components';
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
-	const [orientation, setOrientation] = useState<Orientation>('horizontal');
+	const [orientation, setOrientation] = useState<OrientationPropType>('horizontal');
 
 	const options = [
 		{ label: 'Field 1', value: 1 },

package/src/components/input-radio/partials/cases.tsx

@@ -27,7 +27,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				ref={ref}
-				_accessKey="A"
 				_orientation="horizontal"
 				_required
 				_value="Company"
@@ -68,18 +67,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_label="Salutation (horizontal with error hint and description)"
 				_hint={HINT_MSG}
 			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With access key"
-				_accessKey="c"
-			/>
-			<KolInputRadio
-				{...props}
-				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="With short key"
-				_shortKey="s"
-			/>
 		</div>
 	);
 });

package/src/components/link/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink, KolHeading } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
@@ -13,23 +13,25 @@ export const LinkBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Simple Link" />
-			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
-			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
+			<KolHeading _level={2} _label="Links with variant 'standalone'" />
+			<KolLink _href="#/back-page" _label="Simple Link" _variant="standalone" />
+			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" _variant="standalone" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" _variant="standalone" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" _variant="standalone" />
+
+			<KolHeading _level={2} _label="Links with variant 'inline'" />
 			<p>
-				In this paragraph, a link is inserted that contains no additional attributes.
-				<KolLink _href="#/back-page" _label="Simple Link" />
-				It is rendered by default as a <strong>inline element</strong>.
+				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
+				default as a <strong>inline element</strong>.
 			</p>
 			<p>
-				In this paragraph, a link is inserted that is rendered as an inline-block element.
+				In this paragraph, a link is inserted that is rendered as an inline-block element.{' '}
 				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. This allows you to assign width, height, and other
 				properties to it using CSS styles.
 				<br />
 				<br />
-				After that, there is a link that is rendered as a block element.
-				<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span the entire width of the parent element, causing a line break.
+				After that, there is a link that is rendered as a block element. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span
+				the entire width of the parent element, causing a line break.
 			</p>
 		</div>
 	</>

package/src/components/table/horizontal-scrollbar.tsx

@@ -36,7 +36,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"
@@ -47,7 +47,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={[]}
 					className="block"

package/src/components/tabs/create-button.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import type { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CreateButton: FC = () => {
+	const [tabs, setTabs] = useState([
+		{
+			_label: 'First tab',
+		},
+		{
+			_label: 'Second Tab',
+		},
+	]);
+
+	const addTab = () => {
+		setTabs([
+			...tabs,
+			{
+				_label: `Tab #${tabs.length + 1}`,
+			},
+		]);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
+			</SampleDescription>
+
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+				{tabs.map((tab, index) => (
+					<div key={`tab-${index}`} slot={`tab-${index}`}>
+						Contents of {tab._label}
+					</div>
+				))}
+
+				<div slot="tab-1">Contents of Tab 2</div>
+			</KolTabs>
+		</>
+	);
+};

package/src/components/tabs/routes.ts

@@ -3,10 +3,12 @@ import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
+import { CreateButton } from './create-button';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
+		'create-button': CreateButton,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
 		align: TabsAlign,