@auvyx/ui 0.1.1 → 0.1.2

package/dist/auvyx.bundle.css

@@ -1,4 +1,4 @@
-/*! @auvyx/ui v0.1.1 source bundle | MIT | import after "tailwindcss" */
+/*! @auvyx/ui v0.1.2 source bundle | MIT | import after "tailwindcss" */
 /* @auvyx/ui source: components + layout primitives + themes, no Tailwind import.
  *
  * Shared by both channels:
@@ -280,6 +280,99 @@ html[data-motion='off'] {
     }
   }
 
+  /* ---- Form controls: hover and press feedback.
+     The style packs give fields a focus ring but no hover in light mode, and
+     checkboxes, radios and switches no hover or press at all. Fields darken
+     their border towards --ring on hover; choices also take a short press.
+     These rules come before the components, so a pack that styles its own
+     hover (same or higher specificity) still wins. */
+  :is(
+    .field > input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']),
+    .input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']),
+    .field > textarea,
+    .textarea,
+    .field > select,
+    select.select,
+    .select:not(select) > button,
+    .combobox > input[role='combobox'],
+    .input-group,
+    .input-otp
+  ) {
+    transition:
+      color var(--motion-fast) var(--motion-ease-standard),
+      background-color var(--motion-fast) var(--motion-ease-standard),
+      border-color var(--motion-fast) var(--motion-ease-standard),
+      box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+
+  :is(
+    .field > input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']),
+    .input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']),
+    .field > textarea,
+    .textarea,
+    .field > select,
+    select.select,
+    .select:not(select) > button,
+    .combobox > input[role='combobox'],
+    .input-group,
+    .input-otp
+  ):hover:not(:focus, :focus-within, :disabled, :has(:disabled), [aria-invalid='true'], [aria-expanded='true']) {
+    border-color: color-mix(in oklch, var(--ring) 70%, var(--input));
+  }
+
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])) {
+    transition:
+      color var(--motion-fast) var(--motion-ease-standard),
+      background-color var(--motion-fast) var(--motion-ease-standard),
+      border-color var(--motion-fast) var(--motion-ease-standard),
+      box-shadow var(--motion-fast) var(--motion-ease-standard),
+      scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy);
+  }
+
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):not([role='switch']):hover:not(:checked, :focus-visible, :disabled, [aria-invalid='true']) {
+    border-color: color-mix(in oklch, var(--ring) 70%, var(--input));
+  }
+
+  /* Switches: some packs draw them without a border, so the track darkens instead. */
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio']))[role='switch']:hover:not(:checked, :disabled, [aria-invalid='true']) {
+    background-color: color-mix(in oklch, var(--input), var(--foreground) 12%);
+  }
+
+  /* Dark mode: the packs tint unchecked tracks with a .dark rule; outrank it. */
+  :is(.dark, .dark *) :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio']))[role='switch']:hover:not(:checked, :disabled, [aria-invalid='true']) {
+    background-color: color-mix(in oklch, var(--input), var(--foreground) 18%);
+  }
+
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):active:not(:disabled) {
+    scale: 0.92;
+  }
+
+  /* Slider: the thumb grows a little while it is held. */
+  :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    transition: scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy), box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+  :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    transition: scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy), box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+  :is(.field > input[type='range'], .input[type='range']):active:not(:disabled)::-webkit-slider-thumb {
+    scale: 1.15;
+  }
+  :is(.field > input[type='range'], .input[type='range']):active:not(:disabled)::-moz-range-thumb {
+    scale: 1.15;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):active {
+      scale: none;
+    }
+    :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+      scale: none;
+    }
+    :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+      scale: none;
+    }
+  }
+
   /* ---- Anchored surfaces: scale in from the anchor, leave faster. */
   [data-popover]:not([popover]) {
     transition-property: opacity, scale, translate, visibility;

package/dist/auvyx.chart.min.js

@@ -1,2 +1,2 @@
-/*! @auvyx/ui v0.1.1 | MIT License | see LICENSE */
+/*! @auvyx/ui v0.1.2 | MIT License | see LICENSE */
 (()=>{const A=new WeakMap,C=new Set,_=["var(--chart-1)","var(--chart-2)","var(--chart-3)","var(--chart-4)","var(--chart-5)"];let E=null;const N=e=>e&&typeof e=="object"&&Array.isArray(e.datasets),w=e=>{if(typeof e=="string"){const r=Array.from(document.querySelectorAll(e));if(r.length===0)throw new Error(`Chart target not found: ${e}`);return r}if(e instanceof HTMLCanvasElement)return[e];if(e instanceof Element){const r=e.matches("canvas")?e:e.querySelector("canvas");if(r)return[r]}if(e instanceof NodeList||Array.isArray(e))return Array.from(e).flatMap(w);throw new Error("Chart target must be a selector, canvas, element, NodeList, or array.")},x=(e,r,t,o)=>r[t]!==void 0?r[t]:e.dataset[o],j=(e,r,t,o,n)=>{const a=x(e,r,t,o);return a===void 0?n:typeof a=="boolean"?a:a!=="false"},v=(e,r)=>{const t=e.getAttribute(r);if(t)try{return JSON.parse(t)}catch(o){console.error(`Invalid JSON in ${r}:`,o);return}},h=e=>_[e%_.length],B=e=>N(e)?{...e,labels:Array.isArray(e.labels)?[...e.labels]:e.labels,datasets:e.datasets.map(r=>({...r,data:Array.isArray(r.data)?[...r.data]:r.data,backgroundColor:Array.isArray(r.backgroundColor)?[...r.backgroundColor]:r.backgroundColor,borderColor:Array.isArray(r.borderColor)?[...r.borderColor]:r.borderColor,hoverBackgroundColor:Array.isArray(r.hoverBackgroundColor)?[...r.hoverBackgroundColor]:r.hoverBackgroundColor,hoverBorderColor:Array.isArray(r.hoverBorderColor)?[...r.hoverBorderColor]:r.hoverBorderColor}))}:e,y=e=>!e||typeof e!="object"||Array.isArray(e)?e:Object.fromEntries(Object.entries(e).map(([r,t])=>[r,t&&typeof t=="object"&&!Array.isArray(t)?y(t):t])),p=(e,r)=>{if(Array.isArray(e))return e.map(n=>p(n,r));if(typeof e!="string")return e;const t=document.createElement("span");t.style.color=e,t.style.display="none",(r.parentElement||document.body).appendChild(t);const o=getComputedStyle(t).color;return t.remove(),o||e},S=(e,r,t)=>{const o=document.createElement("canvas");o.width=1,o.height=1;const n=o.getContext("2d",{willReadFrequently:!0});if(!n)return e;n.clearRect(0,0,1,1),n.fillStyle="#000",n.fillStyle=p(e,t),n.fillRect(0,0,1,1);const[a,c,l,s]=n.getImageData(0,0,1,1).data;return`rgba(${a}, ${c}, ${l}, ${s/255*r})`},M=(e,r,{from:t=.4,to:o}={})=>{if(o===void 0)return S(e,t,r);let n=null;return({chart:a})=>{if(n||(n=[S(e,t,r),S(e,o,r)]),!a.chartArea)return n[0];const c=a.ctx.createLinearGradient(0,a.chartArea.top,0,a.chartArea.bottom);return c.addColorStop(0,n[0]),c.addColorStop(1,n[1]),c}},q=(e,r)=>(e.datasets?.forEach(t=>{t.borderColor=p(t.borderColor,r),t.backgroundColor=p(t.backgroundColor,r),t.hoverBorderColor=p(t.hoverBorderColor,r),t.hoverBackgroundColor=p(t.hoverBackgroundColor,r)}),e),V=(e,r)=>(Object.values(e||{}).forEach(t=>{["border","grid","ticks","angleLines","pointLabels"].forEach(o=>{t[o]?.color!==void 0&&(t[o].color=p(t[o].color,r))})}),e),T=(e,r)=>p(`var(${r})`,e),J=(e,r)=>`color-mix(in oklab, ${e} ${r*100}%, transparent)`,K=(e,r,t=0)=>{const o=getComputedStyle(e).getPropertyValue(r).trim();if(!o)return t;const n=Number.parseFloat(o);return Number.isFinite(n)?n:t},D=(e,r,{barRadius:t,element:o})=>(e.datasets?.forEach(n=>{(r==="bar"||n.type==="bar")&&n.borderRadius===void 0&&(n.borderRadius=t),n._basecoatSurface&&(n.backgroundColor=M(n.borderColor||n.backgroundColor,o,n._basecoatSurface),delete n._basecoatSurface)}),e),z=e=>!["pie","doughnut","polarArea","radar"].includes(e),O=(e,r)=>{const t=Array.from(e.classList).filter(o=>o!=="chart");t.length!==0&&(r.classList.add(...t),e.classList.remove(...t))},G=e=>{if(e.parentElement?.classList.contains("chart"))return e.parentElement.dataset.basecoatChartContainer="true",O(e,e.parentElement),e.parentElement;const r=document.createElement("div");return r.className="chart",r.dataset.basecoatChartContainer="true",O(e,r),e.insertAdjacentElement("beforebegin",r),r.append(e),r},W=e=>Object.entries(e||{}),k=(e,r)=>{if(e&&typeof e=="object")return e[r]},H=({type:e,labelKey:r,data:t,series:o})=>{if(N(t))return B(t);const n=Array.isArray(t)?t:[],a=W(o),c=n.map(l=>k(l,r));if(e==="pie"||e==="doughnut"||e==="polarArea"){const[l,s={}]=a[0]||[];return{labels:c,datasets:[{label:s.label||l||"Value",data:n.map(i=>k(i,l)),backgroundColor:n.map((i,d)=>i?.color||i?.fill||h(d)),borderColor:n.map((i,d)=>i?.color||i?.fill||h(d)),...s.dataset||{}}]}}return{labels:c,datasets:a.map(([l,s],i)=>{const d=s.color||h(i),u=s.dataset||{},b=s.surface===!0?{from:.4}:s.surface==="gradient"?{from:.8,to:.1}:s.surface;return{label:s.label||l,data:n.map(f=>k(f,l)),borderColor:d,backgroundColor:s.backgroundColor||d,fill:e==="line"?!1:void 0,type:s.type,yAxisID:s.axis,hidden:s.hidden,...u,...b&&s.backgroundColor===void 0&&u.backgroundColor===void 0?{_basecoatSurface:b}:{}}})}},U=e=>typeof e=="number"?e.toLocaleString():String(e),X=e=>{const r=e.element?.options?.backgroundColor||e.element?.options?.borderColor;if(typeof r=="string")return r;const t=Array.isArray(e.dataset.backgroundColor)?e.dataset.backgroundColor[e.dataIndex]:e.dataset.backgroundColor;if(typeof t=="string")return t;const o=Array.isArray(e.dataset.borderColor)?e.dataset.borderColor[e.dataIndex]:e.dataset.borderColor;return typeof o=="string"?o:h(e.datasetIndex)},Y=e=>{let r=e._basecoatChartTooltip;return r||(r=document.createElement("div"),r.className="chart-tooltip",r.hidden=!0,r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),document.body.appendChild(r),e._basecoatChartTooltip=r,r)},Q=e=>{const{chart:r,tooltip:t}=e,o=Y(r.canvas);if(t.opacity===0){o.hidden=!0;return}const n=[];if(t.title?.length){const l=document.createElement("div");l.className="chart-tooltip-title",l.textContent=t.title.join(", "),n.push(l)}const a=document.createElement("div");a.className="chart-tooltip-items",t.dataPoints.forEach(l=>{const s=X(l),i=l.formattedValue||U(l.raw),d=document.createElement("div");d.className="chart-tooltip-item";const u=document.createElement("span");u.className="chart-tooltip-indicator",u.style.setProperty("--chart-indicator-color",s);const b=document.createElement("span");b.className="chart-tooltip-label",b.textContent=l.dataset.label||l.label;const f=document.createElement("span");f.className="chart-tooltip-value",f.textContent=i,d.append(u,b,f),a.append(d)}),n.push(a);const c=r.canvas.getBoundingClientRect();o.replaceChildren(...n),o.hidden=!1,o.style.left=`${c.left+t.caretX}px`,o.style.top=`${c.top+t.caretY}px`},Z=(e,r)=>({id:`basecoatLegend-${Math.random().toString(36).slice(2)}`,afterUpdate(t){if(!r)return;let o=e._basecoatChartLegend;o||(o=document.createElement("ul"),o.className="chart-legend",e._basecoatChartContainer.insertAdjacentElement("afterend",o),e._basecoatChartLegend=o);const n=t.options.plugins.legend.labels.generateLabels(t);o.replaceChildren(...n.map(a=>{const c=document.createElement("span");c.className="chart-legend-item";const l=document.createElement("span");l.className="chart-legend-indicator";const s=typeof a.fillStyle=="string"?a.fillStyle:typeof a.strokeStyle=="string"?a.strokeStyle:h(a.datasetIndex||a.index||0);l.style.setProperty("--chart-indicator-color",s);const i=document.createElement("span");i.textContent=a.text,c.append(l,i);const d=document.createElement("li");return d.append(c),d}))}}),$=e=>{e._basecoatChartTooltip?.remove(),e._basecoatChartLegend?.remove(),delete e._basecoatChartTooltip,delete e._basecoatChartLegend},I=(e,r={})=>{const t=r.Chart||window.Chart;if(!t)throw new Error("Chart.js is required before calling basecoat.chart().");const o=A.get(e);o&&o.destroy(),$(e);const n=x(e,r,"type","chartType")||"bar",a=x(e,r,"labelKey","chartLabelKey")||"label",c=j(e,r,"legend","chartLegend",!1),l=j(e,r,"tooltip","chartTooltip",!0),s=r.data||v(e,"data-chart-data")||[],i=r.series||v(e,"data-chart-series")||{},d=r.chartData?B(r.chartData):H({type:n,labelKey:a,data:s,series:i}),u=r.options||{},b=Z(e,c),f=G(e),F=T(e,"--border"),R=p(J("var(--border)",.5),e),P=T(e,"--muted-foreground"),oe=K(e,"--chart-bar-radius"),ne={...z(n)?{x:{border:{display:!1,color:F},grid:{display:!1,color:R},ticks:{color:P,padding:8},...y(u.scales?.x||{})},y:{border:{display:!1,color:F},grid:{color:R},ticks:{display:!1,color:P},...y(u.scales?.y||{})}}:{},...Object.fromEntries(Object.entries(u.scales||{}).filter(([g])=>g!=="x"&&g!=="y").map(([g,ae])=>[g,y(ae)]))};e.classList.remove("chart"),e._basecoatChartContainer=f,e.dataset.chartLegend=String(c);const m=new t(e,{type:n,data:q(D(d,n,{barRadius:oe,element:e}),e),options:{responsive:!0,maintainAspectRatio:!1,interaction:{mode:"index",intersect:!1},...u,scales:V(ne,e),plugins:{...u.plugins,legend:{display:!1,...u.plugins?.legend||{}},tooltip:{enabled:!1,external:l?Q:void 0,...u.plugins?.tooltip||{}}}},plugins:[b,...r.plugins||[]]});return A.set(e,m),C.add(e),e.dataset.chartInitialized="true",e.chart=m,e._basecoatChartConfig=r,e._destroy=()=>{m.destroy(),$(e),A.delete(e),C.delete(e),e.removeAttribute("data-chart-initialized"),delete e._basecoatChartContainer,delete e._basecoatChartConfig,delete e.chart,delete e._destroy},m},ee=(e,r={})=>{const o=w(e).map(n=>I(n,r));return o.length===1?o[0]:o},re=()=>{E=null,Array.from(C).forEach(e=>{if(!e.isConnected){e._destroy?.(),C.delete(e);return}I(e,e._basecoatChartConfig||{})})},L=()=>{E===null&&(E=requestAnimationFrame(re))},te=()=>{new MutationObserver(r=>{r.some(t=>t.attributeName==="class"||t.attributeName==="data-style-variant")&&L()}).observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-style-variant"]}),document.addEventListener("basecoat:themechange",L),document.addEventListener("basecoat:stylechange",L)};window.auvyx&&(window.auvyx.chart=ee),te()})();

package/dist/auvyx.css

@@ -473,6 +473,62 @@ html[data-motion='off'] {
       translate: none;
     }
   }
+  :is( .field > input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']), .input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']), .field > textarea, .textarea, .field > select, select.select, .select:not(select) > button, .combobox > input[role='combobox'], .input-group, .input-otp ) {
+    transition: color var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+  :is( .field > input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']), .input:is([type='text'], [type='email'], [type='password'], [type='number'], [type='file'], [type='tel'], [type='url'], [type='search'], [type='date'], [type='datetime-local'], [type='month'], [type='week'], [type='time']), .field > textarea, .textarea, .field > select, select.select, .select:not(select) > button, .combobox > input[role='combobox'], .input-group, .input-otp ):hover:not(:focus, :focus-within, :disabled, :has(:disabled), [aria-invalid='true'], [aria-expanded='true']) {
+    border-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch, var(--ring) 70%, var(--input));
+    }
+  }
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])) {
+    transition: color var(--motion-fast) var(--motion-ease-standard), background-color var(--motion-fast) var(--motion-ease-standard), border-color var(--motion-fast) var(--motion-ease-standard), box-shadow var(--motion-fast) var(--motion-ease-standard), scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy);
+  }
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):not([role='switch']):hover:not(:checked, :focus-visible, :disabled, [aria-invalid='true']) {
+    border-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch, var(--ring) 70%, var(--input));
+    }
+  }
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio']))[role='switch']:hover:not(:checked, :disabled, [aria-invalid='true']) {
+    background-color: var(--input);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch, var(--input), var(--foreground) 12%);
+    }
+  }
+  :is(.dark, .dark *) :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio']))[role='switch']:hover:not(:checked, :disabled, [aria-invalid='true']) {
+    background-color: var(--input);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch, var(--input), var(--foreground) 18%);
+    }
+  }
+  :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):active:not(:disabled) {
+    scale: 0.92;
+  }
+  :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    transition: scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy), box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+  :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    transition: scale var(--motion-spring-snappy-duration) var(--motion-spring-snappy), box-shadow var(--motion-fast) var(--motion-ease-standard);
+  }
+  :is(.field > input[type='range'], .input[type='range']):active:not(:disabled)::-webkit-slider-thumb {
+    scale: 1.15;
+  }
+  :is(.field > input[type='range'], .input[type='range']):active:not(:disabled)::-moz-range-thumb {
+    scale: 1.15;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :is(.field > input:is([type='checkbox'], [type='radio']), .input:is([type='checkbox'], [type='radio'])):active {
+      scale: none;
+    }
+    :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+      scale: none;
+    }
+    :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+      scale: none;
+    }
+  }
   [data-popover]:not([popover]) {
     transition-property: opacity, scale, translate, visibility;
     transition-duration: var(--motion-base);

package/dist/auvyx.js

@@ -1,4 +1,4 @@
-/*! @auvyx/ui v0.1.1 | MIT License | see LICENSE */
+/*! @auvyx/ui v0.1.2 | MIT License | see LICENSE */
 (() => {
   const componentRegistry = {};
   let observer = null;