@oruga-ui/theme-oruga 0.3.0 → 0.4.0

package/dist/oruga.css

@@ -1,4 +1,4 @@
-/*! Oruga v0.3.0 | MIT License | github.com/oruga-ui/oruga */
+/*! Oruga v0.4.0 | 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 {
@@ -374,6 +379,7 @@ 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);
@@ -382,6 +388,7 @@ body {
   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);
@@ -390,6 +397,7 @@ body {
   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);
@@ -398,6 +406,7 @@ body {
   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);
@@ -406,6 +415,7 @@ body {
   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);
@@ -414,6 +424,7 @@ body {
   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);
@@ -432,61 +443,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);
@@ -518,53 +535,63 @@ body {
   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 {
   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 {
   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 {
   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 {
   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 {
   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 {
   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 +768,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 +781,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 +794,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 +807,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 +820,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 +833,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 +846,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;
@@ -1055,6 +1107,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 +1133,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  --oruga-dropdown-menu-box-shadow: 0,0,0,0;
 }
 
 /* @docs */
@@ -1095,7 +1152,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 +1161,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 +1273,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 +1541,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 +1598,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 +1634,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 +2050,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 +2086,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 +2136,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 +2182,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 */
@@ -2295,21 +2385,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 +2511,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 +2960,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 +2971,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 +3093,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 +3126,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 +3239,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 +3420,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 +3441,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 +3578,7 @@ body {
 /* @docs */
 /* @docs */
 .o-taginput {
-  display: block;
+  display: flex;
 }
 .o-taginput__container {
   display: flex;
@@ -3437,6 +3593,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 +3612,7 @@ body {
 .o-taginput__input {
   border: none;
   box-shadow: none;
+  width: 100%;
 }
 .o-taginput__item {
   display: inline-flex;
@@ -3465,29 +3623,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;