uikit 3.23.7 → 3.23.8-dev.65e3f4fda

package/src/scss/components/nav.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Nav
 // Description:     Defines styles for list navigations
 //
@@ -100,7 +102,7 @@ $nav-xlarge-font-size-l:                         8rem !default; // 128px
 
 ul.uk-nav-sub {
     padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left;
-    @if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();}
+    @if(meta.mixin-exists(hook-nav-sub)) {@include hook-nav-sub();}
 }
 
 /*
@@ -134,7 +136,7 @@ ul.uk-nav-sub {
     padding: $nav-header-padding-vertical $nav-header-padding-horizontal;
     text-transform: $nav-header-text-transform;
     font-size: $nav-header-font-size;
-    @if(mixin-exists(hook-nav-header)) {@include hook-nav-header();}
+    @if(meta.mixin-exists(hook-nav-header)) {@include hook-nav-header();}
 }
 
 .uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; }
@@ -145,7 +147,7 @@ ul.uk-nav-sub {
 
 .uk-nav .uk-nav-divider {
     margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal;
-    @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
+    @if(meta.mixin-exists(hook-nav-divider)) {@include hook-nav-divider();}
 }
 
 
@@ -155,7 +157,7 @@ ul.uk-nav-sub {
 .uk-nav-default {
     font-size: $nav-default-font-size;
     line-height: $nav-default-line-height;
-    @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();}
+    @if(meta.mixin-exists(hook-nav-default)) {@include hook-nav-default();}
 }
 
 /*
@@ -164,19 +166,19 @@ ul.uk-nav-sub {
 
 .uk-nav-default > li > a {
     color: $nav-default-item-color;
-    @if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
+    @if(meta.mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();}
 }
 
 /* Hover */
 .uk-nav-default > li > a:hover {
     color: $nav-default-item-hover-color;
-    @if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();}
+    @if(meta.mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();}
 }
 
 /* Active */
 .uk-nav-default > li.uk-active > a {
     color: $nav-default-item-active-color;
-    @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
+    @if(meta.mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();}
 }
 
 /*
@@ -185,7 +187,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-subtitle {
     font-size: $nav-default-subtitle-font-size;
-    @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
+    @if(meta.mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();}
 }
 
 /*
@@ -194,7 +196,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-header {
     color: $nav-default-header-color;
-    @if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();}
+    @if(meta.mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();}
 }
 
 /*
@@ -203,7 +205,7 @@ ul.uk-nav-sub {
 
 .uk-nav-default .uk-nav-divider {
     border-top: $nav-default-divider-border-width solid $nav-default-divider-border;
-    @if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();}
+    @if(meta.mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();}
 }
 
 /*
@@ -228,7 +230,7 @@ ul.uk-nav-sub {
 .uk-nav-primary {
     font-size: $nav-primary-font-size;
     line-height: $nav-primary-line-height;
-    @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
+    @if(meta.mixin-exists(hook-nav-primary)) {@include hook-nav-primary();}
 }
 
 /*
@@ -237,19 +239,19 @@ ul.uk-nav-sub {
 
 .uk-nav-primary > li > a {
     color: $nav-primary-item-color;
-    @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
+    @if(meta.mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();}
 }
 
 /* Hover */
 .uk-nav-primary > li > a:hover {
     color: $nav-primary-item-hover-color;
-    @if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();}
+    @if(meta.mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();}
 }
 
 /* Active */
 .uk-nav-primary > li.uk-active > a {
     color: $nav-primary-item-active-color;
-    @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
+    @if(meta.mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();}
 }
 
 /*
@@ -258,7 +260,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-subtitle {
     font-size: $nav-primary-subtitle-font-size;
-    @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
+    @if(meta.mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();}
 }
 
 /*
@@ -267,7 +269,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-header {
     color: $nav-primary-header-color;
-    @if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();}
+    @if(meta.mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();}
 }
 
 /*
@@ -276,7 +278,7 @@ ul.uk-nav-sub {
 
 .uk-nav-primary .uk-nav-divider {
     border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border;
-    @if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();}
+    @if(meta.mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();}
 }
 
 /*
@@ -301,7 +303,7 @@ ul.uk-nav-sub {
 .uk-nav-secondary {
     font-size: $nav-secondary-font-size;
     line-height: $nav-secondary-line-height;
-    @if(mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();}
+    @if(meta.mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();}
 }
 
 /*
@@ -311,19 +313,19 @@ ul.uk-nav-sub {
 .uk-nav-secondary > li > a {
 
     color: $nav-secondary-item-color;
-    @if(mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();}
+    @if(meta.mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();}
 }
 
 /* Hover */
 .uk-nav-secondary > li > a:hover {
     color: $nav-secondary-item-hover-color;
-    @if(mixin-exists(hook-nav-secondary-item-hover)) {@include hook-nav-secondary-item-hover();}
+    @if(meta.mixin-exists(hook-nav-secondary-item-hover)) {@include hook-nav-secondary-item-hover();}
 }
 
 /* Active */
 .uk-nav-secondary > li.uk-active > a {
     color: $nav-secondary-item-active-color;
-    @if(mixin-exists(hook-nav-secondary-item-active)) {@include hook-nav-secondary-item-active();}
+    @if(meta.mixin-exists(hook-nav-secondary-item-active)) {@include hook-nav-secondary-item-active();}
 }
 
 /*
@@ -333,19 +335,19 @@ ul.uk-nav-sub {
 .uk-nav-secondary .uk-nav-subtitle {
     font-size: $nav-secondary-subtitle-font-size;
     color: $nav-secondary-subtitle-color;
-    @if(mixin-exists(hook-nav-secondary-subtitle)) {@include hook-nav-secondary-subtitle();}
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle)) {@include hook-nav-secondary-subtitle();}
 }
 
 /* Hover */
 .uk-nav-secondary > li > a:hover .uk-nav-subtitle {
     color: $nav-secondary-subtitle-hover-color;
-    @if(mixin-exists(hook-nav-secondary-subtitle-hover)) {@include hook-nav-secondary-subtitle-hover();}
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle-hover)) {@include hook-nav-secondary-subtitle-hover();}
 }
 
 /* Active */
 .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
     color: $nav-secondary-subtitle-active-color;
-    @if(mixin-exists(hook-nav-secondary-subtitle-active)) {@include hook-nav-secondary-subtitle-active();}
+    @if(meta.mixin-exists(hook-nav-secondary-subtitle-active)) {@include hook-nav-secondary-subtitle-active();}
 }
 
 /*
@@ -354,7 +356,7 @@ ul.uk-nav-sub {
 
 .uk-nav-secondary .uk-nav-header {
     color: $nav-secondary-header-color;
-    @if(mixin-exists(hook-nav-secondary-header)) {@include hook-nav-secondary-header();}
+    @if(meta.mixin-exists(hook-nav-secondary-header)) {@include hook-nav-secondary-header();}
 }
 
 /*
@@ -363,7 +365,7 @@ ul.uk-nav-sub {
 
 .uk-nav-secondary .uk-nav-divider {
     border-top: $nav-secondary-divider-border-width solid $nav-secondary-divider-border;
-    @if(mixin-exists(hook-nav-secondary-divider)) {@include hook-nav-secondary-divider();}
+    @if(meta.mixin-exists(hook-nav-secondary-divider)) {@include hook-nav-secondary-divider();}
 }
 
 /*
@@ -392,19 +394,19 @@ ul.uk-nav-sub {
 .uk-nav-medium {
     font-size: $nav-medium-font-size;
     line-height: $nav-medium-line-height;
-    @if(mixin-exists(hook-nav-medium)) {@include hook-nav-medium();}
+    @if(meta.mixin-exists(hook-nav-medium)) {@include hook-nav-medium();}
 }
 
 .uk-nav-large {
     font-size: $nav-large-font-size;
     line-height: $nav-large-line-height;
-    @if(mixin-exists(hook-nav-large)) {@include hook-nav-large();}
+    @if(meta.mixin-exists(hook-nav-large)) {@include hook-nav-large();}
 }
 
 .uk-nav-xlarge {
     font-size: $nav-xlarge-font-size;
     line-height: $nav-xlarge-line-height;
-    @if(mixin-exists(hook-nav-xlarge)) {@include hook-nav-xlarge();}
+    @if(meta.mixin-exists(hook-nav-xlarge)) {@include hook-nav-xlarge();}
 }
 
 /* Tablet Landscape and bigger */
@@ -459,14 +461,14 @@ ul.uk-nav-sub {
     margin-top: $nav-dividers-margin-top;
     padding-top: $nav-dividers-margin-top;
     border-top: $nav-dividers-border-width solid $nav-dividers-border;
-    @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
+    @if(meta.mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}
+@if(meta.mixin-exists(hook-nav-misc)) {@include hook-nav-misc();}
 
 // @mixin hook-nav-sub(){}
 // @mixin hook-nav-header(){}

package/src/scss/components/navbar.scss

@@ -1,3 +1,6 @@
+@use "sass:meta";
+@use "sass:string";
+
 // Name:            Navbar
 // Description:     Component to create horizontal navigation bars
 //
@@ -61,7 +64,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     display: flex;
     /* 1 */
     position: relative;
-    @if(mixin-exists(hook-navbar)) {@include hook-navbar();}
+    @if(meta.mixin-exists(hook-navbar)) {@include hook-navbar();}
 }
 
 
@@ -70,7 +73,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-container:not(.uk-navbar-transparent) {
     background: $navbar-background;
-    @if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();}
+    @if(meta.mixin-exists(hook-navbar-container)) {@include hook-navbar-container();}
 }
 
 // Color Mode
@@ -131,8 +134,8 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
    top: 0;
 }
 
-.uk-navbar-center-left { right: unquote('calc(100% + #{$navbar-gap})'); }
-.uk-navbar-center-right { left: unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-left { right: string.unquote('calc(100% + #{$navbar-gap})'); }
+.uk-navbar-center-right { left: string.unquote('calc(100% + #{$navbar-gap})'); }
 
 [class*="uk-navbar-center-"] {
     width: max-content;
@@ -200,7 +203,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-nav > li > a {
     padding: 0 $navbar-nav-item-padding-horizontal;
     color: $navbar-nav-item-color;
-    @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
+    @if(meta.mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();}
 }
 
 /*
@@ -211,19 +214,19 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-nav > li:hover > a,
 .uk-navbar-nav > li > a[aria-expanded="true"] {
     color: $navbar-nav-item-hover-color;
-    @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}
+    @if(meta.mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();}
 }
 
 /* OnClick */
 .uk-navbar-nav > li > a:active {
     color: $navbar-nav-item-onclick-color;
-    @if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();}
+    @if(meta.mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();}
 }
 
 /* Active */
 .uk-navbar-nav > li.uk-active > a {
     color: $navbar-nav-item-active-color;
-    @if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();}
+    @if(meta.mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();}
 }
 
 
@@ -244,7 +247,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-item {
     padding: 0 $navbar-item-padding-horizontal;
     color: $navbar-item-color;
-    @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();}
+    @if(meta.mixin-exists(hook-navbar-item)) {@include hook-navbar-item();}
 }
 
 /*
@@ -260,14 +263,14 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-toggle {
     padding: 0 $navbar-item-padding-horizontal;
     color: $navbar-toggle-color;
-    @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
+    @if(meta.mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();}
 }
 
 .uk-navbar-toggle:hover,
 .uk-navbar-toggle[aria-expanded="true"] {
     color: $navbar-toggle-hover-color;
     text-decoration: none;
-    @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();}
+    @if(meta.mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();}
 }
 
 /*
@@ -276,12 +279,12 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  */
 
 .uk-navbar-toggle-icon {
-    @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();}
+    @if(meta.mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();}
 }
 
 /* Hover */
 :hover > .uk-navbar-toggle-icon {
-    @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();}
+    @if(meta.mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();}
 }
 
 
@@ -290,7 +293,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-subtitle {
     font-size: $navbar-subtitle-font-size;
-    @if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();}
+    @if(meta.mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();}
 }
 
 
@@ -309,15 +312,15 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  ========================================================================== */
 
 .uk-navbar-primary {
-    @if(mixin-exists(hook-navbar-primary)) {@include hook-navbar-primary();}
+    @if(meta.mixin-exists(hook-navbar-primary)) {@include hook-navbar-primary();}
 }
 
 .uk-navbar-transparent {
-    @if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();}
+    @if(meta.mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();}
 }
 
 .uk-navbar-sticky {
-    @if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();}
+    @if(meta.mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();}
 }
 
 
@@ -341,7 +344,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     padding: $navbar-dropdown-padding;
     background: $navbar-dropdown-background;
     color: $navbar-dropdown-color;
-    @if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();}
+    @if(meta.mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();}
 }
 
 /*
@@ -388,7 +391,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 .uk-navbar-dropdown-large {
     --uk-position-shift-offset: #{$navbar-dropdown-large-shift-margin};
     padding: $navbar-dropdown-large-padding;
-    @if(mixin-exists(hook-navbar-dropdown-large)) {@include hook-navbar-dropdown-large();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-large)) {@include hook-navbar-dropdown-large();}
 }
 
 /*
@@ -408,7 +411,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     --uk-position-offset: #{$navbar-dropdown-dropbar-margin};
     --uk-position-shift-offset: #{$navbar-dropdown-dropbar-shift-margin};
     --uk-position-viewport-offset: #{$navbar-dropdown-dropbar-viewport-margin};
-    @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();}
 }
 
 /* Phone landscape and bigger */
@@ -429,7 +432,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
     --uk-position-shift-offset: #{$navbar-dropdown-dropbar-large-shift-margin};
     padding-top: $navbar-dropdown-dropbar-large-padding-top;
     padding-bottom: $navbar-dropdown-dropbar-large-padding-bottom;
-    @if(mixin-exists(hook-navbar-dropdown-dropbar-large)) {@include hook-navbar-dropdown-dropbar-large();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-dropbar-large)) {@include hook-navbar-dropdown-dropbar-large();}
 }
 
 
@@ -438,7 +441,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  ========================================================================== */
 
 .uk-navbar-dropdown-nav {
-    @if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();}
 }
 
 /*
@@ -447,19 +450,19 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-dropdown-nav > li > a {
     color: $navbar-dropdown-nav-item-color;
-    @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();}
 }
 
 /* Hover */
 .uk-navbar-dropdown-nav > li > a:hover {
     color: $navbar-dropdown-nav-item-hover-color;
-    @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();}
 }
 
 /* Active */
 .uk-navbar-dropdown-nav > li.uk-active > a {
     color: $navbar-dropdown-nav-item-active-color;
-    @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();}
 }
 
 /*
@@ -468,7 +471,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-dropdown-nav .uk-nav-subtitle {
     font-size: $navbar-dropdown-nav-subtitle-font-size;
-    @if(mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-subtitle)) {@include hook-navbar-dropdown-nav-subtitle();}
 }
 
 /*
@@ -477,7 +480,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-dropdown-nav .uk-nav-header {
     color: $navbar-dropdown-nav-header-color;
-    @if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();}
 }
 
 /*
@@ -486,7 +489,7 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
 
 .uk-navbar-dropdown-nav .uk-nav-divider {
     border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border;
-    @if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();}
+    @if(meta.mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();}
 }
 
 /*
@@ -508,14 +511,14 @@ $navbar-nav-gap:                                 0px !default; // Must have a un
  */
 
 .uk-navbar-dropbar {
-    @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
+    @if(meta.mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();}
+@if(meta.mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();}
 
 // @mixin hook-navbar(){}
 // @mixin hook-navbar-container(){}

package/src/scss/components/notification.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Notification
 // Description:     Component to create notification messages
 //
@@ -46,7 +48,7 @@
     /* 2 */
     box-sizing: border-box;
     width: $notification-width;
-    @if(mixin-exists(hook-notification)) {@include hook-notification();}
+    @if(meta.mixin-exists(hook-notification)) {@include hook-notification();}
 }
 
 
@@ -100,7 +102,7 @@
     font-size: $notification-message-font-size;
     line-height: $notification-message-line-height;
     cursor: pointer;
-    @if(mixin-exists(hook-notification-message)) {@include hook-notification-message();}
+    @if(meta.mixin-exists(hook-notification-message)) {@include hook-notification-message();}
 }
 
 * + .uk-notification-message { margin-top: $notification-message-margin-top; }
@@ -115,7 +117,7 @@
     position: absolute;
     top: $notification-close-top;
     right: $notification-close-right;
-    @if(mixin-exists(hook-notification-close)) {@include hook-notification-close();}
+    @if(meta.mixin-exists(hook-notification-close)) {@include hook-notification-close();}
 }
 
 .uk-notification-message:hover .uk-notification-close { display: block; }
@@ -130,7 +132,7 @@
 
 .uk-notification-message-primary {
     color: $notification-message-primary-color;
-    @if(mixin-exists(hook-notification-message-primary)) {@include hook-notification-message-primary();}
+    @if(meta.mixin-exists(hook-notification-message-primary)) {@include hook-notification-message-primary();}
 }
 
 /*
@@ -139,7 +141,7 @@
 
 .uk-notification-message-success {
     color: $notification-message-success-color;
-    @if(mixin-exists(hook-notification-message-success)) {@include hook-notification-message-success();}
+    @if(meta.mixin-exists(hook-notification-message-success)) {@include hook-notification-message-success();}
 }
 
 /*
@@ -148,7 +150,7 @@
 
 .uk-notification-message-warning {
     color: $notification-message-warning-color;
-    @if(mixin-exists(hook-notification-message-warning)) {@include hook-notification-message-warning();}
+    @if(meta.mixin-exists(hook-notification-message-warning)) {@include hook-notification-message-warning();}
 }
 
 /*
@@ -157,14 +159,14 @@
 
 .uk-notification-message-danger {
     color: $notification-message-danger-color;
-    @if(mixin-exists(hook-notification-message-danger)) {@include hook-notification-message-danger();}
+    @if(meta.mixin-exists(hook-notification-message-danger)) {@include hook-notification-message-danger();}
 }
 
 
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-notification-misc)) {@include hook-notification-misc();}
+@if(meta.mixin-exists(hook-notification-misc)) {@include hook-notification-misc();}
 
 // @mixin hook-notification(){}
 // @mixin hook-notification-message(){}

package/src/scss/components/offcanvas.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Off-canvas
 // Description:     Component to create an off-canvas sidebar
 //
@@ -83,7 +85,7 @@
     background: $offcanvas-bar-background;
     /* 3 */
     overflow-y: auto;
-    @if(mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
+    @if(meta.mixin-exists(hook-offcanvas-bar)) {@include hook-offcanvas-bar();}
 }
 
 /* Phone landscape and bigger */
@@ -192,7 +194,7 @@
     top: $offcanvas-close-position;
     right: $offcanvas-close-position;
     padding: $offcanvas-close-padding;
-    @if(mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();}
+    @if(meta.mixin-exists(hook-offcanvas-close)) {@include hook-offcanvas-close();}
 }
 
 /* Tablet landscape and bigger */
@@ -245,7 +247,7 @@
     /* 2 */
     opacity: 0;
     transition: opacity 0.15s linear;
-    @if(mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();}
+    @if(meta.mixin-exists(hook-offcanvas-overlay)) {@include hook-offcanvas-overlay();}
 }
 
 .uk-offcanvas-overlay.uk-open::before { opacity: 1; }
@@ -308,7 +310,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();}
+@if(meta.mixin-exists(hook-offcanvas-misc)) {@include hook-offcanvas-misc();}
 
 // @mixin hook-offcanvas-bar(){}
 // @mixin hook-offcanvas-close(){}

package/src/scss/components/overlay.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Overlay
 // Description:     Component to create content areas overlaying an image
 //
@@ -24,7 +26,7 @@
 
 .uk-overlay {
     padding: $overlay-padding-vertical $overlay-padding-horizontal;
-    @if(mixin-exists(hook-overlay)) {@include hook-overlay();}
+    @if(meta.mixin-exists(hook-overlay)) {@include hook-overlay();}
 }
 
 /*
@@ -38,7 +40,7 @@
  ========================================================================== */
 
 .uk-overlay-icon {
-    @if(mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
+    @if(meta.mixin-exists(hook-overlay-icon)) {@include hook-overlay-icon();}
 }
 
 
@@ -52,7 +54,7 @@
 .uk-overlay-default {
     --uk-inverse: #{$overlay-default-color-mode};
     background: $overlay-default-background;
-    @if(mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
+    @if(meta.mixin-exists(hook-overlay-default)) {@include hook-overlay-default();}
 }
 
 // Color Mode
@@ -66,7 +68,7 @@
 .uk-overlay-primary {
     --uk-inverse: #{$overlay-primary-color-mode};
     background: $overlay-primary-background;
-    @if(mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
+    @if(meta.mixin-exists(hook-overlay-primary)) {@include hook-overlay-primary();}
 }
 
 // Color Mode
@@ -77,7 +79,7 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}
+@if(meta.mixin-exists(hook-overlay-misc)) {@include hook-overlay-misc();}
 
 // @mixin hook-overlay(){}
 // @mixin hook-overlay-icon(){}

package/src/scss/components/padding.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Name:            Padding
 // Description:     Utilities for padding
 //
@@ -71,6 +73,6 @@
 // Hooks
 // ========================================================================
 
-@if(mixin-exists(hook-padding-misc)) {@include hook-padding-misc();}
+@if(meta.mixin-exists(hook-padding-misc)) {@include hook-padding-misc();}
 
 // @mixin hook-padding-misc(){}