@breadstone/mosaik-elements-foundation 0.0.29 → 0.0.31

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js

@@ -246,14 +246,6 @@ export function textBoxElementJoyStyle() {
   color: var(--joy-scheme-middlelight);
 }
 
-:host [part="suffix"]:not([empty]) {
-  margin-right: var(--joy-layout-space);
-}
-
-:host [part="prefix"]:not([empty]) {
-  margin-left: var(--joy-layout-space);
-}
-
 :host [part="inner"] [part="input"]::-moz-selection {
   background-color: var(--joy-scheme-selection);
 }

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAobT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TextBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4aT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/TimeBox/ITimeBoxElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ITimeBoxElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/TimeBox/ITimeBoxElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAIlE;;;;GAIG;AACH,MAAM,WAAW,oBACb,SAAQ,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe;IAE/L,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB,QAAQ,EAAE,OAAO,CAAC;IAElB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IAEb,WAAW,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,OAAO,CAAC;IAEtB,OAAO,EAAE,OAAO,CAAC;IAEjB,cAAc,EAAE,OAAO,CAAC;IAExB,UAAU,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE/B,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE1B,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE1B,aAAa,EAAE,iBAAiB,CAAC;IAEjC,SAAS,EAAE,aAAa,CAAC;CAE5B"}
+{"version":3,"file":"ITimeBoxElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/TimeBox/ITimeBoxElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAIlE;;;;GAIG;AACH,MAAM,WAAW,oBACb,SAAQ,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe;IAI/L,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IAExB,QAAQ,EAAE,OAAO,CAAC;IAElB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IAEb,WAAW,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,OAAO,CAAC;IAEtB,OAAO,EAAE,OAAO,CAAC;IAEjB,cAAc,EAAE,OAAO,CAAC;IAExB,UAAU,EAAE,OAAO,CAAC;IAEpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE/B,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE1B,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE1B,aAAa,EAAE,iBAAiB,CAAC;IAEjC,SAAS,EAAE,aAAa,CAAC;CAI5B"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAiP3D"}
+{"version":3,"file":"TimeBoxElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAgP3D"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.js

@@ -95,7 +95,6 @@ export function timeBoxElementCosmopolitanStyle() {
   outline: none;
   flex-direction: row;
   align-items: center;
-  padding: 4px;
   display: flex;
 }
 

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+OT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimeBoxElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Cosmopolitan.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,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8OT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CA8alD"}
+{"version":3,"file":"TimeBoxElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAmalD"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.js

@@ -95,7 +95,6 @@ export function timeBoxElementJoyStyle() {
   outline: none;
   flex-direction: row;
   align-items: center;
-  padding: 4px;
   display: flex;
 }
 
@@ -246,20 +245,10 @@ export function timeBoxElementJoyStyle() {
   text-align: right;
 }
 
-:host [part="prefix"]:not([empty]) {
-  margin-right: var(--joy-layout-space);
-  margin-left: var(--joy-layout-space);
-}
-
 :host [part="label"] {
   color: var(--joy-scheme-middlelight);
 }
 
-:host [part="suffix"]:not([empty]) {
-  margin-right: var(--joy-layout-space);
-  margin-left: var(--joy-layout-space);
-}
-
 :host [part="input"]::-moz-selection {
   background-color: var(--joy-scheme-selection);
 }
@@ -273,7 +262,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host [part="menu"] [part="menuItem"][is-special]:before {
-  border: var(--calnedar-item-border-width) var(--calnedar-item-border-style) var(--joy-color-highlight-500);
+  border: var(--calendar-item-border-width) var(--calendar-item-border-style) var(--joy-color-highlight-500);
 }
 
 :host([disabled]:not([disabled="false"])), :host([readonly]) {
@@ -300,7 +289,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-primary-500);
+  --timebox-border-color: var(--joy-color-primary-500);
 }
 
 :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -316,7 +305,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-secondary-500);
+  --timebox-border-color: var(--joy-color-secondary-500);
 }
 
 :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -332,7 +321,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-tertiary-500);
+  --timebox-border-color: var(--joy-color-tertiary-500);
 }
 
 :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -348,7 +337,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-danger-500);
+  --timebox-border-color: var(--joy-color-danger-500);
 }
 
 :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -364,7 +353,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-warning-500);
+  --timebox-border-color: var(--joy-color-warning-500);
 }
 
 :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -380,7 +369,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-success-500);
+  --timebox-border-color: var(--joy-color-success-500);
 }
 
 :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -396,7 +385,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-info-500);
+  --timebox-border-color: var(--joy-color-info-500);
 }
 
 :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -412,7 +401,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-highlight-500);
+  --timebox-border-color: var(--joy-color-highlight-500);
 }
 
 :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
@@ -428,7 +417,7 @@ export function timeBoxElementJoyStyle() {
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
-  --timebox-border-color: vvar(--joy-color-neutral-500);
+  --timebox-border-color: var(--joy-color-neutral-500);
 }
 
 :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4aT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimeBoxElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.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,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiaT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAoPpD"}
+{"version":3,"file":"TimeBoxElement.Retro.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAkPpD"}

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.js

@@ -34,7 +34,6 @@ export function timeBoxElementRetroStyle() {
   --timebox-border-radius: unset;
   --timebox-border-style: unset;
   --timebox-border-width: unset;
-  --timebox-calnedar-item-background-color: unset;
   --timebox-color: unset;
   --timebox-foreground-color: unset;
   --timebox-height: unset;
@@ -98,7 +97,6 @@ export function timeBoxElementRetroStyle() {
   outline: none;
   flex-direction: row;
   align-items: center;
-  padding: 4px;
   display: flex;
 }
 

package/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkPT,CAAC;AACN,CAAC"}
+{"version":3,"file":"TimeBoxElement.Retro.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Inputs/TimeBox/Themes/TimeBoxElement.Retro.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgPT,CAAC;AACN,CAAC"}

package/Controls/Components/Inputs/TimeBox/TimeBoxElement.d.ts

@@ -18,8 +18,12 @@ declare const TimeBoxElement_base: (abstract new (...args: Array<any>) => import
  * It provides a user-friendly interface for choosing time in digital clock format or using dropdowns for each time unit.
  * Time boxes are commonly used in scheduling applications, forms, and date pickers.
  *
+ *
  * @category Forms
  *
+ * @keyhandle UpArrow - Selects the previous time unit.
+ * @keyhandle DownArrow - Selects the next time unit.
+ *
  * @example
  * ```html
  * <mosaik-timebox></mosaik-timebox>
@@ -29,6 +33,8 @@ declare const TimeBoxElement_base: (abstract new (...args: Array<any>) => import
  */
 export declare class TimeBoxElement extends TimeBoxElement_base implements ITimeBoxElementProps, IDropDownable, IInvalidable, IClearable, ISlottable {
     private readonly _clickOutsideController;
+    private readonly _keyboardController;
+    private _popup;
     private _interval;
     private _value;
     private _readonly;
@@ -171,6 +177,14 @@ export declare class TimeBoxElement extends TimeBoxElement_base implements ITime
      */
     get textAlign(): TextAlignment;
     set textAlign(value: TextAlignment);
+    /**
+     * A handler that gets date and returns null or a tuple with circled marker data. See {@link TimeMarkerData}.
+     *
+     * @public
+     * @attr
+     */
+    get markerHandler(): TimeMarkerHandler;
+    set markerHandler(value: TimeMarkerHandler);
     /**
      * Determines whether the element has a prefix or not.
      * The Prefix is a slot that is displayed before the input.
@@ -190,18 +204,22 @@ export declare class TimeBoxElement extends TimeBoxElement_base implements ITime
      */
     get hasSuffix(): boolean;
     /**
-     * A handler that gets date and returns null or a tuple with circled marker data. See {@link TimeMarkerData}.
+     * @public
+     * @override
+     */
+    connectedCallback(): void;
+    /**
+     * Selects the next time span in the list.
      *
      * @public
-     * @attr
      */
-    get markerHandler(): TimeMarkerHandler;
-    set markerHandler(value: TimeMarkerHandler);
+    selectNext(): void;
     /**
+     * Selects the previous time span in the list.
+     *
      * @public
-     * @override
      */
-    connectedCallback(): void;
+    selectPrevious(): void;
     /**
      * Sets focus on the input.
      *
@@ -262,13 +280,23 @@ export declare class TimeBoxElement extends TimeBoxElement_base implements ITime
     onBlur(event: FocusEvent): void;
     /**
      * @protected
+     * @template
      */
-    protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void;
+    onKeyDown(event: KeyboardEvent): void;
     /**
      * @private
      * @template
      */
     setTimeSpan(value: ITimeSpan): void;
+    /**
+     * @protected
+     * @override
+     */
+    protected onApplyTemplate(): void;
+    /**
+     * @protected
+     */
+    protected onIsDropDownOpenPropertyChanged(_prev?: boolean, next?: boolean): void;
 }
 /**
  * @public

package/Controls/Components/Inputs/TimeBox/TimeBoxElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeBoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/TimeBox/TimeBoxElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TimeBoxElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Inputs/TimeBox/TimeBoxElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Inputs/TimeBox/TimeBoxElement.js

@@ -25,20 +25,21 @@ import { Component } from '../../../Decorators/ComponentDecorator';
 import { Property } from '../../../Decorators/PropertyDecorator';
 import { Watch } from '../../../Decorators/WatchDecorator';
 import { ITimeSpan } from '../../../Types/TimeSpan';
-import { IconElement } from '../../Media/Icon/IconElement';
 import { FloatingElement } from '../../Primitives/Floating/FloatingElement';
 import { FocusRingElement } from '../../Primitives/FocusRing/FocusRingElement';
-import { PopupElement } from '../../Primitives/Popup/PopupElement';
 import { MenuElement } from '../../Selectors/Menu/MenuElement';
 import { MenuItemElement } from '../../Selectors/Menu/MenuItemElement';
 import { InputBaseElement } from '../Abstracts/InputBase';
-import { CalendarElement } from '../Calendar/CalendarElement';
 import { timeBoxElementTemplate } from './TimeBoxElementTemplate';
 import { timeBoxElementJoyStyle } from './Themes/TimeBoxElement.Joy';
 import { timeBoxElementRetroStyle } from './Themes/TimeBoxElement.Retro';
 import { timeBoxElementCosmopolitanStyle } from './Themes/TimeBoxElement.Cosmopolitan';
 import { Themeable } from '../../../Behaviors/Themeable';
 import { TextAlignment } from '../../../Types/TextAlignment';
+import { PortalElement } from '../../Primitives/Portal/PortalElement';
+import { Key, KeyName } from '../../../../Controls/Types/Key';
+import { KeyboardController } from '../../../Controllers/KeyboardController';
+import { ButtonElement } from '../../Buttons/Button/ButtonElement';
 // #endregion
 /**
  * Time Box - A user interface component for selecting time values.
@@ -50,8 +51,12 @@ import { TextAlignment } from '../../../Types/TextAlignment';
  * It provides a user-friendly interface for choosing time in digital clock format or using dropdowns for each time unit.
  * Time boxes are commonly used in scheduling applications, forms, and date pickers.
  *
+ *
  * @category Forms
  *
+ * @keyhandle UpArrow - Selects the previous time unit.
+ * @keyhandle DownArrow - Selects the next time unit.
+ *
  * @example
  * ```html
  * <mosaik-timebox></mosaik-timebox>
@@ -62,6 +67,8 @@ import { TextAlignment } from '../../../Types/TextAlignment';
 let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(Localeable(Disableable(Invalidable(Valueable(Variantable(Appearanceable(DropDownable(Labelable(InputBaseElement))))))))))) {
     // #region Fields
     _clickOutsideController;
+    _keyboardController;
+    _popup;
     _interval;
     _value;
     _readonly;
@@ -105,6 +112,7 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
             skipInitial: true,
             callback: () => this.close()
         });
+        this._keyboardController = new KeyboardController(this, {});
     }
     // #endregion
     // #region Properties
@@ -329,6 +337,21 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
             this.requestUpdate('textAlign');
         }
     }
+    /**
+     * A handler that gets date and returns null or a tuple with circled marker data. See {@link TimeMarkerData}.
+     *
+     * @public
+     * @attr
+     */
+    get markerHandler() {
+        return this._markerHandler;
+    }
+    set markerHandler(value) {
+        if (this._markerHandler !== value) {
+            this._markerHandler = value;
+            this.requestUpdate('markerHandler');
+        }
+    }
     /**
      * Determines whether the element has a prefix or not.
      * The Prefix is a slot that is displayed before the input.
@@ -351,21 +374,6 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
     get hasSuffix() {
         return this.hasSlotContent('suffix');
     }
-    /**
-     * A handler that gets date and returns null or a tuple with circled marker data. See {@link TimeMarkerData}.
-     *
-     * @public
-     * @attr
-     */
-    get markerHandler() {
-        return this._markerHandler;
-    }
-    set markerHandler(value) {
-        if (this._markerHandler !== value) {
-            this._markerHandler = value;
-            this.requestUpdate('markerHandler');
-        }
-    }
     // #endregion
     // #region Methods
     /**
@@ -375,6 +383,61 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
     connectedCallback() {
         super.connectedCallback();
         this.on('click', () => this.focus());
+        this._keyboardController
+            .add([Key.UpArrow], () => this.selectPrevious(), undefined, { preventDefault: true })
+            .add([Key.DownArrow], () => this.selectNext(), undefined, { preventDefault: true })
+            .add([Key.Space, Key.Enter], () => this.toggle(), undefined, { preventDefault: true })
+            .add([Key.Escape], () => {
+            if (this.isDropDownOpen) {
+                this.close();
+            }
+            else {
+                this.clear();
+            }
+        }, undefined, { preventDefault: true })
+            .add([Key.Tab], () => this.close());
+    }
+    /**
+     * Selects the next time span in the list.
+     *
+     * @public
+     */
+    selectNext() {
+        const allItems = DomServiceLocator.current.findDescendants(this._popup, MenuItemElement.is) ?? [];
+        const currentIndex = allItems.findIndex((item) => ITimeSpan.equals(this.value, item.value));
+        let nextValue = null;
+        // if the current index is -1, it means that the value is not in the list
+        // in this case, we select the first item
+        if (currentIndex === -1) {
+            nextValue = allItems.at(0)?.value;
+        }
+        else {
+            nextValue = allItems.at(currentIndex + 1)?.value ?? allItems.at(0)?.value;
+        }
+        if (nextValue) {
+            this.setTimeSpan(nextValue);
+        }
+    }
+    /**
+     * Selects the previous time span in the list.
+     *
+     * @public
+     */
+    selectPrevious() {
+        const allItems = DomServiceLocator.current.findDescendants(this._popup, MenuItemElement.is) ?? [];
+        const currentIndex = allItems.findIndex((item) => ITimeSpan.equals(this.value, item.value));
+        let nextValue = null;
+        // if the current index is -1, it means that the value is not in the list
+        // in this case, we select the first item
+        if (currentIndex === -1) {
+            nextValue = allItems.at(0)?.value;
+        }
+        else {
+            nextValue = allItems.at(currentIndex - 1)?.value;
+        }
+        if (nextValue) {
+            this.setTimeSpan(nextValue);
+        }
     }
     /**
      * Sets focus on the input.
@@ -445,7 +508,7 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
      * @template
      */
     onChange(event) {
-        this.value = event.target.value;
+        this.value = ITimeSpan.parse(event.target.value, this.locale);
         this.emit('change', { detail: this.value });
     }
     /**
@@ -478,13 +541,14 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
     }
     /**
      * @protected
+     * @template
      */
-    onIsDropDownOpenPropertyChanged(_prev, next) {
-        if (next) {
-            this._clickOutsideController.observe();
-        }
-        else {
-            this._clickOutsideController.unobserve();
+    onKeyDown(event) {
+        // we need to override the default behavior of the HTMLInputElement
+        if (event.key === KeyName.ArrowUp || event.key === KeyName.ArrowDown) {
+            event.preventDefault();
+            // delegate to the keyboard controller
+            this._keyboardController.handle(event);
         }
     }
     /**
@@ -496,6 +560,25 @@ let TimeBoxElement = class TimeBoxElement extends Themeable(Slottable(Clearable(
         this.emit('change', { detail: this.value });
         this.close();
     }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        this._popup = this.getTemplatePart('popup');
+    }
+    /**
+     * @protected
+     */
+    onIsDropDownOpenPropertyChanged(_prev, next) {
+        if (next) {
+            this._clickOutsideController.observe();
+        }
+        else {
+            this._clickOutsideController.unobserve();
+        }
+    }
 };
 __decorate([
     Attribute({ type: Object }),
@@ -503,17 +586,26 @@ __decorate([
     __metadata("design:paramtypes", [Object])
 ], TimeBoxElement.prototype, "value", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], TimeBoxElement.prototype, "readonly", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], TimeBoxElement.prototype, "required", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], TimeBoxElement.prototype, "autofocus", null);
@@ -528,12 +620,18 @@ __decorate([
     __metadata("design:paramtypes", [String])
 ], TimeBoxElement.prototype, "placeholder", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], TimeBoxElement.prototype, "autocomplete", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], TimeBoxElement.prototype, "isEditable", null);
@@ -568,20 +666,26 @@ __decorate([
     __metadata("design:paramtypes", [String])
 ], TimeBoxElement.prototype, "textAlign", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Property({ type: Function }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function])
+], TimeBoxElement.prototype, "markerHandler", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TimeBoxElement.prototype, "hasPrefix", null);
 __decorate([
-    Attribute({ type: Boolean, useDefault: true }),
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TimeBoxElement.prototype, "hasSuffix", null);
-__decorate([
-    Property({ type: Function }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function])
-], TimeBoxElement.prototype, "markerHandler", null);
 __decorate([
     Watch('isDropDownOpen', { waitUntilFirstUpdate: true }),
     __metadata("design:type", Function),
@@ -605,13 +709,12 @@ TimeBoxElement = __decorate([
             delegatesFocus: true
         },
         imports: [
-            IconElement,
-            PopupElement,
-            CalendarElement,
+            ButtonElement,
             FocusRingElement,
             FloatingElement,
             MenuElement,
-            MenuItemElement
+            MenuItemElement,
+            PortalElement
         ]
     }),
     __metadata("design:paramtypes", [])