@pine-ds/core 3.4.1 → 3.4.3

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

@@ -16,7 +16,7 @@ const BaseTemplate = (args) => html`
   align-self="${args.alignSelf}"
   auto="${args.auto}"
   background-color="${args.backgroundColor}"
-	border="${args.border}"
+	?border=${args.border}
   border-color="${args.borderColor}"
 	border-radius="${args.borderRadius}"
   direction="${args.direction}"
@@ -58,4 +58,4 @@ Default.args = {
   componentId: 'opt0',
   border: true,
   minHeight: '100px',
-};
+};

package/dist/collection/components/pds-button/pds-button.css

@@ -20,6 +20,7 @@
   display: flex;
   width: 100%;
 }
+:host([full-width=true]) a,
 :host([full-width=true]) button {
   justify-content: center;
   width: 100%;

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

@@ -18,12 +18,12 @@ export default {
 const BaseTemplate = (args) => html`
   <pds-button
     component-id=${args.componentId}
-    disabled=${args.disabled}
-    full-width=${args.fullWidth}
+    ?disabled=${args.disabled}
+    ?full-width=${args.fullWidth}
     href=${args.href}
-    icon-only=${args.iconOnly}
+    ?icon-only=${args.iconOnly}
     icon=${args.icon}
-    loading=${args.loading}
+    ?loading=${args.loading}
     name=${args.name}
     target=${args.target}
     type=${args.type}

package/dist/collection/components/pds-checkbox/pds-checkbox.js

@@ -15,6 +15,7 @@ export class PdsCheckbox {
             }
             const target = e.target;
             this.checked = target.checked;
+            this.updateFormValue();
             this.pdsCheckboxChange.emit({
                 checked: target.checked,
                 value: this.value
@@ -43,16 +44,53 @@ export class PdsCheckbox {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        var _a;
+        if (typeof jest !== 'undefined' || typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test') {
+            return;
+        }
+        if (this.internals && this.internals.setFormValue) {
+            // For checkboxes, only send the value when checked, otherwise send null
+            const formValue = this.checked ? (this.value || 'on') : null;
+            this.internals.setFormValue(formValue);
+        }
+        if (this.internals && this.internals.setValidity) {
+            this.internals.setValidity({});
+        }
+    }
+    formStateRestoreCallback(state) {
+        if (state instanceof FormData) {
+            // For checkboxes, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name) === value;
+        }
+        else if (typeof state === 'string') {
+            // Restore from string state
+            this.checked = state === (this.value || 'on');
+        }
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: 'a60ffb7c96f1d15735f263cb55cd982fbfcbe729', class: this.classNames() }, h("label", { key: '6ed2c8670cded5165761374362d9f1e9f386a4d2', htmlFor: this.componentId }, h("input", Object.assign({ key: '0661b30a9af3bd8ee83b2f3ceb249810a78f19a5', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'b16d78ead4da7ebdffb0f37127bdacf8b1538f86', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '78e88b11ba9e2759264e08ff0ce9e16c9cf67170', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '0ba7d2bd2b4f6c996eecdd103abe3fb6497e4376', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '65a94316603638e5230de0644fc8ca60e9543b63', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'f3a4cc998ec87374f2ee2dd91956d3bdd94d18ca', class: this.classNames() }, h("label", { key: '5c8ec6b36e50dedd76b0c23f912091ed40278d0f', htmlFor: this.componentId }, h("input", Object.assign({ key: '0969ba3846816446acc935636176b44aec9d90f5', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'ba47123715955ddad09296fbcfab6a423940f1f3', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '942c6ae8e8d77be86480395263dee5071e8132ea', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '74ea1c3b398d072faf9d5359f00bacaa9a0a4169', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9b7aa5f226c169a1cd8e559dc731ea49be7ada6c', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
@@ -346,6 +384,9 @@ export class PdsCheckbox {
         return [{
                 "propName": "checked",
                 "methodName": "updateIndeterminate"
+            }, {
+                "propName": "checked",
+                "methodName": "checkedChanged"
             }];
     }
 }

package/dist/collection/components/pds-checkbox/pds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,MAAM,OAAO,WAAW;IALxB;QAMU,wBAAmB,GAAe,EAAE,CAAC;QAI7C;;WAEG;QACsB,YAAO,GAAa,KAAK,CAAC;QAsE3C,yBAAoB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;QAEO,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAA;KA8DF;IArFC,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;IAChC,CAAC;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAAC,CAAC;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAAC,CAAC;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAAC,CAAC;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAClC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW;gBAC9B,4EACE,IAAI,EAAC,UAAU,sBACG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,kBAC9F,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrB,IAAI,CAAC,mBAAmB,EAC5B;gBACF,6DAAM,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IACjD,IAAI,CAAC,KAAK,CACN,CACD;YACP,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;oBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;oBACtC,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  private inheritedAttributes: Attributes = {};\n\n  @Element() el: HTMLPdsCheckboxElement;\n\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsCheckbox {\n  private inheritedAttributes: Attributes = {};\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsCheckboxElement;\n\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.updateFormValue();\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentDidLoad() {\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged() {\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n      return;\n    }\n\n    if (this.internals && this.internals.setFormValue) {\n      // For checkboxes, only send the value when checked, otherwise send null\n      const formValue = this.checked ? (this.value || 'on') : null;\n      this.internals.setFormValue(formValue);\n    }\n\n    if (this.internals && this.internals.setValidity) {\n      this.internals.setValidity({});\n    }\n  }\n\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (state instanceof FormData) {\n      // For checkboxes, restore if the value exists in FormData\n      const value = this.value || 'on';\n      this.checked = state.get(this.name as string) === value;\n    } else if (typeof state === 'string') {\n      // Restore from string state\n      this.checked = state === (this.value || 'on');\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -17,9 +17,9 @@ export default {
 const BaseTemplate = (args) => html`
 <pds-chip
   component-id="${args.componentId}"
-  dot="${args.dot}"
+  ?dot=${args.dot}
   icon="${args.icon}"
-  large="${args.large}"
+  ?large=${args.large}
   sentiment="${args.sentiment}"
   variant="${args.variant}"
 >

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

@@ -16,11 +16,11 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-copytext
-    border="${args.border}"
-    full-width="${args.fullWidth}"
+    ?border=${args.border}
+    ?full-width=${args.fullWidth}
     component-id=${args.componentId}
     onClick=${args.onClick}
-    truncate="${args.truncate}"
+    ?truncate=${args.truncate}
     value="${args.value}">
   </pds-copytext>`;
 

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

@@ -11,7 +11,7 @@ const BaseTemplate = (args) => html` <pds-image
   alt="${args.alt}"
   height="${args.height}"
   component-id="${args.componentId}"
-  loading="${args.loading}"
+  ?loading=${args.loading}
   sizes="${args.sizes}"
   src="${args.src}"
   srcset="${args.srcset}"

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',
 };