@codeandfunction/callaloo 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/assets/shared/form-utilities.css +1 -1
  2. package/dist/components/Buttons/CLButton/CLButton.css +1 -1
  3. package/dist/components/Form/CLInput/CLInput.js +228 -176
  4. package/dist/components/Form/CLInput/CLInput.vue.d.ts +12 -0
  5. package/dist/components/Form/CLInput/CLInputPrefix.vue.d.ts +13 -4
  6. package/dist/components/Form/CLInput/CLInputSuffix.vue.d.ts +13 -4
  7. package/package.json +1 -1
package/dist/assets/shared/form-utilities.css CHANGED
@@ -1 +1 @@
1
- .form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}
1
+ .form-addon-flex{display:flex;align-items:center;justify-content:center;pointer-events:none;user-select:none}.form-addon-flex--left{left:0}.form-addon-flex--right{right:0}.form-addon-flex--icon{z-index:10;box-sizing:border-box}.form-addon-flex--icon.--interactive{pointer-events:auto}.form-addon-flex--string{position:relative}.form-addon-radius--left-full{border-top-left-radius:var(--clll-rounded-full);border-bottom-left-radius:var(--clll-rounded-full)}.form-addon-radius--right-full{border-top-right-radius:var(--clll-rounded-full);border-bottom-right-radius:var(--clll-rounded-full)}.form-addon-radius--left-lg{border-top-left-radius:var(--clll-rounded-lg);border-bottom-left-radius:var(--clll-rounded-lg)}.form-addon-radius--right-lg{border-top-right-radius:var(--clll-rounded-lg);border-bottom-right-radius:var(--clll-rounded-lg)}.form-addon-radius--left-md{border-top-left-radius:var(--clll-rounded-md);border-bottom-left-radius:var(--clll-rounded-md)}.form-addon-radius--right-md{border-top-right-radius:var(--clll-rounded-md);border-bottom-right-radius:var(--clll-rounded-md)}.form-addon-radius--left-sm{border-top-left-radius:var(--clll-rounded-sm);border-bottom-left-radius:var(--clll-rounded-sm)}.form-addon-radius--right-sm{border-top-right-radius:var(--clll-rounded-sm);border-bottom-right-radius:var(--clll-rounded-sm)}.form-addon-radius--left-xs{border-top-left-radius:var(--clll-rounded-xs);border-bottom-left-radius:var(--clll-rounded-xs)}.form-addon-radius--right-xs{border-top-right-radius:var(--clll-rounded-xs);border-bottom-right-radius:var(--clll-rounded-xs)}.form-addon-radius--left-xl{border-top-left-radius:var(--clll-rounded-xl);border-bottom-left-radius:var(--clll-rounded-xl)}.form-addon-radius--right-xl{border-top-right-radius:var(--clll-rounded-xl);border-bottom-right-radius:var(--clll-rounded-xl)}.form-addon-radius--left-2xl{border-top-left-radius:var(--clll-rounded-2xl);border-bottom-left-radius:var(--clll-rounded-2xl)}.form-addon-radius--right-2xl{border-top-right-radius:var(--clll-rounded-2xl);border-bottom-right-radius:var(--clll-rounded-2xl)}.form-addon-radius--left-3xl{border-top-left-radius:var(--clll-rounded-3xl);border-bottom-left-radius:var(--clll-rounded-3xl)}.form-addon-radius--right-3xl{border-top-right-radius:var(--clll-rounded-3xl);border-bottom-right-radius:var(--clll-rounded-3xl)}.form-addon-radius--left-none{border-top-left-radius:0;border-bottom-left-radius:0}.form-addon-radius--right-none{border-top-right-radius:0;border-bottom-right-radius:0}.form-control-flex{display:inline-flex;align-items:center;justify-content:center;position:relative}.form-counter-flex{display:flex;align-items:center;justify-content:flex-end;max-width:100px;box-sizing:border-box;flex:1;position:relative;pointer-events:none;user-select:none}.form-select-icon-flex{position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;pointer-events:none}
package/dist/components/Buttons/CLButton/CLButton.css CHANGED
@@ -1 +1 @@
1
- .clll-button{position:relative;border:1px solid var(--clll-button-border-color, transparent);background-color:var(--clll-button-bg-color, transparent);cursor:pointer}.clll-button[href]{text-decoration:none}.clll-button{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease}.clll-button .clll-button__content,.clll-button .clll-icon{color:var(--clll-button-text-color, inherit);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0}.clll-button:hover:not([disabled]){background-color:var(--clll-button-hover-bg, transparent);border-color:var(--clll-button-hover-border, transparent)}.clll-button:focus-visible{outline:none;border-color:transparent!important;outline-color:var(--clll-button-focus-border, transparent);outline-style:solid;outline-width:2px;box-shadow:0 0 0 var(--clll-unit-0) var(--clll-button-focus-shadow, transparent)}.clll-button.clll-button--has-content{display:inline-flex;align-items:center}.clll-button.clll-button--no-content.clll-button--left,.clll-button.clll-button--no-content.clll-button--right{justify-content:center}.clll-button.clll-button--no-content .clll-button__content{display:none}.clll-button.clll-button--busy .clll-button__content,.clll-button.clll-button--busy .clll-icon{visibility:hidden}.clll-button.clll-button--tiny{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-unit-0_5) var(--clll-unit-2)}.clll-button.clll-button--tiny.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0_5)}.clll-button.clll-button--tiny.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--tiny.clll-button--rounded{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--tiny:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--tiny.clll-button--no-content{padding:var(--clll-unit-1_5)}.clll-button.clll-button--small{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-unit-1) var(--clll-unit-2_5)}.clll-button.clll-button--small.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-button.clll-button--small.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--small.clll-button--rounded{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--small:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--small.clll-button--no-content{padding:var(--clll-unit-2)}.clll-button.clll-button--medium{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-unit-1_5) var(--clll-unit-3)}.clll-button.clll-button--medium.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-button.clll-button--medium.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--medium.clll-button--rounded{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--medium:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--medium.clll-button--no-content{padding:var(--clll-unit-2_5)}.clll-button.clll-button--large{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-unit-2) var(--clll-unit-3_5)}.clll-button.clll-button--large.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-button.clll-button--large.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--large.clll-button--rounded{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--large:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--large.clll-button--no-content{padding:var(--clll-unit-3)}.clll-button.clll-button--xlarge{font-size:var(--clll-unit-6);line-height:var(--clll-unit-8_5);padding:var(--clll-unit-3) var(--clll-unit-4_5)}.clll-button.clll-button--xlarge.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-button.clll-button--xlarge.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--xlarge.clll-button--rounded{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--xlarge:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--xlarge.clll-button--no-content{padding:var(--clll-unit-4)}.clll-button .clll-button__content{overflow:hidden}.clll-button.clll-button--left{justify-content:flex-start}.clll-button.clll-button--center{justify-content:center}.clll-button.clll-button--right{justify-content:flex-end}.clll-button.clll-button--no-content{display:flex;align-items:center}.clll-button.clll-button--no-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0)}.clll-button.clll-button--no-content.clll-button--rounded{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--wrapped{padding:var(--clll-unit-0)}.clll-button.clll-button--wrapped.clll-button--no-content{padding:0}.clll-button.clll-button--pill{border:0;padding:var(--clll-unit-0);background-color:transparent;outline-offset:-.5px}.clll-button.clll-button--pill:focus{box-shadow:none}.clll-button.clll-button--pill.clll-button--rounded{border-radius:var(--clll-button-theme-radius, --clll-rounded-xs)}.clll-button.clll-button--pill .clll-button__content{line-height:0}.clll-button.clll-button--active{pointer-events:none;user-select:none}.clll-button.clll-button--elevated{box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}.clll-button:disabled{cursor:not-allowed;pointer-events:all;opacity:.75;user-select:none}
1
+ .clll-button{position:relative;border:1px solid var(--clll-button-border-color, transparent);background-color:var(--clll-button-bg-color, transparent);cursor:pointer}.clll-button[href]{text-decoration:none}.clll-button{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease}.clll-button .clll-button__content,.clll-button .clll-icon{color:var(--clll-button-text-color, inherit);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;transition-property:color;transition-duration:.3s;transition-timing-function:ease}.clll-button:hover:not([disabled]){background-color:var(--clll-button-hover-bg, transparent);border-color:var(--clll-button-hover-border, transparent)}.clll-button[class*=--ghost]:hover:not([disabled]){--clll-icon-color: var(--clll-button-focus-border, var(--clll-button-text-color, inherit))}.clll-button[class*=--ghost]:hover:not([disabled]) .clll-button__content,.clll-button[class*=--ghost]:hover:not([disabled]) .clll-text{color:var(--clll-button-focus-border, var(--clll-button-text-color, inherit))}.clll-button[class*=--ghost]:hover:not([disabled]) .clll-icon{color:var(--clll-button-focus-border, var(--clll-button-text-color, inherit))!important}.clll-button.clll-input__input-prefix[class*=--ghost]:hover:not([disabled]),.clll-button.clll-input__input-suffix[class*=--ghost]:hover:not([disabled]){--clll-icon-color: var(--clll-button-focus-border, var(--clll-button-text-color, inherit));color:var(--clll-button-focus-border, var(--clll-button-text-color, inherit))}.clll-button.clll-input__input-prefix[class*=--ghost]:hover:not([disabled]) .clll-button__content,.clll-button.clll-input__input-prefix[class*=--ghost]:hover:not([disabled]) .clll-text,.clll-button.clll-input__input-suffix[class*=--ghost]:hover:not([disabled]) .clll-button__content,.clll-button.clll-input__input-suffix[class*=--ghost]:hover:not([disabled]) .clll-text{color:var(--clll-button-focus-border, var(--clll-button-text-color, inherit))}.clll-button.clll-input__input-prefix[class*=--ghost]:hover:not([disabled]) .clll-icon svg,.clll-button.clll-input__input-suffix[class*=--ghost]:hover:not([disabled]) .clll-icon svg{color:var(--clll-button-text-color)}.clll-button:focus-visible{outline:none;border-color:transparent!important;outline-color:var(--clll-button-focus-border, transparent);outline-style:solid;outline-width:2px;box-shadow:0 0 0 var(--clll-unit-0) var(--clll-button-focus-shadow, transparent)}.clll-button.clll-button--has-content{display:inline-flex;align-items:center}.clll-button.clll-button--no-content.clll-button--left,.clll-button.clll-button--no-content.clll-button--right{justify-content:center}.clll-button.clll-button--no-content .clll-button__content{display:none}.clll-button.clll-button--busy .clll-button__content,.clll-button.clll-button--busy .clll-icon{visibility:hidden}.clll-button.clll-button--tiny{font-size:var(--clll-unit-3);line-height:var(--clll-unit-5);padding:var(--clll-unit-0_5) var(--clll-unit-2)}.clll-button.clll-button--tiny.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0_5)}.clll-button.clll-button--tiny.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--tiny.clll-button--rounded{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--tiny.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--tiny:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--tiny.clll-button--no-content{padding:var(--clll-unit-1_5)}.clll-button.clll-button--small{font-size:var(--clll-unit-3_5);line-height:var(--clll-unit-6);padding:var(--clll-unit-1) var(--clll-unit-2_5)}.clll-button.clll-button--small.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1)}.clll-button.clll-button--small.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--small.clll-button--rounded{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--small.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--small:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--small.clll-button--no-content{padding:var(--clll-unit-2)}.clll-button.clll-button--medium{font-size:var(--clll-unit-4);line-height:var(--clll-unit-6_5);padding:var(--clll-unit-1_5) var(--clll-unit-3)}.clll-button.clll-button--medium.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-1_5)}.clll-button.clll-button--medium.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--medium.clll-button--rounded{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--medium.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--medium:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--medium.clll-button--no-content{padding:var(--clll-unit-2_5)}.clll-button.clll-button--large{font-size:var(--clll-unit-4_5);line-height:var(--clll-unit-7);padding:var(--clll-unit-2) var(--clll-unit-3_5)}.clll-button.clll-button--large.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-button.clll-button--large.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--large.clll-button--rounded{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--large.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--large:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--large.clll-button--no-content{padding:var(--clll-unit-3)}.clll-button.clll-button--xlarge{font-size:var(--clll-unit-6);line-height:var(--clll-unit-8_5);padding:var(--clll-unit-3) var(--clll-unit-4_5)}.clll-button.clll-button--xlarge.clll-button--has-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-button.clll-button--xlarge.clll-button--has-content>:not([hidden])~:not([hidden]).clll-spinner{margin-left:0;margin-right:0}.clll-button.clll-button--xlarge.clll-button--rounded{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-full,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-lg,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-md,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-sm,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xs,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-2xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-3xl,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-none,.clll-button.clll-button--xlarge.clll-button--rounded.clll-button--rounded-none .clll-{border-radius:0}.clll-button.clll-button--xlarge:not([class*=clll-button--rounded-]).clll-button--rounded{border-radius:var(--clll-button-theme-radius)}.clll-button.clll-button--xlarge.clll-button--no-content{padding:var(--clll-unit-4)}.clll-button .clll-button__content{overflow:hidden}.clll-button.clll-button--left{justify-content:flex-start}.clll-button.clll-button--center{justify-content:center}.clll-button.clll-button--right{justify-content:flex-end}.clll-button.clll-button--no-content{display:flex;align-items:center}.clll-button.clll-button--no-content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-0)}.clll-button.clll-button--no-content.clll-button--rounded{border-radius:var(--clll-rounded-full)}.clll-button.clll-button--wrapped{padding:var(--clll-unit-0)}.clll-button.clll-button--wrapped.clll-button--no-content{padding:0}.clll-button.clll-button--pill{border:0;padding:var(--clll-unit-0);background-color:transparent;outline-offset:-.5px}.clll-button.clll-button--pill:focus{box-shadow:none}.clll-button.clll-button--pill.clll-button--rounded{border-radius:var(--clll-button-theme-radius, --clll-rounded-xs)}.clll-button.clll-button--pill .clll-button__content{line-height:0}.clll-button.clll-button--active{pointer-events:none;user-select:none}.clll-button.clll-button--elevated{box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}.clll-button:disabled{cursor:not-allowed;pointer-events:all;opacity:.75;user-select:none}
package/dist/components/Form/CLInput/CLInput.js CHANGED
@@ -1,184 +1,226 @@
1
1
  import '../../../assets/core.css';
2
2
  import './CLInput.css';
3
3
  import '../../../assets/shared/form-utilities.css';
4
- import { defineComponent as v, computed as I, createElementBlock as b, openBlock as n, normalizeClass as x, unref as a, createBlock as m, Fragment as M, createTextVNode as q, toDisplayString as R, createVNode as K, ref as w, watch as T, createCommentVNode as g, mergeModels as N, useTemplateRef as Q, useModel as W, withCtx as Y, createElementVNode as L, normalizeStyle as Z, withDirectives as _, vModelDynamic as ee, isRef as le } from "vue";
5
- import { _ as te, i as ae, a as ie } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-CF_lxNr8.js";
4
+ import { defineComponent as S, computed as k, createBlock as x, createElementBlock as h, unref as i, openBlock as r, normalizeClass as y, Fragment as q, createTextVNode as X, toDisplayString as w, createVNode as K, ref as A, watch as P, createCommentVNode as v, mergeModels as M, useTemplateRef as Q, useModel as W, withCtx as Y, createElementVNode as F, normalizeStyle as Z, withDirectives as _, vModelDynamic as ee, isRef as le } from "vue";
5
+ import { _ as te, i as ie, a as ae } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-CF_lxNr8.js";
6
6
  import { _ as oe } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-DYYs8W4N.js";
7
7
  import { _ as ne } from "../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js";
8
- import { _ as X } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
9
- import { CLSizes as u, CLBorderRadius as H, CLIconSizes as r, CLIconNames as h, CLColors as k, CLColorVariants as S, CLInputTypes as o, CLOrientation as B, CLCharCounterLayout as ue } from "../../../index.js";
10
- import { _ as se } from "../../../chunks/CLPill.vue_vue_type_style_index_0_lang-BbXWiTde.js";
11
- import { _ as P } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js";
12
- const de = ["data-testid"], E = /* @__PURE__ */ v({
8
+ import { _ as E } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
9
+ import { _ as V } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js";
10
+ import { CLSizes as d, CLColors as p, CLBorderRadius as B, CLIconSizes as f, CLColorVariants as I, CLIconNames as L, CLInputTypes as n, CLOrientation as N, CLCharCounterLayout as ue } from "../../../index.js";
11
+ import { _ as re } from "../../../chunks/CLPill.vue_vue_type_style_index_0_lang-BbXWiTde.js";
12
+ const de = ["data-testid"], H = /* @__PURE__ */ S({
13
13
  name: "CLInputPrefix",
14
14
  __name: "CLInputPrefix",
15
15
  props: {
16
- borderRadius: { default: H.XS },
16
+ ariaLabel: { default: void 0 },
17
+ borderRadius: { default: B.XS },
18
+ color: { default: p.Neutral },
17
19
  grouped: { type: Boolean, default: !1 },
20
+ onClick: { type: Function, default: void 0 },
18
21
  prefix: {},
19
- size: { default: u.Small },
22
+ size: { default: d.Small },
20
23
  testId: { default: "clll-input-prefix" }
21
24
  },
22
25
  setup(e) {
23
- const s = e, d = "clll-input", l = (i) => Object.values(h).includes(i), $ = (i) => i, t = (i) => i?.replace("rounded-", "") || "xs", y = {
24
- [u.Tiny]: r.Tiny,
25
- [u.Small]: r.Small,
26
- [u.Medium]: r.Medium,
27
- [u.Large]: r.Large,
28
- [u.XL]: r.XL
29
- }, p = I(() => [
30
- `${d}__input-prefix`,
26
+ const a = e, s = "clll-input", l = (o) => Object.values(L).includes(o), C = (o) => o, t = (o) => o?.replace("rounded-", "") || "xs", b = {
27
+ [d.Tiny]: f.Tiny,
28
+ [d.Small]: f.Small,
29
+ [d.Medium]: f.Medium,
30
+ [d.Large]: f.Large,
31
+ [d.XL]: f.XL
32
+ }, g = k(() => !!a.onClick && l(a.prefix)), u = k(() => [
33
+ `${s}__input-prefix`,
31
34
  "form-addon-flex",
32
35
  "form-addon-flex--left",
33
- l(s.prefix) ? `${d}__input-prefix--icon form-addon-flex--icon` : `${d}__input-prefix--string form-addon-flex--string`,
34
- { "--input-group": s.grouped || s.prefix },
35
- s.grouped ? `form-addon-radius--left-${t(s.borderRadius)}` : ""
36
- ]);
37
- return (i, C) => (n(), b("span", {
38
- class: x(a(p)),
36
+ l(a.prefix) ? `${s}__input-prefix--icon form-addon-flex--icon` : `${s}__input-prefix--string form-addon-flex--string`,
37
+ { "--interactive": g },
38
+ { "--input-group": a.grouped || a.prefix },
39
+ a.grouped ? `form-addon-radius--left-${t(a.borderRadius)}` : ""
40
+ ]), $ = (o) => {
41
+ a.onClick && o && (o.stopPropagation(), a.onClick(o));
42
+ };
43
+ return (o, R) => i(g) ? (r(), x(i(V), {
44
+ key: 0,
45
+ "aria-label": e.ariaLabel,
46
+ "border-radius": i(B).None,
47
+ class: y(i(u)),
48
+ color: e.color,
49
+ "icon-before": C(e.prefix),
50
+ "icon-size": b[e.size],
51
+ "on-click": $,
52
+ size: e.size,
53
+ "test-id": e.testId,
54
+ variant: i(I).Ghost,
55
+ wrap: ""
56
+ }, null, 8, ["aria-label", "border-radius", "class", "color", "icon-before", "icon-size", "size", "test-id", "variant"])) : (r(), h("span", {
57
+ key: 1,
58
+ class: y(i(u)),
39
59
  "data-testid": e.testId
40
60
  }, [
41
- l(e.prefix) ? (n(), m(a(X), {
61
+ l(e.prefix) ? (r(), x(i(E), {
42
62
  key: 0,
43
- name: $(e.prefix),
44
- size: y[e.size]
45
- }, null, 8, ["name", "size"])) : (n(), b(M, { key: 1 }, [
46
- q(R(e.prefix), 1)
63
+ name: C(e.prefix),
64
+ size: b[e.size],
65
+ color: e.color
66
+ }, null, 8, ["name", "size", "color"])) : (r(), h(q, { key: 1 }, [
67
+ X(w(e.prefix), 1)
47
68
  ], 64))
48
69
  ], 10, de));
49
70
  }
50
- }), re = ["data-testid"], O = /* @__PURE__ */ v({
71
+ }), se = ["data-testid"], O = /* @__PURE__ */ S({
51
72
  name: "CLInputSuffix",
52
73
  __name: "CLInputSuffix",
53
74
  props: {
54
- borderRadius: { default: H.XS },
75
+ ariaLabel: { default: void 0 },
76
+ borderRadius: { default: B.XS },
77
+ color: { default: p.Neutral },
55
78
  grouped: { type: Boolean, default: !1 },
79
+ onClick: { type: Function, default: void 0 },
56
80
  suffix: {},
57
- size: { default: u.Small },
81
+ size: { default: d.Small },
58
82
  testId: { default: "clll-input-suffix" }
59
83
  },
60
84
  setup(e) {
61
- const s = e, d = "clll-input", l = (i) => Object.values(h).includes(i), $ = (i) => i, t = (i) => i?.replace("rounded-", "") || "xs", y = {
62
- [u.Tiny]: r.Tiny,
63
- [u.Small]: r.Small,
64
- [u.Medium]: r.Medium,
65
- [u.Large]: r.Large,
66
- [u.XL]: r.XL
67
- }, p = I(() => [
68
- `${d}__input-suffix`,
85
+ const a = e, s = "clll-input", l = (o) => Object.values(L).includes(o), C = (o) => o, t = (o) => o?.replace("rounded-", "") || "xs", b = {
86
+ [d.Tiny]: f.Tiny,
87
+ [d.Small]: f.Small,
88
+ [d.Medium]: f.Medium,
89
+ [d.Large]: f.Large,
90
+ [d.XL]: f.XL
91
+ }, g = k(() => !!a.onClick && l(a.suffix)), u = k(() => [
92
+ `${s}__input-suffix`,
69
93
  "form-addon-flex",
70
94
  "form-addon-flex--right",
71
- l(s.suffix) ? `${d}__input-suffix--icon form-addon-flex--icon` : `${d}__input-suffix--string form-addon-flex--string`,
72
- { "--input-group": s.grouped || s.suffix },
73
- s.grouped ? `form-addon-radius--right-${t(s.borderRadius)}` : ""
74
- ]);
75
- return (i, C) => (n(), b("span", {
76
- class: x(a(p)),
95
+ l(a.suffix) ? `${s}__input-suffix--icon form-addon-flex--icon` : `${s}__input-suffix--string form-addon-flex--string`,
96
+ { "--interactive": g },
97
+ { "--input-group": a.grouped || a.suffix },
98
+ a.grouped ? `form-addon-radius--right-${t(a.borderRadius)}` : ""
99
+ ]), $ = (o) => {
100
+ a.onClick && o && (o.stopPropagation(), a.onClick(o));
101
+ };
102
+ return (o, R) => i(g) ? (r(), x(i(V), {
103
+ key: 0,
104
+ "aria-label": e.ariaLabel,
105
+ "border-radius": i(B).None,
106
+ class: y(i(u)),
107
+ color: e.color,
108
+ "icon-before": C(e.suffix),
109
+ "icon-size": b[e.size],
110
+ "on-click": $,
111
+ size: e.size,
112
+ "test-id": e.testId,
113
+ variant: i(I).Ghost,
114
+ wrap: ""
115
+ }, null, 8, ["aria-label", "border-radius", "class", "color", "icon-before", "icon-size", "size", "test-id", "variant"])) : (r(), h("span", {
116
+ key: 1,
117
+ class: y(i(u)),
77
118
  "data-testid": e.testId
78
119
  }, [
79
- l(e.suffix) ? (n(), m(a(X), {
120
+ l(e.suffix) ? (r(), x(i(E), {
80
121
  key: 0,
81
- name: $(e.suffix),
82
- size: y[e.size]
83
- }, null, 8, ["name", "size"])) : (n(), b(M, { key: 1 }, [
84
- q(R(e.suffix), 1)
122
+ name: C(e.suffix),
123
+ size: b[e.size],
124
+ color: e.color
125
+ }, null, 8, ["name", "size", "color"])) : (r(), h(q, { key: 1 }, [
126
+ X(w(e.suffix), 1)
85
127
  ], 64))
86
- ], 10, re));
128
+ ], 10, se));
87
129
  }
88
- }), ce = ["data-testid"], U = /* @__PURE__ */ v({
130
+ }), ce = ["data-testid"], U = /* @__PURE__ */ S({
89
131
  name: "CLInputPill",
90
132
  __name: "CLInputPill",
91
133
  props: {
92
- color: { default: k.Neutral },
134
+ color: { default: p.Neutral },
93
135
  label: {},
94
136
  testId: { default: "clll-input-pill" }
95
137
  },
96
138
  setup(e) {
97
- const s = "clll-input";
98
- return (d, l) => (n(), b("span", {
99
- class: x(`${s}__pill`),
139
+ const a = "clll-input";
140
+ return (s, l) => (r(), h("span", {
141
+ class: y(`${a}__pill`),
100
142
  "data-testid": e.testId
101
143
  }, [
102
- K(a(se), {
144
+ K(i(re), {
103
145
  color: e.color,
104
146
  label: e.label,
105
- variant: a(S).Soft
147
+ variant: i(I).Soft
106
148
  }, null, 8, ["color", "label", "variant"])
107
149
  ], 10, ce));
108
150
  }
109
- }), fe = ["data-testid"], j = /* @__PURE__ */ v({
151
+ }), fe = ["data-testid"], G = /* @__PURE__ */ S({
110
152
  name: "CLInputColorTools",
111
153
  __name: "CLInputColorTools",
112
154
  props: {
113
155
  copied: { type: Boolean, default: !1 },
114
156
  initialValue: { default: void 0 },
115
157
  modelValue: { default: void 0 },
116
- size: { default: u.Small },
158
+ size: { default: d.Small },
117
159
  testId: { default: "clll-input-color-tools" }
118
160
  },
119
161
  emits: ["copy", "reset", "update:copied"],
120
- setup(e, { emit: s }) {
121
- const d = e, l = s, $ = "clll-input", t = w(d.copied), y = {
122
- [u.Tiny]: r.Tiny,
123
- [u.Small]: r.Small,
124
- [u.Medium]: r.Medium,
125
- [u.Large]: r.Large,
126
- [u.XL]: r.XL
127
- }, p = async () => {
162
+ setup(e, { emit: a }) {
163
+ const s = e, l = a, C = "clll-input", t = A(s.copied), b = {
164
+ [d.Tiny]: f.Tiny,
165
+ [d.Small]: f.Small,
166
+ [d.Medium]: f.Medium,
167
+ [d.Large]: f.Large,
168
+ [d.XL]: f.XL
169
+ }, g = async () => {
128
170
  try {
129
- d.modelValue && (await navigator.clipboard.writeText(d.modelValue.toString()), t.value = !0, l("update:copied", !0), l("copy"));
130
- } catch (C) {
131
- console.error(C);
171
+ s.modelValue && (await navigator.clipboard.writeText(s.modelValue.toString()), t.value = !0, l("update:copied", !0), l("copy"));
172
+ } catch ($) {
173
+ console.error($);
132
174
  }
133
- }, i = () => {
134
- l("reset", d.initialValue);
175
+ }, u = () => {
176
+ l("reset", s.initialValue);
135
177
  };
136
- return T(() => d.copied, (C) => {
137
- t.value = C;
138
- }), T(() => d.modelValue, () => {
178
+ return P(() => s.copied, ($) => {
179
+ t.value = $;
180
+ }), P(() => s.modelValue, () => {
139
181
  t.value = !1, l("update:copied", !1);
140
- }), (C, F) => (n(), b("span", {
141
- class: x(`${$}__selected-color-tools`),
182
+ }), ($, o) => (r(), h("span", {
183
+ class: y(`${C}__selected-color-tools`),
142
184
  "data-testid": e.testId
143
185
  }, [
144
- e.modelValue ? (n(), m(a(P), {
186
+ e.modelValue ? (r(), x(i(V), {
145
187
  key: 0,
146
188
  "aria-label": "Copy color to clipboard",
147
- class: x(`${$}__copy-to-clipboard`),
148
- color: a(k).Neutral,
149
- "icon-before": a(t) ? a(h).Check : a(h).Copy,
150
- "icon-size": y[e.size],
151
- "on-click": p,
189
+ class: y(`${C}__copy-to-clipboard`),
190
+ color: i(p).Neutral,
191
+ "icon-before": i(t) ? i(L).Check : i(L).Copy,
192
+ "icon-size": b[e.size],
193
+ "on-click": g,
152
194
  size: e.size,
153
- title: a(t) ? "Color copied to clipboard" : "Copy color to clipboard",
154
- variant: a(S).Ghost,
195
+ title: i(t) ? "Color copied to clipboard" : "Copy color to clipboard",
196
+ variant: i(I).Ghost,
155
197
  wrap: ""
156
- }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "title", "variant"])) : g("", !0),
157
- e.modelValue ? (n(), m(a(P), {
198
+ }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "title", "variant"])) : v("", !0),
199
+ e.modelValue ? (r(), x(i(V), {
158
200
  key: 1,
159
201
  "aria-label": "Reset selected color",
160
- class: x(`${$}__reset-selected-color`),
161
- color: a(k).Neutral,
162
- "on-click": i,
163
- "icon-before": a(h).Restore,
164
- "icon-size": y[e.size],
202
+ class: y(`${C}__reset-selected-color`),
203
+ color: i(p).Neutral,
204
+ "on-click": u,
205
+ "icon-before": i(L).Restore,
206
+ "icon-size": b[e.size],
165
207
  size: e.size,
166
208
  title: "Reset selected color",
167
- variant: a(S).Ghost,
209
+ variant: i(I).Ghost,
168
210
  wrap: ""
169
- }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "variant"])) : g("", !0)
211
+ }, null, 8, ["class", "color", "icon-before", "icon-size", "size", "variant"])) : v("", !0)
170
212
  ], 10, fe));
171
213
  }
172
- }), me = ["data-testid"], xe = ["id", "name", "aria-label", "autocomplete", "disabled", "form", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "spellcheck", "type"], ye = /* @__PURE__ */ v({
214
+ }), me = ["data-testid"], xe = ["id", "name", "aria-label", "autocomplete", "disabled", "form", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "spellcheck", "type"], ye = /* @__PURE__ */ S({
173
215
  name: "CLInput",
174
216
  __name: "CLInput",
175
- props: /* @__PURE__ */ N({
217
+ props: /* @__PURE__ */ M({
176
218
  ariaLabel: { default: void 0 },
177
219
  autoComplete: { type: Boolean, default: void 0 },
178
220
  borderRadius: { default: void 0 },
179
221
  busy: { type: Boolean, default: !1 },
180
222
  charCounter: { type: Boolean, default: !1 },
181
- color: { default: k.Neutral },
223
+ color: { default: p.Neutral },
182
224
  disabled: { type: Boolean, default: !1 },
183
225
  fluid: { type: Boolean, default: !1 },
184
226
  form: { default: void 0 },
@@ -194,29 +236,33 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
194
236
  onChange: { type: Function, default: void 0 },
195
237
  onFocus: { type: Function, default: void 0 },
196
238
  onInput: { type: Function, default: void 0 },
197
- orientation: { default: B.Vertical },
239
+ onPrefixClick: { type: Function, default: void 0 },
240
+ onSuffixClick: { type: Function, default: void 0 },
241
+ orientation: { default: N.Vertical },
198
242
  pattern: { default: void 0 },
199
243
  pill: { default: void 0 },
200
244
  placeholder: { default: void 0 },
201
245
  prefix: { default: void 0 },
246
+ prefixAriaLabel: { default: void 0 },
202
247
  readonly: { type: Boolean, default: !1 },
203
248
  required: { type: Boolean, default: !1 },
204
249
  rounded: { type: Boolean, default: !0 },
205
- size: { default: u.Small },
250
+ size: { default: d.Small },
206
251
  spellCheck: { type: Boolean, default: void 0 },
207
252
  suffix: { default: void 0 },
253
+ suffixAriaLabel: { default: void 0 },
208
254
  testId: { default: "clll-input" },
209
- type: { default: o.Text },
210
- variant: { default: S.Outline }
255
+ type: { default: n.Text },
256
+ variant: { default: I.Outline }
211
257
  }, {
212
258
  modelValue: {},
213
259
  modelModifiers: {}
214
260
  }),
215
- emits: /* @__PURE__ */ N(["reset"], ["update:modelValue"]),
216
- setup(e, { expose: s, emit: d }) {
217
- const l = e, $ = d, t = "clll-input", y = w(!1), p = Q("input-elem"), i = W(e, "modelValue");
218
- l.type === o.Color && !i.value && (i.value = "#FFFFFF");
219
- const C = i.value?.toString(), F = (z) => Object.values(h).includes(z), A = I(() => [
261
+ emits: /* @__PURE__ */ M(["reset"], ["update:modelValue"]),
262
+ setup(e, { expose: a, emit: s }) {
263
+ const l = e, C = s, t = "clll-input", b = A(!1), g = Q("input-elem"), u = W(e, "modelValue");
264
+ l.type === n.Color && !u.value && (u.value = "#FFFFFF");
265
+ const $ = u.value?.toString(), o = (z) => Object.values(L).includes(z), R = k(() => [
220
266
  t,
221
267
  l.borderRadius ? `${t}--${l.borderRadius}` : "",
222
268
  l.busy ? `${t}--busy` : `${t}--ready`,
@@ -225,75 +271,78 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
225
271
  `${t}--${l.type}`,
226
272
  `${t}--${l.variant}`,
227
273
  l.disabled || l.busy ? `${t}--disabled` : `${t}--active`,
228
- l.fluid || l.orientation === B.Horizontal ? `${t}--fluid` : `${t}--fixed`,
274
+ l.fluid || l.orientation === N.Horizontal ? `${t}--fluid` : `${t}--fixed`,
229
275
  l.grouped ? `${t}--grouped` : "",
230
276
  l.label ? `${t}--haslabel` : "",
231
277
  l.messageType ? `${t}--${l.messageType}` : "",
232
278
  l.orientation ? `${t}--${l.orientation}` : "",
233
279
  l.pill ? `${t}--haspill` : "",
234
- l.charCounter && l.maxLength && [o.Email, o.None, o.Text, o.Url].includes(l.type) ? `${t}--hascharcounter` : "",
235
- l.prefix && ![o.Color, o.File].includes(l.type) ? `${t}--hasprefix` : "",
236
- l.prefix && ![o.Color, o.File].includes(l.type) ? F(l.prefix) ? `${t}--hasiconprefix` : `${t}--hascustomprefix` : "",
280
+ l.charCounter && l.maxLength && [n.Email, n.None, n.Text, n.Url].includes(l.type) ? `${t}--hascharcounter` : "",
281
+ l.prefix && ![n.Color, n.File].includes(l.type) ? `${t}--hasprefix` : "",
282
+ l.prefix && ![n.Color, n.File].includes(l.type) ? o(l.prefix) ? `${t}--hasiconprefix` : `${t}--hascustomprefix` : "",
237
283
  l.readonly ? `${t}--readonly` : `${t}--writeable`,
238
284
  l.rounded ? `${t}--rounded` : `${t}--box`,
239
285
  l.required ? `${t}--required` : `${t}--optional`,
240
- l.suffix && ![o.Color, o.File].includes(l.type) ? `${t}--hassuffix` : "",
241
- l.suffix && ![o.Color, o.File].includes(l.type) ? F(l.suffix) ? `${t}--hasiconsuffix` : `${t}--hascustomsuffix` : ""
242
- ]), D = I(() => [
286
+ l.suffix && ![n.Color, n.File].includes(l.type) ? `${t}--hassuffix` : "",
287
+ l.suffix && ![n.Color, n.File].includes(l.type) ? o(l.suffix) ? `${t}--hasiconsuffix` : `${t}--hascustomsuffix` : ""
288
+ ]), j = k(() => [
243
289
  `${t}__input`,
244
- { "--nocolor": l.type === o.Color && !i.value },
290
+ { "--nocolor": l.type === n.Color && !u.value },
245
291
  { "--input-group": l.grouped || l.prefix || l.suffix }
246
- ]), G = (z) => {
247
- i.value = z, $("reset", i.value);
248
- }, J = () => {
249
- p.value && p.value.focus();
292
+ ]), D = (z) => {
293
+ u.value = z, C("reset", u.value);
294
+ }, J = (z) => {
295
+ !z.target.closest('button, a, [role="button"]') && g.value && g.value.focus();
250
296
  };
251
- return T(i, () => {
252
- y.value = !1;
253
- }), s({
254
- inputRef: p
255
- }), (z, c) => (n(), m(te, {
297
+ return P(u, () => {
298
+ b.value = !1;
299
+ }), a({
300
+ inputRef: g
301
+ }), (z, c) => (r(), x(te, {
256
302
  fluid: e.fluid,
257
303
  "has-pill": !!e.pill,
258
304
  "has-char-counter": !!(e.charCounter && e.maxLength),
259
305
  orientation: e.orientation
260
306
  }, {
261
307
  default: Y(() => [
262
- L("span", {
263
- class: x(a(A)),
264
- style: Z(a(ae)({ color: e.color, variant: e.variant })),
308
+ F("span", {
309
+ class: y(i(R)),
310
+ style: Z(i(ie)({ color: e.color, variant: e.variant })),
265
311
  "data-testid": e.testId
266
312
  }, [
267
- e.label ? (n(), m(oe, {
313
+ e.label ? (r(), x(oe, {
268
314
  key: 0,
269
315
  "css-prefix": t,
270
316
  "html-for": e.id,
271
317
  label: e.label,
272
318
  required: e.required,
273
319
  size: e.size
274
- }, null, 8, ["html-for", "label", "required", "size"])) : g("", !0),
275
- L("span", {
276
- class: x([`${t}__input-container`, "--focus-within"]),
320
+ }, null, 8, ["html-for", "label", "required", "size"])) : v("", !0),
321
+ F("span", {
322
+ class: y([`${t}__input-container`, "--focus-within"]),
277
323
  onClick: J
278
324
  }, [
279
- e.prefix && ![a(o).Color, a(o).File].includes(e.type) ? (n(), m(E, {
325
+ e.prefix && ![i(n).Color, i(n).File].includes(e.type) ? (r(), x(H, {
280
326
  key: 0,
281
327
  prefix: e.prefix,
282
328
  size: e.size,
283
329
  grouped: e.grouped,
284
- "border-radius": e.borderRadius
285
- }, null, 8, ["prefix", "size", "grouped", "border-radius"])) : g("", !0),
286
- L("span", {
287
- class: x(`${t}__input-border-control`)
330
+ "border-radius": e.borderRadius,
331
+ color: e.color,
332
+ "on-click": e.onPrefixClick,
333
+ "aria-label": e.prefixAriaLabel
334
+ }, null, 8, ["prefix", "size", "grouped", "border-radius", "color", "on-click", "aria-label"])) : v("", !0),
335
+ F("span", {
336
+ class: y(`${t}__input-border-control`)
288
337
  }, [
289
- _(L("input", {
338
+ _(F("input", {
290
339
  id: e.id,
291
340
  ref: "input-elem",
292
- "onUpdate:modelValue": c[0] || (c[0] = (f) => i.value = f),
341
+ "onUpdate:modelValue": c[0] || (c[0] = (m) => u.value = m),
293
342
  name: e.name,
294
343
  "aria-label": e.ariaLabel,
295
344
  autocomplete: e.autoComplete ? "on" : "off",
296
- class: x(a(D)),
345
+ class: y(i(j)),
297
346
  disabled: e.disabled || e.busy,
298
347
  form: e.form,
299
348
  maxlength: e.maxLength,
@@ -305,74 +354,77 @@ const de = ["data-testid"], E = /* @__PURE__ */ v({
305
354
  spellcheck: e.spellCheck,
306
355
  type: e.type,
307
356
  onBlur: c[1] || (c[1] = //@ts-ignore
308
- (...f) => e.onBlur && e.onBlur(...f)),
357
+ (...m) => e.onBlur && e.onBlur(...m)),
309
358
  onChange: c[2] || (c[2] = //@ts-ignore
310
- (...f) => e.onChange && e.onChange(...f)),
359
+ (...m) => e.onChange && e.onChange(...m)),
311
360
  onFocus: c[3] || (c[3] = //@ts-ignore
312
- (...f) => e.onFocus && e.onFocus(...f)),
361
+ (...m) => e.onFocus && e.onFocus(...m)),
313
362
  onInput: c[4] || (c[4] = //@ts-ignore
314
- (...f) => e.onInput && e.onInput(...f))
363
+ (...m) => e.onInput && e.onInput(...m))
315
364
  }, null, 42, xe), [
316
- [ee, i.value]
365
+ [ee, u.value]
317
366
  ])
318
367
  ], 2),
319
- e.type === a(o).Color ? (n(), b("span", {
368
+ e.type === i(n).Color ? (r(), h("span", {
320
369
  key: 1,
321
- class: x(`${t}__selected-color`)
322
- }, R(i.value || "none"), 3)) : g("", !0),
323
- e.type === a(o).Color ? (n(), m(j, {
370
+ class: y(`${t}__selected-color`)
371
+ }, w(u.value || "none"), 3)) : v("", !0),
372
+ e.type === i(n).Color ? (r(), x(G, {
324
373
  key: 2,
325
- modelValue: i.value,
326
- "onUpdate:modelValue": c[5] || (c[5] = (f) => i.value = f),
327
- copied: a(y),
328
- "onUpdate:copied": c[6] || (c[6] = (f) => le(y) ? y.value = f : null),
329
- "initial-value": a(C),
374
+ modelValue: u.value,
375
+ "onUpdate:modelValue": c[5] || (c[5] = (m) => u.value = m),
376
+ copied: i(b),
377
+ "onUpdate:copied": c[6] || (c[6] = (m) => le(b) ? b.value = m : null),
378
+ "initial-value": i($),
330
379
  size: e.size,
331
- onReset: G
332
- }, null, 8, ["modelValue", "copied", "initial-value", "size"])) : g("", !0),
333
- e.suffix && ![a(o).Color, a(o).File].includes(e.type) ? (n(), m(O, {
380
+ onReset: D
381
+ }, null, 8, ["modelValue", "copied", "initial-value", "size"])) : v("", !0),
382
+ e.suffix && ![i(n).Color, i(n).File].includes(e.type) ? (r(), x(O, {
334
383
  key: 3,
335
384
  suffix: e.suffix,
336
385
  size: e.size,
337
386
  grouped: e.grouped,
338
- "border-radius": e.borderRadius
339
- }, null, 8, ["suffix", "size", "grouped", "border-radius"])) : g("", !0),
340
- e.charCounter && e.maxLength && [a(o).Email, a(o).None, a(o).Text, a(o).Url].includes(e.type) ? (n(), m(ne, {
387
+ "border-radius": e.borderRadius,
388
+ color: e.color,
389
+ "on-click": e.onSuffixClick,
390
+ "aria-label": e.suffixAriaLabel
391
+ }, null, 8, ["suffix", "size", "grouped", "border-radius", "color", "on-click", "aria-label"])) : v("", !0),
392
+ e.charCounter && e.maxLength && [i(n).Email, i(n).None, i(n).Text, i(n).Url].includes(e.type) ? (r(), x(ne, {
341
393
  key: 4,
342
394
  color: e.color,
343
395
  "css-prefix": t,
344
- "current-length": i.value ? i.value.toString().length : 0,
396
+ "current-length": u.value ? u.value.toString().length : 0,
345
397
  "max-length": e.maxLength,
346
- layout: a(ue).Inline,
398
+ layout: i(ue).Inline,
347
399
  size: e.size
348
- }, null, 8, ["color", "current-length", "max-length", "layout", "size"])) : g("", !0)
400
+ }, null, 8, ["color", "current-length", "max-length", "layout", "size"])) : v("", !0)
349
401
  ], 2)
350
402
  ], 14, me),
351
- e.pill && e.label && e.orientation === a(B).Horizontal ? (n(), b("span", {
403
+ e.pill && e.label && e.orientation === i(N).Horizontal ? (r(), h("span", {
352
404
  key: 0,
353
- class: x(`${t}__spacer`)
354
- }, null, 2)) : g("", !0),
355
- e.pill ? (n(), m(U, {
405
+ class: y(`${t}__spacer`)
406
+ }, null, 2)) : v("", !0),
407
+ e.pill ? (r(), x(U, {
356
408
  key: 1,
357
409
  label: e.pill,
358
410
  color: e.color
359
- }, null, 8, ["label", "color"])) : g("", !0),
360
- e.id ? (n(), m(ie, {
411
+ }, null, 8, ["label", "color"])) : v("", !0),
412
+ e.id ? (r(), x(ae, {
361
413
  key: 2,
362
414
  id: e.id,
363
415
  messages: e.messages,
364
416
  "message-type": e.messageType
365
- }, null, 8, ["id", "messages", "message-type"])) : g("", !0)
417
+ }, null, 8, ["id", "messages", "message-type"])) : v("", !0)
366
418
  ]),
367
419
  _: 1
368
420
  }, 8, ["fluid", "has-pill", "has-char-counter", "orientation"]));
369
421
  }
370
- }), V = ye;
371
- V.Prefix = E;
372
- V.Suffix = O;
373
- V.Pill = U;
374
- V.ColorTools = j;
422
+ }), T = ye;
423
+ T.Prefix = H;
424
+ T.Suffix = O;
425
+ T.Pill = U;
426
+ T.ColorTools = G;
375
427
  export {
376
- V as CLInput,
377
- V as default
428
+ T as CLInput,
429
+ T as default
378
430
  };
package/dist/components/Form/CLInput/CLInput.vue.d.ts CHANGED
@@ -42,6 +42,10 @@ export interface CLInputProps {
42
42
  onFocus?: CLGenericFocusFunction;
43
43
  /** A callback function which handles when the input value changes due to user input. */
44
44
  onInput?: CLGenericInputFunction;
45
+ /** A callback function which handles when the prefix icon is clicked. */
46
+ onPrefixClick?: (event?: MouseEvent) => void;
47
+ /** A callback function which handles when the suffix icon is clicked. */
48
+ onSuffixClick?: (event?: MouseEvent) => void;
45
49
  /** Sets the label position to be above or to the left of the form element. The property can be one of `CLOrientation` */
46
50
  orientation?: CLOrientation;
47
51
  /** A regexp pattern that can be used for validation. */
@@ -52,6 +56,8 @@ export interface CLInputProps {
52
56
  placeholder?: string;
53
57
  /** Sets the icon or text to be displayed before the user input. */
54
58
  prefix?: string | CLIconNames;
59
+ /** Sets the aria-label for the prefix icon when it's interactive. */
60
+ prefixAriaLabel?: string;
55
61
  /** When set to `true` the input cannot be edited. */
56
62
  readonly?: boolean;
57
63
  /** Set the required state. */
@@ -64,6 +70,8 @@ export interface CLInputProps {
64
70
  spellCheck?: boolean;
65
71
  /**Sets the icon or text to be displayed after the user input. */
66
72
  suffix?: string | CLIconNames;
73
+ /** Sets the aria-label for the suffix icon when it's interactive. */
74
+ suffixAriaLabel?: string;
67
75
  /** Sets a custom ID used for unit tests. */
68
76
  testId?: string;
69
77
  /**Set the type of input, supports various input types. */
@@ -115,8 +123,12 @@ declare const _default: import('vue').DefineComponent<{
115
123
  autoComplete: boolean;
116
124
  charCounter: boolean;
117
125
  minLength: number;
126
+ onPrefixClick: (event?: MouseEvent) => void;
127
+ onSuffixClick: (event?: MouseEvent) => void;
128
+ prefixAriaLabel: string;
118
129
  readonly: boolean;
119
130
  spellCheck: boolean;
131
+ suffixAriaLabel: string;
120
132
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
121
133
  'input-elem': HTMLInputElement;
122
134
  }, HTMLDivElement>;
package/dist/components/Form/CLInput/CLInputPrefix.vue.d.ts CHANGED
@@ -1,9 +1,15 @@
1
- import { CLIconNames, CLSizes } from '../../../index.ts';
1
+ import { CLIconNames, CLSizes, CLBorderRadius, CLColors } from '../../../index.ts';
2
2
  export interface CLInputPrefixProps {
3
+ /** Sets the aria-label for the prefix when it's interactive. */
4
+ ariaLabel?: string;
3
5
  /** The border radius size to apply to the prefix */
4
- borderRadius?: string;
6
+ borderRadius?: CLBorderRadius;
7
+ /** Sets the color of the prefix icon. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
8
+ color?: CLColors;
5
9
  /** Whether input is grouped */
6
10
  grouped?: boolean;
11
+ /** A callback function which handles when the prefix is clicked. */
12
+ onClick?: (event?: MouseEvent) => void;
7
13
  /** The prefix content - icon name or text string */
8
14
  prefix: string | CLIconNames;
9
15
  /** Size for icon rendering */
@@ -12,9 +18,12 @@ export interface CLInputPrefixProps {
12
18
  testId?: string;
13
19
  }
14
20
  declare const _default: import('vue').DefineComponent<CLInputPrefixProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLInputPrefixProps> & Readonly<{}>, {
21
+ color: CLColors;
15
22
  testId: string;
23
+ onClick: (event?: MouseEvent) => void;
16
24
  size: CLSizes;
17
- borderRadius: string;
25
+ ariaLabel: string;
26
+ borderRadius: CLBorderRadius;
18
27
  grouped: boolean;
19
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
28
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
20
29
  export default _default;
package/dist/components/Form/CLInput/CLInputSuffix.vue.d.ts CHANGED
@@ -1,9 +1,15 @@
1
- import { CLIconNames, CLSizes } from '../../../index.ts';
1
+ import { CLIconNames, CLSizes, CLBorderRadius, CLColors } from '../../../index.ts';
2
2
  export interface CLInputSuffixProps {
3
+ /** Sets the aria-label for the suffix when it's interactive. */
4
+ ariaLabel?: string;
3
5
  /** The border radius size to apply to the suffix */
4
- borderRadius?: string;
6
+ borderRadius?: CLBorderRadius;
7
+ /** Sets the color of the suffix icon. The property can be one of `CLColors`, e.g. `CLColors.Primary`. */
8
+ color?: CLColors;
5
9
  /** Whether input is grouped */
6
10
  grouped?: boolean;
11
+ /** A callback function which handles when the suffix is clicked. */
12
+ onClick?: (event?: MouseEvent) => void;
7
13
  /** The suffix content - icon name or text string */
8
14
  suffix: string | CLIconNames;
9
15
  /** Size for icon rendering */
@@ -12,9 +18,12 @@ export interface CLInputSuffixProps {
12
18
  testId?: string;
13
19
  }
14
20
  declare const _default: import('vue').DefineComponent<CLInputSuffixProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLInputSuffixProps> & Readonly<{}>, {
21
+ color: CLColors;
15
22
  testId: string;
23
+ onClick: (event?: MouseEvent) => void;
16
24
  size: CLSizes;
17
- borderRadius: string;
25
+ ariaLabel: string;
26
+ borderRadius: CLBorderRadius;
18
27
  grouped: boolean;
19
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
28
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
20
29
  export default _default;
package/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "ui components",
18
18
  "vuejs"
19
19
  ],
20
- "version": "4.0.0",
20
+ "version": "4.1.0",
21
21
  "license": "MIT",
22
22
  "type": "module",
23
23
  "scripts": {