@public-ui/sample-react 2.2.13-rc.2 → 2.2.13-rc.3

package/src/scenarios/tooltip-positioning.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolPopoverButton } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const TooltipPositioning: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing
+					tooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements
+					use container-based sizing and layout rules.
+				</p>
+			</SampleDescription>
+
+			<div style={{ container: 'test / size' }}>
+				<KolPopoverButton _label="Sample PopoverButton—Click for Popover" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/style.scss

@@ -8,7 +8,7 @@
 body {
 	margin: 0;
 	font-family: Verdana;
-	font-size: rem(16);
+	font-size: to-rem(16);
 	line-height: normal;
 }
 
@@ -41,7 +41,7 @@ hr {
 	background-color: black;
 	display: flex;
 	flex-direction: column;
-	padding: rem(8);
+	padding: to-rem(8);
 }
 
 .w-image {
@@ -49,13 +49,13 @@ hr {
 }
 
 .drawer-content-vertical {
-	width: rem(400);
+	width: to-rem(400);
 }
 
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
-		grid-template-columns: rem(360) calc(100% - rem(360));
+		grid-template-columns: to-rem(360) calc(100% - to-rem(360));
 		min-height: 100vh;
 		height: 100%;
 	}
@@ -70,8 +70,8 @@ hr {
 			top: 0;
 			bottom: 0;
 			left: 0;
-			width: rem(330);
-			margin: rem(16);
+			width: to-rem(330);
+			margin: to-rem(16);
 			flex-direction: column;
 			display: flex;
 
@@ -89,4 +89,4 @@ hr {
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/dist/assets/badge-text-1ca461ea-DLP9JO1r.js

@@ -1,4 +0,0 @@
-import{t as e}from"./index-lau6-xci.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const r=(t,a)=>{e(t,"_badgeText",a)};export{r as v};
-//# sourceMappingURL=badge-text-1ca461ea-DLP9JO1r.js.map

package/dist/assets/controller-6ce9698f-DXeuFfkB.js

@@ -1,4 +0,0 @@
-import{w as s,B as l,t as a,q as o,s as c}from"./index-lau6-xci.js";import{I as p}from"./controller-icon-87de6942-ZxrHhRbn.js";import{d,v as m}from"./debounce-90c878d0-D2V35nia.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const i=["default","visibility-toggle"],u=(n,t)=>{s(n,"_variant",e=>typeof e=="string"&&i.includes(e),new Set(i),t)};class C extends p{constructor(t,e,r){super(t,e,r),this.afterSyncCharCounter=()=>{typeof this.component._value=="string"&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length,this.component.state._currentLengthDebounced=this.component._value.length)},this.updateCurrentLengthDebounced=d(h=>{c(this.component,"_currentLengthDebounced",h)},500),this.component=t}validateAutoComplete(t){s(this.component,"_autoComplete",e=>typeof e=="string"&&(e==="on"||e==="off"),new Set(["on | off"]),t)}validateHasCounter(t){m(this.component,t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateVariant(t){u(this.component,t)}validateMaxLength(t){l(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePattern(t){a(this.component,"_pattern",t)}validatePlaceholder(t){a(this.component,"_placeholder",t)}validateReadOnly(t){o(this.component,"_readOnly",t)}validateRequired(t){o(this.component,"_required",t)}validateValue(t){a(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePattern(this.component._pattern),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validateVariant(this.component._variant)}}export{C as I};
-//# sourceMappingURL=controller-6ce9698f-DXeuFfkB.js.map

package/dist/assets/controller-6ce9698f-DXeuFfkB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"controller-6ce9698f-DXeuFfkB.js","sources":["../../../../components/dist/esm/controller-6ce9698f.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { w as watchValidator, D as watchNumber, y as watchString, j as watchBoolean, m as setState } from './index-bac313b4.js';\nimport { I as InputIconController } from './controller-icon-87de6942.js';\nimport { d as debounce, v as validateHasCounter } from './debounce-90c878d0.js';\n\nconst PasswordVariantPropTypeOptions = ['default', 'visibility-toggle'];\nconst validatePasswordVariant = (component, value) => {\n    watchValidator(component, '_variant', (value) => typeof value === 'string' && PasswordVariantPropTypeOptions.includes(value), new Set(PasswordVariantPropTypeOptions), value);\n};\n\nclass InputPasswordController extends InputIconController {\n    constructor(component, name, host) {\n        super(component, name, host);\n        this.afterSyncCharCounter = () => {\n            if (typeof this.component._value === 'string' && this.component._value.length > 0) {\n                this.component.state._currentLength = this.component._value.length;\n                this.component.state._currentLengthDebounced = this.component._value.length;\n            }\n        };\n        this.updateCurrentLengthDebounced = debounce((length) => {\n            setState(this.component, '_currentLengthDebounced', length);\n        }, 500);\n        this.component = component;\n    }\n    validateAutoComplete(value) {\n        watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value === 'on' || value === 'off'), new Set(['on | off']), value);\n    }\n    validateHasCounter(value) {\n        validateHasCounter(this.component, value, {\n            hooks: {\n                afterPatch: this.afterSyncCharCounter,\n            },\n        });\n    }\n    validateVariant(value) {\n        validatePasswordVariant(this.component, value);\n    }\n    validateMaxLength(value) {\n        watchNumber(this.component, '_maxLength', value, {\n            hooks: {\n                afterPatch: this.afterSyncCharCounter,\n            },\n            min: 0,\n        });\n    }\n    validatePattern(value) {\n        watchString(this.component, '_pattern', value);\n    }\n    validatePlaceholder(value) {\n        watchString(this.component, '_placeholder', value);\n    }\n    validateReadOnly(value) {\n        watchBoolean(this.component, '_readOnly', value);\n    }\n    validateRequired(value) {\n        watchBoolean(this.component, '_required', value);\n    }\n    validateValue(value) {\n        watchString(this.component, '_value', value, {\n            hooks: {\n                afterPatch: this.afterSyncCharCounter,\n            },\n        });\n        this.setFormAssociatedValue(this.component.state._value);\n    }\n    componentWillLoad() {\n        super.componentWillLoad();\n        this.validateAutoComplete(this.component._autoComplete);\n        this.validateHasCounter(this.component._hasCounter);\n        this.validateMaxLength(this.component._maxLength);\n        this.validatePattern(this.component._pattern);\n        this.validatePlaceholder(this.component._placeholder);\n        this.validateReadOnly(this.component._readOnly);\n        this.validateRequired(this.component._required);\n        this.validateValue(this.component._value);\n        this.validateVariant(this.component._variant);\n    }\n}\n\nexport { InputPasswordController as I };\n\n//# sourceMappingURL=controller-6ce9698f.js.map"],"names":["PasswordVariantPropTypeOptions","validatePasswordVariant","component","value","watchValidator","InputPasswordController","InputIconController","name","host","debounce","length","setState","validateHasCounter","watchNumber","watchString","watchBoolean"],"mappings":"qLAAA;AAAA;AAAA,GAOA,MAAMA,EAAiC,CAAC,UAAW,mBAAmB,EAChEC,EAA0B,CAACC,EAAWC,IAAU,CAClDC,EAAeF,EAAW,WAAaC,GAAU,OAAOA,GAAU,UAAYH,EAA+B,SAASG,CAAK,EAAG,IAAI,IAAIH,CAA8B,EAAGG,CAAK,CAChL,EAEA,MAAME,UAAgCC,CAAoB,CACtD,YAAYJ,EAAWK,EAAMC,EAAM,CAC/B,MAAMN,EAAWK,EAAMC,CAAI,EAC3B,KAAK,qBAAuB,IAAM,CAC1B,OAAO,KAAK,UAAU,QAAW,UAAY,KAAK,UAAU,OAAO,OAAS,IAC5E,KAAK,UAAU,MAAM,eAAiB,KAAK,UAAU,OAAO,OAC5D,KAAK,UAAU,MAAM,wBAA0B,KAAK,UAAU,OAAO,OAE5E,EACD,KAAK,6BAA+BC,EAAUC,GAAW,CACrDC,EAAS,KAAK,UAAW,0BAA2BD,CAAM,CAC7D,EAAE,GAAG,EACN,KAAK,UAAYR,CACzB,CACI,qBAAqBC,EAAO,CACxBC,EAAe,KAAK,UAAW,gBAAkBD,GAAU,OAAOA,GAAU,WAAaA,IAAU,MAAQA,IAAU,OAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,EAAGA,CAAK,CACjK,CACI,mBAAmBA,EAAO,CACtBS,EAAmB,KAAK,UAAWT,EAAO,CACtC,MAAO,CACH,WAAY,KAAK,oBACpB,CACb,CAAS,CACT,CACI,gBAAgBA,EAAO,CACnBF,EAAwB,KAAK,UAAWE,CAAK,CACrD,CACI,kBAAkBA,EAAO,CACrBU,EAAY,KAAK,UAAW,aAAcV,EAAO,CAC7C,MAAO,CACH,WAAY,KAAK,oBACpB,EACD,IAAK,CACjB,CAAS,CACT,CACI,gBAAgBA,EAAO,CACnBW,EAAY,KAAK,UAAW,WAAYX,CAAK,CACrD,CACI,oBAAoBA,EAAO,CACvBW,EAAY,KAAK,UAAW,eAAgBX,CAAK,CACzD,CACI,iBAAiBA,EAAO,CACpBY,EAAa,KAAK,UAAW,YAAaZ,CAAK,CACvD,CACI,iBAAiBA,EAAO,CACpBY,EAAa,KAAK,UAAW,YAAaZ,CAAK,CACvD,CACI,cAAcA,EAAO,CACjBW,EAAY,KAAK,UAAW,SAAUX,EAAO,CACzC,MAAO,CACH,WAAY,KAAK,oBACpB,CACb,CAAS,EACD,KAAK,uBAAuB,KAAK,UAAU,MAAM,MAAM,CAC/D,CACI,mBAAoB,CAChB,MAAM,kBAAmB,EACzB,KAAK,qBAAqB,KAAK,UAAU,aAAa,EACtD,KAAK,mBAAmB,KAAK,UAAU,WAAW,EAClD,KAAK,kBAAkB,KAAK,UAAU,UAAU,EAChD,KAAK,gBAAgB,KAAK,UAAU,QAAQ,EAC5C,KAAK,oBAAoB,KAAK,UAAU,YAAY,EACpD,KAAK,iBAAiB,KAAK,UAAU,SAAS,EAC9C,KAAK,iBAAiB,KAAK,UAAU,SAAS,EAC9C,KAAK,cAAc,KAAK,UAAU,MAAM,EACxC,KAAK,gBAAgB,KAAK,UAAU,QAAQ,CACpD,CACA"}

package/dist/assets/has-closer-64270429-CJja-RvI.js

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

package/dist/assets/image-source-d479e44b-BesapXt9.js

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

package/dist/assets/index-aGcjHrl7.css

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