@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/dist/oruga.css

@@ -1,4 +1,4 @@
-/*! Oruga v0.0.1 | MIT License | github.com/oruga-ui/oruga */
+/*! Oruga v0.2.0 | MIT License | github.com/oruga-ui/oruga */
 
 /***************************************
 *   Oruga Default Theme Minimal Style
@@ -262,20 +262,6 @@ body {
 .o-acp {
   position: relative;
 }
-.o-acp__menu {
-  display: block;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 100%;
-  overflow: auto;
-  z-index: var(--oruga-autocomplete-menu-zindex, 20);
-  background-color: var(--oruga-autocomplete-menu-background, #ffffff);
-}
-.o-acp__menu--top {
-  top: auto;
-  bottom: 100%;
-}
 .o-acp__item {
   display: block;
   position: relative;
@@ -287,10 +273,6 @@ body {
 .o-acp__item-group-title, .o-acp__item--empty {
   pointer-events: none;
 }
-.o-acp--expanded {
-  width: 100%;
-}
-
 /* @docs */
 /* @docs */
 @keyframes spinAround {
@@ -407,7 +389,7 @@ body {
   position: fixed;
   z-index: var(--oruga-carousel-overlay-zindex, 40);
 }
-.o-car__scene {
+.o-car__wrapper {
   position: relative;
   width: 100%;
 }
@@ -418,6 +400,9 @@ body {
 .o-car__item {
   flex-shrink: 0;
 }
+.o-car__item--clickable {
+  cursor: pointer;
+}
 .o-car__indicators {
   width: 100%;
   display: flex;
@@ -485,7 +470,7 @@ body {
   -ms-user-select: none;
   user-select: none;
 }
-.o-chk__check {
+.o-chk__input {
   width: var(--oruga-checkbox-size, 1rem);
   height: var(--oruga-checkbox-size, 1rem);
   outline: none;
@@ -505,12 +490,12 @@ body {
   border-style: solid;
   transition-property: background;
 }
-.o-chk__check--checked {
+.o-chk__input--checked {
   background-color: var(--oruga-checkbox-active-background-color, #445e00);
   border-color: var(--oruga-checkbox-active-background-color, #445e00);
   background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 234 225' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3E%3Cg transform='matrix(4.16667,0,0,4.16667,0,0)'%3E%3Cg transform='matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)'%3E%3Cpath style='fill:var(--oruga-checkbox-checkmark-color, %23ffffff)' d='M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
-.o-chk__check--indeterminate {
+.o-chk__input--indeterminate {
   background-color: var(--oruga-checkbox-active-background-color, #445e00);
   border-color: var(--oruga-checkbox-active-background-color, #445e00);
   background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 417 417' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(4.16667,0,0,4.16667,0,0)'%3E%3Cg transform='matrix(6.96176,0,0,20.5682,-118.661,-806.753)'%3E%3Cpath style='fill:var(--oruga-checkbox-checkmark-color, %23ffffff)' d='M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
@@ -543,6 +528,12 @@ body {
   justify-content: center;
   text-align: center;
 }
+.o-dpck__header__previous {
+  order: 1;
+}
+.o-dpck__header__next {
+  order: 3;
+}
 .o-dpck__header__previous, .o-dpck__header__next {
   justify-content: center;
   text-align: center;
@@ -566,12 +557,6 @@ body {
 .o-dpck__header__previous:hover, .o-dpck__header__next:hover {
   text-decoration: none;
 }
-.o-dpck__header__previous {
-  order: 1;
-}
-.o-dpck__header__next {
-  order: 3;
-}
 .o-dpck__header__list {
   order: 2;
   align-items: center;
@@ -589,64 +574,64 @@ body {
   margin-left: 0.125rem;
   margin-right: 0.125rem;
 }
-.o-dpck__table, .o-dpck__molist.nth {
+.o-dpck__table, .o-dpck__month {
   display: table;
   margin: 0 auto 0 auto;
 }
-.o-dpck__table__head, .o-dpck__molist.nth__head {
+.o-dpck__table__head, .o-dpck__month__head {
   display: table-header-group;
 }
-.o-dpck__table__body, .o-dpck__molist.nth__body {
+.o-dpck__table__body, .o-dpck__month__body {
   display: table-row-group;
 }
-.o-dpck__table__row, .o-dpck__molist.nth__row {
+.o-dpck__table__row, .o-dpck__month__row {
   display: table-row;
 }
-.o-dpck__table__cell, .o-dpck__molist.nth__cell {
+.o-dpck__table__cell, .o-dpck__month__cell {
   text-align: center;
   vertical-align: middle;
   display: table-cell;
   text-decoration: none;
 }
-.o-dpck__table__cell--unselectable, .o-dpck__molist.nth__cell--unselectable {
+.o-dpck__table__cell--unselectable, .o-dpck__month__cell--unselectable {
   color: var(--oruga-datepicker-item-disabled-color, #b5b5b5);
 }
-.o-dpck__table__cell--selectable, .o-dpck__molist.nth__cell--selectable {
+.o-dpck__table__cell--selectable, .o-dpck__month__cell--selectable {
   color: var(--oruga-datepicker-item-selectable-color, #4a4a4a);
 }
-.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered {
+.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered {
   background-color: var(--oruga-datepicker-item-hovered-background-color, #7a7a7a);
   color: var(--oruga-datepicker-item-hovered-color, #dbdbdb);
 }
-.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered {
+.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered {
   color: var(--oruga-datepicker-item-hovered-color, #dbdbdb);
 }
-.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered {
+.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered {
   background-color: var(--oruga-datepicker-item-hovered-background-color, #7a7a7a);
   color: var(--oruga-datepicker-item-hovered-color, #dbdbdb);
 }
-.o-dpck__table__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered), .o-dpck__molist.nth__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered) {
+.o-dpck__table__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
   background-color: var(--oruga-datepicker-item-selected-background-color, #445e00);
   color: var(--oruga-datepicker-item-selected-color, #ffffff);
 }
-.o-dpck__table__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered), .o-dpck__molist.nth__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered) {
+.o-dpck__table__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
   background-color: var(--oruga-datepicker-item-selected-background-color, #445e00);
   color: var(--oruga-datepicker-item-selected-color, #ffffff);
 }
-.o-dpck__table__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered), .o-dpck__molist.nth__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered) {
+.o-dpck__table__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
   background-color: var(--oruga-datepicker-item-selected-within-background-color, rgba(68, 94, 0, 0.5));
 }
-.o-dpck__table__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered), .o-dpck__molist.nth__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__molist.nth__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__molist.nth__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__molist.nth__cell--last-hovered) {
+.o-dpck__table__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
   background-color: var(--oruga-datepicker-item-selected-background-color, #445e00);
   color: var(--oruga-datepicker-item-selected-color, #ffffff);
 }
-.o-dpck__table__cell--invisible, .o-dpck__molist.nth__cell--invisible {
+.o-dpck__table__cell--invisible, .o-dpck__month__cell--invisible {
   visibility: hidden;
 }
-.o-dpck__table__cell--events, .o-dpck__molist.nth__cell--events {
+.o-dpck__table__cell--events, .o-dpck__month__cell--events {
   position: relative;
 }
-.o-dpck__table__events, .o-dpck__molist.nth__events {
+.o-dpck__table__events, .o-dpck__month__events {
   display: flex;
   justify-content: center;
   position: absolute;
@@ -654,22 +639,22 @@ body {
   left: 0;
   bottom: 15%;
 }
-.o-dpck__table__event, .o-dpck__molist.nth__event {
+.o-dpck__table__event, .o-dpck__month__event {
   background-color: var(--oruga-datepicker-event-background-color, #b5b5b5);
 }
-.o-dpck__table__event--dots, .o-dpck__molist.nth__event--dots {
+.o-dpck__table__event--dots, .o-dpck__month__event--dots {
   border-radius: 50%;
 }
-.o-dpck__table__event--bars, .o-dpck__molist.nth__event--bars {
+.o-dpck__table__event--bars, .o-dpck__month__event--bars {
   width: 100%;
 }
-.o-dpck__molist.nth__table {
+.o-dpck__month__table {
   display: inline-flex;
   flex-wrap: wrap;
   flex-direction: row;
   width: 17rem;
 }
-.o-dpck__molist.nth__cell {
+.o-dpck__month__cell {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -707,14 +692,6 @@ body {
   position: relative;
   vertical-align: top;
 }
-.o-drop--inline {
-  display: inline;
-}
-.o-drop--inline .o-drop__menu {
-  position: static;
-  display: inline-block;
-  padding: 0;
-}
 .o-drop__overlay {
   position: fixed;
   bottom: 0;
@@ -731,30 +708,65 @@ body {
 }
 .o-drop__menu {
   position: absolute;
-  left: 0;
-  top: 100%;
   display: block;
   z-index: var(--oruga-dropdown-menu-zindex, 20);
   background-color: var(--oruga-dropdown-menu-background, #ffffff);
 }
-.o-drop__menu--top-left {
+.o-drop__menu--bottom {
+  left: 50%;
+  right: auto;
+  top: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+  bottom: auto;
+  transform: translateX(-50%);
+}
+.o-drop__menu--top {
+  left: 50%;
+  right: auto;
   top: auto;
-  bottom: 100%;
-  right: 0;
+  bottom: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+  transform: translateX(-50%);
+}
+.o-drop__menu--left {
+  right: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
   left: auto;
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
 }
-.o-drop__menu--bottom-left {
+.o-drop__menu--right {
+  right: auto;
+  left: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+  top: 50%;
+  bottom: auto;
+  transform: translateY(-50%);
+}
+.o-drop__menu--top-right {
   right: 0;
   left: auto;
+  top: auto;
+  bottom: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
 }
-.o-drop__menu--top-right {
+.o-drop__menu--top-left {
+  right: auto;
+  left: 0;
   top: auto;
-  bottom: 100%;
+  bottom: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+}
+.o-drop__menu--bottom-right {
+  right: 0;
+  left: auto;
+  top: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+  bottom: auto;
+}
+.o-drop__menu--bottom-left {
+  right: auto;
+  left: 0;
+  top: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
+  bottom: auto;
 }
 .o-drop__item {
   display: block;
   position: relative;
-  cursor: pointer;
 }
 .o-drop__item--disabled {
   opacity: var(--oruga-dropdown-item-disabled-opacity, 0.5);
@@ -764,6 +776,17 @@ body {
   background-color: var(--oruga-dropdown-item-active-background-color, #445e00);
   color: var(--oruga-dropdown-item-active-color, #ffffff);
 }
+.o-drop__item--clickable {
+  cursor: pointer;
+}
+.o-drop--inline {
+  display: inline;
+}
+.o-drop--inline .o-drop__menu {
+  position: static;
+  display: inline-block;
+  padding: 0;
+}
 .o-drop--expanded {
   width: 100%;
 }
@@ -787,6 +810,9 @@ body {
 .o-drop--mobile > .o-drop__overlay {
   display: block;
 }
+.o-drop--teleport {
+  width: unset;
+}
 
 /* @docs */
 /* @docs */
@@ -803,21 +829,21 @@ body {
   display: flex;
   justify-content: flex-start;
 }
-.o-field--addons > *:first-child:not(:only-child) button,
 .o-field--addons > button:first-child,
-.o-field--addons > *:first-child:not(:only-child) input,
+.o-field--addons > *:first-child:not(:only-child) button,
 .o-field--addons > input:first-child,
-.o-field--addons > *:first-child:not(:only-child) select,
-.o-field--addons > select:first-child {
+.o-field--addons > *:first-child:not(:only-child) input,
+.o-field--addons > select:first-child,
+.o-field--addons > *:first-child:not(:only-child) select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-.o-field--addons > *:last-child:not(:only-child) button,
 .o-field--addons > button:last-child,
-.o-field--addons > *:last-child:not(:only-child) input,
+.o-field--addons > *:last-child:not(:only-child) button,
 .o-field--addons > input:last-child,
-.o-field--addons > *:last-child:not(:only-child) select,
-.o-field--addons > select:last-child {
+.o-field--addons > *:last-child:not(:only-child) input,
+.o-field--addons > select:last-child,
+.o-field--addons > *:last-child:not(:only-child) select {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -904,22 +930,23 @@ body {
 
 /* @docs */
 /* @docs */
-.o-ctrl-input {
-  display: block;
-  position: relative;
-}
-.o-ctrl-input--expanded {
-  width: 100%;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
 .o-input {
   -moz-appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
   position: relative;
   vertical-align: top;
+}
+.o-input__wrapper {
+  display: inline-block;
+  position: relative;
+}
+.o-input__wrapper--expanded {
+  width: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.o-input__wrapper--expanded .o-input {
   width: 100%;
 }
 .o-input__textarea {
@@ -944,59 +971,6 @@ body {
 .o-input__icon-left {
   left: 0;
 }
-
-/* @docs */
-/* @docs */
-.o-inputit {
-  display: block;
-}
-.o-inputit__container {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  vertical-align: top;
-  flex-wrap: wrap;
-  border-color: var(--oruga-inputitems-border-color, #dbdbdb);
-  border-style: var(--oruga-inputitems-border-style, solid);
-  border-width: var(--oruga-inputitems-border-width, 1px);
-  color: var(--oruga-inputitems-color, #363636);
-}
-.o-inputit__autocomplete {
-  position: static;
-  flex: 1;
-}
-.o-inputit__input {
-  border: none;
-  box-shadow: none;
-}
-.o-inputit__input:focus {
-  box-shadow: none;
-}
-.o-inputit__item {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  margin-left: -0.1875em;
-  margin-right: -0.1875em;
-  background-color: var(--oruga-inputitems-item-background-color, #445e00);
-  color: var(--oruga-inputitems-item-color, #ffffff);
-}
-.o-inputit__item > * {
-  margin-left: 0.1875em;
-  margin-right: 0.1875em;
-}
-.o-inputit__counter {
-  display: block;
-  float: right;
-}
-.o-inputit--expanded {
-  width: 100%;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
 /* @docs */
 /* @docs */
 .o-load {
@@ -1023,14 +997,13 @@ body {
 
 /* @docs */
 /* @docs */
-.o-menu-list .o-menu-list,
-.o-menu-list .o-menu-item__wrapper {
+.o-menu__list, .o-menu__item__wrapper {
   list-style: none;
 }
-.o-menu-label {
+.o-menu__label {
   text-transform: uppercase;
 }
-.o-menu-item {
+.o-menu__item {
   display: block;
   list-style: none;
 }
@@ -1208,6 +1181,25 @@ body {
   text-align: center;
   pointer-events: none;
 }
+.o-pag__next {
+  order: 3;
+}
+.o-pag__previous {
+  order: 2;
+}
+.o-pag__list {
+  align-items: center;
+  display: flex;
+  text-align: center;
+  list-style: none;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: flex-start;
+  order: 1;
+}
 .o-pag--simple {
   justify-content: normal;
 }
@@ -1237,25 +1229,6 @@ body {
   justify-content: flex-end;
   order: 2;
 }
-.o-pag__next {
-  order: 3;
-}
-.o-pag__previous {
-  order: 2;
-}
-.o-pag__list {
-  align-items: center;
-  display: flex;
-  text-align: center;
-  list-style: none;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  justify-content: flex-start;
-  order: 1;
-}
 .o-pag--mobile {
   justify-content: flex-start;
   flex-wrap: wrap;
@@ -1294,7 +1267,7 @@ body {
   -ms-user-select: none;
   user-select: none;
 }
-.o-radio__check {
+.o-radio__input {
   width: var(--oruga-radio-size, 1rem);
   height: var(--oruga-radio-size, 1rem);
   margin: 0;
@@ -1312,7 +1285,7 @@ body {
   transition-property: background;
   background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(10.1032,0,0,10.1032,-255.068,-313.298)'%3E%3Ccircle cx='30.195' cy='35.959' r='4.85' style='fill:var(--oruga-radio-active-background-color, %23445e00);'/%3E%3C/g%3E%3C/svg%3E");
 }
-.o-radio__check--checked {
+.o-radio__input--checked {
   background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)'%3E%3Cpath d='M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z' style='fill:var(--oruga-radio-active-background-color, %23445e00);'/%3E%3Ccircle cx='32.84' cy='24.8' r='7.9' style='fill:transparent;'/%3E%3C/g%3E%3C/svg%3E");
 }
 .o-radio--disabled {
@@ -1402,32 +1375,43 @@ body {
 
 /* @docs */
 /* @docs */
+.o-side {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
 .o-side__content {
+  position: absolute;
   background-color: var(--oruga-sidebar-content-background-color, #dbdbdb);
-  z-index: calc(var(--oruga-sidebar-zindex, 38) + 1);
+  z-index: calc(var(--oruga-sidebar-zindex, 100) + 1);
 }
-.o-side__content--fixed {
-  position: fixed;
-  left: 0;
-  top: 0;
+.o-side__content--right, .o-side__content--left {
+  transition: width;
 }
-.o-side__content--absolute {
-  position: absolute;
-  left: 0;
-  top: 0;
+.o-side__content--top, .o-side__content--bottom {
+  transition: height;
 }
 .o-side__content--right {
   left: auto;
   right: 0;
 }
-.o-side__content--mini-expand:hover {
-  transition: width;
+.o-side__content--left {
+  left: 0;
+  right: auto;
 }
-.o-side__content--static {
-  position: static;
+.o-side__content--top {
+  top: 0;
+  bottom: auto;
 }
-.o-side__content--absolute, .o-side__content--static {
-  transition: width 150ms ease-out;
+.o-side__content--bottom {
+  top: auto;
+  bottom: 0;
+}
+.o-side__content--reduced-expand:hover {
+  transition: width;
 }
 .o-side__content--fullwidth {
   width: 100%;
@@ -1436,11 +1420,6 @@ body {
 .o-side__content--fullheight {
   height: 100%;
   max-height: 100%;
-  overflow: hidden;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-content: stretch;
 }
 .o-side__overlay {
   bottom: 0;
@@ -1449,7 +1428,19 @@ body {
   top: 0;
   position: fixed;
   background: var(--oruga-sidebar-overlay, hsla(0, 0%, 4%, 0.86));
-  z-index: var(--oruga-sidebar-zindex, 38);
+  z-index: var(--oruga-sidebar-zindex, 100);
+}
+.o-side--active {
+  display: block;
+}
+.o-side--inline {
+  position: relative;
+}
+.o-side--inline .o-side__overlay {
+  position: absolute;
+}
+.o-side--inline .o-side__content {
+  position: relative;
 }
 
 /* @docs */
@@ -1864,6 +1855,11 @@ body {
   justify-content: space-between;
   display: flex;
 }
+.o-table__pagination > div {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
 .o-table__pagination > div:first-child {
   align-items: center;
   justify-content: flex-start;
@@ -1880,11 +1876,6 @@ body {
   flex-shrink: 0;
   justify-content: center;
 }
-.o-table__pagination > div {
-  flex-basis: auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
 
 /* @docs */
 /* @docs */
@@ -2037,6 +2028,58 @@ body {
 .o-tabs__content--transitioning {
   overflow: hidden;
 }
+/* @docs */
+/* @docs */
+.o-taginput {
+  display: block;
+}
+.o-taginput__container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  vertical-align: top;
+  flex-wrap: wrap;
+  border-color: var(--oruga-taginput-border-color, #dbdbdb);
+  border-style: var(--oruga-taginput-border-style, solid);
+  border-width: var(--oruga-taginput-border-width, 1px);
+  color: var(--oruga-taginput-color, #363636);
+}
+.o-taginput__autocomplete {
+  position: static;
+  flex: 1;
+}
+.o-taginput__input {
+  border: none;
+  box-shadow: none;
+}
+.o-taginput__input:focus {
+  box-shadow: none;
+}
+.o-taginput__item {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-left: -0.1875em;
+  margin-right: -0.1875em;
+  background-color: var(--oruga-taginput-item-background-color, #445e00);
+  color: var(--oruga-taginput-item-color, #ffffff);
+}
+.o-taginput__item > * {
+  margin-left: 0.1875em;
+  margin-right: 0.1875em;
+}
+.o-taginput__counter {
+  display: block;
+  float: right;
+}
+.o-taginput--expanded {
+  width: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
 /* @docs */
 /* @docs */
 .o-tpck__dropdown {
@@ -2068,6 +2111,28 @@ body {
   position: relative;
   display: inline-flex;
 }
+.o-tip__arrow {
+  position: absolute;
+  content: "";
+  pointer-events: none;
+  z-index: var(--oruga-tooltip-content-zindex, 38);
+  color: var(--oruga-tooltip-background-color, #445e00);
+}
+.o-tip__arrow--bottom {
+  top: auto;
+  right: auto;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-style: solid;
+  border-right-style: solid;
+  border-right-color: transparent;
+  border-left-style: solid;
+  border-left-color: transparent;
+  border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-right-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-left-width: var(--oruga-tooltip-arrow-size, 5px);
+}
 .o-tip__arrow--top {
   top: 100%;
   right: auto;
@@ -2075,20 +2140,28 @@ body {
   left: 50%;
   transform: translateX(-50%);
   border-top-style: solid;
-  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
   border-right-style: solid;
   border-right-color: transparent;
   border-left-style: solid;
   border-left-color: transparent;
+  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
   border-right-width: var(--oruga-tooltip-arrow-size, 5px);
   border-left-width: var(--oruga-tooltip-arrow-size, 5px);
 }
-.o-tip__content--top {
-  top: auto;
+.o-tip__arrow--left {
+  top: 50%;
   right: auto;
-  bottom: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: auto;
+  left: 100%;
+  transform: translateY(-50%);
+  border-left-style: solid;
+  border-top-style: solid;
+  border-top-color: transparent;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
+  border-left-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
 }
 .o-tip__arrow--right {
   top: 50%;
@@ -2097,35 +2170,86 @@ body {
   left: auto;
   transform: translateY(-50%);
   border-right-style: solid;
-  border-right-width: var(--oruga-tooltip-arrow-size, 5px);
   border-top-style: solid;
   border-top-color: transparent;
   border-bottom-style: solid;
   border-bottom-color: transparent;
+  border-right-width: var(--oruga-tooltip-arrow-size, 5px);
   border-top-width: var(--oruga-tooltip-arrow-size, 5px);
   border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
 }
-.o-tip__content--right {
-  top: 50%;
+.o-tip__arrow--top-right {
+  top: 100%;
   right: auto;
   bottom: auto;
-  left: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
-  transform: translateY(-50%);
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-style: solid;
+  border-right-style: solid;
+  border-right-color: transparent;
+  border-left-style: solid;
+  border-left-color: transparent;
+  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-right-width: calc(var(--oruga-tooltip-arrow-size, 5px) *2);
+  border-left-width: 0;
 }
-.o-tip__arrow--bottom {
+.o-tip__arrow--top-left {
+  top: 100%;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-style: solid;
+  border-right-style: solid;
+  border-right-color: transparent;
+  border-left-style: solid;
+  border-left-color: transparent;
+  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-left-width: calc(var(--oruga-tooltip-arrow-size, 5px) *2);
+  border-right-width: 0;
+}
+.o-tip__arrow--bottom-left {
   top: auto;
   right: auto;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-bottom-style: solid;
+  border-right-style: solid;
+  border-right-color: transparent;
+  border-left-style: solid;
+  border-left-color: transparent;
   border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-left-width: calc(var(--oruga-tooltip-arrow-size, 5px) *2);
+  border-right-width: 0;
+}
+.o-tip__arrow--bottom-right {
+  top: auto;
+  right: auto;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-style: solid;
   border-right-style: solid;
   border-right-color: transparent;
   border-left-style: solid;
   border-left-color: transparent;
-  border-right-width: var(--oruga-tooltip-arrow-size, 5px);
-  border-left-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
+  border-right-width: calc(var(--oruga-tooltip-arrow-size, 5px) *2);
+  border-left-width: 0;
+}
+.o-tip__content {
+  position: absolute;
+  white-space: nowrap;
+  z-index: var(--oruga-tooltip-content-zindex, 38);
+  background-color: var(--oruga-tooltip-background-color, #445e00);
+}
+.o-tip__content--top {
+  top: auto;
+  right: auto;
+  bottom: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
+  left: 50%;
+  transform: translateX(-50%);
 }
 .o-tip__content--bottom {
   top: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
@@ -2134,20 +2258,12 @@ body {
   left: 50%;
   transform: translateX(-50%);
 }
-.o-tip__arrow--left {
+.o-tip__content--right {
   top: 50%;
   right: auto;
   bottom: auto;
-  left: 100%;
+  left: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
   transform: translateY(-50%);
-  border-left-style: solid;
-  border-left-width: var(--oruga-tooltip-arrow-size, 5px);
-  border-top-style: solid;
-  border-top-color: transparent;
-  border-bottom-style: solid;
-  border-bottom-color: transparent;
-  border-top-width: var(--oruga-tooltip-arrow-size, 5px);
-  border-bottom-width: var(--oruga-tooltip-arrow-size, 5px);
 }
 .o-tip__content--left {
   top: 50%;
@@ -2156,18 +2272,29 @@ body {
   left: auto;
   transform: translateY(-50%);
 }
-.o-tip__arrow {
-  position: absolute;
-  content: "";
-  pointer-events: none;
-  z-index: var(--oruga-tooltip-content-zindex, 38);
-  color: var(--oruga-tooltip-background-color, #445e00);
+.o-tip__content--top-right {
+  left: auto;
+  top: auto;
+  bottom: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
+  transform: translateX(50%);
 }
-.o-tip__content {
-  position: absolute;
-  white-space: nowrap;
-  z-index: var(--oruga-tooltip-content-zindex, 38);
-  background-color: var(--oruga-tooltip-background-color, #445e00);
+.o-tip__content--top-left {
+  right: auto;
+  top: auto;
+  bottom: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
+  transform: translateX(-50%);
+}
+.o-tip__content--bottom-right {
+  left: auto;
+  bottom: auto;
+  top: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
+  transform: translateX(50%);
+}
+.o-tip__content--bottom-left {
+  left: auto;
+  bottom: auto;
+  top: calc((var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)) + 100%);
+  transform: translateX(-50%);
 }
 .o-tip__content--always {
   opacity: 1;
@@ -2177,6 +2304,18 @@ body {
   text-align: center;
   white-space: normal;
 }
+.o-tip--teleport .o-tip__content--top, .o-tip--teleport .o-tip__content--top-left, .o-tip--teleport .o-tip__content--top-right {
+  margin-top: calc(-1 * (var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)));
+}
+.o-tip--teleport .o-tip__content--bottom, .o-tip--teleport .o-tip__content--bottom-left, .o-tip--teleport .o-tip__content--bottom-right {
+  margin-top: calc(var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px));
+}
+.o-tip--teleport .o-tip__content--right {
+  margin-left: calc(var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px));
+}
+.o-tip--teleport .o-tip__content--left {
+  margin-left: calc(-1 * (var(--oruga-tooltip-arrow-size, 5px) + var(--oruga-tooltip-arrow-margin, 2px)));
+}
 .o-tip__trigger {
   width: 100%;
 }