@oruga-ui/theme-oruga 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oruga-ui/theme-oruga",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Default theme for Oruga",
   "license": "MIT",
   "type": "module",
@@ -17,7 +17,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/oruga-ui/theme-oruga.git"
+    "url": "git+https://github.com/oruga-ui/theme-oruga.git"
   },
   "bugs": {
     "url": "https://github.com/oruga-ui/theme-oruga/issues"
@@ -34,10 +34,10 @@
     "update": "ncu -u"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "6.5.2",
-    "@oruga-ui/oruga-next": "^0.8.9",
+    "@oruga-ui/examples": "^0.9.0-pre.1",
+    "@oruga-ui/oruga-next": "^0.9.0-pre.1",
     "@rollup/plugin-typescript": "11.1.6",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "5.1.1",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
@@ -45,26 +45,25 @@
     "clean-css-cli": "^5.6.3",
     "core-js": "3.37.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
     "npm-check-updates": "^16.14.20",
-    "postcss": "8.4.38",
-    "prettier": "^3.2.5",
-    "rimraf": "5.0.7",
-    "rollup": "^4.17.2",
+    "postcss": "8.4.40",
+    "prettier": "^3.3.3",
+    "rimraf": "6.0.1",
+    "rollup": "^4.19.1",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-sass": "1.12.22",
-    "sass": "1.77.2",
-    "stylelint": "^16.5.0",
-    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.3.0",
-    "tslib": "2.6.2",
-    "typescript": "5.4.5",
-    "vite": "^5.2.11",
-    "vue": "3.4.27",
-    "vue-router": "4.3.2",
-    "vue-tsc": "2.0.19"
+    "rollup-plugin-sass": "1.13.1",
+    "sass": "1.77.8",
+    "stylelint": "^16.8.1",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-prettier": "^5.0.2",
+    "stylelint-scss": "^6.4.1",
+    "typescript": "5.5.4",
+    "vite": "^5.3.5",
+    "vue": "^3.4.34",
+    "vue-router": "4.4.0",
+    "vue-tsc": "^2.0.29"   
   }
 }

package/src/assets/scss/components/_autocomplete.scss

@@ -1,4 +1,5 @@
 /* @docs */
+$autocomplete-item-hover-background-color: #f5f5f5 !default;
 /* @docs */
 
 .o-acp {
@@ -11,5 +12,12 @@
     &--empty {
       @extend .o-drop--disabled;
     }
+
+    &--hover {
+      background-color: var(
+        --#{$prefix}autocomplete-item-hover-background-color,
+        $autocomplete-item-hover-background-color
+      );
+    }
   }
 }

package/src/assets/scss/components/_button.scss

@@ -60,12 +60,13 @@ $button-outlined-background-color: transparent !default;
   height: var(--#{$prefix}button-height, $button-height);
 
   &__wrapper {
-    @include side-flex-gap($button-margin-icon-to-text);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
     width: 100%;
+
+    @include side-flex-gap($button-margin-icon-to-text);
   }
 
   &__label {
@@ -89,26 +90,28 @@ $button-outlined-background-color: transparent !default;
     pointer-events: none;
   }
 
-  // size variants
+  /* size variants*/
   @each $name, $value in $sizes {
     &--#{$name} {
       font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
     }
   }
 
-  // color variants
+  /* color variants*/
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
 
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       border-color: transparent;
       background-color: var(--#{$prefix}variant-#{$name}, $color);
       color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
 
       &:hover {
-        // background-color: darken($color, 2.5%)
-        // IE 11 needs polyfill
+        /* background-color: darken($color, 2.5%)*/
+        /* IE 11 needs polyfill*/
         filter: brightness(97.5%);
       }
     }
@@ -140,6 +143,8 @@ $button-outlined-background-color: transparent !default;
       $color-invert: list.nth($pair, 2);
 
       &-#{$name} {
+        --#{$prefix}focus: #{createFocus($color)};
+
         background-color: var(
           --#{$prefix}button-outlined-background-color,
           $button-outlined-background-color
@@ -147,6 +152,7 @@ $button-outlined-background-color: transparent !default;
         border-color: var(--#{$prefix}variant-#{$name}, $color);
         color: var(--#{$prefix}variant-#{$name}, $color);
 
+        &:focus,
         &:hover {
           border-color: transparent;
           background-color: var(--#{$prefix}variant-#{$name}, $color);
@@ -182,8 +188,8 @@ $button-outlined-background-color: transparent !default;
     color: var(--#{$prefix}button-background-color, $button-background-color);
 
     &:hover {
-      // background-color: darken($color-invert, 5%)
-      // IE 11 needs polyfill
+      /* background-color: darken($color-invert, 5%)*/
+      /* IE 11 needs polyfill*/
       filter: brightness(95%);
     }
 
@@ -192,6 +198,8 @@ $button-outlined-background-color: transparent !default;
       $color-invert: list.nth($pair, 2);
 
       &-#{$name} {
+        --#{$prefix}focus: #{createFocus($color)};
+
         background-color: var(
           --#{$prefix}variant-invert-#{$name},
           $color-invert
@@ -199,12 +207,20 @@ $button-outlined-background-color: transparent !default;
         border-color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
         color: var(--#{$prefix}variant-#{$name}, $color);
 
+        &:focus,
         &:hover {
-          // background-color: darken($color-invert, 5%)
-          // IE 11 needs polyfill
+          /* background-color: darken($color-invert, 5%)*/
+          /* IE 11 needs polyfill*/
           filter: brightness(95%);
         }
       }
     }
   }
+
+  /* focus effect*/
+  &:focus,
+  &:focus-within {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+    outline: 0;
+  }
 }

package/src/assets/scss/components/_checkbox.scss

@@ -139,7 +139,10 @@ $checkbox-line-height: 1.5 !default;
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-chk__input {
         border-color: var(--#{$prefix}variant-#{$name}, $color);
         background-color: var(--#{$prefix}variant-#{$name}, $color);
@@ -154,4 +157,10 @@ $checkbox-line-height: 1.5 !default;
       }
     }
   }
+
+  // focus effect
+  &:focus &__input,
+  &:focus-within &__input {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_collapse.scss

@@ -2,8 +2,11 @@
 /* @docs */
 
 .o-clps {
+  width: 100%;
+
   &__trigger {
     cursor: pointer;
+    display: inline-block;
   }
 
   &__content {

package/src/assets/scss/components/_datepicker.scss

@@ -23,16 +23,14 @@ $datepicker-item-padding: 0.5rem 0.75rem !default;
 $datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
 $datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
 $datepicker-item-selected-border-radius: 0 !default;
-$datepicker-item-selected-within-background-color: rgba(
-  $datepicker-item-selected-background-color,
-  0.5
+$datepicker-item-selected-within-background-color: rgb(
+  from $datepicker-item-selected-background-color r g b / 50%
 ) !default;
 $datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
 $datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
 $datepicker-item-hovered-background-color: #f5f5f5 !default;
-$datepicker-item-hovered-within-background-color: rgba(
-  $datepicker-item-hovered-background-color,
-  0.5
+$datepicker-item-hovered-within-background-color: rgb(
+  from $datepicker-item-hovered-background-color r g b / 50%
 ) !default;
 $datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
 $datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
@@ -469,6 +467,11 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
     height: 2.5rem;
   }
 
+  &--expanded {
+    width: 100%;
+    flex-grow: 1;
+  }
+
   &--mobile {
     .o-dpck__header__previous {
       order: 1;

package/src/assets/scss/components/_datetimepicker.scss

@@ -6,5 +6,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    // override time dropdown shadow
+    --#{$prefix}dropdown-menu-box-shadow: 0,0,0,0;
   }
 }

package/src/assets/scss/components/_dropdown.scss

@@ -21,13 +21,13 @@ $dropdown-menu-spacer: 0px !default;
 $dropdown-menu-margin: 0 !default;
 $dropdown-menu-padding: 0.5rem 0 0.5rem 0 !default;
 $dropdown-menu-width: 12rem !default;
-$dropdown-menu-zindex: 20 !default;
+$dropdown-menu-zindex: 50 !default;
 $dropdown-mobile-max-height: calc(100vh - 120px) !default;
 $dropdown-mobile-max-width: 460px !default;
 $dropdown-mobile-overlay-color: rgba(#000000, 0.86) !default;
-$dropdown-mobile-overlay-zindex: 40 !default;
+$dropdown-mobile-overlay-zindex: 55 !default;
 $dropdown-mobile-width: calc(100vw - 40px) !default;
-$dropdown-mobile-zindex: 50 !default;
+$dropdown-mobile-zindex: 60 !default;
 /* @docs */
 
 .o-drop {

package/src/assets/scss/components/_input.scss

@@ -133,8 +133,17 @@ $input-textarea-padding: 0.625em !default;
   // colar variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       border-color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
+
+  // focus effect
+  &:focus,
+  &:focus-within {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_menu.scss

@@ -13,11 +13,10 @@ $menu-nested-list-padding-left: 0.75em !default;
 $menu-label-color: $grey !default;
 $menu-label-font-size: 0.75em !default;
 $menu-label-spacing: 1em !default;
+$menu-icon-spacer: 0.5rem !default;
 /* @docs */
 
 .o-menu {
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-
   @each $name, $value in $sizes {
     &--#{$name} {
       font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
@@ -61,6 +60,7 @@ $menu-label-spacing: 1em !default;
     list-style: none;
     color: var(--#{$prefix}menu-item-color, $menu-item-color);
     padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
+    font-size: var(--#{$prefix}menu-item-size, $base-font-size);
 
     &:hover:not(&--active):not(&--disabled) {
       color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
@@ -70,6 +70,10 @@ $menu-label-spacing: 1em !default;
       );
     }
 
+    &--icon-text .o-icon {
+      margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
+    }
+
     &--active {
       color: var(--#{$prefix}menu-item-active-color, $menu-item-active-color);
       background-color: var(

package/src/assets/scss/components/_radio.scss

@@ -60,7 +60,7 @@ $radio-line-height: 1.25 !default;
     box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
     border-radius: 50%;
     background: var(
-      --oruga-radio-active-background-color,
+      --#{$prefix}radio-active-background-color,
       $radio-active-background-color
     );
     mask-image: url(svg_radio_empty());
@@ -97,8 +97,16 @@ $radio-line-height: 1.25 !default;
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
+
     &--#{$name} {
-      --oruga-radio-active-background-color: #{$color};
+      --#{$prefix}focus: #{createFocus($color)};
+      --#{$prefix}radio-active-background-color: #{$color};
     }
   }
+
+  // focus effect
+  &:focus &__input,
+  &:focus-within &__input {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_select.scss

@@ -36,7 +36,10 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
   &--expanded {
     width: 100%;
     flex-grow: 1;
-    flex-shrink: 1;
+
+    .o-sel {
+      width: 100%;
+    }
   }
 }
 
@@ -97,7 +100,10 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
   // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       border-color: var(--#{$prefix}variant-#{$name}, $color);
     }
   }
@@ -137,4 +143,14 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
   &__icon-left {
     left: 0;
   }
+
+  &[disabled] {
+    cursor: inherit;
+  }
+
+  // focus effect
+  &:focus,
+  &:focus-within {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_skeleton.scss

@@ -39,6 +39,14 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
     background: var(--#{$prefix}skeleton-background, $skeleton-background);
     margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
 
+    @include steps-size($base-font-size);
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        @include steps-size($value, $name);
+      }
+    }
+
     &--rounded {
       border-radius: var(
         --#{$prefix}skeleton-border-radius,
@@ -59,14 +67,6 @@ $skeleton-margin: 0.5rem 0 0 0 !default;
     &::after {
       content: "\00a0";
     }
-
-    @include steps-size($base-font-size);
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        @include steps-size($value, $name);
-      }
-    }
   }
 
   &--centered {

package/src/assets/scss/components/_slider.scss

@@ -131,7 +131,7 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
       --#{$prefix}slider-fill-background,
       $slider-fill-background
     );
-    border-radius: var(--#{$prefix}slider-track-radius $slider-track-radius);
+    border-radius: var(--#{$prefix}slider-track-radius, $slider-track-radius);
     border: var(--#{$prefix}slider-track-border, $slider-track-border);
     // Fix alignment in IE 11. Cancel out for others
     top: 50%;
@@ -139,8 +139,13 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
+
       &--#{$name} {
         background: var(--#{$prefix}variant-#{$name}, $color);
+
+        + .o-slide__thumb-wrapper {
+          --#{$prefix}focus: #{createFocus($color)};
+        }
       }
     }
   }
@@ -184,4 +189,11 @@ $slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
     pointer-events: none;
     opacity: var(--#{$prefix}slider-track-disabled, $slider-track-disabled);
   }
+
+  // focus effect
+  &:active &__thumb,
+  &:focus &__thumb,
+  &:focus-within &__thumb {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_switch.scss

@@ -24,6 +24,7 @@ $switch-width: 2.75 * 1em !default;
   display: inline-flex;
   align-items: center;
   position: relative;
+  border-radius: 50rem;
 
   // size variants
   @each $name, $value in $sizes {
@@ -35,12 +36,17 @@ $switch-width: 2.75 * 1em !default;
   // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
+
     &--#{$name} {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-switch__check--checked {
         background: var(--#{$prefix}variant-#{$name}, $color);
       }
     }
     &--#{$name}-passive {
+      --#{$prefix}focus: #{createFocus($color)};
+
       .o-switch__check:not(.o-switch__check--checked) {
         background: var(--#{$prefix}variant-#{$name}, $color);
       }
@@ -135,4 +141,10 @@ $switch-width: 2.75 * 1em !default;
   &--disabled {
     opacity: var(--#{$prefix}switch-disabled-opacity, $switch-disabled-opacity);
   }
+
+  // focus effect
+  &:focus &__check,
+  &:focus-within &__check {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+  }
 }

package/src/assets/scss/components/_table.scss

@@ -78,6 +78,9 @@ $table-th-padding: 0.5em 0.75em !default;
           --#{$prefix}table-background-color,
           $table-background-color
         );
+        z-index: calc(
+          var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex) + 1
+        );
       }
     }
 
@@ -252,9 +255,7 @@ $table-th-padding: 0.5em 0.75em !default;
       position: sticky;
       left: 0;
       top: 0;
-      z-index: calc(
-        var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex) + 0
-      );
+      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
       background: var(
         --#{$prefix}table-background-color,
         $table-background-color

package/src/assets/scss/components/_tabs.scss

@@ -23,7 +23,6 @@ $tabs-toggle-link-border-style: solid !default;
 $tabs-toggle-link-border-width: 1px !default;
 $tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
 $tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
-$tabs-toggle-link-radius: var(--#{$prefix}base-border-radius) !default;
 $tabs-toggle-link-active-background-color: var(--#{$prefix}primary) !default;
 $tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
 $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
@@ -96,7 +95,7 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
       );
       border-radius: var(
         --#{$prefix}tabs-border-bottom-color,
-        #{$tabs-toggle-link-radius} 0 0 #{$tabs-toggle-link-radius}
+        #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
       );
 
       &--active {
@@ -147,7 +146,6 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
     flex-grow: 1;
     flex-shrink: 0;
     justify-content: flex-start;
-    overflow-x: auto;
     // padding bottom to keep showing the border-bottom
     padding-bottom: var(
       --#{$prefix}tabs-border-bottom-width,
@@ -174,6 +172,14 @@ $tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
         margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
       }
 
+      // focus effect
+      &:focus,
+      &:focus-within {
+        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+        outline: 0;
+        border-radius: #{$tabs-boxed-link-radius};
+      }
+
       &-default {
         @include item;
 

package/src/assets/scss/components/_taginput.scss

@@ -12,7 +12,7 @@ $taginput-margin-icon-to-text: 0.1875em !default;
 /* @docs */
 
 .o-taginput {
-  display: block;
+  display: flex;
 
   &__container {
     display: flex;
@@ -31,6 +31,7 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     font-size: var(--#{$prefix}base-font-size, $base-font-size);
     line-height: var(--#{$prefix}input-line-height, $input-line-height);
     margin: var(--#{$prefix}input-margin, $input-margin);
+    width: var(--#{$prefix}taginput-width, inherit);
 
     // size variants
     @each $name, $value in $sizes {
@@ -49,6 +50,7 @@ $taginput-margin-icon-to-text: 0.1875em !default;
   &__input {
     border: none;
     box-shadow: none;
+    width: 100%;
   }
 
   &__item {
@@ -69,11 +71,21 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &--#{$name} {
+        --#{$prefix}focus: #{createFocus($color)};
+
         background-color: var(--#{$prefix}variant-#{$name}, $color);
         color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
       }
     }
+
+    // focus effect
+    &:focus,
+    &:focus-within {
+      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+      outline: 0;
+    }
   }
 
   &__counter {
@@ -91,4 +103,15 @@ $taginput-margin-icon-to-text: 0.1875em !default;
     flex-grow: 1;
     flex-shrink: 1;
   }
+
+  // // focus effect
+  // &:focus &__container,
+  // &:focus-within &__container {
+  //   box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+
+  //   // disable focus effect for inner input
+  //   .o-input {
+  //     --#{$prefix}focus: transparent;
+  //   }
+  // }
 }

package/src/assets/scss/utils/_helpers.scss

@@ -1,5 +1,6 @@
 @use "sass:string";
 @use "sass:math";
+@use "sass:color";
 
 /**********************************
 *   Utility mixins and functions
@@ -19,9 +20,9 @@
 
   @return if(
     $index,
-    str-slice($string, 1, $index - 1) + $replace +
+    string.slice($string, 1, $index - 1) + $replace +
       str-replace(
-        str-slice($string, $index + str-length($search)),
+        string.slice($string, $index + string.length($search)),
         $search,
         $replace
       ),
@@ -105,3 +106,8 @@
 
   @return ($quotient + $remainder) * $sign;
 }
+
+// create a focus color based on a given color
+@function createFocus($color) {
+  @return color.adjust($color, $alpha: -0.75);
+}