kiso 0.1.0.pre → 0.2.0.pre

data/app/javascript/kiso/utils/positioning.js

@@ -0,0 +1,86 @@
+/**
+ * Shared positioning utilities for floating components.
+ * Wraps Floating UI for smart positioning with flip, shift, and auto-update.
+ *
+ * Used by select, combobox, popover, and dropdown_menu controllers.
+ *
+ * @module utils/positioning
+ */
+
+import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
+
+/**
+ * Starts positioning a floating element relative to a reference element.
+ * Computes position immediately and re-computes on scroll, resize, and
+ * layout shift via Floating UI's `autoUpdate`.
+ *
+ * Sets `data-side` on the floating element ("top", "bottom", "left", "right")
+ * for CSS animation selectors (e.g., `[data-side="top"] { ... }`).
+ *
+ * @param {HTMLElement} reference - The anchor element to position against
+ * @param {HTMLElement} floating - The floating element to position
+ * @param {Object} [options]
+ * @param {"bottom-start"|"bottom"|"bottom-end"|"top-start"|"top"|"top-end"|"right-start"|"right"|"right-end"|"left-start"|"left"|"left-end"} [options.placement="bottom-start"] - Preferred placement
+ * @param {number} [options.offset=4] - Pixel gap between reference and floating element
+ * @param {"absolute"|"fixed"} [options.strategy="absolute"] - CSS positioning strategy
+ * @param {boolean} [options.matchWidth=false] - Set floating element minWidth to reference width
+ * @returns {Function} Cleanup function — call on close or disconnect to remove listeners
+ *
+ * @example
+ *   // In a Stimulus controller:
+ *   open() {
+ *     this.contentTarget.hidden = false
+ *     this._cleanupPosition = startPositioning(
+ *       this.triggerTarget,
+ *       this.contentTarget,
+ *       { placement: "bottom-start", matchWidth: true }
+ *     )
+ *   }
+ *
+ *   close() {
+ *     this._cleanupPosition?.()
+ *     this._cleanupPosition = null
+ *     this.contentTarget.hidden = true
+ *   }
+ */
+export function startPositioning(reference, floating, options = {}) {
+  const {
+    placement = "bottom-start",
+    offset: offsetDistance = 4,
+    strategy = "absolute",
+    matchWidth = false,
+  } = options
+
+  const middleware = [offset(offsetDistance), flip(), shift({ padding: 8 })]
+
+  if (matchWidth) {
+    middleware.push(
+      size({
+        apply({ rects, elements }) {
+          elements.floating.style.minWidth = `${rects.reference.width}px`
+        },
+      }),
+    )
+  }
+
+  const update = () => {
+    computePosition(reference, floating, {
+      placement,
+      strategy,
+      middleware,
+    }).then(({ x, y, placement: finalPlacement }) => {
+      Object.assign(floating.style, {
+        position: strategy,
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const side = finalPlacement.split("-")[0]
+      if (floating.dataset.side !== side) {
+        floating.dataset.side = side
+      }
+    })
+  }
+
+  return autoUpdate(reference, floating, update)
+}

data/app/javascript/kiso/vendor/floating-ui-core.js

@@ -0,0 +1 @@
+const t=["top","right","bottom","left"],e=["start","end"],n=t.reduce(((t,n)=>t.concat(n,n+"-"+e[0],n+"-"+e[1])),[]),r=Math.min,o=Math.max,i={left:"right",right:"left",bottom:"top",top:"bottom"},a={start:"end",end:"start"};function l(t,e,n){return o(t,r(e,n))}function s(t,e){return"function"==typeof t?t(e):t}function c(t){return t.split("-")[0]}function f(t){return t.split("-")[1]}function m(t){return"x"===t?"y":"x"}function u(t){return"y"===t?"height":"width"}const d=new Set(["top","bottom"]);function g(t){return d.has(c(t))?"y":"x"}function p(t){return m(g(t))}function h(t,e,n){void 0===n&&(n=!1);const r=f(t),o=p(t),i=u(o);let a="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return e.reference[i]>e.floating[i]&&(a=R(a)),[a,R(a)]}function y(t){return t.replace(/start|end/g,(t=>a[t]))}const w=["left","right"],x=["right","left"],v=["top","bottom"],b=["bottom","top"];function A(t,e,n,r){const o=f(t);let i=function(t,e,n){switch(t){case"top":case"bottom":return n?e?x:w:e?w:x;case"left":case"right":return e?v:b;default:return[]}}(c(t),"start"===n,r);return o&&(i=i.map((t=>t+"-"+o)),e&&(i=i.concat(i.map(y)))),i}function R(t){return t.replace(/left|right|bottom|top/g,(t=>i[t]))}function O(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function D(t){const{x:e,y:n,width:r,height:o}=t;return{width:r,height:o,top:n,left:e,right:e+r,bottom:n+o,x:e,y:n}}function P(t,e,n){let{reference:r,floating:o}=t;const i=g(e),a=p(e),l=u(a),s=c(e),m="y"===i,d=r.x+r.width/2-o.width/2,h=r.y+r.height/2-o.height/2,y=r[l]/2-o[l]/2;let w;switch(s){case"top":w={x:d,y:r.y-o.height};break;case"bottom":w={x:d,y:r.y+r.height};break;case"right":w={x:r.x+r.width,y:h};break;case"left":w={x:r.x-o.width,y:h};break;default:w={x:r.x,y:r.y}}switch(f(e)){case"start":w[a]-=y*(n&&m?-1:1);break;case"end":w[a]+=y*(n&&m?-1:1)}return w}async function E(t,e){var n;void 0===e&&(e={});const{x:r,y:o,platform:i,rects:a,elements:l,strategy:c}=t,{boundary:f="clippingAncestors",rootBoundary:m="viewport",elementContext:u="floating",altBoundary:d=!1,padding:g=0}=s(e,t),p=O(g),h=l[d?"floating"===u?"reference":"floating":u],y=D(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(h)))||n?h:h.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(l.floating)),boundary:f,rootBoundary:m,strategy:c})),w="floating"===u?{x:r,y:o,width:a.floating.width,height:a.floating.height}:a.reference,x=await(null==i.getOffsetParent?void 0:i.getOffsetParent(l.floating)),v=await(null==i.isElement?void 0:i.isElement(x))&&await(null==i.getScale?void 0:i.getScale(x))||{x:1,y:1},b=D(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:l,rect:w,offsetParent:x,strategy:c}):w);return{top:(y.top-b.top+p.top)/v.y,bottom:(b.bottom-y.bottom+p.bottom)/v.y,left:(y.left-b.left+p.left)/v.x,right:(b.right-y.right+p.right)/v.x}}const T=async(t,e,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:i=[],platform:a}=n,l=i.filter(Boolean),s=await(null==a.isRTL?void 0:a.isRTL(e));let c=await a.getElementRects({reference:t,floating:e,strategy:o}),{x:f,y:m}=P(c,r,s),u=r,d={},g=0;for(let n=0;n<l.length;n++){var p;const{name:i,fn:h}=l[n],{x:y,y:w,data:x,reset:v}=await h({x:f,y:m,initialPlacement:r,placement:u,strategy:o,middlewareData:d,rects:c,platform:{...a,detectOverflow:null!=(p=a.detectOverflow)?p:E},elements:{reference:t,floating:e}});f=null!=y?y:f,m=null!=w?w:m,d={...d,[i]:{...d[i],...x}},v&&g<=50&&(g++,"object"==typeof v&&(v.placement&&(u=v.placement),v.rects&&(c=!0===v.rects?await a.getElementRects({reference:t,floating:e,strategy:o}):v.rects),({x:f,y:m}=P(c,u,s))),n=-1)}return{x:f,y:m,placement:u,strategy:o,middlewareData:d}},L=t=>({name:"arrow",options:t,async fn(e){const{x:n,y:o,placement:i,rects:a,platform:c,elements:m,middlewareData:d}=e,{element:g,padding:h=0}=s(t,e)||{};if(null==g)return{};const y=O(h),w={x:n,y:o},x=p(i),v=u(x),b=await c.getDimensions(g),A="y"===x,R=A?"top":"left",D=A?"bottom":"right",P=A?"clientHeight":"clientWidth",E=a.reference[v]+a.reference[x]-w[x]-a.floating[v],T=w[x]-a.reference[x],L=await(null==c.getOffsetParent?void 0:c.getOffsetParent(g));let k=L?L[P]:0;k&&await(null==c.isElement?void 0:c.isElement(L))||(k=m.floating[P]||a.floating[v]);const B=E/2-T/2,C=k/2-b[v]/2-1,H=r(y[R],C),S=r(y[D],C),F=H,M=k-b[v]-S,V=k/2-b[v]/2+B,W=l(F,V,M),j=!d.arrow&&null!=f(i)&&V!==W&&a.reference[v]/2-(V<F?H:S)-b[v]/2<0,z=j?V<F?V-F:V-M:0;return{[x]:w[x]+z,data:{[x]:W,centerOffset:V-W-z,...j&&{alignmentOffset:z}},reset:j}}});const k=function(t){return void 0===t&&(t={}),{name:"autoPlacement",options:t,async fn(e){var r,o,i;const{rects:a,middlewareData:l,placement:m,platform:u,elements:d}=e,{crossAxis:g=!1,alignment:p,allowedPlacements:w=n,autoAlignment:x=!0,...v}=s(t,e),b=void 0!==p||w===n?function(t,e,n){return(t?[...n.filter((e=>f(e)===t)),...n.filter((e=>f(e)!==t))]:n.filter((t=>c(t)===t))).filter((n=>!t||f(n)===t||!!e&&y(n)!==n))}(p||null,x,w):w,A=await u.detectOverflow(e,v),R=(null==(r=l.autoPlacement)?void 0:r.index)||0,O=b[R];if(null==O)return{};const D=h(O,a,await(null==u.isRTL?void 0:u.isRTL(d.floating)));if(m!==O)return{reset:{placement:b[0]}};const P=[A[c(O)],A[D[0]],A[D[1]]],E=[...(null==(o=l.autoPlacement)?void 0:o.overflows)||[],{placement:O,overflows:P}],T=b[R+1];if(T)return{data:{index:R+1,overflows:E},reset:{placement:T}};const L=E.map((t=>{const e=f(t.placement);return[t.placement,e&&g?t.overflows.slice(0,2).reduce(((t,e)=>t+e),0):t.overflows[0],t.overflows]})).sort(((t,e)=>t[1]-e[1])),k=(null==(i=L.filter((t=>t[2].slice(0,f(t[0])?2:3).every((t=>t<=0))))[0])?void 0:i[0])||L[0][0];return k!==m?{data:{index:R+1,overflows:E},reset:{placement:k}}:{}}}},B=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,r;const{placement:o,middlewareData:i,rects:a,initialPlacement:l,platform:f,elements:m}=e,{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:p,fallbackStrategy:w="bestFit",fallbackAxisSideDirection:x="none",flipAlignment:v=!0,...b}=s(t,e);if(null!=(n=i.arrow)&&n.alignmentOffset)return{};const O=c(o),D=g(l),P=c(l)===l,E=await(null==f.isRTL?void 0:f.isRTL(m.floating)),T=p||(P||!v?[R(l)]:function(t){const e=R(t);return[y(t),e,y(e)]}(l)),L="none"!==x;!p&&L&&T.push(...A(l,v,x,E));const k=[l,...T],B=await f.detectOverflow(e,b),C=[];let H=(null==(r=i.flip)?void 0:r.overflows)||[];if(u&&C.push(B[O]),d){const t=h(o,a,E);C.push(B[t[0]],B[t[1]])}if(H=[...H,{placement:o,overflows:C}],!C.every((t=>t<=0))){var S,F;const t=((null==(S=i.flip)?void 0:S.index)||0)+1,e=k[t];if(e){if(!("alignment"===d&&D!==g(e))||H.every((t=>g(t.placement)!==D||t.overflows[0]>0)))return{data:{index:t,overflows:H},reset:{placement:e}}}let n=null==(F=H.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:F.placement;if(!n)switch(w){case"bestFit":{var M;const t=null==(M=H.filter((t=>{if(L){const e=g(t.placement);return e===D||"y"===e}return!0})).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:M[0];t&&(n=t);break}case"initialPlacement":n=l}if(o!==n)return{reset:{placement:n}}}return{}}}};function C(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function H(e){return t.some((t=>e[t]>=0))}const S=function(t){return void 0===t&&(t={}),{name:"hide",options:t,async fn(e){const{rects:n,platform:r}=e,{strategy:o="referenceHidden",...i}=s(t,e);switch(o){case"referenceHidden":{const t=C(await r.detectOverflow(e,{...i,elementContext:"reference"}),n.reference);return{data:{referenceHiddenOffsets:t,referenceHidden:H(t)}}}case"escaped":{const t=C(await r.detectOverflow(e,{...i,altBoundary:!0}),n.floating);return{data:{escapedOffsets:t,escaped:H(t)}}}default:return{}}}}};function F(t){const e=r(...t.map((t=>t.left))),n=r(...t.map((t=>t.top)));return{x:e,y:n,width:o(...t.map((t=>t.right)))-e,height:o(...t.map((t=>t.bottom)))-n}}const M=function(t){return void 0===t&&(t={}),{name:"inline",options:t,async fn(e){const{placement:n,elements:i,rects:a,platform:l,strategy:f}=e,{padding:m=2,x:u,y:d}=s(t,e),p=Array.from(await(null==l.getClientRects?void 0:l.getClientRects(i.reference))||[]),h=function(t){const e=t.slice().sort(((t,e)=>t.y-e.y)),n=[];let r=null;for(let t=0;t<e.length;t++){const o=e[t];!r||o.y-r.y>r.height/2?n.push([o]):n[n.length-1].push(o),r=o}return n.map((t=>D(F(t))))}(p),y=D(F(p)),w=O(m);const x=await l.getElementRects({reference:{getBoundingClientRect:function(){if(2===h.length&&h[0].left>h[1].right&&null!=u&&null!=d)return h.find((t=>u>t.left-w.left&&u<t.right+w.right&&d>t.top-w.top&&d<t.bottom+w.bottom))||y;if(h.length>=2){if("y"===g(n)){const t=h[0],e=h[h.length-1],r="top"===c(n),o=t.top,i=e.bottom,a=r?t.left:e.left,l=r?t.right:e.right;return{top:o,bottom:i,left:a,right:l,width:l-a,height:i-o,x:a,y:o}}const t="left"===c(n),e=o(...h.map((t=>t.right))),i=r(...h.map((t=>t.left))),a=h.filter((n=>t?n.left===i:n.right===e)),l=a[0].top,s=a[a.length-1].bottom;return{top:l,bottom:s,left:i,right:e,width:e-i,height:s-l,x:i,y:l}}return y}},floating:i.floating,strategy:f});return a.reference.x!==x.reference.x||a.reference.y!==x.reference.y||a.reference.width!==x.reference.width||a.reference.height!==x.reference.height?{reset:{rects:x}}:{}}}},V=new Set(["left","top"]);const W=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,r;const{x:o,y:i,placement:a,middlewareData:l}=e,m=await async function(t,e){const{placement:n,platform:r,elements:o}=t,i=await(null==r.isRTL?void 0:r.isRTL(o.floating)),a=c(n),l=f(n),m="y"===g(n),u=V.has(a)?-1:1,d=i&&m?-1:1,p=s(e,t);let{mainAxis:h,crossAxis:y,alignmentAxis:w}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:p.mainAxis||0,crossAxis:p.crossAxis||0,alignmentAxis:p.alignmentAxis};return l&&"number"==typeof w&&(y="end"===l?-1*w:w),m?{x:y*d,y:h*u}:{x:h*u,y:y*d}}(e,t);return a===(null==(n=l.offset)?void 0:n.placement)&&null!=(r=l.arrow)&&r.alignmentOffset?{}:{x:o+m.x,y:i+m.y,data:{...m,placement:a}}}}},j=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:r,placement:o,platform:i}=e,{mainAxis:a=!0,crossAxis:f=!1,limiter:u={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...d}=s(t,e),p={x:n,y:r},h=await i.detectOverflow(e,d),y=g(c(o)),w=m(y);let x=p[w],v=p[y];if(a){const t="y"===w?"bottom":"right";x=l(x+h["y"===w?"top":"left"],x,x-h[t])}if(f){const t="y"===y?"bottom":"right";v=l(v+h["y"===y?"top":"left"],v,v-h[t])}const b=u.fn({...e,[w]:x,[y]:v});return{...b,data:{x:b.x-n,y:b.y-r,enabled:{[w]:a,[y]:f}}}}}},z=function(t){return void 0===t&&(t={}),{options:t,fn(e){const{x:n,y:r,placement:o,rects:i,middlewareData:a}=e,{offset:l=0,mainAxis:f=!0,crossAxis:u=!0}=s(t,e),d={x:n,y:r},p=g(o),h=m(p);let y=d[h],w=d[p];const x=s(l,e),v="number"==typeof x?{mainAxis:x,crossAxis:0}:{mainAxis:0,crossAxis:0,...x};if(f){const t="y"===h?"height":"width",e=i.reference[h]-i.floating[t]+v.mainAxis,n=i.reference[h]+i.reference[t]-v.mainAxis;y<e?y=e:y>n&&(y=n)}if(u){var b,A;const t="y"===h?"width":"height",e=V.has(c(o)),n=i.reference[p]-i.floating[t]+(e&&(null==(b=a.offset)?void 0:b[p])||0)+(e?0:v.crossAxis),r=i.reference[p]+i.reference[t]+(e?0:(null==(A=a.offset)?void 0:A[p])||0)-(e?v.crossAxis:0);w<n?w=n:w>r&&(w=r)}return{[h]:y,[p]:w}}}},q=function(t){return void 0===t&&(t={}),{name:"size",options:t,async fn(e){var n,i;const{placement:a,rects:l,platform:m,elements:u}=e,{apply:d=()=>{},...p}=s(t,e),h=await m.detectOverflow(e,p),y=c(a),w=f(a),x="y"===g(a),{width:v,height:b}=l.floating;let A,R;"top"===y||"bottom"===y?(A=y,R=w===(await(null==m.isRTL?void 0:m.isRTL(u.floating))?"start":"end")?"left":"right"):(R=y,A="end"===w?"top":"bottom");const O=b-h.top-h.bottom,D=v-h.left-h.right,P=r(b-h[A],O),E=r(v-h[R],D),T=!e.middlewareData.shift;let L=P,k=E;if(null!=(n=e.middlewareData.shift)&&n.enabled.x&&(k=D),null!=(i=e.middlewareData.shift)&&i.enabled.y&&(L=O),T&&!w){const t=o(h.left,0),e=o(h.right,0),n=o(h.top,0),r=o(h.bottom,0);x?k=v-2*(0!==t||0!==e?t+e:o(h.left,h.right)):L=b-2*(0!==n||0!==r?n+r:o(h.top,h.bottom))}await d({...e,availableWidth:k,availableHeight:L});const B=await m.getDimensions(u.floating);return v!==B.width||b!==B.height?{reset:{rects:!0}}:{}}}};export{L as arrow,k as autoPlacement,T as computePosition,E as detectOverflow,B as flip,S as hide,M as inline,z as limitShift,W as offset,D as rectToClientRect,j as shift,q as size};

data/app/javascript/kiso/vendor/floating-ui-dom.js

@@ -0,0 +1 @@
+import{rectToClientRect as t,arrow as e,autoPlacement as n,detectOverflow as o,flip as i,hide as r,inline as c,limitShift as l,offset as s,shift as f,size as u,computePosition as a}from"@floating-ui/core";const h=Math.min,d=Math.max,p=Math.round,g=Math.floor,m=t=>({x:t,y:t});function y(){return"undefined"!=typeof window}function w(t){return b(t)?(t.nodeName||"").toLowerCase():"#document"}function x(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!!y()&&(t instanceof Node||t instanceof x(t).Node)}function L(t){return!!y()&&(t instanceof Element||t instanceof x(t).Element)}function R(t){return!!y()&&(t instanceof HTMLElement||t instanceof x(t).HTMLElement)}function T(t){return!(!y()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof x(t).ShadowRoot)}const S=new Set(["inline","contents"]);function C(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=A(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!S.has(i)}const E=new Set(["table","td","th"]);function F(t){return E.has(w(t))}const D=[":popover-open",":modal"];function W(t){return D.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}const O=["transform","translate","scale","rotate","perspective"],H=["transform","translate","scale","rotate","perspective","filter"],M=["paint","layout","strict","content"];function P(t){const e=z(),n=L(t)?A(t):t;return O.some((t=>!!n[t]&&"none"!==n[t]))||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||H.some((t=>(n.willChange||"").includes(t)))||M.some((t=>(n.contain||"").includes(t)))}function z(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const B=new Set(["html","body","#document"]);function V(t){return B.has(w(t))}function A(t){return x(t).getComputedStyle(t)}function N(t){return L(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function k(t){if("html"===w(t))return t;const e=t.assignedSlot||t.parentNode||T(t)&&t.host||v(t);return T(e)?e.host:e}function I(t){const e=k(t);return V(e)?t.ownerDocument?t.ownerDocument.body:t.body:R(e)&&C(e)?e:I(e)}function q(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=I(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),c=x(i);if(r){const t=X(c);return e.concat(c,c.visualViewport||[],C(i)?i:[],t&&n?q(t):[])}return e.concat(i,q(i,[],n))}function X(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function Y(t){const e=A(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=R(t),r=i?t.offsetWidth:n,c=i?t.offsetHeight:o,l=p(n)!==r||p(o)!==c;return l&&(n=r,o=c),{width:n,height:o,$:l}}function $(t){return L(t)?t:t.contextElement}function _(t){const e=$(t);if(!R(e))return m(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Y(e);let c=(r?p(n.width):n.width)/o,l=(r?p(n.height):n.height)/i;return c&&Number.isFinite(c)||(c=1),l&&Number.isFinite(l)||(l=1),{x:c,y:l}}const j=m(0);function G(t){const e=x(t);return z()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:j}function J(e,n,o,i){void 0===n&&(n=!1),void 0===o&&(o=!1);const r=e.getBoundingClientRect(),c=$(e);let l=m(1);n&&(i?L(i)&&(l=_(i)):l=_(e));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==x(t))&&e}(c,o,i)?G(c):m(0);let f=(r.left+s.x)/l.x,u=(r.top+s.y)/l.y,a=r.width/l.x,h=r.height/l.y;if(c){const t=x(c),e=i&&L(i)?x(i):i;let n=t,o=X(n);for(;o&&i&&e!==n;){const t=_(o),e=o.getBoundingClientRect(),i=A(o),r=e.left+(o.clientLeft+parseFloat(i.paddingLeft))*t.x,c=e.top+(o.clientTop+parseFloat(i.paddingTop))*t.y;f*=t.x,u*=t.y,a*=t.x,h*=t.y,f+=r,u+=c,n=x(o),o=X(n)}}return t({width:a,height:h,x:f,y:u})}function K(t,e){const n=N(t).scrollLeft;return e?e.left+n:J(v(t)).left+n}function Q(t,e){const n=t.getBoundingClientRect();return{x:n.left+e.scrollLeft-K(t,n),y:n.top+e.scrollTop}}const U=new Set(["absolute","fixed"]);function Z(e,n,o){let i;if("viewport"===n)i=function(t,e){const n=x(t),o=v(t),i=n.visualViewport;let r=o.clientWidth,c=o.clientHeight,l=0,s=0;if(i){r=i.width,c=i.height;const t=z();(!t||t&&"fixed"===e)&&(l=i.offsetLeft,s=i.offsetTop)}const f=K(o);if(f<=0){const t=o.ownerDocument,e=t.body,n=getComputedStyle(e),i="CSS1Compat"===t.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,c=Math.abs(o.clientWidth-e.clientWidth-i);c<=25&&(r-=c)}else f<=25&&(r+=f);return{width:r,height:c,x:l,y:s}}(e,o);else if("document"===n)i=function(t){const e=v(t),n=N(t),o=t.ownerDocument.body,i=d(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=d(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let c=-n.scrollLeft+K(t);const l=-n.scrollTop;return"rtl"===A(o).direction&&(c+=d(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:c,y:l}}(v(e));else if(L(n))i=function(t,e){const n=J(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=R(t)?_(t):m(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(n,o);else{const t=G(e);i={x:n.x-t.x,y:n.y-t.y,width:n.width,height:n.height}}return t(i)}function tt(t,e){const n=k(t);return!(n===e||!L(n)||V(n))&&("fixed"===A(n).position||tt(n,e))}function et(t,e,n){const o=R(e),i=v(e),r="fixed"===n,c=J(t,!0,r,e);let l={scrollLeft:0,scrollTop:0};const s=m(0);function f(){s.x=K(i)}if(o||!o&&!r)if(("body"!==w(e)||C(i))&&(l=N(e)),o){const t=J(e,!0,r,e);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&f();r&&!o&&i&&f();const u=!i||o||r?m(0):Q(i,l);return{x:c.left+l.scrollLeft-s.x-u.x,y:c.top+l.scrollTop-s.y-u.y,width:c.width,height:c.height}}function nt(t){return"static"===A(t).position}function ot(t,e){if(!R(t)||"fixed"===A(t).position)return null;if(e)return e(t);let n=t.offsetParent;return v(t)===n&&(n=n.ownerDocument.body),n}function it(t,e){const n=x(t);if(W(t))return n;if(!R(t)){let e=k(t);for(;e&&!V(e);){if(L(e)&&!nt(e))return e;e=k(e)}return n}let o=ot(t,e);for(;o&&F(o)&&nt(o);)o=ot(o,e);return o&&V(o)&&nt(o)&&!P(o)?n:o||function(t){let e=k(t);for(;R(e)&&!V(e);){if(P(e))return e;if(W(e))return null;e=k(e)}return null}(t)||n}const rt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,c=v(o),l=!!e&&W(e.floating);if(o===c||l&&r)return n;let s={scrollLeft:0,scrollTop:0},f=m(1);const u=m(0),a=R(o);if((a||!a&&!r)&&(("body"!==w(o)||C(c))&&(s=N(o)),R(o))){const t=J(o);f=_(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}const h=!c||a||r?m(0):Q(c,s);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-s.scrollLeft*f.x+u.x+h.x,y:n.y*f.y-s.scrollTop*f.y+u.y+h.y}},getDocumentElement:v,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?W(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=q(t,[],!1).filter((t=>L(t)&&"body"!==w(t))),i=null;const r="fixed"===A(t).position;let c=r?k(t):t;for(;L(c)&&!V(c);){const e=A(c),n=P(c);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&U.has(i.position)||C(c)&&!n&&tt(t,c))?o=o.filter((t=>t!==c)):i=e,c=k(c)}return e.set(t,o),o}(e,this._c):[].concat(n),o],c=r[0],l=r.reduce(((t,n)=>{const o=Z(e,n,i);return t.top=d(o.top,t.top),t.right=h(o.right,t.right),t.bottom=h(o.bottom,t.bottom),t.left=d(o.left,t.left),t}),Z(e,c,i));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},getOffsetParent:it,getElementRects:async function(t){const e=this.getOffsetParent||it,n=this.getDimensions,o=await n(t.floating);return{reference:et(t.reference,await 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}=Y(t);return{width:e,height:n}},getScale:_,isElement:L,isRTL:function(t){return"rtl"===A(t).direction}};function ct(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}function lt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:c="function"==typeof ResizeObserver,layoutShift:l="function"==typeof IntersectionObserver,animationFrame:s=!1}=o,f=$(t),u=i||r?[...f?q(f):[],...q(e)]:[];u.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const a=f&&l?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 c(l,s){void 0===l&&(l=!1),void 0===s&&(s=1),r();const f=t.getBoundingClientRect(),{left:u,top:a,width:p,height:m}=f;if(l||e(),!p||!m)return;const y={rootMargin:-g(a)+"px "+-g(i.clientWidth-(u+p))+"px "+-g(i.clientHeight-(a+m))+"px "+-g(u)+"px",threshold:d(0,h(1,s))||1};let w=!0;function x(e){const o=e[0].intersectionRatio;if(o!==s){if(!w)return c();o?c(!1,o):n=setTimeout((()=>{c(!1,1e-7)}),1e3)}1!==o||ct(f,t.getBoundingClientRect())||c(),w=!1}try{o=new IntersectionObserver(x,{...y,root:i.ownerDocument})}catch(t){o=new IntersectionObserver(x,y)}o.observe(t)}(!0),r}(f,n):null;let p,m=-1,y=null;c&&(y=new ResizeObserver((t=>{let[o]=t;o&&o.target===f&&y&&(y.unobserve(e),cancelAnimationFrame(m),m=requestAnimationFrame((()=>{var t;null==(t=y)||t.observe(e)}))),n()})),f&&!s&&y.observe(f),y.observe(e));let w=s?J(t):null;return s&&function e(){const o=J(t);w&&!ct(w,o)&&n();w=o,p=requestAnimationFrame(e)}(),n(),()=>{var t;u.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==a||a(),null==(t=y)||t.disconnect(),y=null,s&&cancelAnimationFrame(p)}}const st=o,ft=s,ut=n,at=f,ht=i,dt=u,pt=r,gt=e,mt=c,yt=l,wt=(t,e,n)=>{const o=new Map,i={platform:rt,...n},r={...i.platform,_c:o};return a(t,e,{...i,platform:r})};export{gt as arrow,ut as autoPlacement,lt as autoUpdate,wt as computePosition,st as detectOverflow,ht as flip,q as getOverflowAncestors,pt as hide,mt as inline,yt as limitShift,ft as offset,rt as platform,at as shift,dt as size};

data/app/views/kiso/components/_alert.html.erb

@@ -2,7 +2,7 @@
 <%= content_tag :div,
     role: :alert,
     class: Kiso::Themes::Alert.render(color: color, variant: variant, class: css_classes),
-    data: { component: :alert },
+    data: kiso_prepare_options(component_options, slot: "alert"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_avatar.html.erb

@@ -0,0 +1,23 @@
+<%# locals: (src: nil, alt: "", text: nil, size: :md, css_classes: "", **component_options) %>
+<%= content_tag :span,
+    class: Kiso::Themes::Avatar.render(size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "avatar", size: size),
+    **component_options do %>
+  <% content = capture { yield }.presence %>
+  <% if content %>
+    <%= content %>
+  <% else %>
+    <% if text.present? %>
+      <%= tag.span class: Kiso::Themes::AvatarFallback.render(size: size),
+          data: { slot: "avatar-fallback" } do %>
+        <%= text %>
+      <% end %>
+    <% end %>
+    <% if src.present? %>
+      <%= tag.img src: src, alt: alt,
+          class: Kiso::Themes::AvatarImage.render,
+          data: { slot: "avatar-image" },
+          onerror: "this.style.display='none'" %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_badge.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (color: :primary, variant: :soft, size: :md, css_classes: "", **component_options) %>
 <%= content_tag :span,
     class: Kiso::Themes::Badge.render(color: color, variant: variant, size: size, class: css_classes),
-    data: { component: :badge },
+    data: kiso_prepare_options(component_options, slot: "badge"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_breadcrumb.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :nav,
+    class: Kiso::Themes::Breadcrumb.render(class: css_classes),
+    aria: { label: "breadcrumb" },
+    data: kiso_prepare_options(component_options, slot: "breadcrumb"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_button.html.erb

@@ -13,7 +13,7 @@
     class: Kiso::Themes::Button.render(
       color: color, variant: variant, size: size, block: block,
       class: css_classes),
-    data: { component: :button },
+    data: kiso_prepare_options(component_options, slot: "button"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_card.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (variant: :outline, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::Card.render(variant: variant, class: css_classes),
-    data: { component: :card },
+    data: kiso_prepare_options(component_options, slot: "card"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_checkbox.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (color: :primary, checked: false, css_classes: "", **component_options) %>
+<% component_options[:type] = :checkbox
+   component_options[:checked] = true if checked %>
+<%= tag.input(
+    class: Kiso::Themes::Checkbox.render(color: color, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "checkbox"),
+    **component_options) %>

data/app/views/kiso/components/_color_mode_button.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (size: :md, css_classes: "", **component_options) %>
+<%= content_tag :button,
+    class: Kiso::Themes::ColorModeButton.render(size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "color-mode-button",
+                               controller: "kiso--theme",
+                               action: "click->kiso--theme#toggle"),
+    aria: { label: "Toggle color mode" },
+    type: "button",
+    **component_options do %>
+  <%# Light icon — visible in light mode, hidden in dark %>
+  <span data-slot="color-mode-icon-light"><%= kiso_component_icon(:sun) %></span>
+  <%# Dark icon — hidden in light mode, visible in dark %>
+  <span data-slot="color-mode-icon-dark"><%= kiso_component_icon(:moon) %></span>
+<% end %>

data/app/views/kiso/components/_color_mode_select.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (size: :md, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ColorModeSelect.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "color-mode-select",
+                               controller: "kiso--theme",
+                               action: "kiso--select:change->kiso--theme#set"),
+    **component_options do %>
+  <%= kui(:select) do %>
+    <%= kui(:select, :trigger, size: size) do %>
+      <%= kui(:select, :value, placeholder: "Theme") %>
+    <% end %>
+    <%= kui(:select, :content) do %>
+      <%= kui(:select, :item, value: "system") do %>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:monitor, class: "size-4 opacity-60") %> System</span>
+      <% end %>
+      <%= kui(:select, :item, value: "light") do %>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:sun, class: "size-4 opacity-60") %> Light</span>
+      <% end %>
+      <%= kui(:select, :item, value: "dark") do %>
+        <span class="inline-flex items-center gap-2"><%= kiso_component_icon(:moon, class: "size-4 opacity-60") %> Dark</span>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_combobox.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (name: nil, multiple: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Combobox.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "combobox",
+      controller: "kiso--combobox",
+      kiso__combobox_multiple_value: multiple),
+    **component_options do %>
+  <%= yield %>
+  <% if name %>
+    <%= tag.input(type: "hidden", name: name, data: {kiso__combobox_target: "hiddenInput"}) %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_command.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Command.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "command", controller: "kiso--command"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_dashboard_group.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (sidebar_open: nil, layout: :sidebar, css_classes: "", **component_options) %>
+<% sidebar_open = cookies[:sidebar_open] != "false" if sidebar_open.nil? %>
+<%= content_tag :div,
+    class: Kiso::Themes::DashboardGroup.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dashboard-group",
+                               controller: "kiso--sidebar",
+                               layout: layout,
+                               sidebar_open: sidebar_open) do %>
+  <%= yield %>
+  <%= tag.div data: { slot: "dashboard-scrim",
+                      kiso__sidebar_target: "scrim",
+                      action: "click->kiso--sidebar#closeOnMobile" },
+              aria: { hidden: true } %>
+<% end %>

data/app/views/kiso/components/_dashboard_navbar.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :header,
+    class: Kiso::Themes::DashboardNavbar.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dashboard-navbar"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_dashboard_panel.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :main,
+    class: Kiso::Themes::DashboardPanel.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dashboard-panel"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_dashboard_sidebar.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :aside,
+    id: "dashboard-sidebar",
+    class: Kiso::Themes::DashboardSidebar.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dashboard-sidebar"),
+    aria: { label: "Sidebar navigation" },
+    **component_options do %>
+  <div data-slot="dashboard-sidebar-inner">
+    <%= yield %>
+  </div>
+<% end %>

data/app/views/kiso/components/_dashboard_toolbar.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DashboardToolbar.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dashboard-toolbar"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_dropdown_menu.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::DropdownMenu.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "dropdown-menu", controller: "kiso--dropdown-menu"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/{_empty_state.html.erb → _empty.html.erb}

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", **component_options) %>
 <%= content_tag :div,
-    class: Kiso::Themes::EmptyState.render(class: css_classes),
-    data: { component: :empty_state },
+    class: Kiso::Themes::Empty.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "empty"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_field.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (orientation: :vertical, invalid: false, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    role: :group,
+    class: Kiso::Themes::Field.render(orientation: orientation, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "field").merge(
+      orientation: orientation,
+      invalid: (true if invalid),
+      disabled: (true if disabled)
+    ).compact,
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_field_group.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::FieldGroup.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "field-group"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_field_set.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :fieldset,
+    class: Kiso::Themes::FieldSet.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "field-set"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_input.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (variant: :outline, size: :md, type: :text, disabled: false,
+             css_classes: "", **component_options) %>
+<% component_options[:type] = type
+   component_options[:disabled] = true if disabled %>
+<%= tag.input(
+    class: Kiso::Themes::Input.render(variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "input"),
+    **component_options) %>

data/app/views/kiso/components/_input_group.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    role: :group,
+    class: Kiso::Themes::InputGroup.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "input-group"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_input_otp.html.erb

@@ -0,0 +1,22 @@
+<%# locals: (length: 6, name: nil, id: nil, value: nil, pattern: "\\d", disabled: false, autocomplete: "one-time-code", aria_label: nil, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::InputOtp.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "input-otp",
+      controller: "kiso--input-otp",
+      kiso__input_otp_length_value: length,
+      kiso__input_otp_pattern_value: pattern),
+    **component_options do %>
+  <%= tag.input(type: :text,
+      id: id,
+      inputmode: (pattern == "\\d" ? :numeric : :text),
+      autocomplete: autocomplete,
+      maxlength: length,
+      name: name,
+      value: value,
+      disabled: disabled,
+      spellcheck: false,
+      aria: { label: aria_label },
+      class: "absolute inset-0 z-10 w-full h-full opacity-0 disabled:cursor-not-allowed",
+      data: { kiso__input_otp_target: "input" }) %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_kbd.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (size: :md, css_classes: "", **component_options) %>
+<%= content_tag :kbd,
+    class: Kiso::Themes::Kbd.render(size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "kbd"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_label.html.erb

@@ -0,0 +1,5 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= tag.label(
+    class: Kiso::Themes::Label.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "label"),
+    **component_options) { yield } %>

data/app/views/kiso/components/_nav.html.erb

@@ -0,0 +1,7 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :nav,
+    class: Kiso::Themes::Nav.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "nav"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_pagination.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :nav,
+    role: "navigation",
+    aria: {label: "pagination"},
+    class: Kiso::Themes::Pagination.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "pagination"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_popover.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: css_classes.presence,
+    data: kiso_prepare_options(component_options, slot: "popover", controller: "kiso--popover"),
+    style: "position: relative;",
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_radio_group.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **component_options) %>
+<% component_options[:role] = :radiogroup %>
+<%= content_tag :div,
+    class: Kiso::Themes::RadioGroup.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "radio-group"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_select.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (name: nil, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::Select.render(class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "select", controller: "kiso--select"),
+    **component_options do %>
+  <%= yield %>
+  <%= tag.input(type: "hidden", name: name, data: {kiso__select_target: "hiddenInput"}) %>
+<% end %>

data/app/views/kiso/components/_select_native.html.erb

@@ -0,0 +1,16 @@
+<%# locals: (variant: :outline, size: :md, disabled: false, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::SelectNativeWrapper.render,
+    data: {slot: "select-native-wrapper"} do %>
+  <% component_options[:disabled] = true if disabled %>
+  <%= tag.select(
+      class: Kiso::Themes::SelectNative.render(variant: variant, size: size, class: css_classes),
+      data: kiso_prepare_options(component_options, slot: "select-native"),
+      **component_options) { yield } %>
+  <%= content_tag :span,
+      class: Kiso::Themes::SelectNativeIcon.render,
+      aria: {hidden: true},
+      data: {slot: "select-native-icon"} do %>
+    <%= kiso_component_icon(:chevron_down) %>
+  <% end %>
+<% end %>

data/app/views/kiso/components/_separator.html.erb

@@ -3,5 +3,5 @@
     role: (decorative ? "none" : "separator"),
     aria: (decorative ? {} : { orientation: orientation }),
     class: Kiso::Themes::Separator.render(orientation: orientation, class: css_classes),
-    data: { component: :separator },
+    data: kiso_prepare_options(component_options, slot: "separator"),
     **component_options) %>

data/app/views/kiso/components/_stats_card.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (variant: :outline, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::StatsCard.render(variant: variant, class: css_classes),
-    data: { component: :stats_card },
+    data: kiso_prepare_options(component_options, slot: "stats-card"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_stats_grid.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (columns: 4, css_classes: "", **component_options) %>
 <%= content_tag :div,
     class: Kiso::Themes::StatsGrid.render(columns: columns, class: css_classes),
-    data: { component: :stats_grid },
+    data: kiso_prepare_options(component_options, slot: "stats-grid"),
     **component_options do %>
   <%= yield %>
 <% end %>

data/app/views/kiso/components/_switch.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (color: :primary, size: :md, checked: false, css_classes: "", **component_options) %>
+<% component_options[:type] = :checkbox
+   component_options[:role] = :switch
+   component_options[:checked] = true if checked %>
+<%= tag.label(
+    class: Kiso::Themes::SwitchTrack.render(color: color, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "switch")) do %>
+  <%= tag.input(class: "peer sr-only", **component_options) %>
+  <%= tag.span(class: Kiso::Themes::SwitchThumb.render(size: size)) %>
+<% end %>

data/app/views/kiso/components/_table.html.erb

@@ -1,7 +1,8 @@
 <%# locals: (css_classes: "", **component_options) %>
-<div class="relative w-full overflow-x-auto" data-component="table" data-table-part="container">
+<div class="relative w-full overflow-x-auto">
   <%= content_tag :table,
       class: Kiso::Themes::Table.render(class: css_classes),
+      data: kiso_prepare_options(component_options, slot: "table"),
       **component_options do %>
     <%= yield %>
   <% end %>

data/app/views/kiso/components/_textarea.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (variant: :outline, size: :md, disabled: false,
+             css_classes: "", **component_options) %>
+<% component_options[:disabled] = true if disabled %>
+<%= content_tag :textarea,
+    class: Kiso::Themes::Textarea.render(variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "textarea"),
+    **component_options do %>
+  <%= capture { yield }.presence %>
+<% end %>

data/app/views/kiso/components/_toggle.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (variant: :default, size: :default, pressed: false, css_classes: "", **component_options) %>
+<% component_options[:type] ||= :button
+   component_options[:"aria-pressed"] = pressed %>
+<%= content_tag :button,
+    class: Kiso::Themes::Toggle.render(variant: variant, size: size, class: css_classes),
+    data: kiso_prepare_options(component_options, slot: "toggle",
+      state: pressed ? "on" : "off",
+      controller: "kiso--toggle",
+      action: "click->kiso--toggle#toggle"),
+    **component_options do %>
+  <%= yield %>
+<% end %>

data/app/views/kiso/components/_toggle_group.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (type: :single, variant: :default, size: :default, css_classes: "", **component_options) %>
+<%= content_tag :div,
+    class: Kiso::Themes::ToggleGroup.render(class: css_classes),
+    role: "group",
+    data: kiso_prepare_options(component_options, slot: "toggle-group",
+      controller: "kiso--toggle-group",
+      kiso__toggle_group_type_value: type,
+      kiso__toggle_group_variant_value: variant,
+      kiso__toggle_group_size_value: size),
+    **component_options do %>
+  <%= yield %>
+<% end %>