@oruga-ui/theme-oruga 0.3.0 → 0.4.1

package/dist/oruga.css

@@ -1,4 +1,4 @@
-/*! Oruga v0.3.0 | MIT License | github.com/oruga-ui/oruga */
+/*! Oruga v0.4.1 | MIT License | github.com/oruga-ui/oruga */
 
 /*************************************
 *   Oruga Default Theme Full Build
@@ -245,6 +245,7 @@
   --oruga-grey-light: #b5b5b5;
   --oruga-grey-lighter: #dbdbdb;
   --oruga-grey-dark: #4a4a4a;
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   --oruga-size-small: 0.75rem;
   --oruga-size-medium: 1.25rem;
   --oruga-size-large: 1.5rem;
@@ -298,6 +299,10 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.o-acp__item--hover {
+  background-color: var(--oruga-autocomplete-item-hover-background-color, #f5f5f5);
+}
+
 /* @docs */
 /* @docs */
 @keyframes spinAround {
@@ -336,15 +341,18 @@ body {
   line-height: var(--oruga-button-line-height, var(--oruga-base-line-height));
   margin: var(--oruga-button-margin, 0);
   height: var(--oruga-button-height, 2.25em);
+  /* size variants*/
+  /* color variants*/
+  /* focus effect*/
 }
 .o-btn__wrapper {
-  margin-left: -0.1875em;
-  margin-right: -0.1875em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 100%;
+  margin-left: -0.1875em;
+  margin-right: -0.1875em;
 }
 .o-btn__wrapper > * {
   margin-left: 0.1875em;
@@ -374,51 +382,69 @@ body {
   font-size: var(--oruga-button-font-size-large, 1.5rem);
 }
 .o-btn--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-primary, #445e00);
   color: var(--oruga-variant-invert-primary, #ffffff);
 }
 .o-btn--primary:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-secondary, #6c757d);
   color: var(--oruga-variant-invert-secondary, #ffffff);
 }
 .o-btn--secondary:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-success, #006724);
   color: var(--oruga-variant-invert-success, #ffffff);
 }
 .o-btn--success:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-info, #005c98);
   color: var(--oruga-variant-invert-info, #ffffff);
 }
 .o-btn--info:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-warning, #f4c300);
   color: var(--oruga-variant-invert-warning, #000000);
 }
 .o-btn--warning:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   border-color: transparent;
   background-color: var(--oruga-variant-danger, #b60000);
   color: var(--oruga-variant-invert-danger, #ffffff);
 }
 .o-btn--danger:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--outlined {
@@ -432,61 +458,67 @@ body {
   color: var(--oruga-button-color, var(--oruga-primary-invert));
 }
 .o-btn--outlined-primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-primary, #445e00);
   color: var(--oruga-variant-primary, #445e00);
 }
-.o-btn--outlined-primary:hover {
+.o-btn--outlined-primary:focus, .o-btn--outlined-primary:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-primary, #445e00);
   color: var(--oruga-variant-invert-primary, #ffffff);
 }
 .o-btn--outlined-secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-secondary, #6c757d);
   color: var(--oruga-variant-secondary, #6c757d);
 }
-.o-btn--outlined-secondary:hover {
+.o-btn--outlined-secondary:focus, .o-btn--outlined-secondary:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-secondary, #6c757d);
   color: var(--oruga-variant-invert-secondary, #ffffff);
 }
 .o-btn--outlined-success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-success, #006724);
   color: var(--oruga-variant-success, #006724);
 }
-.o-btn--outlined-success:hover {
+.o-btn--outlined-success:focus, .o-btn--outlined-success:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-success, #006724);
   color: var(--oruga-variant-invert-success, #ffffff);
 }
 .o-btn--outlined-info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-info, #005c98);
   color: var(--oruga-variant-info, #005c98);
 }
-.o-btn--outlined-info:hover {
+.o-btn--outlined-info:focus, .o-btn--outlined-info:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-info, #005c98);
   color: var(--oruga-variant-invert-info, #ffffff);
 }
 .o-btn--outlined-warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-warning, #f4c300);
   color: var(--oruga-variant-warning, #f4c300);
 }
-.o-btn--outlined-warning:hover {
+.o-btn--outlined-warning:focus, .o-btn--outlined-warning:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-warning, #f4c300);
   color: var(--oruga-variant-invert-warning, #000000);
 }
 .o-btn--outlined-danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   background-color: var(--oruga-button-outlined-background-color, transparent);
   border-color: var(--oruga-variant-danger, #b60000);
   color: var(--oruga-variant-danger, #b60000);
 }
-.o-btn--outlined-danger:hover {
+.o-btn--outlined-danger:focus, .o-btn--outlined-danger:hover {
   border-color: transparent;
   background-color: var(--oruga-variant-danger, #b60000);
   color: var(--oruga-variant-invert-danger, #ffffff);
@@ -515,56 +547,80 @@ body {
   color: var(--oruga-button-background-color, var(--oruga-primary));
 }
 .o-btn--inverted:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   background-color: var(--oruga-variant-invert-primary, #ffffff);
   border-color: var(--oruga-variant-invert-primary, #ffffff);
   color: var(--oruga-variant-primary, #445e00);
 }
-.o-btn--inverted-primary:hover {
+.o-btn--inverted-primary:focus, .o-btn--inverted-primary:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   background-color: var(--oruga-variant-invert-secondary, #ffffff);
   border-color: var(--oruga-variant-invert-secondary, #ffffff);
   color: var(--oruga-variant-secondary, #6c757d);
 }
-.o-btn--inverted-secondary:hover {
+.o-btn--inverted-secondary:focus, .o-btn--inverted-secondary:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   background-color: var(--oruga-variant-invert-success, #ffffff);
   border-color: var(--oruga-variant-invert-success, #ffffff);
   color: var(--oruga-variant-success, #006724);
 }
-.o-btn--inverted-success:hover {
+.o-btn--inverted-success:focus, .o-btn--inverted-success:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   background-color: var(--oruga-variant-invert-info, #ffffff);
   border-color: var(--oruga-variant-invert-info, #ffffff);
   color: var(--oruga-variant-info, #005c98);
 }
-.o-btn--inverted-info:hover {
+.o-btn--inverted-info:focus, .o-btn--inverted-info:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   background-color: var(--oruga-variant-invert-warning, #000000);
   border-color: var(--oruga-variant-invert-warning, #000000);
   color: var(--oruga-variant-warning, #f4c300);
 }
-.o-btn--inverted-warning:hover {
+.o-btn--inverted-warning:focus, .o-btn--inverted-warning:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   background-color: var(--oruga-variant-invert-danger, #ffffff);
   border-color: var(--oruga-variant-invert-danger, #ffffff);
   color: var(--oruga-variant-danger, #b60000);
 }
-.o-btn--inverted-danger:hover {
+.o-btn--inverted-danger:focus, .o-btn--inverted-danger:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
+.o-btn:focus, .o-btn:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+  outline: 0;
+}
 
 /* @docs */
 /* @docs */
@@ -741,6 +797,9 @@ body {
 .o-chk--large {
   font-size: var(--oruga-checkbox-font-size-large, 1.5rem);
 }
+.o-chk--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
+}
 .o-chk--primary .o-chk__input {
   border-color: var(--oruga-variant-primary, #445e00);
   background-color: var(--oruga-variant-primary, #445e00);
@@ -751,6 +810,9 @@ body {
 .o-chk--primary .o-chk__input--indeterminate {
   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:%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");
 }
+.o-chk--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
+}
 .o-chk--secondary .o-chk__input {
   border-color: var(--oruga-variant-secondary, #6c757d);
   background-color: var(--oruga-variant-secondary, #6c757d);
@@ -761,6 +823,9 @@ body {
 .o-chk--secondary .o-chk__input--indeterminate {
   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:%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");
 }
+.o-chk--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
+}
 .o-chk--success .o-chk__input {
   border-color: var(--oruga-variant-success, #006724);
   background-color: var(--oruga-variant-success, #006724);
@@ -771,6 +836,9 @@ body {
 .o-chk--success .o-chk__input--indeterminate {
   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:%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");
 }
+.o-chk--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
+}
 .o-chk--info .o-chk__input {
   border-color: var(--oruga-variant-info, #005c98);
   background-color: var(--oruga-variant-info, #005c98);
@@ -781,6 +849,9 @@ body {
 .o-chk--info .o-chk__input--indeterminate {
   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:%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");
 }
+.o-chk--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
+}
 .o-chk--warning .o-chk__input {
   border-color: var(--oruga-variant-warning, #f4c300);
   background-color: var(--oruga-variant-warning, #f4c300);
@@ -791,6 +862,9 @@ body {
 .o-chk--warning .o-chk__input--indeterminate {
   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:%23000000' 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");
 }
+.o-chk--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
+}
 .o-chk--danger .o-chk__input {
   border-color: var(--oruga-variant-danger, #b60000);
   background-color: var(--oruga-variant-danger, #b60000);
@@ -801,11 +875,18 @@ body {
 .o-chk--danger .o-chk__input--indeterminate {
   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:%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");
 }
+.o-chk:focus .o-chk__input, .o-chk:focus-within .o-chk__input {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
+.o-clps {
+  width: 100%;
+}
 .o-clps__trigger {
   cursor: pointer;
+  display: inline-block;
 }
 .o-clps__content {
   display: inherit;
@@ -957,7 +1038,7 @@ body {
   border-top-right-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered {
-  background-color: var(--oruga-datepicker-item-hovered-within-background-color, rgba(var(--oruga-grey), 0.5));
+  background-color: var(--oruga-datepicker-item-hovered-within-background-color, rgb(from var(--oruga-grey) r g b/50%));
   color: var(--oruga-datepicker-item-hovered-color, var(--oruga-grey-lighter));
   border-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
@@ -978,7 +1059,7 @@ body {
   border-top-right-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .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(var(--oruga-primary), 0.5));
+  background-color: var(--oruga-datepicker-item-selected-within-background-color, rgb(from var(--oruga-primary) r g b/50%));
   border-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .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) {
@@ -1055,6 +1136,10 @@ body {
   width: 33.33%;
   height: 2.5rem;
 }
+.o-dpck--expanded {
+  width: 100%;
+  flex-grow: 1;
+}
 .o-dpck--mobile .o-dpck__header__previous {
   order: 1;
   flex-grow: 1;
@@ -1077,6 +1162,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  --oruga-dropdown-menu-box-shadow: 0,0,0,0;
 }
 
 /* @docs */
@@ -1095,7 +1181,7 @@ body {
   cursor: pointer;
   display: none;
   background-color: var(--oruga-dropdown-mobile-overlay-color, rgba(0, 0, 0, 0.86));
-  z-index: var(--oruga-dropdown-mobile-overlay-zindex, 40);
+  z-index: var(--oruga-dropdown-mobile-overlay-zindex, 55);
 }
 .o-drop__trigger {
   width: 100%;
@@ -1104,7 +1190,7 @@ body {
   position: absolute;
   display: block;
   min-width: var(--oruga-dropdown-menu-width, 12rem);
-  z-index: var(--oruga-dropdown-menu-zindex, 20);
+  z-index: var(--oruga-dropdown-menu-zindex, 50);
   background-color: var(--oruga-dropdown-menu-background, #ffffff);
   border-radius: var(--oruga-dropdown-menu-border-radius, var(--oruga-base-border-radius));
   box-shadow: var(--oruga-dropdown-menu-box-shadow, 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02));
@@ -1216,7 +1302,7 @@ body {
   width: var(--oruga-dropdown-mobile-width, calc(100vw - 40px));
   max-width: var(--oruga-dropdown-mobile-max-width, 460px);
   max-height: var(--oruga-dropdown-mobile-max-height, calc(100vh - 120px));
-  z-index: var(--oruga-dropdown-mobile-zindex, 50);
+  z-index: var(--oruga-dropdown-mobile-zindex, 60);
 }
 .o-drop--mobile > .o-drop__overlay {
   display: block;
@@ -1484,23 +1570,32 @@ body {
   font-size: var(--oruga-input-font-size-large, 1.5rem);
 }
 .o-input--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   border-color: var(--oruga-variant-primary, #445e00);
 }
 .o-input--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   border-color: var(--oruga-variant-secondary, #6c757d);
 }
 .o-input--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   border-color: var(--oruga-variant-success, #006724);
 }
 .o-input--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   border-color: var(--oruga-variant-info, #005c98);
 }
 .o-input--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   border-color: var(--oruga-variant-warning, #f4c300);
 }
 .o-input--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   border-color: var(--oruga-variant-danger, #b60000);
 }
+.o-input:focus, .o-input:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
@@ -1532,9 +1627,6 @@ body {
 
 /* @docs */
 /* @docs */
-.o-menu {
-  font-size: var(--oruga-base-font-size, 1rem);
-}
 .o-menu--small {
   font-size: var(--oruga-menu-font-size-small, 0.75rem);
 }
@@ -1571,11 +1663,15 @@ body {
   list-style: none;
   color: var(--oruga-menu-item-color, var(--oruga-grey-dark));
   padding: var(--oruga-menu-item-padding, 0.5em 0.75em);
+  font-size: var(--oruga-menu-item-size, 1rem);
 }
 .o-menu__item:hover:not(.o-menu__item--active):not(.o-menu__item--disabled) {
   color: var(--oruga-menu-item-hover-color, var(--oruga-black));
   background-color: var(--oruga-menu-item-hover-background-color, var(--oruga-grey-light));
 }
+.o-menu__item--icon-text .o-icon {
+  margin-right: var(--oruga-menu-icon-spacer, 0.5rem);
+}
 .o-menu__item--active {
   color: var(--oruga-menu-item-active-color, var(--oruga-primary-invert));
   background-color: var(--oruga-menu-item-active-background-color, var(--oruga-primary));
@@ -1983,23 +2079,32 @@ body {
   --oruga-radio-size: 1.5rem;
 }
 .o-radio--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   --oruga-radio-active-background-color: #445e00;
 }
 .o-radio--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   --oruga-radio-active-background-color: #6c757d;
 }
 .o-radio--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   --oruga-radio-active-background-color: #006724;
 }
 .o-radio--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   --oruga-radio-active-background-color: #005c98;
 }
 .o-radio--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   --oruga-radio-active-background-color: #f4c300;
 }
 .o-radio--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   --oruga-radio-active-background-color: #b60000;
 }
+.o-radio:focus .o-radio__input, .o-radio:focus-within .o-radio__input {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
@@ -2010,7 +2115,9 @@ body {
 .o-ctrl-sel--expanded {
   width: 100%;
   flex-grow: 1;
-  flex-shrink: 1;
+}
+.o-ctrl-sel--expanded .o-sel {
+  width: 100%;
 }
 
 .o-sel {
@@ -2058,21 +2165,27 @@ body {
   font-size: var(--oruga-select-font-size-large, 1.5rem);
 }
 .o-sel--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   border-color: var(--oruga-variant-primary, #445e00);
 }
 .o-sel--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   border-color: var(--oruga-variant-secondary, #6c757d);
 }
 .o-sel--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   border-color: var(--oruga-variant-success, #006724);
 }
 .o-sel--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   border-color: var(--oruga-variant-info, #005c98);
 }
 .o-sel--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   border-color: var(--oruga-variant-warning, #f4c300);
 }
 .o-sel--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   border-color: var(--oruga-variant-danger, #b60000);
 }
 .o-sel--rounded {
@@ -2098,6 +2211,12 @@ body {
 .o-sel__icon-left {
   left: 0;
 }
+.o-sel[disabled] {
+  cursor: inherit;
+}
+.o-sel:focus, .o-sel:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
@@ -2121,6 +2240,15 @@ body {
   margin: var(--oruga-skeleton-margin, 0.5rem 0 0 0);
   line-height: var(--oruga-skeleton-font-size, 1rem);
 }
+.o-sklt__item--small {
+  line-height: var(--oruga-skeleton-font-size-small, 0.75rem);
+}
+.o-sklt__item--medium {
+  line-height: var(--oruga-skeleton-font-size-medium, 1.25rem);
+}
+.o-sklt__item--large {
+  line-height: var(--oruga-skeleton-font-size-large, 1.5rem);
+}
 .o-sklt__item--rounded {
   border-radius: var(--oruga-skeleton-border-radius, var(--oruga-base-border-radius));
 }
@@ -2133,15 +2261,6 @@ body {
 .o-sklt__item::after {
   content: " ";
 }
-.o-sklt__item--small {
-  line-height: var(--oruga-skeleton-font-size-small, 0.75rem);
-}
-.o-sklt__item--medium {
-  line-height: var(--oruga-skeleton-font-size-medium, 1.25rem);
-}
-.o-sklt__item--large {
-  line-height: var(--oruga-skeleton-font-size-large, 1.5rem);
-}
 .o-sklt--centered {
   align-items: center;
 }
@@ -2287,7 +2406,7 @@ body {
   height: 100%;
   box-shadow: var(--oruga-slider-track-shadow, 0px 0px 0px var(--oruga-grey));
   background: var(--oruga-slider-fill-background, var(--oruga-primary));
-  border-radius: var(--oruga-slider-track-radius var(--oruga-base-border-radius));
+  border-radius: var(--oruga-slider-track-radius, var(--oruga-base-border-radius));
   border: var(--oruga-slider-track-border, 0px solid var(--oruga-grey));
   top: 50%;
   transform: translateY(-50%);
@@ -2295,21 +2414,39 @@ body {
 .o-slide__fill--primary {
   background: var(--oruga-variant-primary, #445e00);
 }
+.o-slide__fill--primary + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
+}
 .o-slide__fill--secondary {
   background: var(--oruga-variant-secondary, #6c757d);
 }
+.o-slide__fill--secondary + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
+}
 .o-slide__fill--success {
   background: var(--oruga-variant-success, #006724);
 }
+.o-slide__fill--success + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
+}
 .o-slide__fill--info {
   background: var(--oruga-variant-info, #005c98);
 }
+.o-slide__fill--info + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
+}
 .o-slide__fill--warning {
   background: var(--oruga-variant-warning, #f4c300);
 }
+.o-slide__fill--warning + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
+}
 .o-slide__fill--danger {
   background: var(--oruga-variant-danger, #b60000);
 }
+.o-slide__fill--danger + .o-slide__thumb-wrapper {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
+}
 .o-slide .o-slide__track {
   height: var(--oruga-slider-track-height, calc(var(--oruga-base-font-size) / 2));
 }
@@ -2403,6 +2540,9 @@ body {
   pointer-events: none;
   opacity: var(--oruga-slider-track-disabled, 0.5);
 }
+.o-slide:active .o-slide__thumb, .o-slide:focus .o-slide__thumb, .o-slide:focus-within .o-slide__thumb {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
@@ -2849,6 +2989,7 @@ body {
   display: inline-flex;
   align-items: center;
   position: relative;
+  border-radius: 50rem;
 }
 .o-switch--small {
   font-size: var(--oruga-font-size-name, 0.75rem);
@@ -2859,39 +3000,75 @@ body {
 .o-switch--large {
   font-size: var(--oruga-font-size-name, 1.5rem);
 }
+.o-switch--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
+}
 .o-switch--primary .o-switch__check--checked {
   background: var(--oruga-variant-primary, #445e00);
 }
+.o-switch--primary-passive {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
+}
 .o-switch--primary-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-primary, #445e00);
 }
+.o-switch--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
+}
 .o-switch--secondary .o-switch__check--checked {
   background: var(--oruga-variant-secondary, #6c757d);
 }
+.o-switch--secondary-passive {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
+}
 .o-switch--secondary-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-secondary, #6c757d);
 }
+.o-switch--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
+}
 .o-switch--success .o-switch__check--checked {
   background: var(--oruga-variant-success, #006724);
 }
+.o-switch--success-passive {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
+}
 .o-switch--success-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-success, #006724);
 }
+.o-switch--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
+}
 .o-switch--info .o-switch__check--checked {
   background: var(--oruga-variant-info, #005c98);
 }
+.o-switch--info-passive {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
+}
 .o-switch--info-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-info, #005c98);
 }
+.o-switch--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
+}
 .o-switch--warning .o-switch__check--checked {
   background: var(--oruga-variant-warning, #f4c300);
 }
+.o-switch--warning-passive {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
+}
 .o-switch--warning-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-warning, #f4c300);
 }
+.o-switch--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
+}
 .o-switch--danger .o-switch__check--checked {
   background: var(--oruga-variant-danger, #b60000);
 }
+.o-switch--danger-passive {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
+}
 .o-switch--danger-passive .o-switch__check:not(.o-switch__check--checked) {
   background: var(--oruga-variant-danger, #b60000);
 }
@@ -2945,6 +3122,9 @@ body {
 .o-switch--disabled {
   opacity: var(--oruga-switch-disabled-opacity, var(--oruga-base-disabled-opacity));
 }
+.o-switch:focus .o-switch__check, .o-switch:focus-within .o-switch__check {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+}
 
 /* @docs */
 /* @docs */
@@ -2975,6 +3155,7 @@ body {
   left: 0;
   top: 0;
   background: var(--oruga-table-background-color, #fff);
+  z-index: calc(var(--oruga-table-sticky-zindex, 1) + 1);
 }
 .o-table__wrapper--scrollable {
   -webkit-overflow-scrolling: touch;
@@ -3087,7 +3268,7 @@ body {
   position: sticky;
   left: 0;
   top: 0;
-  z-index: calc(var(--oruga-table-sticky-zindex, 1) + 0);
+  z-index: var(--oruga-table-sticky-zindex, 1);
   background: var(--oruga-table-background-color, #fff);
 }
 .o-table__th--unselectable {
@@ -3268,7 +3449,6 @@ body {
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: flex-start;
-  overflow-x: auto;
   padding-bottom: var(--oruga-tabs-border-bottom-width, 1px);
   font-size: var(--oruga-tabs-font-size, var(--oruga-base-font-size));
 }
@@ -3290,6 +3470,11 @@ body {
 .o-tabs__nav-item-icon {
   margin-right: var(--oruga-tabs-icon-margin, 0.5em);
 }
+.o-tabs__nav-item:focus, .o-tabs__nav-item:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+  outline: 0;
+  border-radius: var(--oruga-base-border-radius);
+}
 .o-tabs__nav-item-default {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -3422,7 +3607,7 @@ body {
 /* @docs */
 /* @docs */
 .o-taginput {
-  display: block;
+  display: flex;
 }
 .o-taginput__container {
   display: flex;
@@ -3437,6 +3622,7 @@ body {
   font-size: var(--oruga-base-font-size, 1rem);
   line-height: var(--oruga-input-line-height, var(--oruga-base-line-height));
   margin: var(--oruga-input-margin, 0);
+  width: var(--oruga-taginput-width, inherit);
 }
 .o-taginput__container--small {
   font-size: var(--oruga-taginput-font-size-small, 0.75rem);
@@ -3455,6 +3641,7 @@ body {
 .o-taginput__input {
   border: none;
   box-shadow: none;
+  width: 100%;
 }
 .o-taginput__item {
   display: inline-flex;
@@ -3465,29 +3652,39 @@ body {
   border-radius: var(--oruga-taginput-item-border-radius, var(--oruga-base-border-radius));
 }
 .o-taginput__item--primary {
+  --oruga-focus: rgba(68, 94, 0, 0.25);
   background-color: var(--oruga-variant-primary, #445e00);
   color: var(--oruga-variant-invert-primary, #ffffff);
 }
 .o-taginput__item--secondary {
+  --oruga-focus: rgba(108, 117, 125, 0.25);
   background-color: var(--oruga-variant-secondary, #6c757d);
   color: var(--oruga-variant-invert-secondary, #ffffff);
 }
 .o-taginput__item--success {
+  --oruga-focus: rgba(0, 103, 36, 0.25);
   background-color: var(--oruga-variant-success, #006724);
   color: var(--oruga-variant-invert-success, #ffffff);
 }
 .o-taginput__item--info {
+  --oruga-focus: rgba(0, 92, 152, 0.25);
   background-color: var(--oruga-variant-info, #005c98);
   color: var(--oruga-variant-invert-info, #ffffff);
 }
 .o-taginput__item--warning {
+  --oruga-focus: rgba(244, 195, 0, 0.25);
   background-color: var(--oruga-variant-warning, #f4c300);
   color: var(--oruga-variant-invert-warning, #000000);
 }
 .o-taginput__item--danger {
+  --oruga-focus: rgba(182, 0, 0, 0.25);
   background-color: var(--oruga-variant-danger, #b60000);
   color: var(--oruga-variant-invert-danger, #ffffff);
 }
+.o-taginput__item:focus, .o-taginput__item:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+  outline: 0;
+}
 .o-taginput__counter {
   display: block;
   float: right;