Merge branch 'v1/contrib' into feature/popover-container

Author: JesmoDev

packages/uui-base/lib/mixins/SelectableMixin.ts

@@ -45,7 +45,7 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
         // If not selectable target, then make it self selectable. (A selectable target should be made focusable by the component itself)
         this.setAttribute('tabindex', `${newVal ? '0' : '-1'}`);
       }
-      this.requestUpdate('selected', oldVal);
+      this.requestUpdate('selectable', oldVal);
     }
 
     protected deselectable = true;

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

@@ -3,15 +3,16 @@ import {
   SelectOnlyMixin,
 } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { css, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { UUICardEvent } from './UUICardEvent';
 
 /**
  *  @element uui-card
- *  @fires {UUICardEvent} open - fires when the card title is clicked
- *  @description - Base card component to be extended by specific cards.
+ *  @fires {UUICardEvent} open - fires when the card title is clicked.
+ *  @description - Base card component to be extended by specific card elements.
+ *  @slot - Default content.
  */
 @defineElement('uui-card')
 export class UUICardElement extends SelectOnlyMixin(
@@ -158,6 +159,10 @@ export class UUICardElement extends SelectOnlyMixin(
     e.stopPropagation();
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
+
+  protected render() {
+    return html`<slot></slot>`;
+  }
 }
 
 declare global {

packages/uui-card/lib/uui-card.story.ts

@@ -18,6 +18,10 @@ const Template: Story = () => html`
     Card is a Component that provides the basics for a Card component. This can
     be extended in code to match a certain need.
   </p>
+
+  <uui-card selectable>
+    <h5 class="uui-h5">Context of the card<h5>
+  </uui-card>
 `;
 
 export const AAAOverview = Template.bind({});

packages/uui-css/lib/guidelines.story.ts

@@ -188,9 +188,9 @@ export const Dialog = () => html`
         assume the message, for those users we want something that is easy to
         digest for their eyes.<br />
         Others are learning the system and need to be suited to all of the
-        consequences to have confidence in what they do. They will read everything
-        but not necessarily understand all words — Therefore we will use the
-        description to write sentences and confirm the understanding.
+        consequences to have confidence in what they do. They will read
+        everything but not necessarily understand all words — Therefore we will
+        use the description to write sentences and confirm the understanding.
       </p>
 
       <p>
@@ -257,8 +257,8 @@ export const Dialog = () => html`
 
     <br />
     <p>
-      In the above example the description helps the user understand the effect —
-      and guides the user by mentioning where it goes.
+      In the above example the description helps the user understand the effect
+      — and guides the user by mentioning where it goes.
     </p>
     <br />
 
@@ -276,8 +276,8 @@ export const Dialog = () => html`
     <br />
     <p>
       This helps the user understand the effect of publishing and ´descendants´
-      — which for someone who does not have experience can be hard to
-      understand at first.
+      — which for someone who does not have experience can be hard to understand
+      at first.
     </p>
 
     <br />