docs: add descriptions to interfaces

Author: iOvergaard

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

@@ -4,6 +4,12 @@ import { property } from 'lit/decorators.js';
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class ActiveMixinInterface {
+  /**
+   * Set this boolean to true for then the related composition is sorted.
+   * @type {boolean}
+   * @attr
+   * @prop
+   */
   active: boolean;
 }
 

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

@@ -6,8 +6,21 @@ import { UUISelectableEvent } from '../events/UUISelectableEvent';
 type Constructor<T = {}> = new (...args: any[]) => T;
 
 export declare class SelectableMixinInterface extends LitElement {
+  /**
+   * Enable the ability to select this element.
+   * @attr
+   * @prop
+   * @type boolean
+   */
   selectable: boolean;
   deselectable: boolean;
+
+  /**
+   * Attribute applied when the element is selected.
+   * @attr
+   * @prop
+   * @type boolean
+   */
   selected: boolean;
   selectableTarget: EventTarget;
 }

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

@@ -31,6 +31,8 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @slot - for default content
  *  @slot label - for label content
  *  @slot extra - for extra
+ *  @property {string} label - label to be used for aria-label and potentially as visual label for some components
+ *  @attribute label - label to be used for aria-label and potentially as visual label for some components
  *  @description - All-around button
  *  @cssprop --uui-button-height - overwrite the button height
  *  @cssprop --uui-button-border-width - overwrite the border width
@@ -52,7 +54,6 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
 @defineElement('uui-button')
 export class UUIButtonElement extends UUIFormControlMixin(
   LabelMixin('', PopoverTargetMixin(LitElement)),
-  undefined,
 ) {
   /**
    * Specifies the type of button

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

@@ -31,6 +31,10 @@ export type InputType =
  * @slot append - for components to render to the right of the input.
  * @property {boolean} spellcheck - get/set native spellcheck attribute
  * @attribute spellcheck - native spellcheck attribute
+ * @property {string} value - get/set the value of the input
+ * @attribute value - get/set the value of the input
+ * @property {string} name - get/set the name of the input
+ * @attribute name - get/set the name of the input
  * @fires UUIInputEvent#change on change
  * @fires InputEvent#input on input
  * @fires KeyboardEvent#keyup on keyup
@@ -77,7 +81,7 @@ export class UUIInputElement extends UUIFormControlMixin(
 
   /**
    * Minlength validation message.
-   * @attr
+   * @attr minlength-message
    * @default
    */
   @property({ type: String, attribute: 'minlength-message' })
@@ -104,7 +108,7 @@ export class UUIInputElement extends UUIFormControlMixin(
 
   /**
    * Maxlength validation message.
-   * @attr
+   * @attr maxlength-message
    * @default
    */
   @property({ type: String, attribute: 'maxlength-message' })
@@ -158,7 +162,7 @@ export class UUIInputElement extends UUIFormControlMixin(
   /**
    * Sets the input width to fit the value or placeholder if empty
    * @type {boolean}
-   * @attr
+   * @attr auto-width
    */
   @property({ type: Boolean, reflect: true, attribute: 'auto-width' })
   autoWidth = false;

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

@@ -23,12 +23,14 @@ import { UUIMenuItemEvent } from './UUIMenuItemEvent';
  *  @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-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
+ *  @fires {UUISelectableEvent} selected - fires when the media card is selected
+ *  @fires {UUISelectableEvent} deselected - fires when the media card is deselected
  *  @slot - nested menu items go here
  *  @slot icon - icon area
  *  @slot actions - actions area
@@ -50,7 +52,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   /**
    * Controls if nested items should be shown.
    * @type {boolean}
-   * @attr
+   * @attr show-children
    * @default false
    */
   @property({ type: Boolean, reflect: true, attribute: 'show-children' })
@@ -60,7 +62,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   /**
    * Shows/hides the caret.
    * @type {boolean}
-   * @attr
+   * @attr has-children
    * @default false
    */
   @property({ type: Boolean, attribute: 'has-children' })
@@ -105,7 +107,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   /**
    * Sets the selection mode.
    * @type {string}
-   * @attr
+   * @attr select-mode
    * @default undefined
    */
   @property({ type: String, attribute: 'select-mode', reflect: true })
@@ -114,7 +116,7 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
   /**
    * Sets the aria-label for the caret button.
    * @remark Only used when the menu item has children.
-   * @attr
+   * @attr caret-label
    * @default 'Reveal the underlying items'
    */
   @property({ type: String, attribute: 'caret-label' })