umbraco · nielslyngsoe · Dec 4, 2025 · Dec 5, 2025 · Dec 5, 2025 · Dec 5, 2025
diff --git a/packages/uui-avatar/lib/uui-avatar.element.ts b/packages/uui-avatar/lib/uui-avatar.element.ts
@@ -120,8 +120,7 @@ export class UUIAvatarElement extends LitElement {
         user-select: none;
         /* box-sizing: border-box; */
         aspect-ratio: 1;
-        background-color: var(--uui-palette-spanish-pink);
-        color: var(--uui-palette-space-cadet);
+        box-shadow: 0 0 0 1.5px var(--uui-color-border);
       }
 
       :host([overflow]) {

diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
@@ -20,7 +20,6 @@ function slotHasContent(target: EventTarget | null): boolean {
  *  @slot - area for the content of the box
  *  @cssprop --uui-box-header-padding - overwrite the header padding
  *  @cssprop --uui-box-default-padding - overwrite the box padding
- *  @cssprop --uui-box-border-width - overwrite the box border, default is 0
  *  @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1)
  *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius)
  *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
@@ -122,9 +121,8 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        border: var(--uui-box-border-width, 0) solid
+        border: 1px solid
           var(--uui-box-border-color, var(--uui-color-divider-standalone));
-        box-shadow: var(--uui-box-box-shadow, var(--uui-shadow-depth-1));
         border-radius: var(--uui-box-border-radius, var(--uui-border-radius));
         background-color: var(--uui-color-surface);
       }

diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -355,7 +355,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         border-style: solid;
         border-radius: var(
           --uui-button-border-radius,
-          var(--uui-border-radius)
+          var(--uui-border-radius-2)
         );
         cursor: pointer;
 

diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -4,11 +4,11 @@ import {
 } from '@umbraco-ui/uui-base/lib/animations';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib';
-import {
-  iconCheck,
-  iconSubtract,
-} from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
-import { css, html } from 'lit';
+import { css, html, svg } from 'lit';
+
+// Custom SVG for the checkbox, as this is smaller in size than the icon registry version: [NL]
+const check = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 10 17 4 12" /></svg>`;
+const subtract = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12.25h14" /></svg>`;
 
 /**
  *  Umbraco checkbox, toggles between checked and uncheck
@@ -28,9 +28,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
   renderCheckbox() {
     return html`
       <div id="ticker">
-        <div id="icon-check">
-          ${this.indeterminate ? iconSubtract : iconCheck}
-        </div>
+        <div id="icon-check">${this.indeterminate ? subtract : check}</div>
       </div>
     `;
   }
@@ -110,6 +108,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         height: 1em;
         line-height: 0;
         transition:
+          transform 80ms ease-in-out,
           fill 120ms,
           opacity 120ms;
         color: var(--uui-color-selected-contrast);
@@ -128,9 +127,9 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
         );
         background-color: var(--uui-color-selected);
         transition:
-          transform 120ms ease,
-          opacity 120ms,
-          background-color 120ms;
+          transform 80ms ease-in-out,
+          opacity 80ms,
+          background-color 80ms;
         transform: scale(0);
         opacity: 0;
       }
@@ -161,15 +160,17 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       :host(:not([disabled], [readonly]))
         label:active
         input:checked
-        + #ticker::before {
+        + #ticker
+        #icon-check {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }
 
       :host(:not([disabled], [readonly]))
         label:active
         input:indeterminate
-        + #ticker::before {
+        + #ticker
+        #icon-check {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }

diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -14,6 +14,7 @@ import { UUIColorAreaEvent } from './UUIColorAreaEvent';
 /**
  * @element uui-color-area
  * @cssprop --uui-color-area-grid-handle-size - The size of the handle in the grid
+ * @cssprop --uui-color-area-border-radius - The border radius of the color area
  */
 @defineElement('uui-color-area')
 export class UUIColorAreaElement extends LitElement {
@@ -308,6 +309,10 @@ export class UUIColorAreaElement extends LitElement {
         box-sizing: border-box;
         cursor: crosshair;
         forced-color-adjust: none;
+        border-radius: var(
+          --uui-color-area-border-radius,
+          var(--uui-border-radius)
+        );
       }
       .color-area__handle {
         position: absolute;

diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -500,30 +500,30 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
             ?readonly=${this.readonly}
             @keydown=${this.handleInputKeyDown}
             @change=${this.handleInputChange}>
+            <uui-button-group slot="append">
+              ${!this.noFormatToggle
+                ? html`<uui-button
+                    label="Toggle color format"
+                    @click=${this.handleFormatToggle}
+                    class="color-picker__toggle-format"
+                    ?disabled=${this.disabled}
+                    compact>
+                    <span>${this.format}</span>
+                  </uui-button>`
+                : ''}
+              ${hasEyeDropper
+                ? html`<uui-button
+                    label="Select a color"
+                    ?disabled=${this.disabled || this.readonly}
+                    @click=${this.handleEyeDropper}
+                    compact>
+                    <uui-icon-registry-essential>
+                      <uui-icon name="colorpicker"></uui-icon>
+                    </uui-icon-registry-essential>
+                  </uui-button>`
+                : ''}
+            </uui-button-group>
           </uui-input>
-          <uui-button-group>
-            ${!this.noFormatToggle
-              ? html`<uui-button
-                  label="Toggle color format"
-                  @click=${this.handleFormatToggle}
-                  class="color-picker__toggle-format"
-                  ?disabled=${this.disabled}
-                  compact>
-                  <span>${this.format}</span>
-                </uui-button>`
-              : ''}
-            ${hasEyeDropper
-              ? html`<uui-button
-                  label="Select a color"
-                  ?disabled=${this.disabled || this.readonly}
-                  @click=${this.handleEyeDropper}
-                  compact>
-                  <uui-icon-registry-essential>
-                    <uui-icon name="colorpicker"></uui-icon>
-                  </uui-icon-registry-essential>
-                </uui-button>`
-              : ''}
-          </uui-button-group>
         </div>
         ${this._renderSwatches()}
       </div>
@@ -584,6 +584,8 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
       :host {
         --uui-look-outline-border: #ddd;
         --uui-look-outline-border-hover: #aaa;
+        --uui-color-area-border-radius: var(--uui-border-radius-2)
+          var(--uui-border-radius-2) 0 0;
         font-size: 0.8rem;
         color: var(--uui-color-text);
         display: block;
@@ -600,15 +602,15 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         background-color: var(--uui-color-surface);
         user-select: none;
         border: solid 1px var(--uui-color-border);
+        border-radius: var(--uui-border-radius-2);
       }
       .color-picker__user-input {
         display: flex;
         padding: 0 0.75rem 0.75rem 0.75rem;
       }
       .color-picker__user-input uui-button {
-        border: var(--uui-input-border-width, 1px) solid
+        border-left: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
-        border-left: none;
       }
       .color-picker__preview,
       .color-picker__trigger {
@@ -720,6 +722,10 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
         flex: 1;
       }
 
+      uui-button-group {
+        height: 100%;
+      }
+
       button.color-picker__trigger:focus-visible {
         outline: 2px solid var(--uui-color-focus);
       }

diff --git a/packages/uui-color-slider/lib/uui-color-slider.element.ts b/packages/uui-color-slider/lib/uui-color-slider.element.ts
@@ -357,7 +357,7 @@ export class UUIColorSliderElement extends LabelMixin('label', LitElement) {
         background-image: var(--uui-slider-background-image);
         background-size: var(--uui-slider-background-size);
         background-position: var(--uui-slider-background-position);
-        border-radius: 3px;
+        border-radius: var(--uui-border-radius);
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
         width: 100%;
         height: var(--uui-slider-height);

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -201,7 +201,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         padding: 0;
         margin: 0;
         text-align: left;
-        border-radius: 3px;
+        border-radius: var(--uui-size-4);
       }
 
       :host(:not([selectable])) #swatch:focus {
@@ -238,7 +238,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         position: relative;
         width: var(--uui-swatch-size, 25px);
         height: var(--uui-swatch-size, 25px);
-        border-radius: 3px;
+        border-radius: inherit;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -284,6 +284,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         filter: invert(1) grayscale(1) contrast(9);
         pointer-events: none;
         opacity: 0;
+        border-radius: inherit;
       }
 
       :host([selected]) .color-swatch__check {

diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts
@@ -417,7 +417,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
 
       #combobox-input {
         width: 100%;
-        border-radius: var(--uui-size-1);
+        border-radius: var(--uui-border-radius);
       }
 
       #combobox-popover {

diff --git a/packages/uui-css/lib/custom-properties/palette.css b/packages/uui-css/lib/custom-properties/palette.css
@@ -321,7 +321,7 @@
     204
   ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
 
-  $sand: #f3f3f5;
+  $sand: #f6f6f7;
   --uui-palette-sand: $sand;
   --uui-palette-sand-light: rgb(
     255,

diff --git a/packages/uui-css/lib/custom-properties/sizes.css b/packages/uui-css/lib/custom-properties/sizes.css
@@ -50,7 +50,10 @@
   --uui-size-layout-6: 138px; /*--uui-size-46*/
 
   /** Other size props: */
-  --uui-border-radius: var(--uui-size-1);
+  --uui-border-radius: var(--uui-size-2);
+  --uui-border-radius-1: var(--uui-size-2);
+  --uui-border-radius-2: var(--uui-size-4);
+  --uui-border-radius-3: var(--uui-size-6);
 
   /** Typography */
   --uui-type-default-size: 14px;

diff --git a/packages/uui-dialog/lib/uui-dialog.element.ts b/packages/uui-dialog/lib/uui-dialog.element.ts
@@ -28,7 +28,7 @@ export class UUIDialogElement extends LitElement {
         box-shadow: var(--uui-shadow-depth-5);
         border-radius: var(
           --uui-dialog-border-radius,
-          calc(var(--uui-border-radius) * 2)
+          var(--uui-border-radius-3)
         );
       }
     `,

diff --git a/packages/uui-input-lock/lib/uui-input-lock.story.ts b/packages/uui-input-lock/lib/uui-input-lock.story.ts
@@ -3,6 +3,7 @@ import readme from '../README.md?raw';
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
+import '@umbraco-ui/uui-button/lib/';
 
 /**
  * uui-input-lock extends uui-input. See [uui-input](/docs/uui-input--docs) for more details.

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
@@ -53,6 +53,7 @@ export type InputMode =
  * @cssprop --uui-input-background-color-disabled - Background color when disabled
  * @cssprop --uui-input-background-color-readonly - Background color when readonly
  * @cssprop --uui-input-border-width - Border width
+ * @cssprop --uui-input-border-radius - Border radius
  * @cssprop --uui-input-border-color - Border color
  * @cssprop --uui-input-border-color-hover - Border color on hover
  * @cssprop --uui-input-border-color-focus - Border color on focus
@@ -389,9 +390,10 @@ export class UUIInputElement extends UUIFormControlMixin(
         );
         border: var(--uui-input-border-width, 1px) solid
           var(--uui-input-border-color, var(--uui-color-border));
-        border-radius: var(--uui-border-radius);
+        border-radius: var(--uui-input-border-radius, var(--uui-border-radius));
 
         --uui-button-height: 100%;
+        --uui-button-border-radius: var(--uui-border-radius);
         --auto-width-text-margin-right: 0;
         --auto-width-text-margin-left: 0;
       }

diff --git a/packages/uui-keyboard-shortcut/lib/uui-key.element.ts b/packages/uui-keyboard-shortcut/lib/uui-key.element.ts
@@ -20,7 +20,7 @@ export class UUIKeyElement extends LitElement {
         font-family: inherit;
         font-size: var(--uui-type-small-size);
         color: var(--uui-color-text);
-        border-radius: 5px;
+        border-radius: var(--uui-border-radius);
         margin: 0px 5px;
         padding: 5px 7px;
         box-sizing: border-box;

diff --git a/packages/uui-loader-bar/lib/uui-loader-bar.element.ts b/packages/uui-loader-bar/lib/uui-loader-bar.element.ts
@@ -67,7 +67,8 @@ export class UUILoaderBarElement extends LitElement {
         position: relative;
         display: block;
         width: 100%;
-        height: 4px;
+        height: 2px;
+        border-radius: 1px;
         overflow: hidden;
         color: var(--uui-color-default);
       }

diff --git a/packages/uui-loader-circle/lib/uui-loader-circle.element.ts b/packages/uui-loader-circle/lib/uui-loader-circle.element.ts
@@ -138,7 +138,7 @@ export class UUILoaderCircleElement extends LitElement {
       svg circle {
         fill: transparent;
         stroke: currentColor;
-        stroke-width: 6px;
+        stroke-width: 4px;
       }
 
       #bg {

diff --git a/packages/uui-loader/lib/uui-loader.element.ts b/packages/uui-loader/lib/uui-loader.element.ts
@@ -25,9 +25,10 @@ export class UUILoaderElement extends LitElement {
         display: inline-block;
         width: var(--uui-size-2);
         height: var(--uui-size-2);
-        border: 2px solid currentColor;
+        border: 1px solid currentColor;
         border-radius: 100%;
-        animation: loaderAnimation 1.4s infinite;
+        animation: loaderAnimation 1.2s infinite;
+        transition: all 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
 
       div:nth-child(1n) {
@@ -44,15 +45,15 @@ export class UUILoaderElement extends LitElement {
 
       @keyframes loaderAnimation {
         0% {
-          transform: scale(0.5);
+          transform: scale(0.33);
           background-color: currentColor;
         }
         50% {
           transform: scale(1);
           background-color: transparent;
         }
         100% {
-          transform: scale(0.5);
+          transform: scale(0.33);
           background-color: currentColor;
         }
       }

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -537,7 +537,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: var(--uui-menu-item-border-radius, 0px);
+        border-radius: var(
+          --uui-menu-item-border-radius,
+          var(--uui-border-radius)
+        );
       }
 
       #actions-container {

diff --git a/packages/uui-modal/lib/uui-modal-dialog.element.ts b/packages/uui-modal/lib/uui-modal-dialog.element.ts
@@ -25,7 +25,7 @@ export class UUIModalDialogElement extends UUIModalElement {
         max-height: 100%;
         border-radius: var(
           --uui-modal-dialog-border-radius,
-          calc(var(--uui-border-radius) * 4)
+          var(--uui-border-radius-3)
         );
         background: var(
           --uui-modal-dialog-background,