@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

package/dist/collection/components/kup-card/kup-card.css

@@ -1,57 +1,67 @@
-.builtin-layout-1 {
+.built-in-layout-1 {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
   padding: 0.5em;
 }
-.builtin-layout-1 .section-1 {
+.built-in-layout-1 .section-1 {
   box-sizing: border-box;
   height: 5em;
   overflow: auto;
   padding-bottom: 1em;
   width: 100%;
 }
-.builtin-layout-1 .section-1 .sub-1 {
+.built-in-layout-1 .section-1 .sub-1 {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
-.builtin-layout-1 .section-2 {
+.built-in-layout-1 .section-2 {
   height: calc(100% - 60px);
   overflow: auto;
   width: 100%;
 }
-.builtin-layout-1 .prev-page {
+.built-in-layout-1 .prev-page {
   margin-left: auto;
 }
-.builtin-layout-1 .change-view-button {
+.built-in-layout-1 .change-view-button {
   margin: auto;
   width: 12em;
   text-align: center;
 }
-.builtin-layout-1 #change-view-button button {
+.built-in-layout-1 #change-view-button button {
   text-transform: capitalize;
 }
-.builtin-layout-1 .next-page {
+.built-in-layout-1 .next-page {
   margin-right: auto;
 }
-.builtin-layout-1 .calendar {
+.built-in-layout-1 .calendar {
   border-collapse: collapse;
   width: 100%;
 }
-.builtin-layout-1 thead {
+.built-in-layout-1 thead {
   border-bottom: 1px solid var(--kup-border-color);
 }
-.builtin-layout-1 .item-text {
+.built-in-layout-1 .item-text {
   color: rgba(var(--kup-text-color-rgb), 0.5);
 }
-.builtin-layout-1 .item {
+.built-in-layout-1 .item {
   text-align: center;
 }
-.builtin-layout-1 .item:not(.selected) .item-number:hover {
+.built-in-layout-1 .item:not(.selected) .item-number:hover {
   background-color: var(--kup-hover-background-color);
 }
-.builtin-layout-1 .item.selected .item-number, .builtin-layout-1 .item.selected .item-number:hover {
+.built-in-layout-1 .item.selected .item-number, .built-in-layout-1 .item.selected .item-number:hover {
   background-color: rgba(var(--kup-primary-color-rgb), 0.175);
 }
-.builtin-layout-1 .item-number {
+.built-in-layout-1 .item-number {
   border-radius: 50%;
   cursor: pointer;
   display: flex;
@@ -63,7 +73,19 @@
   text-transform: capitalize;
 }
 
-.builtin-layout-2 .clock {
+.built-in-layout-2 {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+.built-in-layout-2 .clock {
   box-shadow: var(--kup-box-shadow);
   width: 300px;
   height: 450px;
@@ -71,7 +93,7 @@
   position: relative;
   font-family: var(--kup-font-family);
 }
-.builtin-layout-2 .top {
+.built-in-layout-2 .top {
   background-color: var(--kup-primary-color);
   color: var(--kup-text-on-primary-color);
   height: 100px;
@@ -79,15 +101,15 @@
   font-size: 50px;
   text-align: center;
 }
-.builtin-layout-2 .top span {
+.built-in-layout-2 .top span {
   cursor: pointer;
   opacity: 0.75;
   transition: 0.25s ease-in-out;
 }
-.builtin-layout-2 .top .visible {
+.built-in-layout-2 .top .visible {
   opacity: 1;
 }
-.builtin-layout-2 .circle {
+.built-in-layout-2 .circle {
   user-select: none;
   background-color: rgba(var(--kup-text-color-rgb), 0.1);
   width: 250px;
@@ -99,10 +121,10 @@
   box-sizing: border-box;
   display: none;
 }
-.builtin-layout-2 .circle.visible {
+.built-in-layout-2 .circle.visible {
   display: block;
 }
-.builtin-layout-2 .mid {
+.built-in-layout-2 .mid {
   position: absolute;
   left: calc(50% - 0px);
   top: calc(50% - 0px);
@@ -111,7 +133,7 @@
   border-radius: 10px;
   background-color: var(--kup-text-color);
 }
-.builtin-layout-2 .hour {
+.built-in-layout-2 .hour {
   position: absolute;
   height: 40px;
   line-height: 40px;
@@ -119,10 +141,10 @@
   border-radius: 40px;
   text-align: center;
 }
-.builtin-layout-2 .hour.selected {
+.built-in-layout-2 .hour.selected {
   z-index: 2;
 }
-.builtin-layout-2 .hour.selected::after {
+.built-in-layout-2 .hour.selected::after {
   content: "";
   z-index: -1;
   background-color: rgba(var(--kup-primary-color-rgb), 0.5);
@@ -135,7 +157,7 @@
   width: 101px;
   right: 50%;
 }
-.builtin-layout-2 .hour2 {
+.built-in-layout-2 .hour2 {
   z-index: 2;
   position: absolute;
   height: 30px;
@@ -145,7 +167,7 @@
   text-align: center;
   font-size: 14px;
 }
-.builtin-layout-2 .hour2.selected::after {
+.built-in-layout-2 .hour2.selected::after {
   content: "";
   background-color: rgba(var(--kup-primary-color-rgb), 0.5);
   height: 1px;
@@ -158,7 +180,7 @@
   right: 50%;
   z-index: -1;
 }
-.builtin-layout-2 .unit {
+.built-in-layout-2 .unit {
   position: absolute;
   height: 20px;
   line-height: 20px;
@@ -167,7 +189,7 @@
   text-align: center;
   font-size: 12px;
 }
-.builtin-layout-2 .unit.selected::after {
+.built-in-layout-2 .unit.selected::after {
   content: "";
   background-color: rgba(var(--kup-primary-color-rgb), 0.5);
   height: 1px;
@@ -179,24 +201,24 @@
   width: 101px;
   right: 50%;
 }
-.builtin-layout-2 .hour,
-.builtin-layout-2 .hour2,
-.builtin-layout-2 .unit {
+.built-in-layout-2 .hour,
+.built-in-layout-2 .hour2,
+.built-in-layout-2 .unit {
   cursor: pointer;
   transition: background-color 0.25s;
 }
-.builtin-layout-2 .hour:hover,
-.builtin-layout-2 .hour2:hover,
-.builtin-layout-2 .unit:hover {
+.built-in-layout-2 .hour:hover,
+.built-in-layout-2 .hour2:hover,
+.built-in-layout-2 .unit:hover {
   background-color: rgba(var(--kup-primary-color-rgb), 0.275);
 }
-.builtin-layout-2 .hour.selected,
-.builtin-layout-2 .hour2.selected,
-.builtin-layout-2 .unit.selected {
+.built-in-layout-2 .hour.selected,
+.built-in-layout-2 .hour2.selected,
+.built-in-layout-2 .unit.selected {
   background-color: var(--kup-primary-color);
   color: var(--kup-text-on-primary-color);
 }
-.builtin-layout-2 .actions {
+.built-in-layout-2 .actions {
   color: var(--kup-primary-color);
   font-weight: bold;
   font-size: 20px;
@@ -207,7 +229,7 @@
   box-sizing: border-box;
   bottom: 10px;
 }
-.builtin-layout-2 .action {
+.built-in-layout-2 .action {
   display: inline-block;
   width: 100px;
   text-align: center;
@@ -217,276 +239,531 @@
   cursor: pointer;
   border-radius: 2px;
 }
-.builtin-layout-2 .clock .actions .action:hover {
+.built-in-layout-2 .clock .actions .action:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
-.builtin-layout-2 .clock .actions .action:visible {
+.built-in-layout-2 .clock .actions .action:visible {
   background-color: rgba(0, 0, 0, 0.3);
 }
-.builtin-layout-2 .hour:nth-child(12):after {
+.built-in-layout-2 .hour:nth-child(12):after {
   transform: rotate(330deg);
 }
-.builtin-layout-2 .hour:nth-child(11):after {
+.built-in-layout-2 .hour:nth-child(11):after {
   transform: rotate(300deg);
 }
-.builtin-layout-2 .hour:nth-child(10):after {
+.built-in-layout-2 .hour:nth-child(10):after {
   transform: rotate(270deg);
 }
-.builtin-layout-2 .hour:nth-child(9):after {
+.built-in-layout-2 .hour:nth-child(9):after {
   transform: rotate(240deg);
 }
-.builtin-layout-2 .hour:nth-child(8):after {
+.built-in-layout-2 .hour:nth-child(8):after {
   transform: rotate(210deg);
 }
-.builtin-layout-2 .hour:nth-child(7):after {
+.built-in-layout-2 .hour:nth-child(7):after {
   transform: rotate(180deg);
 }
-.builtin-layout-2 .hour:nth-child(6):after {
+.built-in-layout-2 .hour:nth-child(6):after {
   transform: rotate(150deg);
 }
-.builtin-layout-2 .hour:nth-child(5):after {
+.built-in-layout-2 .hour:nth-child(5):after {
   transform: rotate(120deg);
 }
-.builtin-layout-2 .hour:nth-child(4):after {
+.built-in-layout-2 .hour:nth-child(4):after {
   transform: rotate(90deg);
 }
-.builtin-layout-2 .hour:nth-child(3):after {
+.built-in-layout-2 .hour:nth-child(3):after {
   transform: rotate(60deg);
 }
-.builtin-layout-2 .hour:nth-child(2):after {
+.built-in-layout-2 .hour:nth-child(2):after {
   transform: rotate(30deg);
 }
-.builtin-layout-2 .hour:nth-child(1):after {
+.built-in-layout-2 .hour:nth-child(1):after {
   transform: rotate(0deg);
 }
-.builtin-layout-2 .hour2:nth-child(24):after {
+.built-in-layout-2 .hour2:nth-child(24):after {
   transform: rotate(690deg);
 }
-.builtin-layout-2 .hour2:nth-child(23):after {
+.built-in-layout-2 .hour2:nth-child(23):after {
   transform: rotate(660deg);
 }
-.builtin-layout-2 .hour2:nth-child(22):after {
+.built-in-layout-2 .hour2:nth-child(22):after {
   transform: rotate(630deg);
 }
-.builtin-layout-2 .hour2:nth-child(21):after {
+.built-in-layout-2 .hour2:nth-child(21):after {
   transform: rotate(600deg);
 }
-.builtin-layout-2 .hour2:nth-child(20):after {
+.built-in-layout-2 .hour2:nth-child(20):after {
   transform: rotate(570deg);
 }
-.builtin-layout-2 .hour2:nth-child(19):after {
+.built-in-layout-2 .hour2:nth-child(19):after {
   transform: rotate(540deg);
 }
-.builtin-layout-2 .hour2:nth-child(18):after {
+.built-in-layout-2 .hour2:nth-child(18):after {
   transform: rotate(510deg);
 }
-.builtin-layout-2 .hour2:nth-child(17):after {
+.built-in-layout-2 .hour2:nth-child(17):after {
   transform: rotate(480deg);
 }
-.builtin-layout-2 .hour2:nth-child(16):after {
+.built-in-layout-2 .hour2:nth-child(16):after {
   transform: rotate(450deg);
 }
-.builtin-layout-2 .hour2:nth-child(15):after {
+.built-in-layout-2 .hour2:nth-child(15):after {
   transform: rotate(420deg);
 }
-.builtin-layout-2 .hour2:nth-child(14):after {
+.built-in-layout-2 .hour2:nth-child(14):after {
   transform: rotate(390deg);
 }
-.builtin-layout-2 .hour2:nth-child(13):after {
+.built-in-layout-2 .hour2:nth-child(13):after {
   transform: rotate(360deg);
 }
-.builtin-layout-2 .unit:nth-child(60):after {
+.built-in-layout-2 .unit:nth-child(60):after {
   transform: rotate(354deg);
 }
-.builtin-layout-2 .unit:nth-child(59):after {
+.built-in-layout-2 .unit:nth-child(59):after {
   transform: rotate(348deg);
 }
-.builtin-layout-2 .unit:nth-child(58):after {
+.built-in-layout-2 .unit:nth-child(58):after {
   transform: rotate(342deg);
 }
-.builtin-layout-2 .unit:nth-child(57):after {
+.built-in-layout-2 .unit:nth-child(57):after {
   transform: rotate(336deg);
 }
-.builtin-layout-2 .unit:nth-child(56):after {
+.built-in-layout-2 .unit:nth-child(56):after {
   transform: rotate(330deg);
 }
-.builtin-layout-2 .unit:nth-child(55):after {
+.built-in-layout-2 .unit:nth-child(55):after {
   transform: rotate(324deg);
 }
-.builtin-layout-2 .unit:nth-child(54):after {
+.built-in-layout-2 .unit:nth-child(54):after {
   transform: rotate(318deg);
 }
-.builtin-layout-2 .unit:nth-child(53):after {
+.built-in-layout-2 .unit:nth-child(53):after {
   transform: rotate(312deg);
 }
-.builtin-layout-2 .unit:nth-child(52):after {
+.built-in-layout-2 .unit:nth-child(52):after {
   transform: rotate(306deg);
 }
-.builtin-layout-2 .unit:nth-child(51):after {
+.built-in-layout-2 .unit:nth-child(51):after {
   transform: rotate(300deg);
 }
-.builtin-layout-2 .unit:nth-child(50):after {
+.built-in-layout-2 .unit:nth-child(50):after {
   transform: rotate(294deg);
 }
-.builtin-layout-2 .unit:nth-child(49):after {
+.built-in-layout-2 .unit:nth-child(49):after {
   transform: rotate(288deg);
 }
-.builtin-layout-2 .unit:nth-child(48):after {
+.built-in-layout-2 .unit:nth-child(48):after {
   transform: rotate(282deg);
 }
-.builtin-layout-2 .unit:nth-child(47):after {
+.built-in-layout-2 .unit:nth-child(47):after {
   transform: rotate(276deg);
 }
-.builtin-layout-2 .unit:nth-child(46):after {
+.built-in-layout-2 .unit:nth-child(46):after {
   transform: rotate(270deg);
 }
-.builtin-layout-2 .unit:nth-child(45):after {
+.built-in-layout-2 .unit:nth-child(45):after {
   transform: rotate(264deg);
 }
-.builtin-layout-2 .unit:nth-child(44):after {
+.built-in-layout-2 .unit:nth-child(44):after {
   transform: rotate(258deg);
 }
-.builtin-layout-2 .unit:nth-child(43):after {
+.built-in-layout-2 .unit:nth-child(43):after {
   transform: rotate(252deg);
 }
-.builtin-layout-2 .unit:nth-child(42):after {
+.built-in-layout-2 .unit:nth-child(42):after {
   transform: rotate(246deg);
 }
-.builtin-layout-2 .unit:nth-child(41):after {
+.built-in-layout-2 .unit:nth-child(41):after {
   transform: rotate(240deg);
 }
-.builtin-layout-2 .unit:nth-child(40):after {
+.built-in-layout-2 .unit:nth-child(40):after {
   transform: rotate(234deg);
 }
-.builtin-layout-2 .unit:nth-child(39):after {
+.built-in-layout-2 .unit:nth-child(39):after {
   transform: rotate(228deg);
 }
-.builtin-layout-2 .unit:nth-child(38):after {
+.built-in-layout-2 .unit:nth-child(38):after {
   transform: rotate(222deg);
 }
-.builtin-layout-2 .unit:nth-child(37):after {
+.built-in-layout-2 .unit:nth-child(37):after {
   transform: rotate(216deg);
 }
-.builtin-layout-2 .unit:nth-child(36):after {
+.built-in-layout-2 .unit:nth-child(36):after {
   transform: rotate(210deg);
 }
-.builtin-layout-2 .unit:nth-child(35):after {
+.built-in-layout-2 .unit:nth-child(35):after {
   transform: rotate(204deg);
 }
-.builtin-layout-2 .unit:nth-child(34):after {
+.built-in-layout-2 .unit:nth-child(34):after {
   transform: rotate(198deg);
 }
-.builtin-layout-2 .unit:nth-child(33):after {
+.built-in-layout-2 .unit:nth-child(33):after {
   transform: rotate(192deg);
 }
-.builtin-layout-2 .unit:nth-child(32):after {
+.built-in-layout-2 .unit:nth-child(32):after {
   transform: rotate(186deg);
 }
-.builtin-layout-2 .unit:nth-child(31):after {
+.built-in-layout-2 .unit:nth-child(31):after {
   transform: rotate(180deg);
 }
-.builtin-layout-2 .unit:nth-child(30):after {
+.built-in-layout-2 .unit:nth-child(30):after {
   transform: rotate(174deg);
 }
-.builtin-layout-2 .unit:nth-child(29):after {
+.built-in-layout-2 .unit:nth-child(29):after {
   transform: rotate(168deg);
 }
-.builtin-layout-2 .unit:nth-child(28):after {
+.built-in-layout-2 .unit:nth-child(28):after {
   transform: rotate(162deg);
 }
-.builtin-layout-2 .unit:nth-child(27):after {
+.built-in-layout-2 .unit:nth-child(27):after {
   transform: rotate(156deg);
 }
-.builtin-layout-2 .unit:nth-child(26):after {
+.built-in-layout-2 .unit:nth-child(26):after {
   transform: rotate(150deg);
 }
-.builtin-layout-2 .unit:nth-child(25):after {
+.built-in-layout-2 .unit:nth-child(25):after {
   transform: rotate(144deg);
 }
-.builtin-layout-2 .unit:nth-child(24):after {
+.built-in-layout-2 .unit:nth-child(24):after {
   transform: rotate(138deg);
 }
-.builtin-layout-2 .unit:nth-child(23):after {
+.built-in-layout-2 .unit:nth-child(23):after {
   transform: rotate(132deg);
 }
-.builtin-layout-2 .unit:nth-child(22):after {
+.built-in-layout-2 .unit:nth-child(22):after {
   transform: rotate(126deg);
 }
-.builtin-layout-2 .unit:nth-child(21):after {
+.built-in-layout-2 .unit:nth-child(21):after {
   transform: rotate(120deg);
 }
-.builtin-layout-2 .unit:nth-child(20):after {
+.built-in-layout-2 .unit:nth-child(20):after {
   transform: rotate(114deg);
 }
-.builtin-layout-2 .unit:nth-child(19):after {
+.built-in-layout-2 .unit:nth-child(19):after {
   transform: rotate(108deg);
 }
-.builtin-layout-2 .unit:nth-child(18):after {
+.built-in-layout-2 .unit:nth-child(18):after {
   transform: rotate(102deg);
 }
-.builtin-layout-2 .unit:nth-child(17):after {
+.built-in-layout-2 .unit:nth-child(17):after {
   transform: rotate(96deg);
 }
-.builtin-layout-2 .unit:nth-child(16):after {
+.built-in-layout-2 .unit:nth-child(16):after {
   transform: rotate(90deg);
 }
-.builtin-layout-2 .unit:nth-child(15):after {
+.built-in-layout-2 .unit:nth-child(15):after {
   transform: rotate(84deg);
 }
-.builtin-layout-2 .unit:nth-child(14):after {
+.built-in-layout-2 .unit:nth-child(14):after {
   transform: rotate(78deg);
 }
-.builtin-layout-2 .unit:nth-child(13):after {
+.built-in-layout-2 .unit:nth-child(13):after {
   transform: rotate(72deg);
 }
-.builtin-layout-2 .unit:nth-child(12):after {
+.built-in-layout-2 .unit:nth-child(12):after {
   transform: rotate(66deg);
 }
-.builtin-layout-2 .unit:nth-child(11):after {
+.built-in-layout-2 .unit:nth-child(11):after {
   transform: rotate(60deg);
 }
-.builtin-layout-2 .unit:nth-child(10):after {
+.built-in-layout-2 .unit:nth-child(10):after {
   transform: rotate(54deg);
 }
-.builtin-layout-2 .unit:nth-child(9):after {
+.built-in-layout-2 .unit:nth-child(9):after {
   transform: rotate(48deg);
 }
-.builtin-layout-2 .unit:nth-child(8):after {
+.built-in-layout-2 .unit:nth-child(8):after {
   transform: rotate(42deg);
 }
-.builtin-layout-2 .unit:nth-child(7):after {
+.built-in-layout-2 .unit:nth-child(7):after {
   transform: rotate(36deg);
 }
-.builtin-layout-2 .unit:nth-child(6):after {
+.built-in-layout-2 .unit:nth-child(6):after {
   transform: rotate(30deg);
 }
-.builtin-layout-2 .unit:nth-child(5):after {
+.built-in-layout-2 .unit:nth-child(5):after {
   transform: rotate(24deg);
 }
-.builtin-layout-2 .unit:nth-child(4):after {
+.built-in-layout-2 .unit:nth-child(4):after {
   transform: rotate(18deg);
 }
-.builtin-layout-2 .unit:nth-child(3):after {
+.built-in-layout-2 .unit:nth-child(3):after {
   transform: rotate(12deg);
 }
-.builtin-layout-2 .unit:nth-child(2):after {
+.built-in-layout-2 .unit:nth-child(2):after {
   transform: rotate(6deg);
 }
-.builtin-layout-2 .unit:nth-child(1):after {
+.built-in-layout-2 .unit:nth-child(1):after {
   transform: rotate(0deg);
 }
 
-.builtin-card {
-  background-color: var(--kup-background-color);
-  border-radius: 4px;
+.built-in-layout-3 {
+  background: var(--kup-background-color);
+  box-shadow: rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;
   box-sizing: border-box;
-  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  overflow: auto;
+}
+.built-in-layout-3 kup-button,
+.built-in-layout-3 kup-combobox {
+  margin: 0 auto 0.75em auto;
+}
+.built-in-layout-3 kup-combobox {
+  width: 95%;
+}
+.built-in-layout-3 .sub-chip {
+  border-top: 1px solid var(--kup-border-color);
+  max-height: 33vh;
+  overflow: auto;
+  width: 100%;
+}
+
+.built-in-layout-4 {
+  background: var(--kup-background-color);
+  box-shadow: rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;
+  box-sizing: border-box;
+}
+.built-in-layout-4 .picker_arrow {
+  position: absolute;
+  z-index: -1;
+}
+.built-in-layout-4 .picker_wrapper.popup {
+  position: absolute;
+  z-index: 2;
+  margin: 1.5em;
+}
+.built-in-layout-4 .picker_wrapper.popup,
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  background: var(--kup-background-color);
+  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow {
+  width: 3em;
+  height: 3em;
+  margin: 0;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before, .built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -99;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before {
+  width: 100%;
+  height: 100%;
+  transform: skew(45deg);
+  transform-origin: 0 100%;
+}
+.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after {
+  width: 150%;
+  height: 150%;
+  box-shadow: none;
+}
+.built-in-layout-4 .popup.popup_top {
+  bottom: 100%;
+  left: 0;
+}
+.built-in-layout-4 .popup.popup_top .picker_arrow {
+  bottom: 0;
+  left: 0;
+  transform: rotate(-90deg);
+}
+.built-in-layout-4 .popup.popup_bottom {
+  top: 100%;
+  left: 0;
+}
+.built-in-layout-4 .popup.popup_bottom .picker_arrow {
+  top: 0;
+  left: 0;
+  transform: rotate(90deg) scale(1, -1);
+}
+.built-in-layout-4 .popup.popup_left {
+  top: 0;
+  right: 100%;
+}
+.built-in-layout-4 .popup.popup_left .picker_arrow {
+  top: 0;
+  right: 0;
+  transform: scale(-1, 1);
+}
+.built-in-layout-4 .popup.popup_right {
+  top: 0;
+  left: 100%;
+}
+.built-in-layout-4 .popup.popup_right .picker_arrow {
+  top: 0;
+  left: 0;
+}
+.built-in-layout-4 .picker_wrapper.no_alpha .picker_alpha {
+  display: none;
+}
+.built-in-layout-4 .picker_wrapper.no_editor .picker_editor {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+.built-in-layout-4 .picker_wrapper.no_cancel .picker_cancel {
+  display: none;
+}
+.built-in-layout-4 .layout_default.picker_wrapper {
   display: flex;
-  flex-direction: column;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: stretch;
+  font-size: 10px;
+  width: 25em;
+  padding: 0.5em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper input,
+.built-in-layout-4 .layout_default.picker_wrapper button {
+  font-size: 1em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper > * {
+  margin: 0.5em;
+}
+.built-in-layout-4 .layout_default.picker_wrapper::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 0;
+  order: 1;
+}
+.built-in-layout-4 .layout_default .picker_slider,
+.built-in-layout-4 .layout_default .picker_selector {
+  padding: 1em;
+}
+.built-in-layout-4 .layout_default .picker_hue {
+  width: 100%;
+}
+.built-in-layout-4 .layout_default .picker_sl {
+  flex: 1 1 auto;
+}
+.built-in-layout-4 .layout_default .picker_sl::before {
+  content: "";
+  display: block;
+  padding-bottom: 100%;
+}
+.built-in-layout-4 .layout_default .picker_editor {
+  order: 1;
+  width: 6.5em;
+}
+.built-in-layout-4 .layout_default .picker_editor input {
+  width: 100%;
   height: 100%;
+}
+.built-in-layout-4 .layout_default .picker_sample {
+  order: 1;
+  flex: 1 1 auto;
+}
+.built-in-layout-4 .layout_default .picker_done,
+.built-in-layout-4 .layout_default .picker_cancel {
+  order: 1;
+}
+.built-in-layout-4 .picker_wrapper {
+  box-sizing: border-box;
+  background: var(--kup-background-color);
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  cursor: default;
+  font-family: sans-serif;
+  color: #444;
+  pointer-events: auto;
+}
+.built-in-layout-4 .picker_wrapper:focus {
+  outline: none;
+}
+.built-in-layout-4 .picker_wrapper button,
+.built-in-layout-4 .picker_wrapper input {
+  box-sizing: border-box;
+  border: none;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  outline: none;
+}
+.built-in-layout-4 .picker_wrapper button:focus, .built-in-layout-4 .picker_wrapper button:active,
+.built-in-layout-4 .picker_wrapper input:focus,
+.built-in-layout-4 .picker_wrapper input:active {
+  box-shadow: 0 0 2px 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_wrapper button {
+  padding: 0.4em 0.6em;
+  cursor: pointer;
+  background-color: whitesmoke;
+  background-image: linear-gradient(0deg, gainsboro, transparent);
+}
+.built-in-layout-4 .picker_wrapper button:active {
+  background-image: linear-gradient(0deg, transparent, gainsboro);
+}
+.built-in-layout-4 .picker_selector {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  transform: translate(-50%, -50%);
+  border: 2px solid white;
+  border-radius: 100%;
+  box-shadow: 0 0 3px 1px #67b9ff;
+  background: currentColor;
+  cursor: pointer;
+}
+.built-in-layout-4 .picker_slider .picker_selector {
+  border-radius: 2px;
+}
+.built-in-layout-4 .picker_hue {
+  position: relative;
+  background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_sl {
   position: relative;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+  background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0));
+}
+.built-in-layout-4 .picker_alpha,
+.built-in-layout-4 .picker_sample {
+  position: relative;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/contain white;
+  box-shadow: 0 0 0 1px var(--kup-border-color);
+}
+.built-in-layout-4 .picker_alpha .picker_selector,
+.built-in-layout-4 .picker_sample .picker_selector {
+  background: none;
+}
+.built-in-layout-4 .picker_editor input {
+  font-family: monospace;
+  padding: 0.2em 0.4em;
+}
+.built-in-layout-4 .picker_sample::before {
+  content: "";
+  position: absolute;
+  display: block;
   width: 100%;
-  overflow: auto;
+  height: 100%;
+  background: currentColor;
+}
+.built-in-layout-4 .picker_done,
+.built-in-layout-4 .picker_arrow {
+  display: none;
+}
+.built-in-layout-4 .layout_default.picker_wrapper {
+  bottom: unset;
+  font-size: var(--kup-font-size);
+  left: unset;
+  padding: 0.25em;
+  right: unset;
+  top: unset;
+  width: 100%;
+}
+.built-in-layout-4 .layout_default .picker_editor input {
+  background: none;
+  color: var(--kup-text-color);
+  font-family: var(--kup-font-family);
+  font-size: var(--kup-font-size);
+}
+.built-in-layout-4 .picker_wrapper.popup {
+  box-shadow: var(--kup-box-shadow);
+  margin: 0;
+  outline: none;
 }
 
 .collapsible-layout-1 {
@@ -827,6 +1104,13 @@
   padding: 1em;
 }
 
+.free-layout-2 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+}
+
 .scalable-layout-1 .descr {
   font-size: 70%;
   width: 100%;
@@ -1855,7 +2139,7 @@
 
 .standard-layout-12 {
   background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
   color: var(--kup-text-color);
   min-width: 200px;
   min-width: -moz-max-content;
@@ -1905,7 +2189,6 @@
   height: 100%;
   position: relative;
   width: 100%;
-  overflow: auto;
 }
 .standard-layout-13 kup-button {
   margin-left: 0;
@@ -1940,7 +2223,7 @@
 
 .standard-layout-14 {
   background-color: var(--kup-background-color);
-  box-shadow: var(--kup-box-shadow);
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
   color: var(--kup-text-color);
   min-width: 200px;
   min-width: -moz-max-content;
@@ -2007,6 +2290,9 @@
   margin-left: 0;
   margin-right: auto;
 }
+.standard-layout-14 .sub-formula {
+  padding: 0.5em;
+}
 .standard-layout-14 .sub-chip {
   max-width: 25vw;
   overflow: auto;
@@ -2046,6 +2332,7 @@
 }
 .standard-layout-14 #apply {
   display: none;
+  margin: auto;
 }
 .standard-layout-14 #apply.visible {
   display: block;
@@ -2065,8 +2352,6 @@
   color: var(--kup-text-color);
   box-shadow: var(--kup-box-shadow);
   border-radius: 3px;
-  min-width: 350px;
-  max-width: 700px;
 }
 .standard-layout-15 .section-1 {
   box-sizing: border-box;
@@ -2185,6 +2470,7 @@
 }
 
 :host([menu-visible]) {
+  box-shadow: var(--kup-box-shadow);
   display: block;
 }