Merge branch 'v1/contrib' into v1/feature/use-font-size-14

Author: nielslyngsoe

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

@@ -131,6 +131,7 @@ export class UUIBoxElement extends LitElement {
 
       #header {
         display: flex;
+        align-items: center;
         column-gap: var(--uui-size-space-5);
         border-bottom: 1px solid var(--uui-color-divider-standalone);
         padding: var(

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

@@ -293,9 +293,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
 
       .label {
         line-height: normal; /** needed to reset 'a > span' */
-        display: block;
         transition: opacity 120ms;
+        display: flex;
+        gap: var(--uui-size-1);
+        align-items: center;
       }
+
       :host([state]:not([state=''])) .label {
         opacity: 0;
       }

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -68,7 +68,7 @@ export class UUICardContentNodeElement extends UUICardElement {
 
   #renderContent() {
     return html`
-      <span id="content">
+      <span id="content" class="uui-text">
         <span id="item">
           <span id="icon">
             <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
@@ -167,7 +167,6 @@ export class UUICardContentNodeElement extends UUICardElement {
       #open-part {
         display: flex;
         position: relative;
-        font-weight: 700;
         align-items: center;
         cursor: pointer;
         flex-grow: 1;

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -102,12 +102,12 @@ export class UUICardMediaElement extends UUICardElement {
 
   #renderContent() {
     return html`
-      <div id="content">
+      <div id="content" class="uui-text">
         <!--
         TODO: Implement info box when pop-out is ready
         -->
         <span id="name">${this.name}</span>
-        ${this.detail}<slot name="detail"></slot>
+        <small id="detail">${this.detail}<slot name="detail"></slot></small>
       </div>
     `;
   }
@@ -219,8 +219,8 @@ export class UUICardMediaElement extends UUICardElement {
         opacity: 0.96;
       }
 
-      #name {
-        font-weight: 700;
+      #detail {
+        opacity: 0.6;
       }
 
       :host(

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

@@ -139,8 +139,9 @@ export class UUIIconElement extends LitElement {
   static styles = [
     css`
       :host {
-        display: inline-block;
-        vertical-align: bottom;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         width: 1.125em;
         height: 1.125em;
       }

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -104,7 +104,7 @@ export class UUIRefNodeElement extends UUIRefElement {
 
   #renderContent() {
     return html`
-      <span id="content">
+      <span id="content" class="uui-text">
         <span id="icon">
           <slot name="icon" @slotchange=${this.#onSlotIconChange}></slot>
           ${this._iconSlotHasContent === false
@@ -122,6 +122,7 @@ export class UUIRefNodeElement extends UUIRefElement {
   #renderLink() {
     return html`<a
       id="open-part"
+      class="uui-text"
       tabindex=${this.disabled ? (nothing as any) : '0'}
       href=${ifDefined(!this.disabled ? this.href : undefined)}
       target=${ifDefined(this.target || undefined)}
@@ -140,6 +141,7 @@ export class UUIRefNodeElement extends UUIRefElement {
       <button
         type="button"
         id="open-part"
+        class="uui-text"
         tabindex="0"
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}
@@ -178,27 +180,27 @@ export class UUIRefNodeElement extends UUIRefElement {
       }
 
       #content {
-        align-self: stretch;
-        line-height: normal;
         display: flex;
-        position: relative;
         align-items: center;
+        justify-content: center;
+        line-height: 1.2em;
       }
 
       #open-part {
         color: inherit;
         text-decoration: none;
         cursor: pointer;
-        align-self: stretch;
         display: flex;
         flex-grow: 1;
-        padding: calc(var(--uui-size-2));
+        padding: calc(var(--uui-size-3));
       }
 
       #icon {
         font-size: 1.2em;
-        margin-left: var(--uui-size-2);
         margin-right: var(--uui-size-1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       #info {
@@ -210,12 +212,8 @@ export class UUIRefNodeElement extends UUIRefElement {
         padding-left: var(--uui-size-2);
       }
 
-      #name {
-        font-weight: 700;
-      }
-
       #detail {
-        font-size: var(--uui-type-small-size);
+        opacity: 0.6;
       }
 
       :host([selectable]) #open-part {