@breadstone/mosaik-elements-foundation 0.0.206 → 0.0.210

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.js

@@ -18,28 +18,27 @@ export function autoCompleteBoxElementJoyStyle() {
   --autocompletebox-border-radius: var(--joy-layout-radius);
   --autocompletebox-border-style: solid;
   --autocompletebox-border-width: var(--joy-layout-thickness);
-  --autocompletebox-font-family: unset;
+  --autocompletebox-focus-ring-active-width: 8px;
+  --autocompletebox-focus-ring-color: unset;
+  --autocompletebox-focus-ring-inward-offset: 2px;
+  --autocompletebox-focus-ring-outward-offset: 2px;
+  --autocompletebox-font-family: var(--joy-font-family);
   --autocompletebox-font-letter-spacing: unset;
   --autocompletebox-font-line-height: unset;
-  --autocompletebox-font-size: unset;
+  --autocompletebox-font-size: 16px;
   --autocompletebox-font-text-decoration: unset;
   --autocompletebox-font-text-transform: unset;
-  --autocompletebox-font-weight: unset;
+  --autocompletebox-font-weight: normal;
   --autocompletebox-foreground-color: var(--joy-scheme-foreground);
-  --autocompletebox-gap: var(--joy-layout-space);
-  --autocompletebox-height: 56px;
-  --autocompletebox-padding-bottom: var(--joy-layout-space);
-  --autocompletebox-padding-left: calc(var(--joy-layout-space) * 1.5);
-  --autocompletebox-padding-right: calc(var(--joy-layout-space) * 1.5);
-  --autocompletebox-padding-top: var(--joy-layout-space);
-  --autocompletebox-shadow-blur: unset;
-  --autocompletebox-shadow-color: unset;
-  --autocompletebox-shadow-offset-x: unset;
-  --autocompletebox-shadow-offset-y: unset;
-  --autocompletebox-shadow-spread: unset;
-  --autocompletebox-transition-duration: unset;
-  --autocompletebox-transition-mode: unset;
-  --autocompletebox-transition-property: unset;
+  --autocompletebox-gap: 8px;
+  --autocompletebox-padding-bottom: 8px;
+  --autocompletebox-padding-left: 12px;
+  --autocompletebox-padding-right: 12px;
+  --autocompletebox-padding-top: 8px;
+  --autocompletebox-shadow: unset;
+  --autocompletebox-transition-duration: var(--joy-duration-short);
+  --autocompletebox-transition-mode: ease;
+  --autocompletebox-transition-property: all;
   --autocompletebox-translate: unset;
 }
 
@@ -78,56 +77,133 @@ export function autoCompleteBoxElementJoyStyle() {
   -webkit-text-decoration: var(--autocompletebox-font-text-decoration);
   text-decoration: var(--autocompletebox-font-text-decoration);
   text-transform: var(--autocompletebox-font-text-transform);
-  padding-top: var(--autocompletebox-padding-top);
-  padding-right: var(--autocompletebox-padding-right);
-  padding-bottom: var(--autocompletebox-padding-bottom);
-  padding-left: var(--autocompletebox-padding-left);
-  gap: var(--autocompletebox-gap);
   transition-duration: var(--autocompletebox-transition-duration);
   transition-timing-function: var(--autocompletebox-transition-mode);
   transition-property: var(--autocompletebox-transition-property);
   translate: var(--autocompletebox-translate);
   background-color: var(--autocompletebox-background-color);
   color: var(--autocompletebox-foreground-color);
+  box-shadow: var(--autocompletebox-shadow);
   border-color: var(--autocompletebox-border-color);
-  border-width: var(--autocompletebox-border-width);
   border-radius: var(--autocompletebox-border-radius);
-  border-style: var(--autocompletebox-border-style);
-  box-shadow: var(--autocompletebox-shadow-offset-x) var(--autocompletebox-shadow-offset-y) var(--autocompletebox-shadow-blur) var(--autocompletebox-shadow-spread) var(--autocompletebox-shadow-color);
-  box-sizing: border-box;
-  display: block;
-  position: relative;
+  cursor: text;
 }
 
-:host input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 6px 8px;
+:host [part="focusRing"] {
+  --focus-ring-color: var(--autocompletebox-focus-ring-color);
+  --focus-ring-active-width: var(--autocompletebox-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--autocompletebox-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--autocompletebox-focus-ring-outward-offset);
+}
+
+:host [part="input"] {
+  cursor: inherit;
+}
+
+:host [part="input"][readonly]:not([invalid]) {
+  --textbox-border-color: var(--autocompletebox-border-color);
+}
+
+:host [part="input"]::part(suffix) {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
 }
 
-:host ul {
-  max-height: var(--max-dropdown-height, 350px);
-  background: var(--background-color, #fff);
+:host [part="caret"] {
+  margin: calc(var(--autocompletebox-gap) / 2);
+  transition-property: transform;
+  transition-duration: .2s;
+  transition-timing-function: ease;
+  transform: rotate(0);
+}
+
+:host [part="popup"] {
+  z-index: 100;
+}
+
+:host [part="projection"] {
+  padding: var(--autocompletebox-padding-top) 0;
+  background: var(--autocompletebox-background-color);
+  border-radius: var(--autocompletebox-border-radius);
   box-sizing: border-box;
-  width: 100%;
   margin: 0;
-  padding: 0;
-  list-style-type: none;
-  position: absolute;
-  overflow: auto;
 }
 
-:host li {
-  cursor: pointer;
-  padding: 8px;
+:host [part="item"] {
+  border-radius: 0;
+}
+
+:host [part="empty"], :host [part="loading"] {
+  padding-top: var(--autocompletebox-padding-top);
+  padding-right: var(--autocompletebox-padding-right);
+  padding-bottom: var(--autocompletebox-padding-bottom);
+  padding-left: var(--autocompletebox-padding-left);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+}
+
+:host([is-drop-down-open]) [part="caret"] {
+  transform: rotate(180deg);
+}
+
+:host([readonly]) [part="input"] {
+  pointer-events: none;
+}
+
+:host([appearance="plain"]) {
+  --autocompletebox-border-width: 0;
+  --autocompletebox-background-color: var(--joy-scheme-transparent);
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-outward-offset: 0px;
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="popup"], :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --autocompletebox-border-color: var(--joy-color-neutral-500);
 }
 
-:host li:hover {
-  background-color: var(--hover-background-color, #f0f0f0);
+[part="item"].highlighted {
+  background-color: var(--joy-scheme-highlight);
 }
 
-:host input, :host ul {
-  border: 1px solid var(--joy-scheme-highlight);
+[part="item"]:hover {
+  background-color: var(--joy-color-primary-100);
 }
 
     `;

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AutoCompleteBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,8BAA8B;IAC1C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmMT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kCAAkC,IAAI,SAAS,CAoH9D"}
+{"version":3,"file":"AutoCompleteBoxElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,kCAAkC,IAAI,SAAS,CA6L9D"}

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.js

@@ -14,31 +14,31 @@ export function autoCompleteBoxElementMemphisStyle() {
     return css `
 :host {
   --autocompletebox-background-color: var(--memphis-scheme-background);
-  --autocompletebox-border-color: var(--memphis-scheme-highlight);
-  --autocompletebox-border-radius: var(--memphis-layout-radius);
+  --autocompletebox-border-color: var(--memphis-color-light-secondary-400);
+  --autocompletebox-border-radius: calc(var(--memphis-layout-radius) * 1.5);
   --autocompletebox-border-style: solid;
   --autocompletebox-border-width: var(--memphis-layout-thickness);
-  --autocompletebox-font-family: unset;
-  --autocompletebox-font-letter-spacing: unset;
-  --autocompletebox-font-line-height: unset;
-  --autocompletebox-font-size: unset;
-  --autocompletebox-font-text-decoration: unset;
-  --autocompletebox-font-text-transform: unset;
-  --autocompletebox-font-weight: unset;
+  --autocompletebox-focus-ring-active-width: 8px;
+  --autocompletebox-focus-ring-color: var(--memphis-color-light-secondary-400);
+  --autocompletebox-focus-ring-inward-offset: 2px;
+  --autocompletebox-focus-ring-outward-offset: 2px;
+  --autocompletebox-font-family: var(--memphis-font-family);
+  --autocompletebox-font-letter-spacing: var(--memphis-typography-body2-letter-spacing);
+  --autocompletebox-font-line-height: var(--memphis-typography-body2-line-height);
+  --autocompletebox-font-size: var(--memphis-typography-body2-font-size);
+  --autocompletebox-font-text-decoration: var(--memphis-typography-body2-text-decoration);
+  --autocompletebox-font-text-transform: var(--memphis-typography-body2-text-transform);
+  --autocompletebox-font-weight: var(--memphis-typography-body2-font-weight);
   --autocompletebox-foreground-color: var(--memphis-scheme-foreground);
-  --autocompletebox-gap: unset;
-  --autocompletebox-padding-bottom: unset;
-  --autocompletebox-padding-left: unset;
-  --autocompletebox-padding-right: unset;
-  --autocompletebox-padding-top: unset;
-  --autocompletebox-shadow-blur: unset;
-  --autocompletebox-shadow-color: unset;
-  --autocompletebox-shadow-offset-x: unset;
-  --autocompletebox-shadow-offset-y: unset;
-  --autocompletebox-shadow-spread: unset;
-  --autocompletebox-transition-duration: unset;
-  --autocompletebox-transition-mode: unset;
-  --autocompletebox-transition-property: unset;
+  --autocompletebox-gap: calc(var(--memphis-layout-space) / 2);
+  --autocompletebox-padding-bottom: calc(var(--memphis-layout-space) / 2);
+  --autocompletebox-padding-left: calc(var(--memphis-layout-space) * 1.5);
+  --autocompletebox-padding-right: calc(var(--memphis-layout-space) * 1.5);
+  --autocompletebox-padding-top: calc(var(--memphis-layout-space) / 2);
+  --autocompletebox-shadow: unset;
+  --autocompletebox-transition-duration: var(--memphis-duration-short);
+  --autocompletebox-transition-mode: ease;
+  --autocompletebox-transition-property: all;
   --autocompletebox-translate: unset;
 }
 
@@ -77,52 +77,125 @@ export function autoCompleteBoxElementMemphisStyle() {
   -webkit-text-decoration: var(--autocompletebox-font-text-decoration);
   text-decoration: var(--autocompletebox-font-text-decoration);
   text-transform: var(--autocompletebox-font-text-transform);
-  padding-top: var(--autocompletebox-padding-top);
-  padding-right: var(--autocompletebox-padding-right);
-  padding-bottom: var(--autocompletebox-padding-bottom);
-  padding-left: var(--autocompletebox-padding-left);
-  gap: var(--autocompletebox-gap);
   transition-duration: var(--autocompletebox-transition-duration);
   transition-timing-function: var(--autocompletebox-transition-mode);
   transition-property: var(--autocompletebox-transition-property);
   translate: var(--autocompletebox-translate);
   background-color: var(--autocompletebox-background-color);
   color: var(--autocompletebox-foreground-color);
+  box-shadow: var(--autocompletebox-shadow);
   border-color: var(--autocompletebox-border-color);
-  border-width: var(--autocompletebox-border-width);
   border-radius: var(--autocompletebox-border-radius);
-  border-style: var(--autocompletebox-border-style);
-  box-shadow: var(--autocompletebox-shadow-offset-x) var(--autocompletebox-shadow-offset-y) var(--autocompletebox-shadow-blur) var(--autocompletebox-shadow-spread) var(--autocompletebox-shadow-color);
-  box-sizing: border-box;
-  display: block;
-  position: relative;
+  cursor: text;
 }
 
-:host input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 6px 8px;
+:host [part="focusRing"] {
+  --focus-ring-color: var(--autocompletebox-focus-ring-color);
+  --focus-ring-active-width: var(--autocompletebox-focus-ring-active-width);
+  --focus-ring-inward-offset: var(--autocompletebox-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--autocompletebox-focus-ring-outward-offset);
+}
+
+:host [part="input"] {
+  cursor: inherit;
 }
 
-:host ul {
-  max-height: var(--max-dropdown-height, 350px);
-  background: var(--background-color, #fff);
+:host [part="input"][readonly]:not([invalid]) {
+  --textbox-border-color: var(--autocompletebox-border-color);
+}
+
+:host [part="input"]::part(suffix) {
+  --button-icon-min-width: 36px;
+  --button-icon-min-height: 36px;
+  --icon-size: 20px;
+}
+
+:host [part="caret"] {
+  margin: calc(var(--autocompletebox-gap) / 2);
+  transition-property: transform;
+  transition-duration: .2s;
+  transition-timing-function: ease;
+  transform: rotate(0);
+}
+
+:host [part="popup"] {
+  z-index: 100;
+}
+
+:host [part="projection"] {
+  padding: var(--autocompletebox-padding-top) 0;
+  background: var(--autocompletebox-background-color);
+  border-radius: var(--autocompletebox-border-radius);
   box-sizing: border-box;
-  width: 100%;
   margin: 0;
-  padding: 0;
-  list-style-type: none;
-  position: absolute;
-  overflow: auto;
 }
 
-:host li {
-  cursor: pointer;
-  padding: 8px;
+:host [part="item"] {
+  border-radius: 0;
+}
+
+:host [part="empty"], :host [part="loading"] {
+  padding-top: var(--autocompletebox-padding-top);
+  padding-right: var(--autocompletebox-padding-right);
+  padding-bottom: var(--autocompletebox-padding-bottom);
+  padding-left: var(--autocompletebox-padding-left);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+}
+
+:host([is-drop-down-open]) [part="caret"] {
+  transform: rotate(180deg);
+}
+
+:host([readonly]) [part="input"] {
+  pointer-events: none;
+}
+
+:host [part="focusRing"] {
+  --focus-ring-inward-offset: var(--autocompletebox-focus-ring-inward-offset);
+  --focus-ring-outward-offset: var(--autocompletebox-focus-ring-outward-offset);
+  --focus-ring-border-color: var(--autocompletebox-focus-ring-color);
+}
+
+:host([appearance="plain"]) {
+  --autocompletebox-border-width: 0;
+  --autocompletebox-background-color: var(--memphis-scheme-transparent);
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-inward-offset: 0px;
+  --focus-ring-outward-offset: 0px;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover) {
+  --autocompletebox-border-color: var(--memphis-color-secondary-300);
+}
+
+:host(:not([disabled]:not([disabled="false"])):focus-within) {
+  --autocompletebox-border-color: var(--memphis-color-secondary-400);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) {
+  --autocompletebox-border-color: var(--memphis-color-danger-500);
+  --autocompletebox-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="focusRing"] {
+  --focus-ring-border-color: var(--memphis-color-danger-500);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="popup"] {
+  --autocompletebox-border-color: var(--memphis-color-danger-500);
+}
+
+[part="item"].highlighted {
+  background-color: var(--memphis-color-secondary-100);
 }
 
-:host li:hover {
-  background-color: var(--hover-background-color, #f0f0f0);
+[part="item"]:hover {
+  background-color: var(--memphis-color-secondary-200);
 }
 
     `;

package/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kCAAkC;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AutoCompleteBoxElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/AutoCompleteBox/Themes/AutoCompleteBoxElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kCAAkC;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2LT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/ColorBox/ColorBoxElement.d.ts

@@ -4,6 +4,7 @@ import { ISlottable } from '../../../Behaviors/Slottable';
 import { InputBaseElement } from '../Abstracts/InputBase';
 import type { IColorBoxElementProps } from './IColorBoxElementProps';
 import { TextAlignment } from '../../../Types/TextAlignment';
+import { ColorFormat } from '../../../Types/ColorFormat';
 declare const ColorBoxElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Clearable").IClearableProps & import("../../../Behaviors/Clearable").IClearableEvents & IClearable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => IInvalidable & import("../../../Behaviors/Invalidable").IInvalidableProps<unknown>) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Valueable").IValueableProps<unknown>) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/DropDownable").IDropDownableProps & import("../../../Behaviors/DropDownable").IDropDownable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof InputBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
 /**
  * Color Box - A comprehensive color selection input with picker interface and palette support.
@@ -65,6 +66,10 @@ declare const ColorBoxElement_base: (abstract new (...args: Array<any>) => impor
  * @dependency mosaik-icon - Used for UI icons.
  *
  * @fires cleared - Fired when the value is cleared.
+ * @fires change - Emitted when the value changes.
+ * @fires input - Emitted when the value changes.
+ * @fires focus - Emitted when the element receives focus.
+ * @fires blur - Emitted when the element loses focus.
  *
  * @example
  * ```html
@@ -101,6 +106,7 @@ export declare class ColorBoxElement extends ColorBoxElement_base implements ICo
     private _autocomplete;
     private _swatches;
     private _textAlign;
+    private _format;
     /**
      * @public
      */
@@ -194,6 +200,15 @@ export declare class ColorBoxElement extends ColorBoxElement_base implements ICo
      */
     get textAlign(): TextAlignment;
     set textAlign(value: TextAlignment);
+    /**
+     * Gets or sets the color format to use for input and output.
+     * Supported formats: hex, hex8, rgb, rgba, hsl, hsla, hsv, hsva, oklch, oklab, lch, lab
+     *
+     * @public
+     * @attr
+     */
+    get format(): ColorFormat;
+    set format(value: ColorFormat);
     /**
      * Determines whether the element has a prefix or not.
      * The Prefix is a slot that is displayed before the input.
@@ -266,6 +281,13 @@ export declare class ColorBoxElement extends ColorBoxElement_base implements ICo
      * @override
      */
     onBlur(event: FocusEvent): void;
+    /**
+     * Handles final color selection (change event).
+     * Updates value and emits change event.
+     *
+     * @template
+     * @private
+     */
     onPick(_event: Event): void;
     protected onApplyTemplate(): void;
     /**

package/Controls/Components/Inputs/ColorBox/ColorBoxElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorBoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/ColorBox/ColorBoxElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAGrE,OAAO,EAAe,KAAK,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEhF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAarE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAKrE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,qBAwBa,eACT,SAAQ,oBACR,YAAW,qBAAqB,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU;IAItE,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,SAAS,CAAgB;IACjC,OAAO,CAAC,UAAU,CAAgB;IAMlC;;OAEG;;IA0BH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACoB,KAAK,IAAI,MAAM,CAElC;IAED,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,EAKtC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IAIoB,SAAS,IAAI,OAAO,CAEvC;IAED,IAAoB,SAAS,CAAC,KAAK,EAAE,OAAO,EAK3C;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IAED,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAK/B;IAED;;;;;OAKG;IACH,IACW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAKnC;IAED;;;;;OAKG;IACH,IAIW,YAAY,IAAI,OAAO,CAEjC;IAED,IAAW,YAAY,CAAC,KAAK,EAAE,OAAO,EAKrC;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,CAEnC;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAKvC;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,aAAa,CAEpC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,aAAa,EAKxC;IAED;;;;;;;OAOG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAED;;;;;;;OAOG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IAMD;;;OAGG;IACa,KAAK,IAAI,IAAI;IAM7B;;;OAGG;IACa,IAAI,IAAI,IAAI;IAM5B;;;;;OAKG;IACa,KAAK,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;IAa/C;;;;;OAKG;IACa,KAAK,IAAI,IAAI;IAM7B;;;;;OAKG;IACa,aAAa,IAAI,OAAO;IAMxC;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKnC;;;;OAIG;IACa,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAOhD;;;;OAIG;IACa,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMhD;;;;OAIG;IACa,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAMxC,MAAM,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;cAKf,eAAe,IAAI,IAAI;IAO1C;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;CAUnF;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,eAAe,CAAC;KACtC;CACJ"}
+{"version":3,"file":"ColorBoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/ColorBox/ColorBoxElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Inputs/ColorBox/ColorBoxElement.js

@@ -35,6 +35,8 @@ import { colorBoxElementMemphisStyle } from './Themes/ColorBoxElement.Memphis';
 import { colorBoxElementCosmopolitanStyle } from './Themes/ColorBoxElement.Cosmopolitan';
 import { Themeable } from '../../../Behaviors/Themeable';
 import { TextAlignment } from '../../../Types/TextAlignment';
+import { ColorFormat } from '../../../Types/ColorFormat';
+import { ColorUtils } from './ColorUtils';
 // #endregion
 /**
  * Color Box - A comprehensive color selection input with picker interface and palette support.
@@ -96,6 +98,10 @@ import { TextAlignment } from '../../../Types/TextAlignment';
  * @dependency mosaik-icon - Used for UI icons.
  *
  * @fires cleared - Fired when the value is cleared.
+ * @fires change - Emitted when the value changes.
+ * @fires input - Emitted when the value changes.
+ * @fires focus - Emitted when the element receives focus.
+ * @fires blur - Emitted when the element loses focus.
  *
  * @example
  * ```html
@@ -133,6 +139,7 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
     _autocomplete;
     _swatches;
     _textAlign;
+    _format;
     // #endregion
     // #region Ctor
     /**
@@ -148,12 +155,12 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
         this._pattern = '';
         this._placeholder = '';
         this._autocomplete = false;
+        this._format = ColorFormat.Hex;
         this._clickOutsideController = new ClickOutsideController(this, {
             // ignored: [this._floatingElement], // TODO: implement
             skipInitial: true,
             callback: () => this.close()
         });
-        this._pattern = '#([A-Fa-f0-9]{3,4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})';
         this._swatches = ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B'];
         this._textAlign = TextAlignment.Right;
     }
@@ -320,6 +327,23 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
             this.requestUpdate('textAlign');
         }
     }
+    /**
+     * Gets or sets the color format to use for input and output.
+     * Supported formats: hex, hex8, rgb, rgba, hsl, hsla, hsv, hsva, oklch, oklab, lch, lab
+     *
+     * @public
+     * @attr
+     */
+    get format() {
+        return this._format;
+    }
+    set format(value) {
+        if (this._format !== value) {
+            this._format = value;
+            this._pattern = ColorUtils.getPatternForFormat(value);
+            this.requestUpdate('format');
+        }
+    }
     /**
      * Determines whether the element has a prefix or not.
      * The Prefix is a slot that is displayed before the input.
@@ -405,7 +429,15 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
      * @protected
      */
     onChange(event) {
-        this.value = event.target.value;
+        const rawValue = event.target.value;
+        let value = '';
+        if (!rawValue || !ColorUtils.isValidColor(rawValue)) {
+            value = rawValue;
+        }
+        else {
+            value = ColorUtils.convertColor(rawValue, this._format);
+        }
+        this.value = value;
         this.emit('change', { detail: this.value });
     }
     /**
@@ -415,7 +447,9 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
      */
     onInput(event) {
         super.onInput(event);
-        this.value = event.target.value;
+        const rawValue = event.target.value;
+        // During input, we don't convert to avoid disrupting user typing
+        this.value = rawValue;
         this.emit('input', { detail: this.value });
     }
     /**
@@ -434,11 +468,32 @@ let ColorBoxElement = class ColorBoxElement extends Themeable(Slottable(Clearabl
      */
     onBlur(event) {
         super.onBlur(event);
+        // Convert to target format on blur if valid
+        if (this.value && ColorUtils.isValidColor(this.value)) {
+            this.value = ColorUtils.convertColor(this.value, this._format);
+        }
         this.emit('blur', { detail: event });
     }
+    /**
+     * Handles final color selection (change event).
+     * Updates value and emits change event.
+     *
+     * @template
+     * @private
+     */
     onPick(_event) {
-        this.value = this._colorPickerElement.value ?? '';
-        this.emit('change', { detail: this.value });
+        const pickedValue = this._colorPickerElement.value ?? '';
+        let value = '';
+        if (!pickedValue || !ColorUtils.isValidColor(pickedValue)) {
+            value = pickedValue;
+        }
+        else {
+            value = ColorUtils.convertColor(pickedValue, this._format);
+        }
+        if (this.value !== value) {
+            this.value = value;
+            this.emit('change', { detail: this.value });
+        }
     }
     onApplyTemplate() {
         super.onApplyTemplate();
@@ -519,6 +574,11 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], ColorBoxElement.prototype, "textAlign", null);
+__decorate([
+    Attribute({ type: ColorFormat }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorBoxElement.prototype, "format", null);
 __decorate([
     Attribute({
         type: Boolean,