@formkit/pro 0.115.10-3043ed6 → 0.115.10-4a6aac9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formkit/pro",
-  "version": "0.115.10-3043ed6",
+  "version": "0.115.10-4a6aac9",
   "description": "FormKit Pro — Form inputs and tools for high quality forms.",
   "main": "index.cjs",
   "module": "index.mjs",
@@ -37,8 +37,8 @@
     "vue"
   ],
   "dependencies": {
-    "@formkit/core": "next",
-    "@formkit/inputs": "next"
+    "@formkit/core": "^1.0.0",
+    "@formkit/inputs": "^1.0.0"
   },
   "type": "module"
 }

package/slider/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const l=a("sl"),{outer:t,wrapper:s,inner:$,icon:i,label:n,prefix:r,suffix:o,help:d,messages:u,message:h}=e(l),c=l("chart",(()=>({$el:"div",if:"$chart"}))),m=l("chartBar",(()=>({$el:"div",for:["bar","index","$chart"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$bar.at >= $_value.0 && $bar.at <= $_value.1",else:"$bar.at >= $_value.1 && $bar.at <= $_value.0"},else:"$bar.at <= $_value"},style:{left:'$bar.at / ($max - $min) * 100 + "%"',width:'$: "calc(" + (100 / $chart.length) + "% - 2px)"',height:{if:"$largestBar",then:'$bar.value / $largestBar * 100 + "%"'}}}}))),p=l("sliderInner",(()=>({$el:"div",attrs:{"data-has-mark-labels":"$markLabels && $marks.length > 0"}}))),v=l("track",(()=>({$el:"div",attrs:{id:"$: 'track-' + $id",onClick:"$handlers.clickTrack"}}))),f=l("trackWrapper",(()=>({$el:"div"}))),b=l("trackInner",(()=>({$el:"div"}))),k=l("fill",(()=>({$el:"div",attrs:{style:"$fillStyles"}}))),_=l("linkedValues",(()=>({$el:"div"}))),x=l("maxValue",(()=>({$formkit:"number",bind:"$computedMaxInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.1",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.maxNode",onBlur:"$handlers.inputBlur"}))),g=l("minValue",(()=>({$formkit:"number",bind:"$computedMinInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.0",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.minNode",onBlur:"$handlers.inputBlur"}))),M=l("marks",(()=>({$el:"div",if:"$marks"}))),y=l("mark",(()=>({$el:"span",for:["step","index","$marks"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$step.at >= $_value.0 && $step.at <= $_value.1",else:"$step.at >= $_value.1 && $step.at <= $_value.0"},else:"$step.at <= $_value"},class:"$classes.mark",style:{left:'$step.at / ($max - $min) * 100 + "%"'}}}))),w=l("markLabel",(()=>({$el:"span",if:"$markLabels",children:"$step.label"}))),B=l("handles",(()=>({$el:"ul"}))),F=l("handleMax",(()=>({$el:"li",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "max"',"data-handle":"max","data-show-tooltip":"$tooltip",class:"$: 'formkit-handle ' + $classes.handle + ' ' + $classes.handleMax",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$maxHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),H=l("handleMin",(()=>({$el:"li",if:"$isMulti",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "min"',"data-handle":"min","data-show-tooltip":"$tooltip",class:"$: $classes.handle + ' ' + $classes.handleMin",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$minHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),I=l("tooltipMax",(()=>({$el:"div",if:'$tooltip === true || $tooltip === "auto"',children:{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.1, "max")',else:'$tooltipFormat($_value.0, "max")'},else:'$tooltipFormat($_value, "max")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMax"}}))),D=l("tooltipMin",(()=>({$el:"div",if:'$isMulti && ($tooltip === true || $tooltip === "auto")',children:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.0, "min")',else:'$tooltipFormat($_value.1, "min")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMin"}})));export{c as chart,m as chartBar,l as createSection,k as fill,F as handleMax,H as handleMin,B as handles,d as help,i as icon,$ as inner,n as label,_ as linkedValues,y as mark,w as markLabel,M as marks,x as maxValue,h as message,u as messages,g as minValue,t as outer,r as prefix,p as sliderInner,o as suffix,I as tooltipMax,D as tooltipMin,v as track,b as trackInner,f as trackWrapper,s as wrapper};
+import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const l=a("sl"),{outer:t,wrapper:s,inner:$,icon:i,label:n,prefix:r,suffix:o,help:d,messages:u,message:h}=e(l),c=l("chart",(()=>({$el:"div",if:"$chart"}))),p=l("chartBar",(()=>({$el:"div",for:["bar","index","$chart"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$bar.at >= $_value.0 && $bar.at <= $_value.1",else:"$bar.at >= $_value.1 && $bar.at <= $_value.0"},else:"$bar.at <= $_value"},style:{left:'$bar.at / ($max - $min) * 100 + "%"',width:'$: "calc(" + (100 / $chart.length) + "% - 2px)"',height:{if:"$largestBar",then:'$bar.value / $largestBar * 100 + "%"'}}}}))),v=l("sliderInner",(()=>({$el:"div",attrs:{"data-has-mark-labels":"$markLabels && $marks.length > 0"}}))),m=l("track",(()=>({$el:"div",attrs:{id:"$: 'track-' + $id",onClick:"$handlers.clickTrack"}}))),f=l("trackWrapper",(()=>({$el:"div"}))),b=l("trackInner",(()=>({$el:"div"}))),k=l("fill",(()=>({$el:"div",attrs:{style:"$fillStyles"}}))),_=l("linkedValues",(()=>({$el:"div"}))),x=l("maxValue",(()=>({$formkit:"number",bind:"$computedMaxInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.1",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.maxNode",onBlur:"$handlers.inputBlur"}))),g=l("minValue",(()=>({$formkit:"number",bind:"$computedMinInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.0",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.minNode",onBlur:"$handlers.inputBlur"}))),M=l("marks",(()=>({$el:"div",if:"$marks"}))),y=l("mark",(()=>({$el:"span",for:["step","index","$marks"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$step.at >= $_value.0 && $step.at <= $_value.1",else:"$step.at >= $_value.1 && $step.at <= $_value.0"},else:"$step.at <= $_value"},class:"$classes.mark",style:{left:'$: $fns.calculateMarkPosition($step.at) + "%"'}}}))),w=l("markLabel",(()=>({$el:"span",if:"$markLabels",children:"$step.label"}))),B=l("handles",(()=>({$el:"ul"}))),F=l("handleMax",(()=>({$el:"li",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "max"',"data-handle":"max","data-show-tooltip":"$tooltip",class:"$: 'formkit-handle ' + $classes.handle + ' ' + $classes.handleMax",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$maxHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),H=l("handleMin",(()=>({$el:"li",if:"$isMulti",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "min"',"data-handle":"min","data-show-tooltip":"$tooltip",class:"$: $classes.handle + ' ' + $classes.handleMin",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$minHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),I=l("tooltipMax",(()=>({$el:"div",if:'$tooltip === true || $tooltip === "auto"',children:{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.1, "max")',else:'$tooltipFormat($_value.0, "max")'},else:'$tooltipFormat($_value, "max")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMax"}}))),D=l("tooltipMin",(()=>({$el:"div",if:'$isMulti && ($tooltip === true || $tooltip === "auto")',children:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.0, "min")',else:'$tooltipFormat($_value.1, "min")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMin"}})));export{c as chart,p as chartBar,l as createSection,k as fill,F as handleMax,H as handleMin,B as handles,d as help,i as icon,$ as inner,n as label,_ as linkedValues,y as mark,w as markLabel,M as marks,x as maxValue,h as message,u as messages,g as minValue,t as outer,r as prefix,v as sliderInner,o as suffix,I as tooltipMax,D as tooltipMin,m as track,b as trackInner,f as trackWrapper,s as wrapper};

package/slider/slider.ts

@@ -89,6 +89,8 @@ export const slider: FormKitProInput = {
     'markLabels',
     'snapToMarks',
     'chart',
+    'scalingFunction',
+    'intervals',
   ],
   /**
    * Additional features that make this input work.

package/colorpicker/colorpicker.ts

@@ -1,153 +0,0 @@
-import { FormKitProInput } from '@formkit/pro'
-import {
-  outer,
-  wrapper,
-  inner,
-  label,
-  help,
-  prefix,
-  suffix,
-  messages,
-  message,
-  icon,
-  panel,
-  panelClose,
-  swatchPreview,
-  canvasSwatchPreview,
-  valueString,
-  controlGroup,
-  LS,
-  canvasLS,
-  controlLS,
-  hue,
-  controlHue,
-  canvasHue,
-  alpha,
-  canvasAlpha,
-  controlAlpha,
-  preview,
-  canvasPreview,
-  eyeDropper,
-  formatField,
-  colorInputGroup,
-  rField,
-  gField,
-  bField,
-  aField,
-  hField,
-  sField,
-  lField,
-  hexField,
-  formatSwitcher,
-  swatches,
-  swatch,
-} from '../sections/colorpickerSections'
-import { $if } from '../compose'
-import { defaultIcon, options } from '@formkit/inputs'
-import colorFeature from '../features/color'
-
-/**
- * Input definition for a colorpicker input.
- * @public
- */
-export const colorpicker: FormKitProInput = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
-  schema: outer(
-    wrapper(
-      label('$label'),
-      $if('$inline && $help', help('$help')),
-      inner(
-        icon('prefix', 'label'),
-        prefix(),
-        $if(
-          '$inline === undefined || $inline === false',
-          swatchPreview(canvasSwatchPreview(), $if('$showValue', valueString()))
-        ),
-        $if(
-          '$inline || $panelIsOpen)',
-          panel(
-            $if('$showPanelClose', panelClose(icon('close'))),
-            $if(
-              '$panelControls',
-              controlGroup(
-                LS(canvasLS(), controlLS()),
-                preview(canvasPreview()),
-                hue(canvasHue(), controlHue()),
-                alpha(canvasAlpha(), controlAlpha()),
-                $if(
-                  '$eyeDropper && $hasNativeEyeDropper',
-                  eyeDropper(icon('eyeDropper'))
-                )
-              )
-            ),
-            $if(
-              '$panelFormat',
-              formatField(
-                colorInputGroup(
-                  $if('$panelActiveFormat === "hex"', hexField()),
-
-                  $if('$panelActiveFormat === "rgba"', rField()),
-                  $if('$panelActiveFormat === "rgba"', gField()),
-                  $if('$panelActiveFormat === "rgba"', bField()),
-
-                  $if('$panelActiveFormat === "hsla"', hField()),
-                  $if('$panelActiveFormat === "hsla"', sField()),
-                  $if('$panelActiveFormat === "hsla"', lField()),
-
-                  $if(
-                    '$panelActiveFormat === "rgba" || $panelActiveFormat === "hsla"',
-                    aField()
-                  )
-                ),
-                formatSwitcher(icon('switch'))
-              )
-            ),
-            $if('$options', swatches(swatch()))
-          )
-        ),
-        suffix(),
-        icon('suffix')
-      ),
-      $if(
-        '$: ($inline === undefined || $inline === false) && $help',
-        help('$help')
-      )
-    ),
-    messages(message('$message.value'))
-  ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
-  type: 'input',
-  /**
-   * In the dropdown family of inputs.
-   */
-  family: 'text',
-  /**
-   * An array of extra props to accept for this input.
-   */
-  props: [
-    'disbaled',
-    'format',
-    'valueFormat',
-    'panelControls',
-    'panelFormat',
-    'eyeDropper',
-    'inline',
-    'options',
-    'showValue',
-    'closeOnSelect',
-    'allowPaste',
-  ],
-  /**
-   * Additional features that make this input work.
-   */
-  features: [
-    colorFeature,
-    options,
-    defaultIcon('eyeDropper', 'color'),
-    defaultIcon('close', 'close'),
-  ],
-}

package/colorpicker/index.mjs

@@ -1 +0,0 @@
-import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const s=a("cp"),{outer:l,wrapper:i,inner:t,label:r,prefix:n,suffix:d,help:$,messages:o,message:c,icon:h}=e(s),u=s("swatchPreview",(()=>({$el:"div",attrs:{class:"$classes.swatchPreview",tabindex:{if:"$disabled",then:-1,else:0},onClick:"$handlers.inputPreviewClick",onFocusout:"$handlers.inputPreviewFocusout",onKeydown:"$handlers.inputPreviewKeydown",role:"button","aria-valuetext":'$: "Current color: " + $value'}}))),p=s("valueString",(()=>({$el:"span",attrs:{class:"$classes.valueString"},children:{if:'$format === "hex"',then:"$hex",else:{if:'$format === "rgba"',then:"$rgbaString",else:{if:'$format === "hsla"',then:"$hslaString",else:""}}}}))),b=s("panel",(()=>({$el:"div",attrs:{class:"$classes.panel",onKeydown:"$handlers.panelKeydown","aria-role":{if:"$layout === popover",then:"dialog"},"aria-modal":{if:"$layout === popover",then:"true"},"aria-label":"$label",style:{position:{if:"$inline === undefined || $inline === false",then:"absolute"}}}}))),v=s("panelClose",(()=>({$el:"button",attrs:{class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:{if:"$showPanelClose",then:-1,else:0},onKeydown:"$handlers.panelCloseKeydown","aria-label":"Close"}}))),w=s("controlGroup",(()=>({$el:"div",attrs:{class:"$classes.controlGroup","data-eye-dropper":"$hasNativeEyeDropper && $eyeDropper",role:"group"}}))),f=s("LS",(()=>({$el:"div",attrs:{class:"$classes.LS"}}))),g=s("canvasLS",(()=>({$el:"canvas",attrs:{id:'$: "canvas-ls-" + $id',class:'$classes.canvas + " " + $classes.canvasLS',width:256,height:256,"aria-hidden":"true"}}))),y=s("controlLS",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},class:'$classes.control + " " + $classes.controlLS',onKeydown:"$handlers.lsKeydown",style:{left:'$controlLSPosition.x + "%"',top:'$controlLSPosition.y + "%"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuetext":'$: "Lightness: " + $hslaPercent.l + "%, Saturation: " + $hslaPercent.s + "%"',"aria-label":"Lightness and Saturation"}}))),m=s("hue",(()=>({$el:"div",attrs:{class:"$classes.hue"}}))),x=s("canvasHue",(()=>({$el:"canvas",attrs:{id:'$: "canvas-hue-" + $id',class:'$classes.canvas + " " + $classes.canvasHue',width:256,height:10,"aria-hidden":"true"}}))),F=s("controlHue",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.hueControlKeydown",class:'$classes.control + " " + $classes.controlHue',style:{left:'$: "min(max(" + (($hsla.h / 360) * 100) + "%, 3px), calc(100% - 3px))"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, 100%, 50%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$h","aria-label":"Hue"}}))),K=s("alpha",(()=>({$el:"div",attrs:{class:"$classes.alpha"}}))),S=s("canvasAlpha",(()=>({$el:"canvas",attrs:{id:'$: "canvas-alpha-" + $id',class:'$classes.canvas + " " + $classes.canvasAlpha',width:256,height:10,"aria-hidden":"true"}}))),L=s("controlAlpha",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.alphaControlKeydown",class:'$classes.control + " " + $classes.controlAlpha',style:{left:'$: "min(max(" + ($hsla.a * 100) + "%, 3px), calc(100% - 3px))"',backgroundImage:'$: "linear-gradient(to right, hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + "), hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + ")), linear-gradient(to right, white, white)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$hsla.a","aria-label":"Alpha"}}))),G=s("preview",(()=>({$el:"div",attrs:{class:"$classes.preview"}}))),C=s("canvasPreview",(()=>({$el:"canvas",attrs:{id:'$: "canvas-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasPreview',width:33,height:33,"aria-hidden":"true"}}))),I=s("canvasSwatchPreview",(()=>({$el:"div",attrs:{class:"$classes.canvasSwatchPreviewWrapper"},children:[{$el:"canvas",attrs:{id:'$: "canvas-swatch-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasSwatchPreview',width:33,height:33,"aria-hidden":"true"}}]}))),P=s("eyeDropper",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},role:"button","aria-label":"Eye Dropper",onKeydown:"$handlers.eyeDropperKeydown",id:'$: "eye-dropper-" + $id',class:"$classes.eyeDropper"}}))),k=s("formatField",(()=>({$el:"div",attrs:{class:"$classes.formatField"}}))),H=s("colorInputGroup",(()=>({$el:"div",attrs:{class:"$classes.colorInputGroup","aria-role":"group"}}))),A=s("hexField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hexFieldGroup'},children:[{$el:"input",attrs:{onInput:"$handlers.hexInput",onKeydown:"$handlers.hexKeydown",onFocus:"$handlers.hexFocus",onBlur:"$handlers.hexBlur",id:'$: "hex-" + $id',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",class:'$classes.colorField + " " + $classes.hexField',value:"$hex",autocomplete:"off"}},{$el:"label",children:"HEX",attrs:{for:'$: "hex-" + $id',class:"$classes.fieldLabel"}}]}))),D=s("rField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.rFieldGroup'},children:[{$el:"input",attrs:{id:'$: "r-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.rField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.r",autocomplete:"off","aria-label":"Red"}},{$el:"label",children:"R",attrs:{for:'$: "r-" + $id',class:"$classes.fieldLabel"}}]}))),T=s("gField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.gFieldGroup'},children:[{$el:"input",attrs:{id:'$: "g-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.gField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.g",autocomplete:"off","aria-label":"Green"}},{$el:"label",children:"G",attrs:{for:'$: "g-" + $id',class:"$classes.fieldLabel"}}]}))),B=s("bField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.bFieldGroup'},children:[{$el:"input",attrs:{id:'$: "b-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.bField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.b",autocomplete:"off","aria-label":"Blue"}},{$el:"label",children:"B",attrs:{for:'$: "b-" + $id',class:"$classes.fieldLabel"}}]}))),E=s("aField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.aFieldGroup'},children:[{$el:"input",attrs:{id:'$: "a-" + $id',onInput:'$handlers.rangeLimitInput("alpha", 0, 1)',onKeydown:'$handlers.rangeLimitKeydown("alpha", 0, 1, 0.01)',type:"text",class:'$classes.colorField + " " + $classes.aField',value:"$rgba.a",tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",autocomplete:"off"},"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$rgba.a","aria-label":"Alpha"},{$el:"label",children:"A",attrs:{for:'$: "a-" + $id',class:"$classes.fieldLabel"}}]}))),N=s("hField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hFieldGroup'},children:[{$el:"input",attrs:{id:'$: "h-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 360)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 360, 1)',type:"text",class:'$classes.colorField + " " + $classes.hField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.h",autocomplete:"off","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$hsla.h","aria-label":"Hue"}},{$el:"label",children:"H",attrs:{for:'$: "h-" + $id',class:"$classes.fieldLabel"}}]}))),R=s("sField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.sFieldGroup'},children:[{$el:"input",attrs:{id:'$: "s-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.sField',tabindex:{if:"$disabled",then:-1,else:0},value:"$hslaPercent.s",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.s","aria-label":"Saturation"}},{$el:"label",children:"S",attrs:{for:'$: "s-" + $id',class:"$classes.fieldLabel"}}]}))),U=s("lField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.lFieldGroup'},children:[{$el:"input",attrs:{id:'$: "l-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.lField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.l",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.l","aria-label":"Lightness"}},{$el:"label",children:"L",attrs:{for:'$: "l-" + $id',class:"$classes.fieldLabel"}}]}))),W=s("formatSwitcher",(()=>({$el:"div",attrs:{class:"$classes.formatSwitcher",onClick:"$handlers.toggleFormat",tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.formatSwitcherKeydown",role:"button","aria-label":"Change Format"}}))),X=s("swatches",(()=>({$el:"div",attrs:{id:'$: "swatches-" + $id',class:"$classes.swatches","data-keyboard-nav":"$swatchIsUsingKeyboardNav"}}))),j=s("swatch",(()=>({$el:"div",for:["swatch","index","$options"],if:"$swatch",attrs:{if:"$swatch.group",then:{class:"$classes.swatchGroup"},else:{class:"$classes.swatch",title:"$swatch.label"}},children:{if:"$swatch.group",then:[{$el:"span",attrs:{class:"$classes.swatchGroupLabel"},children:"$swatch.group"},{$el:"div",for:["groupSwatch","swatchIndex","$swatch.options"],attrs:{class:"$classes.swatch",title:"$groupSwatch.label"},children:[{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($groupSwatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$groupSwatch.label + "-" + $groupSwatch.value',"data-color":"$fns.anyToHsvaString($groupSwatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($groupSwatch.value, 2)","data-group":"$index",role:"button","aria-label":"$swatch.label"}}]}],else:{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($swatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$swatch.label + "-" + $swatch.value',"data-color":"$fns.anyToHsvaString($swatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($swatch.value, 2)","data-group":0,role:"button","aria-label":"$swatch.label"}}}})));export{f as LS,E as aField,K as alpha,B as bField,S as canvasAlpha,x as canvasHue,g as canvasLS,C as canvasPreview,I as canvasSwatchPreview,H as colorInputGroup,L as controlAlpha,w as controlGroup,F as controlHue,y as controlLS,s as createSection,P as eyeDropper,k as formatField,W as formatSwitcher,T as gField,N as hField,$ as help,A as hexField,m as hue,h as icon,t as inner,U as lField,r as label,c as message,o as messages,l as outer,b as panel,v as panelClose,n as prefix,G as preview,D as rField,R as sField,d as suffix,j as swatch,u as swatchPreview,X as swatches,p as valueString,i as wrapper};