@pine-ds/core 3.4.2 → 3.4.3

package/dist/collection/components/pds-input/stories/pds-input.stories.js

@@ -42,16 +42,16 @@ const BaseTemplate = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="${args.componentId}"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
-  full-width="${args.fullWidth}"
+  ?full-width=${args.fullWidth}
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="${args.label}"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="${args.type}"
   value="${args.value}">
   ${args.prefix || ''}
@@ -151,15 +151,15 @@ export const withPrefixIcon = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-prefix-icon"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Email"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="email"
   value="${args.value}">
   <pds-icon slot="prefix" name="mail" size="small"></pds-icon>
@@ -169,15 +169,15 @@ export const withSuffixButton = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-suffix-button"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Search"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="text"
   value="${args.value}">
   <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
@@ -189,15 +189,15 @@ export const withPrependSelect = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-prepend-select"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Amount"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="text"
   value="${args.value}">
   <pds-select hide-label label="Currency" slot="prepend" class="pds-input__prepend" name="currency">
@@ -211,15 +211,15 @@ export const withAppendSelect = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-append-select"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Phone"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="tel"
   value="${args.value}">
   <pds-select hide-label slot="append" class="pds-input__append" name="phone-type">
@@ -233,15 +233,15 @@ export const withPrefixAndAppend = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-prefix-append"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Amount"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="text"
   value="${args.value}">
   <pds-icon slot="prefix" name="dollar" size="small"></pds-icon>
@@ -256,15 +256,15 @@ export const withPrependAndSuffix = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-prepend-suffix"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Amount"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="text"
   value="${args.value}">
   <pds-select hide-label slot="prepend" class="pds-input__prepend" name="currency">
@@ -281,15 +281,15 @@ export const withActionLink = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-action-link"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Password"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="true"
+  ?readonly=${args.readonly}
+  required
   type="password"
   value="${args.value}">
   <pds-link href="#" slot="action">
@@ -301,15 +301,15 @@ export const withActionButton = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
   component-id="pds-input-action-button"
   debounce="${args.debounce}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="Choose a unique username"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Username"
   name="${args.name}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   type="text"
   value="${args.value}">
   <pds-button slot="action" variant="unstyled">

package/dist/collection/components/pds-link/stories/pds-link.stories.js

@@ -14,8 +14,8 @@ export default {
   title: 'components/Link'
 }
 
-const BaseTemplate = (args) => html`<pds-link color=${args.color} external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
-const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
 
 export const Colors = BaseTemplate.bind();
 Colors.args = {

package/dist/collection/components/pds-loader/stories/pds-loader.stories.js

@@ -13,8 +13,8 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-loader
-    is-loading="${args.isLoading}"
-    show-label="${args.showLabel}"
+    ?is-loading=${args.isLoading}
+    ?show-label=${args.showLabel}
     size="${args.size}"
     variant="${args.variant}"
   >
@@ -33,4 +33,4 @@ Default.args = {
 export const Typing = BaseTemplate.bind();
 Typing.args = {
   variant: 'typing'
-};
+};

package/dist/collection/components/pds-modal/stories/pds-modal.stories.js

@@ -30,8 +30,8 @@ const BaseTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss="${args.backdropDismiss}"
-      ?open="${args.open}"
+      ?backdrop-dismiss=${args.backdropDismiss}
+      ?open=${args.open}
     >
       <pds-modal-header>
         <pds-box direction="column" fit padding="md">
@@ -100,8 +100,8 @@ const DestructiveTemplate = (args) => html`
       id="${args.componentId}"
       component-id="${args.componentId}"
       size="${args.size}"
-      ?backdrop-dismiss="${args.backdropDismiss}"
-      ?open="${args.open}"
+      ?backdrop-dismiss=${args.backdropDismiss}
+      ?open=${args.open}
     >
       <pds-modal-header>
         <pds-box direction="column" fit padding="md">
@@ -166,8 +166,8 @@ const CustomContentTemplate = (args) => html`
       <pds-modal
         id="${args.componentId}"
         size="${args.size}"
-        ?backdrop-dismiss="${args.backdropDismiss}"
-        ?open="${args.open}"
+        ?backdrop-dismiss=${args.backdropDismiss}
+        ?open=${args.open}
       >
 
         <pds-modal-header>
@@ -254,8 +254,8 @@ const ScrollableTemplate = (args) => {
       <pds-modal
         id="${args.componentId}"
         size="${args.size}"
-        ?backdrop-dismiss="${args.backdropDismiss}"
-        ?open="${args.open}"
+        ?backdrop-dismiss=${args.backdropDismiss}
+        ?open=${args.open}
       >
         <pds-modal-header>
           <pds-box direction="column" fit padding="md">
@@ -338,7 +338,7 @@ const FullscreenTemplate = (args) => html`
       id="${args.componentId}"
       size=${args.size}
       ?backdrop-dismiss=${args.backdropDismiss}
-      ?open="${args.open}"
+      ?open=${args.open}
     >
       <pds-modal-header>
         <pds-box

package/dist/collection/components/pds-progress/stories/pds-progress.stories.js

@@ -9,12 +9,12 @@ export default {
 
 const BaseTemplate = (args) =>
   html`<pds-progress
-    animated=${args.animated}
+    ?animated=${args.animated}
     component-id=${args.componentId}
     fill-color=${args.fillColor}
     label=${args.label}
     percent=${args.percent}
-    show-percent=${args.showPercent}
+    ?show-percent=${args.showPercent}
   ></pds-progress>`;
 
 

package/dist/collection/components/pds-radio/stories/pds-radio.stories.js

@@ -25,16 +25,16 @@ const BaseTemplate = (args) =>
   html` <pds-radio
     component-id=${args.componentId}
     label=${args.label}
-    checked=${args.checked}
-    disabled=${args.disabled}
+    ?checked=${args.checked}
+    ?disabled=${args.disabled}
     error-message=${args.errorMessage}
     helper-message=${args.helperMessage}
-    hide-label=${args.hideLabel}
+    ?hide-label=${args.hideLabel}
     name=${args.name}
-    indeterminate=${args.indeterminate}
-    required=${args.required}
+    ?indeterminate=${args.indeterminate}
+    ?required=${args.required}
     value=${args.value}
-    invalid=${args.invalid}
+    ?invalid=${args.invalid}
   />`;
 
 export const Default = BaseTemplate.bind();

package/dist/collection/components/pds-row/stories/pds-row.stories.js

@@ -9,34 +9,38 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
+  align-items="${args.alignItems}"
+  ?border=${args.border}
+  component-id="${args.componentId}"
   col-gap="${args.colGap}"
   justify-content="${args.justifyContent}"
   min-height="${args.minHeight}"
   no-wrap="${args.noWrap}"
 >
-  <pds-box border>Item 1</pds-box>
-  <pds-box border direction="column">
-    <p>Content 1</p>
-    <p>Content 2</p>
+  <pds-box>
+    <pds-box border>Item 1</pds-box>
+  </pds-box>
+  <pds-box>
+    <pds-box border direction="column">
+      <p>Content 1</p>
+      <p>Content 2</p>
+    </pds-box>
   </pds-box>
 </pds-row>
 `;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
-  border: "true",
+  border: true,
   componentId: 'opt0',
   colGap: '8px',
 };
 
 const GapTemplate = (args) => html`
 <pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
+  align-items="${args.alignItems}"
+  ?border=${args.border}
+  component-id="${args.componentId}"
   col-gap="${args.colGap}"
   justify-content="${args.justifyContent}"
   min-height="${args.minHeight}"
@@ -67,7 +71,7 @@ const GapTemplate = (args) => html`
 
 export const Gap = GapTemplate.bind();
 Gap.args = {
-  border: "false",
+  border: false,
   componentId: 'opt0',
   colGap: 'sm',
 };

package/dist/collection/components/pds-select/stories/pds-select.stories.js

@@ -50,15 +50,15 @@ const BaseTemplate = (args) =>
   html`<pds-select
     autocomplete="${args.autocomplete}"
     component-id="${args.componentId}"
-    disabled="${args.disabled}"
+    ?disabled=${args.disabled}
     error-message="${args.errorMessage}"
     helper-message="${args.helperMessage}"
-    hide-label="${args.hideLabel}"
-    invalid="${args.invalid}"
+    ?hide-label=${args.hideLabel}
+    ?invalid=${args.invalid}
     label="${args.label}"
-    multiple="${args.multiple}"
+    ?multiple=${args.multiple}
     name="${args.name}"
-    required="${args.required}"
+    ?required=${args.required}
     type="${args.type}"
     value="${args.value}"
   >
@@ -70,14 +70,14 @@ const OptgroupTemplate = (args) =>
   html`<pds-select
     autocomplete="${args.autocomplete}"
     component-id="${args.componentId}"
-    disabled="${args.disabled}"
+    ?disabled=${args.disabled}
     error-message="${args.errorMessage}"
     helper-message="${args.helperMessage}"
-    invalid="${args.invalid}"
+    ?invalid=${args.invalid}
     label="${args.label}"
-    multiple="${args.multiple}"
+    ?multiple=${args.multiple}
     name="${args.name}"
-    required="${args.required}"
+    ?required=${args.required}
     type="${args.type}"
     value="${args.value}"
   >
@@ -159,15 +159,15 @@ WithOptgroup.args = {
 export const withActionLink = (args) => html`<pds-select
   autocomplete="${args.autocomplete}"
   component-id="pds-select-action-link"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  hide-label="${args.hideLabel}"
-  invalid="${args.invalid}"
+  ?hide-label=${args.hideLabel}
+  ?invalid=${args.invalid}
   label="Timezone"
-  multiple="${args.multiple}"
+  ?multiple=${args.multiple}
   name="timezone"
-  required="${args.required}"
+  ?required=${args.required}
   type="${args.type}"
   value="${args.value}">
   <pds-link href="#" slot="action">
@@ -179,15 +179,15 @@ export const withActionLink = (args) => html`<pds-select
 export const withActionButton = (args) => html`<pds-select
   autocomplete="${args.autocomplete}"
   component-id="pds-select-action-button"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  hide-label="${args.hideLabel}"
-  invalid="${args.invalid}"
+  ?hide-label=${args.hideLabel}
+  ?invalid=${args.invalid}
   label="Country"
-  multiple="${args.multiple}"
+  ?multiple=${args.multiple}
   name="country"
-  required="${args.required}"
+  ?required=${args.required}
   type="${args.type}"
   value="${args.value}">
   <pds-button slot="action" variant="unstyled">

package/dist/collection/components/pds-sortable/stories/pds-sortable.stories.js

@@ -15,21 +15,21 @@ export default {
 };
 
 const BaseTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+<pds-sortable ?border=${args.border} component-id="${args.componentId}" ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item>Item 1</pds-sortable-item>
   <pds-sortable-item>Item 2</pds-sortable-item>
   <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>`;
 
 const HandleTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+<pds-sortable ?border=${args.border} component-id="${args.componentId}" ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item>Item 1</pds-sortable-item>
   <pds-sortable-item>Item 2</pds-sortable-item>
   <pds-sortable-item>Item 3</pds-sortable-item>
 </pds-sortable>`;
 
 const ActionsTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+<pds-sortable ?border=${args.border} component-id="${args.componentId}" ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item enable-actions>
     <div>Item 1</div>
     <div slot="sortable-item-actions">
@@ -51,7 +51,7 @@ const ActionsTemplate = (args) => html`
 </pds-sortable>`;
 
 const FullDemoTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
+<pds-sortable ?border=${args.border} component-id="${args.componentId}" ?dividers=${args.dividers} handle-type="${args.handleType}">
   <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>

package/dist/collection/components/pds-switch/stories/pds-switch.stories.js

@@ -21,17 +21,17 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-switch
-    checked=${args.checked}
+    ?checked=${args.checked}
     component-id=${args.componentId}
-    disabled=${args.disabled}
+    ?disabled=${args.disabled}
     error-message=${args.errorMessage}
     helper-message=${args.helperMessage}
-    invalid=${args.invalid}
+    ?invalid=${args.invalid}
     label=${args.label}
-    hide-label=${args.hideLabel}
+    ?hide-label=${args.hideLabel}
     name=${args.name}
     onChange=${args.onChange}
-    required=${args.required}
+    ?required=${args.required}
     type=${args.type}
   />
 `;

package/dist/collection/components/pds-table/stories/pds-table.stories.js

@@ -16,11 +16,11 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
@@ -48,11 +48,11 @@ const BaseTemplate = (args) => html`
 
 const ResponsiveTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell>Column Title</pds-table-head-cell>
@@ -116,11 +116,11 @@ const ResponsiveTemplate = (args) => html`
 
 const SortableTemplate = (args) => html`
 <pds-table
-  compact="${args.compact}"
+  ?compact=${args.compact}
   component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?selectable=${args.selectable}
 >
   <pds-table-head>
     <pds-table-head-cell sortable=${args.sortable}>Name</pds-table-head-cell>

package/dist/collection/components/pds-textarea/stories/pds-textarea.stories.js

@@ -37,18 +37,18 @@ export default {
 
 const BaseTemplate = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  clear-on-edit="${args.clearOnEdit}"
+  ?clear-on-edit=${args.clearOnEdit}
   component-id="${args.componentId}"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="${args.label}"
   name="${args.name}"
   onChange="${args.onChange}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   rows="${args.rows}"
   value="${args.value}"
   data-tooltip-id="foo"
@@ -134,18 +134,18 @@ Autocomplete.args = {
 
 export const withActionLink = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  clear-on-edit="${args.clearOnEdit}"
+  ?clear-on-edit=${args.clearOnEdit}
   component-id="pds-textarea-action-link"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Notes"
   name="${args.name}"
   onChange="${args.onChange}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   rows="3"
   value="${args.value}"
   data-tooltip-id="foo"
@@ -157,18 +157,18 @@ export const withActionLink = (args) => html`<pds-textarea
 
 export const withActionButton = (args) => html`<pds-textarea
   autocomplete="${args.autocomplete}"
-  clear-on-edit="${args.clearOnEdit}"
+  ?clear-on-edit=${args.clearOnEdit}
   component-id="pds-textarea-action-button"
-  disabled="${args.disabled}"
+  ?disabled=${args.disabled}
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
-  invalid="${args.invalid}"
+  ?invalid=${args.invalid}
   label="Description"
   name="${args.name}"
   onChange="${args.onChange}"
   placeholder="${args.placeholder}"
-  readonly="${args.readonly}"
-  required="${args.required}"
+  ?readonly=${args.readonly}
+  ?required=${args.required}
   rows="4"
   value="${args.value}"
   data-tooltip-id="foo"

package/dist/collection/components/pds-toast/stories/pds-toast.stories.js

@@ -18,7 +18,7 @@ export default {
 
 const BaseTemplate = (args) => html`
 <pds-toast
-  .dismissible="${args.dismissible}"
+  ?dismissible=${args.dismissible}
   component-id="${args.componentId}"
   duration="${args.duration}"
   icon="${args.icon || ''}"
@@ -29,7 +29,7 @@ const BaseTemplate = (args) => html`
 
 const WithLinkTemplate = (args) => html`
 <pds-toast
-  .dismissible="${args.dismissible}"
+  ?dismissible=${args.dismissible}
   component-id="${args.componentId}"
   duration="${args.duration}"
   icon="${args.icon || ''}"