Merge branch 'v1/contrib' into dependabot/npm_and_yarn/express-4.19.2

package.json

@@ -102,7 +102,7 @@
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
     "postcss": "8.4.36",
-    "postcss-advanced-variables": "4.0.0",
+    "postcss-advanced-variables": "3.0.1",
     "postcss-cli": "11.0.0",
     "postcss-color-function": "4.1.0",
     "postcss-custom-properties": "13.3.4",

packages/uui-box/lib/uui-box.element.ts

@@ -20,6 +20,9 @@ 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)
  *
  */
 @defineElement('uui-box')
@@ -119,8 +122,11 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        box-shadow: var(--uui-shadow-depth-1);
-        border-radius: var(--uui-border-radius);
+        border: var(--uui-box-border-width, 0) solid
+          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);
       }
 

packages/uui-button/lib/uui-button.element.ts

@@ -47,6 +47,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+ *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
  */
 @defineElement('uui-button')
 export class UUIButtonElement extends UUIFormControlMixin(
@@ -335,7 +336,14 @@ export class UUIButtonElement extends UUIFormControlMixin(
           calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
 
         box-shadow: none;
+
+        transition: var(--uui-button-transition, none);
+      }
+
+      #button:focus-visible {
+        outline: 2px solid var(--color-emphasis);
       }
+
       button[disabled]:active,
       a:not([href]):active {
         animation: ${UUIHorizontalShakeAnimationValue};
@@ -354,25 +362,6 @@ export class UUIButtonElement extends UUIFormControlMixin(
         color: inherit;
       }
 
-      /* ANIMATIONS */
-      @keyframes fadeIn {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-
-      @keyframes fadeOut {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0;
-        }
-      }
-
       /* edge case for default color */
       :host(:not([color]):not([look='primary'])),
       :host([color='']:not([look='primary'])),
@@ -452,6 +441,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
         /* special for primary: */
         font-weight: var(--uui-button-font-weight, 700);
       }
+
       :host([look='primary']:hover) #button {
         background-color: var(
           --uui-button-background-color-hover,
@@ -460,6 +450,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
         color: var(--uui-button-contrast-hover, var(--color-contrast));
         border-color: var(--uui-button-border-color-hover, transparent);
       }
+
+      /* special outline offset tof primary style so you can see the outline */
+      :host([look='primary']) #button:focus-visible {
+        outline-offset: 2px;
+      }
+
       :host([look='primary'][disabled]) #button {
         background-color: var(
           --uui-button-background-color-disabled,

packages/uui-menu-item/lib/uui-menu-item.element.ts

@@ -17,6 +17,15 @@ import { UUIMenuItemEvent } from './UUIMenuItemEvent';
  *  @element uui-menu-item
  *  @cssprop --uui-menu-item-indent - set indentation of the menu items
  *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
+ *  @cssprop --uui-menu-item-background-color-hover - background color when hovering
+ *  @cssprop --uui-menu-item-color-hover - text color when hovering
+ *  @cssprop --uui-menu-item-background-color-active - background color when active
+ *  @cssprop --uui-menu-item-color-active - text color when active
+ *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled
+ *  @cssprop --uui-menu-item-color-disabled - text color when disabled
+ *   @cssprop --uui-menu-item-background-color-selected - background color when selected
+ *  @cssprop --uui-menu-item-color-selected - text color when selected
+ *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
@@ -225,52 +234,82 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #caret-button:hover {
-        background-color: var(--uui-color-surface-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-hover,
+          var(--uui-color-surface-emphasis)
+        );
       }
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #label-button:hover,
       :host(:not([active], [selected])) #menu-item #caret-button:hover {
-        color: var(--uui-color-interactive-emphasis);
+        color: var(
+          --uui-menu-item-color-hover,
+          var(--uui-color-interactive-emphasis)
+        );
       }
 
       /** Active */
       :host([active]) #label-button,
       :host([active]) #caret-button {
-        color: var(--uui-color-current-contrast);
+        color: var(
+          --uui-menu-item-color-active,
+          var(--uui-color-current-contrast)
+        );
       }
       :host([active]) #label-button-background {
-        background-color: var(--uui-color-current);
+        background-color: var(
+          --uui-menu-item-background-color-active,
+          var(--uui-color-current)
+        );
       }
       :host([active]) #label-button:hover ~ #label-button-background,
       :host([active]) #caret-button:hover {
-        background-color: var(--uui-color-current-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-active-hover,
+          var(--uui-color-current-emphasis)
+        );
       }
 
       /** Disabled */
       :host([disabled]) #menu-item {
-        color: var(--uui-color-disabled-contrast);
-        background-color: var(--uui-color-disabled);
+        color: var(
+          --uui-menu-item-color-disabled,
+          var(--uui-color-disabled-contrast)
+        );
+        background-color: var(
+          --uui-menu-item-background-color-disabled,
+          var(--uui-color-disabled)
+        );
       }
 
       /** Selected */
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #label-button,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button {
-        color: var(--uui-color-selected-contrast);
+        color: var(
+          --uui-menu-item-color-selected,
+          var(--uui-color-selected-contrast)
+        );
       }
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #label-button-background {
-        background-color: var(--uui-color-selected);
+        background-color: var(
+          --uui-menu-item-background-color-selected,
+          var(--uui-color-selected)
+        );
       }
       /** Selected, not highlight mode */
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #label-button:hover
         ~ #label-button-background,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button:hover {
-        background-color: var(--uui-color-selected-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-selected-hover,
+          var(--uui-color-selected-emphasis)
+        );
       }
 
       /** highlight mode, default */
@@ -279,7 +318,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         #label-button:hover
         ~ #label-button-background {
         border-radius: var(--uui-border-radius);
-        background-color: var(--uui-color-surface-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-highlight,
+          var(--uui-color-surface-emphasis)
+        );
       }
 
       /** highlight mode, active */
@@ -295,7 +337,10 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         #label-button:hover
         ~ #label-button-background {
         border-radius: var(--uui-border-radius);
-        background-color: var(--uui-color-current-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-highlight-active-selected,
+          var(--uui-color-current-emphasis)
+        );
       }
 
       /** highlight mode, selected */
@@ -305,21 +350,33 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
       :host([select-mode='highlight'][selected]:not([disabled]))
         #menu-item
         #caret-button {
-        color: var(--uui-color-interactive);
+        color: var(
+          --uui-menu-item-color-highlight-selected,
+          var(--uui-color-interactive)
+        );
       }
       :host([select-mode='highlight'][selectable][selected]:not([disabled]))
         #menu-item
         #label-button:hover {
-        color: var(--uui-color-interactive-emphasis);
+        color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis)
+        );
       }
 
       /** highlight mode, selected, selectable caret hover */
       :host([selected][selectable][select-mode='highlight']:not([active]))
         #menu-item
         #caret-button:hover {
         border-radius: var(--uui-border-radius);
-        background-color: var(--uui-color-surface-emphasis);
-        color: var(--uui-color-interactive-emphasis);
+        background-color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-surface-emphasis)
+        );
+        color: var(
+          --uui-menu-item-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis)
+        );
       }
 
       /** Highlight borders */
@@ -331,7 +388,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         position: absolute;
         content: '';
         inset: 1px;
-        border: 2px solid var(--uui-color-selected);
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));
         opacity: 0;
       }
 
@@ -343,7 +401,8 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         position: absolute;
         content: '';
         inset: 1px 0 1px 1px;
-        border: 2px solid var(--uui-color-selected);
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected));
         border-right: none;
       }