fix(types): mark props which are undefined by default as optional

src/liquid/components/ld-accordion/ld-accordion-toggle/ld-accordion-toggle.tsx

@@ -36,7 +36,7 @@ export class LdAccordionToggle implements InnerFocusable {
   @Prop() labelTag?: 'button' | 'div' = 'button'
 
   /** Tab index of the toggle. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /**
    * Split the toggle in two parts with the second part containing

src/liquid/components/ld-bg-cells/ld-bg-cells.tsx

@@ -38,7 +38,7 @@ export class LdBgCells {
   @Element() el: HTMLElement
 
   /** Cells pattern */
-  @Prop() type: CellType = 'hexagon'
+  @Prop() type?: CellType = 'hexagon'
 
   /** Use 3 color layers */
   @Prop() threeLayers? = false

src/liquid/components/ld-button/ld-button.tsx

@@ -65,7 +65,7 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
   @Prop({ mutable: true }) justifyContent?: 'start' | 'end' | 'between'
 
   /** Tab index of the button. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** Display mode. */
   @Prop() mode?:

src/liquid/components/ld-checkbox/ld-checkbox.tsx

@@ -54,13 +54,13 @@ export class LdCheckbox implements InnerFocusable, ClonesAttributes {
   @Prop() invalid?: boolean
 
   /** Tab index of the input. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** Display mode. */
   @Prop() mode?: 'highlight' | 'danger'
 
   /** Used to specify the name of the control. */
-  @Prop() name: string
+  @Prop() name?: string
 
   /** The value is not editable. */
   @Prop() readonly?: boolean
@@ -72,7 +72,7 @@ export class LdCheckbox implements InnerFocusable, ClonesAttributes {
   @Prop() tone?: 'dark'
 
   /** The input value. */
-  @Prop() value: string
+  @Prop() value?: string
 
   @State() clonedAttributes
 

src/liquid/components/ld-icon/ld-icon.tsx

@@ -18,7 +18,7 @@ export class LdIcon {
   @Element() el: HTMLElement
 
   /** The icon name. */
-  @Prop() name: string = null
+  @Prop() name?: string = null
 
   /** Size of the icon. */
   @Prop() size?: 'sm' | 'lg'

src/liquid/components/ld-input/ld-input.tsx

@@ -76,7 +76,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
   @Prop() invalid?: boolean
 
   /** Tab index of the input. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** Value of the id attribute of the `<datalist>` of autocomplete options. */
   @Prop() list?: string
@@ -133,7 +133,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
   @Prop() tone?: 'dark'
 
   /** The input type. */
-  @Prop() type: string
+  @Prop() type?: string
 
   /** The input value. */
   @Prop({ mutable: true }) value?: string

src/liquid/components/ld-link/ld-link.tsx

@@ -29,7 +29,7 @@ export class LdLink implements ClonesAttributes, InnerFocusable {
   @Prop() disabled?: boolean
 
   /** Tab index of the input. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /**
    * The `target` attributed can be used in conjunction with the `href` attribute.

src/liquid/components/ld-radio/ld-radio.tsx

@@ -54,7 +54,7 @@ export class LdRadio implements InnerFocusable, ClonesAttributes {
   @Prop() invalid?: boolean
 
   /** Tab index of the input. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** Display mode. */
   @Prop() mode?: 'highlight' | 'danger'
@@ -72,7 +72,7 @@ export class LdRadio implements InnerFocusable, ClonesAttributes {
   @Prop() tone?: 'dark'
 
   /** The input value. */
-  @Prop() value: string
+  @Prop() value?: string
 
   @State() clonedAttributes
 

src/liquid/components/ld-select/ld-option-internal/ld-option-internal.tsx

@@ -28,7 +28,7 @@ export class LdOptionInternal {
    * should this option be selected. If this attribute is omitted, the value is taken
    * from the text content of the option element.
    */
-  @Prop({ mutable: true, reflect: true }) value: string
+  @Prop({ mutable: true, reflect: true }) value?: string
 
   /**
    * If present, this boolean attribute indicates that the option is selected.

src/liquid/components/ld-select/ld-option/ld-option.tsx

@@ -17,7 +17,7 @@ export class LdOption {
    * should this option be selected. If this attribute is omitted, the value is taken
    * from the text content of the option element.
    */
-  @Prop() value: string
+  @Prop() value?: string
 
   /** If present, this boolean attribute indicates that the option is selected. */
   @Prop() selected?: boolean

src/liquid/components/ld-select/ld-select-popper/ld-select-popper.tsx

@@ -25,7 +25,7 @@ export class LdSelectPopper {
   @Prop() allOptionsFiltered?: boolean
 
   /** A watcher is applied to the CSS class in order to be able to react to tether changes. */
-  @Prop({ reflect: true }) class: string
+  @Prop({ reflect: true }) class?: string
 
   /**
    * Creatable mode can be enabled when the filter prop is set to true.
@@ -34,10 +34,10 @@ export class LdSelectPopper {
   @Prop() creatable?: boolean
 
   /** The "create" input label (creatable mode). */
-  @Prop() createInputLabel: string
+  @Prop() createInputLabel!: string
 
   /** The "create" button label (creatable mode). */
-  @Prop() createButtonLabel: string
+  @Prop() createButtonLabel!: string
 
   /** Popper is visually detached from the select trigger element (there's a gap between the two). */
   @Prop() detached?: boolean
@@ -52,7 +52,7 @@ export class LdSelectPopper {
   @Prop() filterMatchesOption?: boolean
 
   /** The filter input placeholder. */
-  @Prop() filterPlaceholder: string
+  @Prop() filterPlaceholder!: string
 
   /** Attaches CSS class to the select popper element. */
   @Prop() popperClass?: string
@@ -61,7 +61,7 @@ export class LdSelectPopper {
   @Prop() size?: 'sm' | 'lg'
 
   /** Since the select popper is located outside the select element, the theme needs to be applied as a prop. */
-  @Prop() theme: string
+  @Prop() theme?: string
 
   @State() isPinned = false
   @State() shadowHeight = '100%'

src/liquid/components/ld-select/ld-select.tsx

@@ -92,10 +92,10 @@ export class LdSelect implements InnerFocusable {
   @Prop() multiple?: boolean
 
   /** Used to specify the name of the control. */
-  @Prop() name: string
+  @Prop() name?: string
 
   /** Used as trigger button label in multiselect mode and in single select mode if nothing is selected. */
-  @Prop() placeholder: string
+  @Prop() placeholder?: string
 
   /** Attached as CSS class to the select popper element. */
   @Prop() popperClass?: string
@@ -107,7 +107,7 @@ export class LdSelect implements InnerFocusable {
   @Prop() required?: boolean
 
   /** Currently selected option(s) (read only!) */
-  @Prop({ mutable: true }) selected: SelectOption[] = []
+  @Prop({ mutable: true }) selected?: SelectOption[] = []
 
   /** Size of the select trigger button. */
   @Prop() size?: 'sm' | 'lg'

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx

@@ -55,7 +55,7 @@ export class LdSidenavNavitem implements InnerFocusable {
   @Prop({ reflect: true }) rounded? = false
 
   /** Tab index of the button. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /**
    * By default, the sidenav automatically expands on click of a navitem,

src/liquid/components/ld-sidenav/ld-sidenav-slider/ld-sidenav-slider.tsx

@@ -29,10 +29,10 @@ export class LdSidenavSlider {
   private scrollerRef: HTMLLdSidenavScrollerInternalElement
 
   /** ID of the subnav that shall be shown on initial render. */
-  @Prop({ mutable: true }) currentSubnav: string
+  @Prop({ mutable: true }) currentSubnav?: string
 
   /** Used in the ld-sidenav-back component to display parent nav label. */
-  @Prop() label: string
+  @Prop() label!: string
 
   @State() currentNavLevel: number
   @State() activeSubnavs: HTMLLdSidenavSubnavElement[] = []

src/liquid/components/ld-sidenav/ld-sidenav-slider/readme.md

@@ -20,12 +20,12 @@ Please refer to the [`ld-sidenav` documentation](components/ld-sidenav/#ld-siden
 
 ## Properties
 
-| Property        | Attribute        | Description                                                        | Type               | Default     |
-| --------------- | ---------------- | ------------------------------------------------------------------ | ------------------ | ----------- |
-| `currentSubnav` | `current-subnav` | ID of the subnav that shall be shown on initial render.            | `string`           | `undefined` |
-| `key`           | `key`            | for tracking the node's identity when working with lists           | `string \| number` | `undefined` |
-| `label`         | `label`          | Used in the ld-sidenav-back component to display parent nav label. | `string`           | `undefined` |
-| `ref`           | `ref`            | reference to component                                             | `any`              | `undefined` |
+| Property             | Attribute        | Description                                                        | Type               | Default     |
+| -------------------- | ---------------- | ------------------------------------------------------------------ | ------------------ | ----------- |
+| `currentSubnav`      | `current-subnav` | ID of the subnav that shall be shown on initial render.            | `string`           | `undefined` |
+| `key`                | `key`            | for tracking the node's identity when working with lists           | `string \| number` | `undefined` |
+| `label` _(required)_ | `label`          | Used in the ld-sidenav-back component to display parent nav label. | `string`           | `undefined` |
+| `ref`                | `ref`            | reference to component                                             | `any`              | `undefined` |
 
 
 ## Events

src/liquid/components/ld-sidenav/ld-sidenav-subnav/ld-sidenav-subnav.tsx

@@ -49,7 +49,7 @@ export class LdSidenavSubnav {
   @Prop() ancestor? = false
 
   /** Used in the ld-sidenav-back component to display parent nav label. */
-  @Prop() label: string
+  @Prop() label!: string
 
   @State() hasParentSubnav: boolean
 

src/liquid/components/ld-sidenav/ld-sidenav-subnav/readme.md

@@ -20,11 +20,11 @@ Please refer to the [`ld-sidenav` documentation](components/ld-sidenav/#ld-siden
 
 ## Properties
 
-| Property | Attribute | Description                                                        | Type               | Default     |
-| -------- | --------- | ------------------------------------------------------------------ | ------------------ | ----------- |
-| `key`    | `key`     | for tracking the node's identity when working with lists           | `string \| number` | `undefined` |
-| `label`  | `label`   | Used in the ld-sidenav-back component to display parent nav label. | `string`           | `undefined` |
-| `ref`    | `ref`     | reference to component                                             | `any`              | `undefined` |
+| Property             | Attribute | Description                                                        | Type               | Default     |
+| -------------------- | --------- | ------------------------------------------------------------------ | ------------------ | ----------- |
+| `key`                | `key`     | for tracking the node's identity when working with lists           | `string \| number` | `undefined` |
+| `label` _(required)_ | `label`   | Used in the ld-sidenav-back component to display parent nav label. | `string`           | `undefined` |
+| `ref`                | `ref`     | reference to component                                             | `any`              | `undefined` |
 
 
 ## Methods

src/liquid/components/ld-sidenav/ld-sidenav-toggle-outside/ld-sidenav-toggle-outside.tsx

@@ -29,7 +29,7 @@ export class LdSidenavToggleOutside implements InnerFocusable {
   @Prop() labelExpand? = 'Expand side navigation'
 
   /** Tab index of the toggle. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** Tooltip tether options object to be merged with the default options (optionally stringified). */
   @Prop() tetherOptions?: Partial<Tether.ITetherOptions> | string

src/liquid/components/ld-slider/ld-slider.tsx

@@ -90,7 +90,7 @@ export class LdSlider implements InnerFocusable {
   /** Allows swapping of thumbs */
   @Prop() swappable? = false
   /** Tab index of the input(s). */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
   /** Adds custom stop points to the slider (instead of steps) */
   @Prop() unit?: string
   /** Specifies the default value */

src/liquid/components/ld-stepper/ld-step/ld-step.tsx

@@ -35,40 +35,58 @@ export class LdStep implements InnerFocusable {
 
   /** Switch colors for brand background */
   @Prop() brandColor? = false
+
   /** Step is the current step */
   @Prop() current? = false
+
   /** Description text to display below the step name (vertical mode only) */
-  @Prop() description: string
+  @Prop() description?: string
+
   /** Step is not clickable */
   @Prop() disabled? = false
+
   /** Step is done */
   @Prop() done? = false
+
   /** Link to the step (makes the step an anchor instead of a button) */
   @Prop() href?: string
+
   /** Permanently show a custom icon inside the dot */
   @Prop() icon?: HTMLLdIconElement['name']
+
   /** Label for current step (scree-reader only) */
   @Prop() labelCurrent? = 'Current'
+
   /** Label for step that is done (scree-reader only) */
   @Prop() labelDone? = 'Done'
+
   /** Label for step that is optional (scree-reader only) */
   @Prop() labelOptional? = 'Optional'
+
   /** Label for step that was skipped (scree-reader only) */
   @Prop() labelSkipped? = 'Skipped'
+
   /** Additional hint in label for step that is done and was optional (scree-reader only) */
   @Prop() labelWasOptional? = 'was optional'
+
   /** Indicates that the next step is not active */
   @Prop() lastActive? = false
+
   /** Tab index of the step */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
+
   /** Step can be processed next */
   @Prop() next? = false
+
   /** Step may be skipped */
   @Prop() optional? = false
+
   /** Step size */
   @Prop() size?: 'sm' | 'lg'
+
   /** Step was skipped */
   @Prop() skipped? = false
+
   /** Vertical layout */
   @Prop() vertical? = false
 

src/liquid/components/ld-switch/ld-switch-item/ld-switch-item.tsx

@@ -53,7 +53,7 @@ export class LdSwitchItem implements InnerFocusable, ClonesAttributes {
    * @internal
    * Tab index of the input.
    */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /**
    * @internal

src/liquid/components/ld-switch/ld-switch.tsx

@@ -63,7 +63,7 @@ export class LdSwitch implements InnerFocusable {
   @Prop() required?: boolean
 
   /** Tab index of the input. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   @State() hasFocus = false
 

src/liquid/components/ld-table/ld-table-cell/ld-table-cell.tsx

@@ -12,13 +12,13 @@ import { Component, h, Prop } from '@stencil/core'
 })
 export class LdTableCell {
   /** Contains a non-negative integer value that indicates for how many columns the cell extends. */
-  @Prop() colspan: HTMLTableCellElement['colSpan']
+  @Prop() colspan?: HTMLTableCellElement['colSpan']
 
   /** Contains a list of space-separated strings, each corresponding to the id attribute of the table header elements that apply to this element. */
-  @Prop() headers: HTMLTableCellElement['headers']
+  @Prop() headers?: HTMLTableCellElement['headers']
 
   /** Contains a non-negative integer value that indicates for how many rows the cell extends. */
-  @Prop() rowspan: HTMLTableCellElement['rowSpan']
+  @Prop() rowspan?: HTMLTableCellElement['rowSpan']
 
   render() {
     return (

src/liquid/components/ld-table/ld-table-col/ld-table-col.tsx

@@ -12,7 +12,7 @@ import { Component, h, Prop } from '@stencil/core'
 })
 export class LdTableCol {
   /** indicating the number of consecutive columns the colgroup element spans. */
-  @Prop() span: HTMLTableColElement['span']
+  @Prop() span?: HTMLTableColElement['span']
 
   render() {
     return (

src/liquid/components/ld-table/ld-table-colgroup/ld-table-colgroup.tsx

@@ -12,7 +12,7 @@ import { Component, h, Prop } from '@stencil/core'
 })
 export class LdTableColgroup {
   /** Contains a non-negative integer value indicating the number of consecutive columns the colgroup element spans. */
-  @Prop() span: HTMLTableColElement['span']
+  @Prop() span?: HTMLTableColElement['span']
 
   render() {
     return (

src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx

@@ -32,7 +32,7 @@ export class LdTab implements InnerFocusable {
   @Prop() disabled?: boolean
 
   /** Tab index of the tab. */
-  @Prop() ldTabindex: number | undefined
+  @Prop() ldTabindex?: number
 
   /** If present, this boolean attribute indicates that the tab is selected. */
   @Prop({ mutable: true, reflect: true }) selected?: boolean