@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

package/src/components/ui3n-input/ui3n-input.vue

@@ -191,6 +191,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="input"
     :class="[
       $style.ui3nInput,
       size === 'large' && $style.large,
@@ -287,38 +288,41 @@
 
 <style lang="scss" module>
   .ui3nInput {
-    --ui3n-input-height: 32px;
-    --ui3n-input-label-font-size: 12px;
-    --ui3n-input-font-size: 13px;
-    --ui3n-input-message-font-size: 10px;
-    --ui3n-input-border-radius: var(--spacing-xs);
-    --ui3n-input-padding-x: 8px;
-    --ui3n-input-message-top: calc(var(--ui3n-input-height) + var(--spacing-m) + 2px);
-    --ui3n-input-outer-padding-top: 1px;
-    --ui3n-input-outer-padding-bottom: 15px;
-    --ui3n-input-outer-padding-x: 1px;
+    --_input-height: var(--ui3n-input-height, 32px);
+    --_input-label-font-size: var(--ui3n-input-label-font-size, 12px);
+    --_input-font-size: var(--ui3n-input-font-size, 13px);
+    --_input-message-font-size: var(--ui3n-input-message-font-size, 10px);
+    --_input-border-radius: var(--ui3n-input-border-radius, 4px);
+    --_input-padding-x: var(--ui3n-input-padding-x, 8px);
+    --_input-message-top: var(--ui3n-input-message-top, calc(var(--_input-height) + 16px + 2px));
+    --_input-outer-padding-top: var(--ui3n-input-outer-padding-top, 1px);
+    --_input-outer-padding-bottom: var(--ui3n-input-outer-padding-bottom, 15px);
+    --_input-outer-padding-x: var(--ui3n-input-outer-padding-x, 1px);
 
     &.withLabel {
-      --ui3n-input-message-top: calc(
-        var(--ui3n-input-height) + calc(var(--ui3n-input-label-font-size) * 1.33) + 6px
+      --_input-message-top: var(
+        --ui3n-input-message-top,
+        calc(var(--_input-height) + calc(var(--_input-label-font-size) * 1.33) + 6px)
       );
     }
 
+    /* The large size reads its own variable first, then the one shared by both sizes. */
     &.large {
-      --ui3n-input-height: 48px;
-      --ui3n-input-font-size: 16px;
-      --ui3n-input-border-radius: 8px;
-      --ui3n-input-padding-x: 12px;
+      --_input-height: var(--ui3n-input-height-large, var(--ui3n-input-height, 48px));
+      --_input-font-size: var(--ui3n-input-font-size-large, var(--ui3n-input-font-size, 16px));
+      --_input-border-radius: var(--ui3n-input-border-radius-large, var(--ui3n-input-border-radius, 8px));
+      --_input-padding-x: var(--ui3n-input-padding-x-large, var(--ui3n-input-padding-x, 12px));
     }
 
     position: relative;
     width: 100%;
-    padding: var(--ui3n-input-outer-padding-top) var(--ui3n-input-outer-padding-x)
-      var(--ui3n-input-outer-padding-bottom) var(--ui3n-input-outer-padding-x);
-    border-radius: var(--ui3n-input-border-radius);
+    padding: var(--_input-outer-padding-top) var(--_input-outer-padding-x)
+      var(--_input-outer-padding-bottom) var(--_input-outer-padding-x);
+    border-radius: var(--_input-border-radius);
 
+    /* hideBottomSpace removes the space, so it doesn't read the public variable */
     &.withoutBottomSpace {
-      --ui3n-input-outer-padding-bottom: 0;
+      --_input-outer-padding-bottom: 0;
     }
 
     &:hover {
@@ -342,7 +346,7 @@
   .ui3nInputLabel {
     display: block;
     width: 100%;
-    font-size: var(--ui3n-input-label-font-size);
+    font-size: var(--_input-label-font-size);
     line-height: 1.33;
     font-weight: 500;
     color: var(--color-text-control-primary-default);
@@ -352,8 +356,8 @@
   .inputWrapper {
     display: flex;
     align-items: center;
-    height: var(--ui3n-input-height);
-    border-radius: var(--ui3n-input-border-radius);
+    height: var(--_input-height);
+    border-radius: var(--_input-border-radius);
     background-color: var(--color-bg-control-secondary-default);
     transition: background-color 0.2s ease-in-out;
   }
@@ -367,9 +371,9 @@
     border: none;
     outline: none;
     height: 100%;
-    padding: 0 var(--ui3n-input-padding-x);
+    padding: 0 var(--_input-padding-x);
     background-color: transparent;
-    font-size: var(--ui3n-input-font-size);
+    font-size: var(--_input-font-size);
     line-height: 1.23;
     font-weight: 400;
     color: var(--color-text-control-primary-default);
@@ -378,7 +382,7 @@
     &::placeholder {
       color: var(--color-text-control-secondary-default);
       font-style: italic;
-      font-size: var(--ui3n-input-font-size);
+      font-size: var(--_input-font-size);
       font-weight: 400;
     }
 
@@ -400,7 +404,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding-left: calc(var(--ui3n-input-padding-x) / 2);
+    padding-left: calc(var(--_input-padding-x) / 2);
   }
 
   .appendIconSlot {
@@ -408,18 +412,18 @@
     align-items: center;
     flex-shrink: 0;
     gap: 4px;
-    padding-right: calc(var(--ui3n-input-padding-x) / 2);
+    padding-right: calc(var(--_input-padding-x) / 2);
   }
 
   .withPrepend {
     .ui3nInputField {
-      padding-left: calc(var(--ui3n-input-padding-x) / 2);
+      padding-left: calc(var(--_input-padding-x) / 2);
     }
   }
 
   .withAppend {
     .ui3nInputField {
-      padding-right: calc(var(--ui3n-input-padding-x) / 2);
+      padding-right: calc(var(--_input-padding-x) / 2);
     }
   }
 
@@ -431,9 +435,9 @@
     position: absolute;
     left: 0;
     width: 100%;
-    top: calc(var(--ui3n-input-message-top) + 2px);
+    top: calc(var(--_input-message-top) + 2px);
     font-style: italic;
-    font-size: var(--ui3n-input-message-font-size);
+    font-size: var(--_input-message-font-size);
     font-weight: 400;
     line-height: 1.2;
   }

package/src/components/ui3n-input-file/ui3n-input-file.vue

@@ -133,7 +133,10 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nInputFile">
+  <div
+    data-ui3n="input-file"
+    :class="$style.ui3nInputFile"
+  >
     <label
       :for="id"
       :class="[$style.label, disabled && $style.disabled]"
@@ -158,19 +161,19 @@
 
 <style lang="scss" module>
   .ui3nInputFile {
-    --ui3n-input-file-font-size: 12px;
-    --ui3n-input-file-padding-inline: 4px;
+    --_input-file-font-size: var(--ui3n-input-file-font-size, 12px);
+    --_input-file-padding-inline: var(--ui3n-input-file-padding-inline, 4px);
 
     position: relative;
     width: max-content;
   }
 
   .label {
-    font-size: var(--ui3n-input-file-font-size);
+    font-size: var(--_input-file-font-size);
     font-weight: 500;
     line-height: 1.33;
     color: var(--color-text-button-secondary-default);
-    padding: 0 var(--ui3n-input-file-padding-inline);
+    padding: 0 var(--_input-file-padding-inline);
     cursor: pointer;
 
     &:hover {

package/src/components/ui3n-list/ui3n-list.vue

@@ -16,6 +16,7 @@
   <div
     ref="listElement"
     :id="id"
+    data-ui3n="list"
     :class="$style.ui3nList"
   >
     <div :class="[$style.ui3nListTitle, sticky && $style.ui3nListTitleSticky]">
@@ -54,14 +55,14 @@
 
 <style lang="scss" module>
   .ui3nList {
-    --ui3n-list-item-height: 28px;
-    --ui3n-list-bg-color: transparent;
-    --ui3n-list-padding-block: 4px;
+    --_list-item-height: var(--ui3n-list-item-height, 28px);
+    --_list-bg-color: var(--ui3n-list-bg-color, transparent);
+    --_list-padding-block: var(--ui3n-list-padding-block, 4px);
 
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: var(--ui3n-list-bg-color);
+    background-color: var(--_list-bg-color);
   }
 
   .ui3nListTitle {
@@ -82,8 +83,8 @@
   .ui3nListItem {
     position: relative;
     width: 100%;
-    min-height: var(--ui3n-list-item-height);
-    padding: var(--ui3n-list-padding-block) 0;
+    min-height: var(--_list-item-height);
+    padding: var(--_list-padding-block) 0;
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -93,7 +94,7 @@
     z-index: 1;
     font-size: 16px;
     font-weight: 600;
-    background-color: var(--ui3n-list-bg-color);
+    background-color: var(--_list-bg-color);
   }
 
   .ui3nListItemContent {

package/src/components/ui3n-menu/ui3n-menu.vue

@@ -85,7 +85,7 @@
 
     return {
       ...floatingStyles.value,
-      '--ui3n-menu-zIndex': String(props.zIndex),
+      '--ui3n-menu-z-index': String(props.zIndex),
       ...(contentBorderRadiusStr && { '--ui3n-menu-content-border-radius': contentBorderRadiusStr }),
       ...(props.contentStyles || {}),
     };
@@ -269,6 +269,7 @@
   <div
     ref="menu-element"
     :id="id"
+    data-ui3n="menu"
     :class="$style.ui3nMenu"
     :style="rootStyles"
     @click="emits('click', $event)"
@@ -298,7 +299,7 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .ui3nMenu {
-    --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
+    --_menu-content-bg: var(--ui3n-menu-content-bg, var(--color-bg-control-secondary-default));
 
     position: relative;
     display: inline-block;
@@ -317,9 +318,9 @@
 
   .ui3nMenuContent {
     position: absolute;
-    border-radius: var(--ui3n-menu-content-border-radius);
-    background-color: var(--ui3n-menu-content-bg);
-    z-index: var(--ui3n-menu-zIndex, 1000);
+    border-radius: var(--ui3n-menu-content-border-radius, 4px);
+    background-color: var(--_menu-content-bg);
+    z-index: var(--ui3n-menu-z-index, 1000);
     overflow: hidden;
     @include mixins.dropShadow();
   }

package/src/components/ui3n-mobile-menu/ui3n-mobile-menu.vue

@@ -25,6 +25,7 @@
 
 <template>
   <div
+    data-ui3n="mobile-menu"
     :class="$style.ui3nMobileMenu"
     :style="inlineStyles"
   >
@@ -81,7 +82,7 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .ui3nMobileMenu {
-    --ui3n-menu-width-custom: 240px;
+    --_menu-width-custom: var(--ui3n-menu-width-custom, 240px);
 
     display: inline-block;
     width: max-content;
@@ -110,7 +111,7 @@
     position: relative;
     top: 0;
     left: 0;
-    width: var(--ui3n-menu-width-custom);
+    width: var(--_menu-width-custom);
     max-width: 80vw;
     display: flex;
     flex-direction: column;
@@ -180,7 +181,7 @@
 
   .slide-fade-enter-from,
   .slide-fade-leave-to {
-    transform: translateX(calc(var(--ui3n-menu-width-custom) * -1));
+    transform: translateX(calc(var(--_menu-width-custom) * -1));
     opacity: 0;
 
     div[class*='menuPanel'] {

package/src/components/ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue

@@ -12,6 +12,7 @@
 
 <template>
   <div
+    data-ui3n="mobile-menu-item"
     :class="[$style.menuItem, isActive && $style.menuItemSelected]"
     @click="selectMenuItem"
   >
@@ -33,18 +34,18 @@
   .menuItem {
     display: flex;
     width: 100%;
-    height: var(--spacing-xxl);
-    border-radius: var(--spacing-s);
+    height: var(--ui3n-mobile-menu-item-height, 48px);
+    border-radius: var(--ui3n-mobile-menu-item-border-radius, 8px);
     justify-content: flex-start;
     align-items: center;
-    column-gap: var(--spacing-s);
-    padding: 0 var(--spacing-s);
+    column-gap: var(--ui3n-mobile-menu-item-gap, 8px);
+    padding: 0 var(--ui3n-mobile-menu-item-padding-inline, 8px);
     cursor: pointer;
 
     .menuItemName {
-      font-size: var(--font-14);
+      font-size: var(--ui3n-mobile-menu-item-font-size, 14px);
       font-weight: 600;
-      line-height: var(--font-20);
+      line-height: var(--ui3n-mobile-menu-item-line-height, 20px);
       color: var(--color-text-control-primary-default);
     }
 

package/src/components/ui3n-notification/ui3n-notification-container.vue

@@ -31,6 +31,7 @@
 <template>
   <div
     id="ui3n-notifications-container"
+    data-ui3n="notification-container"
     :class="$style.ui3nNotificationsWrapper"
   >
     <ui3n-notification

package/src/components/ui3n-notification/ui3n-notification.vue

@@ -83,6 +83,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="notification"
     :class="mainCssClasses"
     :style="inlineStyles"
   >
@@ -117,26 +118,27 @@
 
 <style lang="scss" module>
   .ui3nNotification {
-    --ui3n-notification-width: 380px;
-    --ui3n-notification-font-size: 12px;
-    --ui3n-notification-border-radius: 8px;
-    --ui3n-notification-margin-bottom: 4px;
-    --ui3n-notification-icon-size: 32px;
-    --ui3n-notification-text-color: var(--default-content-default);
+    --_notification-width: var(--ui3n-notification-width, 380px);
+    --_notification-font-size: var(--ui3n-notification-font-size, 12px);
+    --_notification-border-radius: var(--ui3n-notification-border-radius, 8px);
+    --_notification-margin-bottom: var(--ui3n-notification-margin-bottom, 4px);
+    --_notification-icon-size: var(--ui3n-notification-icon-size, 32px);
+    --_notification-padding: var(--ui3n-notification-padding, 16px);
+    --_notification-text-color: var(--ui3n-notification-text-color, var(--default-content-default));
 
     display: flex;
     position: relative;
     box-sizing: border-box;
     z-index: 5000;
-    border-radius: var(--ui3n-notification-border-radius);
+    border-radius: var(--_notification-border-radius);
     outline: 1px solid var(--color-border-block-primary-default);
-    padding: var(--spacing-m);
-    max-width: var(--ui3n-notification-width);
-    margin-bottom: var(--ui3n-notification-margin-bottom);
+    padding: var(--_notification-padding);
+    max-width: var(--_notification-width);
+    margin-bottom: var(--_notification-margin-bottom);
     justify-content: center;
     align-items: center;
     gap: 8px;
-    color: var(--ui3n-notification-text-color);
+    color: var(--_notification-text-color);
   }
 
   .withIcon {
@@ -145,10 +147,10 @@
 
   .ui3nNotificationIcon {
     position: relative;
-    min-width: var(--ui3n-notification-icon-size);
-    width: var(--ui3n-notification-icon-size);
-    min-height: var(--ui3n-notification-icon-size);
-    height: var(--ui3n-notification-icon-size);
+    min-width: var(--_notification-icon-size);
+    width: var(--_notification-icon-size);
+    min-height: var(--_notification-icon-size);
+    height: var(--_notification-icon-size);
     border-radius: 50%;
     display: flex;
     justify-content: center;
@@ -159,11 +161,11 @@
   .ui3nNotificationContent {
     position: relative;
     flex-grow: 2;
-    font-size: var(--ui3n-notification-font-size);
+    font-size: var(--_notification-font-size);
     font-weight: 500;
     line-height: 1.33;
     padding-right: 20px;
-    color: var(--ui3n-notification-text-color);
+    color: var(--_notification-text-color);
   }
 
   .closeBtn {
@@ -171,11 +173,11 @@
     z-index: 1;
     top: 6px;
     right: 6px;
-    color: var(--ui3n-notification-text-color);
+    color: var(--_notification-text-color);
   }
 
   .infoType {
-    --ui3n-notification-text-color: var(--info-content-default);
+    --_notification-text-color: var(--ui3n-notification-text-color, var(--info-content-default));
 
     background-color: var(--info-fill-default);
 
@@ -186,12 +188,12 @@
     :global(.dark-theme) &,
     :global(.midnight-theme) &,
     :global(.dark2-theme) & {
-      --ui3n-notification-text-color: oklch(from var(--info-content-default) calc(l + 0.15) c h);
+      --_notification-text-color: var(--ui3n-notification-text-color, oklch(from var(--info-content-default) calc(l + 0.15) c h));
     }
   }
 
   .successType {
-    --ui3n-notification-text-color: var(--success-content-default);
+    --_notification-text-color: var(--ui3n-notification-text-color, var(--success-content-default));
 
     background-color: var(--success-fill-default);
 
@@ -202,12 +204,12 @@
     :global(.dark-theme) &,
     :global(.midnight-theme) &,
     :global(.dark2-theme) & {
-      --ui3n-notification-text-color: oklch(from var(--success-content-default) calc(l + 0.15) c h);
+      --_notification-text-color: var(--ui3n-notification-text-color, oklch(from var(--success-content-default) calc(l + 0.15) c h));
     }
   }
 
   .warningType {
-    --ui3n-notification-text-color: var(--warning-content-default);
+    --_notification-text-color: var(--ui3n-notification-text-color, var(--warning-content-default));
 
     background-color: var(--warning-fill-default);
 
@@ -218,12 +220,12 @@
     :global(.dark-theme) &,
     :global(.midnight-theme) &,
     :global(.dark2-theme) & {
-      --ui3n-notification-text-color: color-mix(in oklch, var(--warning-content-default) 45%, white);
+      --_notification-text-color: var(--ui3n-notification-text-color, color-mix(in oklch, var(--warning-content-default) 45%, white));
     }
   }
 
   .errorType {
-    --ui3n-notification-text-color: var(--error-content-default);
+    --_notification-text-color: var(--ui3n-notification-text-color, var(--error-content-default));
 
     background-color: var(--error-fill-default);
 
@@ -234,7 +236,7 @@
     :global(.dark-theme) &,
     :global(.midnight-theme) &,
     :global(.dark2-theme) & {
-      --ui3n-notification-text-color: color-mix(in oklch, var(--error-content-default) 45%, white);
+      --_notification-text-color: var(--ui3n-notification-text-color, color-mix(in oklch, var(--error-content-default) 45%, white));
     }
   }
 

package/src/components/ui3n-progress/ui3n-progress-circular.vue

@@ -5,8 +5,6 @@
   const props = withDefaults(defineProps<Ui3nProgressCircularProps>(), {
     value: 0,
     size: 64,
-    bgColor: 'var(--color-bg-control-primary-default)',
-    color: 'var(--color-bg-control-accent-default)',
     indeterminate: false,
     withText: false,
   });
@@ -38,17 +36,29 @@
 
   const fontSize = computed(() => `${Math.floor(innerSize.value / 3.8)}px`);
 
-  const progressStyle = computed(() => ({
-    '--ui3n-progress-circular-size': `${innerSize.value}px`,
-    '--ui3n-progress-circular-font-size': fontSize.value,
-    '--ui3n-progress-circular-bg': props.bgColor,
-    '--ui3n-progress-circular-color': props.color,
-    '--ui3n-progress-virtual-width': String(virtualStrokeWidth.value),
-  }));
+  /* the geometry is computed here; the colours default in CSS */
+  const progressStyle = computed(() => {
+    const styles: Record<string, string> = {
+      '--ui3n-progress-circular-size': `${innerSize.value}px`,
+      '--ui3n-progress-circular-font-size': fontSize.value,
+      '--ui3n-progress-virtual-width': String(virtualStrokeWidth.value),
+    };
+
+    if (props.bgColor) {
+      styles['--ui3n-progress-circular-bg'] = props.bgColor;
+    }
+
+    if (props.color) {
+      styles['--ui3n-progress-circular-color'] = props.color;
+    }
+
+    return styles;
+  });
 </script>
 
 <template>
   <div
+    data-ui3n="progress-circular"
     :style="progressStyle"
     :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]"
   >
@@ -85,12 +95,15 @@
 
 <style lang="scss" module>
   .ui3nProgressCircular {
+    --_progress-circular-bg: var(--ui3n-progress-circular-bg, var(--color-bg-control-primary-default));
+    --_progress-circular-color: var(--ui3n-progress-circular-color, var(--color-bg-control-accent-default));
+
     position: relative;
     display: inline-flex;
-    min-width: var(--ui3n-progress-circular-size);
-    width: var(--ui3n-progress-circular-size);
-    min-height: var(--ui3n-progress-circular-size);
-    height: var(--ui3n-progress-circular-size);
+    min-width: var(--ui3n-progress-circular-size, 64px);
+    width: var(--ui3n-progress-circular-size, 64px);
+    min-height: var(--ui3n-progress-circular-size, 64px);
+    height: var(--ui3n-progress-circular-size, 64px);
     justify-content: center;
     align-items: center;
     user-select: none;
@@ -104,15 +117,15 @@
 
   .background {
     fill: none;
-    stroke: var(--ui3n-progress-circular-bg);
-    stroke-width: var(--ui3n-progress-virtual-width);
+    stroke: var(--_progress-circular-bg);
+    stroke-width: var(--ui3n-progress-virtual-width, 8);
     transition: stroke 0.2s ease;
   }
 
   .chart {
     fill: none;
-    stroke: var(--ui3n-progress-circular-color);
-    stroke-width: var(--ui3n-progress-virtual-width);
+    stroke: var(--_progress-circular-color);
+    stroke-width: var(--ui3n-progress-virtual-width, 8);
     transition:
       stroke-dasharray 0.2s ease-in-out,
       stroke 0.2s ease;
@@ -124,10 +137,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: var(--ui3n-progress-circular-font-size);
+    font-size: var(--ui3n-progress-circular-font-size, 16px);
     font-weight: 600;
     line-height: 1;
-    color: var(--ui3n-progress-circular-color);
+    color: var(--_progress-circular-color);
   }
 
   .indeterminate {