@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

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

@@ -136,6 +136,7 @@
   <div
     ref="checkboxEl"
     :id="id"
+    data-ui3n="checkbox"
     :class="mainCssClasses"
     :style="inlineStyles"
   >
@@ -207,18 +208,18 @@
 
 <style lang="scss" module>
   .ui3nCheckbox {
-    --ui3n-checkbox-size: 16px;
-    --ui3n-checkbox-gap: 4px;
-    --ui3n-checkbox-color: var(--color-icon-control-accent-default);
-    --ui3n-checkbox-text-size: 12px;
-    --ui3n-checkbox-text-color: var(--color-text-control-primary-default);
-    --ui3n-checkbox-text-weight: 500;
+    --_checkbox-size: var(--ui3n-checkbox-size, 16px);
+    --_checkbox-gap: var(--ui3n-checkbox-gap, 4px);
+    --_checkbox-color: var(--ui3n-checkbox-color, var(--color-icon-control-accent-default));
+    --_checkbox-text-size: var(--ui3n-checkbox-text-size, 12px);
+    --_checkbox-text-color: var(--ui3n-checkbox-text-color, var(--color-text-control-primary-default));
+    --_checkbox-text-weight: var(--ui3n-checkbox-text-weight, 500);
 
     position: relative;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--ui3n-checkbox-gap);
+    gap: var(--_checkbox-gap);
   }
 
   .noLabel {
@@ -228,14 +229,14 @@
   .ui3nCheckboxBody {
     position: relative;
     display: flex;
-    width: var(--ui3n-checkbox-size);
-    min-width: var(--ui3n-checkbox-size);
-    height: var(--ui3n-checkbox-size);
-    min-height: var(--ui3n-checkbox-size);
+    width: var(--_checkbox-size);
+    min-width: var(--_checkbox-size);
+    height: var(--_checkbox-size);
+    min-height: var(--_checkbox-size);
     justify-content: center;
     align-items: center;
-    border-radius: calc(var(--ui3n-checkbox-size) / 6);
-    border: calc(var(--ui3n-checkbox-size) / 10) solid var(--ui3n-checkbox-color);
+    border-radius: calc(var(--_checkbox-size) / 6);
+    border: calc(var(--_checkbox-size) / 10) solid var(--_checkbox-color);
     cursor: pointer;
     overflow: hidden;
     transition:
@@ -244,18 +245,18 @@
   }
 
   .filled {
-    background-color: var(--ui3n-checkbox-color);
+    background-color: var(--_checkbox-color);
 
     &:hover {
-      border-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
-      background-color: color-mix(in oklch, var(--ui3n-checkbox-color), black 12%);
+      border-color: color-mix(in oklch, var(--_checkbox-color), black 12%);
+      background-color: color-mix(in oklch, var(--_checkbox-color), black 12%);
     }
   }
 
   .unfilled {
     &:hover {
-      border-color: color-mix(in oklch, var(--ui3n-checkbox-color) 84%, black);
-      background-color: color-mix(in oklch, var(--ui3n-checkbox-color) 16%, transparent);
+      border-color: color-mix(in oklch, var(--_checkbox-color) 84%, black);
+      background-color: color-mix(in oklch, var(--_checkbox-color) 16%, transparent);
     }
   }
 
@@ -264,9 +265,9 @@
   }
 
   .ui3nCheckboxLabel {
-    font-size: var(--ui3n-checkbox-text-size);
-    font-weight: var(--ui3n-checkbox-text-weight);
-    color: var(--ui3n-checkbox-text-color);
+    font-size: var(--_checkbox-text-size);
+    font-weight: var(--_checkbox-text-weight);
+    color: var(--_checkbox-text-color);
     user-select: none;
     cursor: pointer;
   }

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

@@ -1,17 +1,21 @@
 <script lang="ts" setup>
   import { computed, useSlots } from 'vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Ui3nChipEmits, Ui3nChipProps, Ui3nChipSlots } from './types';
 
+  /*
+   * Sizes and colours have their defaults in CSS, not here, so that an
+   * application can override them from a stylesheet. A prop, when given,
+   * arrives as an inline variable and wins over any of that.
+   */
+  const DEFAULT_HEIGHT = 24;
+  const DEFAULT_TEXT_COLOR = 'var(--color-text-control-primary-default)';
+
   const props = withDefaults(defineProps<Ui3nChipProps>(), {
-    height: 24,
-    maxWidth: 200,
     plain: false,
     round: true,
     closeable: false,
-    color: 'var(--color-bg-control-secondary-default)',
-    textSize: 10,
-    textColor: 'var(--color-text-control-primary-default)',
   });
 
   const emits = defineEmits<Ui3nChipEmits>();
@@ -19,38 +23,47 @@
 
   const slots = useSlots();
 
+  const hasLeftSlot = computed(() => !!slots.left);
+
+  /* the icon of the left slot is sized in JS, so it needs a number to work with */
   const chipHeight = computed(() => {
     const num = Number(props.height);
-    return isNaN(num) ? 24 : num;
+    return Number.isNaN(num) || !props.height ? DEFAULT_HEIGHT : num;
   });
-  const heightCss = computed(() => `${chipHeight.value}px`);
   const iconSize = computed(() => chipHeight.value - 4);
+  const textColor = computed(() => props.textColor ?? DEFAULT_TEXT_COLOR);
 
-  const paddingCss = computed(() => {
-    const padValue = Math.round(chipHeight.value / 3);
-    return hasLeftSlot.value ? `0 ${padValue}px 0 4px` : `0 ${padValue}px`;
-  });
+  const inlineStyles = computed(() => {
+    const styles: Record<string, string> = {};
 
-  const maxWidthCss = computed(() => {
-    const num = Number(props.maxWidth);
-    return isNaN(num) ? String(props.maxWidth) : `${num}px`;
-  });
+    if (props.height !== undefined) {
+      styles['--ui3n-chip-height'] = toCssLength(props.height);
+    }
 
-  const bgColor = computed(() => props.color);
+    if (props.maxWidth !== undefined) {
+      styles['--ui3n-chip-max-width'] = toCssLength(props.maxWidth);
+    }
 
-  const textSize = computed(() => {
-    const num = Number(props.textSize);
-    return isNaN(num) ? String(props.textSize) : `${num}px`;
-  });
+    if (props.color) {
+      styles['--ui3n-chip-bg-color'] = props.color;
+    }
 
-  const textColor = computed(() => props.textColor);
+    if (props.textSize !== undefined) {
+      styles['--ui3n-chip-font-size'] = toCssLength(props.textSize);
+    }
 
-  const hasLeftSlot = computed(() => !!slots.left);
+    if (props.textColor) {
+      styles['--ui3n-chip-font-color'] = props.textColor;
+    }
+
+    return styles;
+  });
 </script>
 
 <template>
   <div
     :id="id"
+    data-ui3n="chip"
     :class="[
       $style.ui3nChip,
       round && $style.round,
@@ -58,14 +71,7 @@
       closeable && $style.closeable,
       hasLeftSlot && $style.withIcon,
     ]"
-    :style="{
-      '--ui3n-chip-height': heightCss,
-      '--ui3n-chip-max-width': maxWidthCss,
-      '--ui3n-chip-padding': paddingCss,
-      '--ui3n-chip-bg-color': bgColor,
-      '--ui3n-chip-font-size': textSize,
-      '--ui3n-chip-font-color': textColor,
-    }"
+    :style="inlineStyles"
     @click="emits('click', $event)"
   >
     <div :class="$style.ui3nChipIcon">
@@ -95,17 +101,27 @@
 
 <style lang="scss" module>
   .ui3nChip {
+    --_chip-height: var(--ui3n-chip-height, 24px);
+    --_chip-font-color: var(--ui3n-chip-font-color, var(--color-text-control-primary-default));
+
+    /* the side padding follows the height, as it did when JS computed it */
+    --_chip-padding: var(--ui3n-chip-padding, 0 calc(var(--_chip-height) / 3));
+
     position: relative;
     display: flex;
-    height: var(--ui3n-chip-height);
-    padding: var(--ui3n-chip-padding);
+    height: var(--_chip-height);
+    padding: var(--_chip-padding);
     width: max-content;
-    max-width: var(--ui3n-chip-max-width);
-    background-color: var(--ui3n-chip-bg-color);
+    max-width: var(--ui3n-chip-max-width, 200px);
+    background-color: var(--ui3n-chip-bg-color, var(--color-bg-control-secondary-default));
     justify-content: flex-start;
     align-items: center;
     column-gap: 4px;
 
+    &.withIcon {
+      padding-left: 4px;
+    }
+
     &.closeable:not(.withIcon) {
       .body {
         max-width: calc(100% - 24px);
@@ -114,22 +130,22 @@
 
     &.withIcon:not(.closeable) {
       .body {
-        max-width: calc(100% - var(--ui3n-chip-height) - 4px);
+        max-width: calc(100% - var(--_chip-height) - 4px);
       }
     }
 
     &.closable.withIcon {
       .body {
-        max-width: calc(100% - var(--ui3n-chip-height) - 28px);
+        max-width: calc(100% - var(--_chip-height) - 28px);
       }
     }
   }
 
   .ui3nChipBody {
-    font-size: var(--ui3n-chip-font-size);
+    font-size: var(--ui3n-chip-font-size, 10px);
     line-height: 1;
     font-weight: 400;
-    color: var(--ui3n-chip-font-color);
+    color: var(--_chip-font-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -146,7 +162,7 @@
   }
 
   .round {
-    border-radius: calc(var(--ui3n-chip-height) / 2);
+    border-radius: calc(var(--_chip-height) / 2);
   }
 
   .closeable {
@@ -155,6 +171,6 @@
   }
 
   .plain {
-    border: 1px solid var(--ui3n-chip-font-color);
+    border: 1px solid var(--_chip-font-color);
   }
 </style>

package/src/components/ui3n-dialog/ui3n-dialog-provider.vue

@@ -28,6 +28,7 @@
       v-for="dialog in dialogs.dialogStack.value"
       :id="`dialog-wrapper-${dialog.id}`"
       :key="dialog.id"
+      data-ui3n="dialog-overlay"
       :class="$style['dialog-provider-overlay']"
       @click.self.prevent="clickOverlay(dialog.id, dialog.props)"
     >

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

@@ -130,6 +130,7 @@
   <div
     :id="id"
     ref="dialog-el"
+    data-ui3n="dialog"
     tabindex="1"
     :class="[$style.dialog, draggable && isMousedown && $style.draggable, ...cssClass]"
     :style="cssStyle"
@@ -233,16 +234,16 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .dialog {
-    --ui3n-dialog-border-radius: 12px;
-    --ui3n-dialog-title-height: 48px;
-    --ui3n-dialog-title-padding: 0 32px 0 16px;
-    --ui3n-dialog-title-font-size: 14px;
-    --ui3n-dialog-actions-height: 64px;
-    --ui3n-dialog-actions-padding: 16px;
-    --ui3n-dialog-confirm-button-color: var(--color-text-button-primary-default);
-    --ui3n-dialog-cancel-button-color: var(--color-text-button-secondary-default);
-    --ui3n-dialog-confirm-background-color: var(--color-bg-button-primary-default);
-    --ui3n-dialog-cancel-background-color: var(--color-bg-button-secondary-default);
+    --_dialog-border-radius: var(--ui3n-dialog-border-radius, 12px);
+    --_dialog-title-height: var(--ui3n-dialog-title-height, 48px);
+    --_dialog-title-padding: var(--ui3n-dialog-title-padding, 0 32px 0 16px);
+    --_dialog-title-font-size: var(--ui3n-dialog-title-font-size, 14px);
+    --_dialog-actions-height: var(--ui3n-dialog-actions-height, 64px);
+    --_dialog-actions-padding: var(--ui3n-dialog-actions-padding, 16px);
+    --_dialog-confirm-button-color: var(--ui3n-dialog-confirm-button-color, var(--color-text-button-primary-default));
+    --_dialog-cancel-button-color: var(--ui3n-dialog-cancel-button-color, var(--color-text-button-secondary-default));
+    --_dialog-confirm-background-color: var(--ui3n-dialog-confirm-background-color, var(--color-bg-button-primary-default));
+    --_dialog-cancel-background-color: var(--ui3n-dialog-cancel-background-color, var(--color-bg-button-secondary-default));
 
     position: relative;
     display: flex;
@@ -252,7 +253,7 @@
     max-height: 95%;
     background-color: var(--color-bg-block-primary-default);
     border: 1px solid var(--color-border-block-primary-default);
-    border-radius: var(--ui3n-dialog-border-radius);
+    border-radius: var(--_dialog-border-radius);
     outline: none;
     box-shadow:
       0 5px 15px -3px var(--shadow-key-2),
@@ -273,8 +274,8 @@
   .title {
     position: relative;
     width: 100%;
-    min-height: var(--ui3n-dialog-title-height);
-    height: var(--ui3n-dialog-title-height);
+    min-height: var(--_dialog-title-height);
+    height: var(--_dialog-title-height);
   }
 
   .titleDefault {
@@ -282,14 +283,14 @@
     justify-content: flex-start;
     align-items: center;
     column-gap: 8px;
-    padding: var(--ui3n-dialog-title-padding);
+    padding: var(--_dialog-title-padding);
     border-bottom: 1px solid var(--color-border-block-primary-default);
 
     span {
       display: block;
       position: relative;
       flex-grow: 1;
-      font-size: var(--ui3n-dialog-title-font-size);
+      font-size: var(--_dialog-title-font-size);
       font-weight: 600;
       line-height: 1;
       color: var(--color-text-control-primary-default);
@@ -309,12 +310,12 @@
   .actions {
     position: relative;
     width: 100%;
-    min-height: var(--ui3n-dialog-actions-height);
-    height: var(--ui3n-dialog-actions-height);
+    min-height: var(--_dialog-actions-height);
+    height: var(--_dialog-actions-height);
   }
 
   .actionsDefault {
-    padding: var(--ui3n-dialog-actions-padding);
+    padding: var(--_dialog-actions-padding);
     display: flex;
     justify-content: flex-end;
     align-items: center;

package/src/components/ui3n-drop-files/ui3n-drop-files.vue

@@ -113,6 +113,7 @@
   <div
     ref="wrapperElement"
     v-ui3n-resize="() => calcElementsSizes()"
+    data-ui3n="drop-files"
     :class="[
       $style.ui3nDropFiles,
       permanentDisplay && $style.ui3nDropFilesWithBorder,
@@ -173,15 +174,15 @@
 
 <style lang="scss" module>
   .ui3nDropFiles {
-    --ui3n-dropzone-height: 0;
-    --ui3n-dropzone-title-font: 0;
-    --ui3n-dropzone-border-radius: 4px;
+    --_dropzone-height: var(--ui3n-dropzone-height, 0);
+    --_dropzone-title-font: var(--ui3n-dropzone-title-font, 0);
+    --_dropzone-border-radius: var(--ui3n-dropzone-border-radius, 4px);
 
     position: relative;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: var(--ui3n-dropzone-border-radius);
+    border-radius: var(--_dropzone-border-radius);
   }
 
   .ui3nDropFilesWithBorder {
@@ -206,7 +207,7 @@
   }
 
   .ui3nDropFilesDropzoneTitle {
-    font-size: var(--ui3n-dropzone-title-font);
+    font-size: var(--_dropzone-title-font);
     font-weight: 500;
     color: var(--color-text-table-secondary-default);
     margin: 0;
@@ -215,8 +216,8 @@
 
   .ui3nDropFilesDropzoneIcon {
     position: relative;
-    width: calc(var(--ui3n-dropzone-height) * 0.4);
-    height: calc(var(--ui3n-dropzone-height) * 0.4);
+    width: calc(var(--_dropzone-height) * 0.4);
+    height: calc(var(--_dropzone-height) * 0.4);
     border-radius: 50%;
     background-color: var(--color-bg-button-tritery-default);
     display: flex;

package/src/components/ui3n-editable/ui3n-content-editable.vue

@@ -22,6 +22,7 @@
 <template>
   <span
     ref="el"
+    data-ui3n="content-editable"
     :class="[
       $style.ui3nContentEditable,
       !modelValue && !!placeholder && $style.placeholder,
@@ -40,29 +41,29 @@
 
 <style lang="scss" module>
   .ui3nContentEditable {
-    --ui3n-content-editable-color: var(--color-text-control-primary-default);
-    --ui3n-content-editable-placeholder-color: var(--color-text-control-secondary-default);
-    --ui3n-content-editable-border-color-focused: var(--color-border-table-accent-default);
+    --_content-editable-color: var(--ui3n-content-editable-color, var(--color-text-control-primary-default));
+    --_content-editable-placeholder-color: var(--ui3n-content-editable-placeholder-color, var(--color-text-control-secondary-default));
+    --_content-editable-border-color-focused: var(--ui3n-content-editable-border-color-focused, var(--color-border-table-accent-default));
 
     position: relative;
     display: inline-block;
     width: fit-content;
-    font-size: var(--font-12);
+    font-size: var(--ui3n-content-editable-font-size, 12px);
     font-weight: 400;
-    line-height: var(--font-16);
+    line-height: var(--ui3n-content-editable-line-height, 16px);
     overflow-wrap: break-word;
-    color: var(--ui3n-content-editable-color);
-    padding: var(--spacing-xs) var(--spacing-s);
+    color: var(--_content-editable-color);
+    padding: var(--ui3n-content-editable-padding, 4px 8px);
     background-color: transparent;
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-content-editable-border-radius, 4px);
   }
 
   .placeholder {
-    color: var(--ui3n-content-editable-placeholder-color);
+    color: var(--_content-editable-placeholder-color);
   }
 
   .isFocused {
-    border: 1px solid var(--ui3n-content-editable-border-color-focused);
+    border: 1px solid var(--_content-editable-border-color-focused);
   }
 
   .isDisabled {

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

@@ -168,6 +168,7 @@
   <div
     :id="id"
     v-ui3n-click-outside="onClickOutside"
+    data-ui3n="editable"
     :class="[
       $style.ui3nEditable,
       disabled && $style.ui3nEditableDisabled,
@@ -257,25 +258,25 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .ui3nEditable {
-    --ui3n-editable-min-width: 60px;
-    --ui3n-editable-max-width: 100%;
-    --ui3n-editable-height: 24px;
-    --ui3n-editable-font-size: 12px;
-    --ui3n-editable-border-radius: 4px;
+    --_editable-min-width: var(--ui3n-editable-min-width, 60px);
+    --_editable-max-width: var(--ui3n-editable-max-width, 100%);
+    --_editable-height: var(--ui3n-editable-height, 24px);
+    --_editable-font-size: var(--ui3n-editable-font-size, 12px);
+    --_editable-border-radius: var(--ui3n-editable-border-radius, 4px);
     //--ui3n-editable-padding-base: 4px;
     //--ui3n-editable-padding: 0 4px;
     //--ui3n-editable-padding: 4px 44px 4px 4px;
-    --ui3n-editable-button-size: 16px;
+    --_editable-button-size: var(--ui3n-editable-button-size, 16px);
 
     position: relative;
     box-sizing: border-box;
     width: max-content;
-    max-width: var(--ui3n-editable-max-width);
-    height: var(--ui3n-editable-height);
-    border-radius: var(--ui3n-editable-border-radius);
-    font-size: var(--ui3n-editable-font-size);
+    max-width: var(--_editable-max-width);
+    height: var(--_editable-height);
+    border-radius: var(--_editable-border-radius);
+    font-size: var(--_editable-font-size);
     font-weight: 400;
-    line-height: var(--ui3n-editable-height);
+    line-height: var(--_editable-height);
     color: var(--color-text-table-primary-default);
     overflow: hidden;
     border: 1px solid transparent;
@@ -301,11 +302,11 @@
   .content {
     position: relative;
     box-sizing: border-box;
-    height: var(--ui3n-editable-height);
-    min-width: var(--ui3n-editable-min-width);
-    max-width: var(--ui3n-editable-max-width);
+    height: var(--_editable-height);
+    min-width: var(--_editable-min-width);
+    max-width: var(--_editable-max-width);
     padding: 0 24px 0 4px;
-    border-radius: var(--ui3n-editable-border-radius);
+    border-radius: var(--_editable-border-radius);
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -335,14 +336,14 @@
     position: relative;
     height: 100%;
     box-sizing: border-box;
-    min-width: var(--ui3n-editable-min-width);
+    min-width: var(--_editable-min-width);
     max-width: 100%;
     padding: 0 44px 0 4px;
     font-family: inherit;
-    font-size: var(--ui3n-editable-font-size);
+    font-size: var(--_editable-font-size);
     font-weight: 400;
-    line-height: var(--ui3n-editable-height);
-    border-radius: var(--ui3n-editable-border-radius);
+    line-height: var(--_editable-height);
+    border-radius: var(--_editable-border-radius);
     background-color: transparent;
     border: none;
 
@@ -360,18 +361,18 @@
     visibility: hidden;
     padding: 0;
     font-family: inherit;
-    font-size: var(--ui3n-editable-font-size);
+    font-size: var(--_editable-font-size);
     font-weight: 400;
-    line-height: var(--ui3n-editable-height);
+    line-height: var(--_editable-height);
     white-space: pre;
   }
 
   .btn {
     position: absolute;
-    width: var(--ui3n-editable-button-size);
-    min-width: var(--ui3n-editable-button-size);
-    height: var(--ui3n-editable-button-size);
-    min-height: var(--ui3n-editable-button-size);
+    width: var(--_editable-button-size);
+    min-width: var(--_editable-button-size);
+    height: var(--_editable-button-size);
+    min-height: var(--_editable-button-size);
     border-radius: 50%;
     background-color: transparent;
     cursor: pointer;

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

@@ -41,6 +41,7 @@
 <template>
   <div
     ref="emojiElement"
+    data-ui3n="emoji"
     :class="[$style.ui3nEmoji, readonly && $style.readonly]"
     :style="inlineStyles"
     v-on="readonly ? {} : { click: onClick }"
@@ -51,14 +52,14 @@
 
 <style lang="scss" module>
   .ui3nEmoji {
-    --ui3n-emoji-size: 16px;
+    --_emoji-size: var(--ui3n-emoji-size, 16px);
 
     display: flex;
-    min-width: var(--ui3n-emoji-size);
-    width: var(--ui3n-emoji-size);
-    min-height: var(--ui3n-emoji-size);
-    height: var(--ui3n-emoji-size);
-    font-size: var(--ui3n-emoji-size);
+    min-width: var(--_emoji-size);
+    width: var(--_emoji-size);
+    min-height: var(--_emoji-size);
+    height: var(--_emoji-size);
+    font-size: var(--_emoji-size);
     justify-content: center;
     align-items: center;
     cursor: pointer;

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

@@ -2,22 +2,30 @@
   import { computed } from 'vue';
   import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
+  /* sizes and colour keep their defaults in CSS, so a stylesheet can change them */
   const props = withDefaults(defineProps<Ui3nIconProps>(), {
     title: '',
     rotate: 0,
-    color: 'var(--color-icon-control-primary-default)',
   });
   const emits = defineEmits<Ui3nIconEmits>();
 
-  const rawWidth = computed(() => props.size || props.width || 16);
-  const rawHeight = computed(() => props.size || props.height || 16);
+  const rawWidth = computed(() => props.size || props.width);
+  const rawHeight = computed(() => props.size || props.height);
 
   const iconStyle = computed(() => {
-    const value: Record<string, string> = {
-      '--ui3n-icon-width': formatUnit(rawWidth.value),
-      '--ui3n-icon-height': formatUnit(rawHeight.value),
-      '--ui3n-icon-color': props.color,
-    };
+    const value: Record<string, string> = {};
+
+    if (rawWidth.value !== undefined) {
+      value['--ui3n-icon-width'] = formatUnit(rawWidth.value);
+    }
+
+    if (rawHeight.value !== undefined) {
+      value['--ui3n-icon-height'] = formatUnit(rawHeight.value);
+    }
+
+    if (props.color) {
+      value['--ui3n-icon-color'] = props.color;
+    }
 
     const transformData = [];
     props.horizontalFlip && transformData.push('rotateY(180deg)');
@@ -40,6 +48,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="icon"
     :class="$style.ui3nIcon"
     :title="title"
     :style="iconStyle"
@@ -50,19 +59,20 @@
 
 <style lang="scss" module>
   .ui3nIcon {
+    --_icon-width: var(--ui3n-icon-width, 16px);
+    --_icon-height: var(--ui3n-icon-height, 16px);
+
     display: inline-block;
     vertical-align: middle;
-    min-width: var(--ui3n-icon-width);
-    width: var(--ui3n-icon-width);
-
-    min-height: var(--ui3n-icon-height);
-    height: var(--ui3n-icon-height);
-    max-height: var(--ui3n-icon-height);
-
+    min-width: var(--_icon-width);
+    width: var(--_icon-width);
+    min-height: var(--_icon-height);
+    height: var(--_icon-height);
+    max-height: var(--_icon-height);
     flex-grow: 0;
     flex-shrink: 0;
     background-color: currentcolor;
-    color: var(--ui3n-icon-color);
+    color: var(--ui3n-icon-color, var(--color-icon-control-primary-default));
     mask-image: var(--svg);
     mask-repeat: no-repeat;
     mask-size: 100% 100%;