@pine-ds/core 3.4.1 → 3.4.3

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/pds-switch.js

@@ -26,6 +26,7 @@ export class PdsSwitch {
                 return;
             const input = e.target;
             this.checked = input.checked;
+            this.updateFormValue();
             this.pdsSwitchChange.emit(e);
         };
         this.switchClassNames = () => {
@@ -39,16 +40,53 @@ export class PdsSwitch {
             return switchClasses;
         };
     }
+    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 switches, 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 switches, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name || this.componentId) === 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: '128ed012fe386dea88e6da282084589b22453588', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '3407eeffca9a0f0c047e5d7c761526b488aafb62', htmlFor: this.componentId }, h("input", Object.assign({ key: '3f16f928b2b96aa212923ba09ee80a3559b8103c', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '09c43ffbabce6a2fe133875ca15e0910d34064fa', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '90c9df8b2efef83cf238d540076bad04bf9aa2eb', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'e812446a907dc0ad822b0c5974fca5913117f051', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1c93c8ac145e54a205f8bfecf465ba8e484313b', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'bd2a7a9740c0d466fbedff0e06e532ab8deb567d', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '0fb2cfa31a424bce3aa7f8310718f004a034fdae', htmlFor: this.componentId }, h("input", Object.assign({ key: '85b836e04db6648dd8981b51cdbd9ee90bfcea6a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '29674a12e61459a11aa8a791eeb46c829c468317', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '135a4bec88f9fe938737b61f361bb76908c39bc7', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '18cc1bd12df56b0621820cc0e96a150463373ce2', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '455fd05665e9bbd8d5a9096544116bb646e4c66a', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["../../global/styles/utils/label.scss", "pds-switch.scss"]
@@ -300,5 +338,11 @@ export class PdsSwitch {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "checkedChanged"
+            }];
+    }
 }
 //# sourceMappingURL=pds-switch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pds-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\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-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n})\nexport class PdsSwitch {\n  private inheritedAttributes: Attributes = {};\n\n  @Element() el: HTMLPdsSwitchElement;\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   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\n  };\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <label htmlFor={this.componentId}>\n          <input\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            checked={this.checked}\n            class=\"pds-switch__input\"\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name ? this.name : this.componentId}\n            onChange={this.onSwitchUpdate}\n            required={this.required}\n            type=\"checkbox\"\n            value={this.value}\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-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__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-switch.js","sourceRoot":"","sources":["../../../src/components/pds-switch/pds-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\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-switch',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSwitch {\n  private inheritedAttributes: Attributes = {};\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsSwitchElement;\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   * Determines the input 'checked' state.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Determines the input 'disabled' state, preventing user interaction.\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays help text for additional description of an input.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines the input 'invalid' state, signifying an error is present.\n   */\n  @Prop() invalid? = false;\n\n  /**\n   * Displays text to describe the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines the 'required' state of the input.\n   */\n  @Prop() required? = false;\n\n  /**\n   * Provides input with a string submitted in form data.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits an event on input change.\n   */\n  @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n  private onSwitchUpdate = (e: Event) => {\n    if (this.disabled) return;\n\n    const input = e.target as HTMLInputElement;\n    this.checked = input.checked;\n\n    this.updateFormValue();\n\n    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  private switchClassNames = () => {\n    let switchClasses = `pds-switch`;\n\n    if (this.invalid === true) {\n      switchClasses += \" pds-switch--error\";\n    }\n    if (this.helperMessage !== undefined) {\n      switchClasses += \" pds-switch--message\";\n    }\n    return switchClasses;\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 switches, 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 switches, restore if the value exists in FormData\n      const value = this.value || 'on';\n      this.checked = state.get(this.name || this.componentId) === 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.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <label htmlFor={this.componentId}>\n          <input\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            checked={this.checked}\n            class=\"pds-switch__input\"\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name ? this.name : this.componentId}\n            onChange={this.onSwitchUpdate}\n            required={this.required}\n            type=\"checkbox\"\n            value={this.value}\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-switch__message`}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-switch__message pds-switch__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-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 || ''}"

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

@@ -15,10 +15,10 @@ export default {
 }
 
 const BaseTemplate = (args) => html`
-  <pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow=${args.hasArrow} placement=${args.placement} opened=${args.opened}>${args.slot}</pds-tooltip>`;
+  <pds-tooltip content=${args.content} max-width=${args.maxWidth} ?has-arrow=${args.hasArrow} placement=${args.placement} ?opened=${args.opened}>${args.slot}</pds-tooltip>`;
 
 const HTMLContentTemplate = (args) => html`
-  <pds-tooltip has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} html-content=${args.htmlContent} opened=${args.opened}>
+  <pds-tooltip ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} ?html-content=${args.htmlContent} ?opened=${args.opened}>
     <div slot="content">
       <p><strong>This is a tooltip</strong></p>
       <p>Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.</p>
@@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
   <div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
     <div class="position-demo-grid">
       <div class="position-demo-grid-item">
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" opened=${args.opened}>
+        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" opened=${args.opened}>
+        <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" ?opened=${args.opened}>
           <pds-button variant="accent">t</pds-button>
         </pds-tooltip>
-        <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" opened=${args.opened}>
+        <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" ?opened=${args.opened}>
           <pds-button variant="accent">te</pds-button>
         </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" ?opened=${args.opened}>
             <pds-button variant="accent">ls</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" ?opened=${args.opened}>
             <pds-button variant="accent">l</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" ?opened=${args.opened}>
             <pds-button variant="accent">le</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" ?opened=${args.opened}>
             <pds-button variant="accent">bs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" ?opened=${args.opened}>
             <pds-button variant="accent">b</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" ?opened=${args.opened}>
             <pds-button variant="accent">be</pds-button>
           </pds-tooltip>
         </div>
         <div class="position-demo-grid-item">
-          <pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" opened=${args.opened}>
+          <pds-tooltip content="content 1" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" ?opened=${args.opened}>
             <pds-button variant="accent">rs</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" opened=${args.opened}>
+          <pds-tooltip content="content 2" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" ?opened=${args.opened}>
             <pds-button variant="accent">r</pds-button>
           </pds-tooltip>
-          <pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" opened=${args.opened}>
+          <pds-tooltip content="content 3" ?has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" ?opened=${args.opened}>
             <pds-button variant="accent">re</pds-button>
           </pds-tooltip>
       </div>

package/dist/collection/utils/utils.js

@@ -15,10 +15,37 @@ export const debounce = (func, wait = 0) => {
         timer = setTimeout(func, wait, ...args);
     };
 };
+// Add shared color normalization utility to unify token handling across components
+/**
+ * Normalizes color values to ensure consistent CSS variable usage
+ * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
+ * @param options.semanticMap - Optional mapping of semantic names to CSS variables
+ * @returns Normalized color value or undefined for invalid inputs
+ */
+export const normalizeColorValue = (value, options) => {
+    if (!value)
+        return undefined;
+    const trimmed = value.trim();
+    // Treat whitespace-only as undefined to avoid invalid CSS values
+    if (trimmed === '')
+        return undefined;
+    // If a semantic map is provided and the value matches a key, return mapped CSS var
+    if ((options === null || options === void 0 ? void 0 : options.semanticMap) && options.semanticMap[trimmed]) {
+        return options.semanticMap[trimmed];
+    }
+    // If already a CSS var, pass through
+    if (trimmed.startsWith('var('))
+        return trimmed;
+    // If raw token is provided (e.g., --pine-color-foo), wrap in var(...)
+    if (trimmed.startsWith('--'))
+        return `var(${trimmed})`;
+    // Otherwise treat as literal CSS color value
+    return trimmed;
+};
 export const setColor = (color, customColors) => {
-    var _a;
+    // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
     if (!color)
-        return;
+        return {};
     const defaultColors = {
         primary: 'var(--pine-color-text-primary)',
         secondary: 'var(--pine-color-text-secondary)',
@@ -29,9 +56,15 @@ export const setColor = (color, customColors) => {
         success: 'var(--pine-color-text-success)',
         warning: 'var(--pine-color-text-warning)',
     };
-    const colors = customColors || defaultColors;
+    // Merge defaults with any custom overrides so defaults are preserved
+    const semanticMap = Object.assign(Object.assign({}, defaultColors), (customColors || {}));
+    // Use the shared normalizer so components accept semantic names, raw tokens, var(...), or literals
+    const resolved = normalizeColorValue(color, { semanticMap });
+    // Ensure we never return an undefined style value; if unresolved, omit the property
+    if (!resolved)
+        return {};
     return {
-        '--color': (_a = colors[color]) !== null && _a !== void 0 ? _a : (color.startsWith('--') ? `var(${color})` : color)
+        '--color': resolved
     };
 };
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,EAAE;IAC9C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,IAAY,EAAgB,EAAE;IAC/E,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;IACnD,OAAO;QACL,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;KACnC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAA8B,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE;IACnE,IAAI,KAAU,CAAC;IACf,OAAO,CAAC,GAAG,IAAW,EAAO,EAAE;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,YAAqC,EAAE,EAAE;;IAC/E,IAAI,CAAC,KAAK;QAAE,OAAO;IAEnB,MAAM,aAAa,GAA2B;QAC5C,OAAO,EAAE,gCAAgC;QACzC,SAAS,EAAE,kCAAkC;QAC7C,OAAO,EAAE,gCAAgC;QACzC,MAAM,EAAE,+BAA+B;QACvC,MAAM,EAAE,+BAA+B;QACvC,IAAI,EAAE,6BAA6B;QACnC,OAAO,EAAE,gCAAgC;QACzC,OAAO,EAAE,gCAAgC;KAC1C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,IAAI,aAAa,CAAC;IAE7C,OAAO;QACL,SAAS,EAAE,MAAA,MAAM,CAAC,KAAK,CAAC,mCAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;KAC/E,CAAC;AACJ,CAAC,CAAA","sourcesContent":["import type { EventEmitter } from \"@stencil/core\";\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\nexport const setColor = (color: string, customColors?: Record<string, string>) => {\n  if (!color) return;\n\n  const defaultColors: Record<string, string> = {\n    primary: 'var(--pine-color-text-primary)',\n    secondary: 'var(--pine-color-text-secondary)',\n    neutral: 'var(--pine-color-text-neutral)',\n    accent: 'var(--pine-color-text-accent)',\n    danger: 'var(--pine-color-text-danger)',\n    info: 'var(--pine-color-text-info)',\n    success: 'var(--pine-color-text-success)',\n    warning: 'var(--pine-color-text-warning)',\n  };\n\n  const colors = customColors || defaultColors;\n\n  return {\n    '--color': colors[color] ?? (color.startsWith('--') ? `var(${color})` : color)\n  };\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,EAAE;IAC9C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAmB,EAAE,IAAY,EAAgB,EAAE;IAC/E,MAAM,QAAQ,GAAI,KAAa,CAAC,SAAS,IAAI,KAAK,CAAC;IACnD,OAAO;QACL,SAAS,EAAE,KAAK;QAChB,IAAI,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;KACnC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAA8B,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE;IACnE,IAAI,KAAU,CAAC;IACf,OAAO,CAAC,GAAG,IAAW,EAAO,EAAE;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1C,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,mFAAmF;AACnF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAyB,EACzB,OAAkD,EAC9B,EAAE;IACtB,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,iEAAiE;IACjE,IAAI,OAAO,KAAK,EAAE;QAAE,OAAO,SAAS,CAAC;IAErC,mFAAmF;IACnF,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;QACzD,OAAO,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,qCAAqC;IACrC,IAAI,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC;QAAE,OAAO,OAAO,CAAC;IAE/C,sEAAsE;IACtE,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,OAAO,OAAO,OAAO,GAAG,CAAC;IAEvD,6CAA6C;IAC7C,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,YAAqC,EAAE,EAAE;IAC/E,2FAA2F;IAC3F,IAAI,CAAC,KAAK;QAAE,OAAO,EAA4B,CAAC;IAEhD,MAAM,aAAa,GAA2B;QAC5C,OAAO,EAAE,gCAAgC;QACzC,SAAS,EAAE,kCAAkC;QAC7C,OAAO,EAAE,gCAAgC;QACzC,MAAM,EAAE,+BAA+B;QACvC,MAAM,EAAE,+BAA+B;QACvC,IAAI,EAAE,6BAA6B;QACnC,OAAO,EAAE,gCAAgC;QACzC,OAAO,EAAE,gCAAgC;KAC1C,CAAC;IAEF,qEAAqE;IACrE,MAAM,WAAW,mCAAQ,aAAa,GAAK,CAAC,YAAY,IAAI,EAAE,CAAC,CAAE,CAAC;IAElE,mGAAmG;IACnG,MAAM,QAAQ,GAAG,mBAAmB,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,CAAC;IAE7D,oFAAoF;IACpF,IAAI,CAAC,QAAQ;QAAE,OAAO,EAA4B,CAAC;IAEnD,OAAO;QACL,SAAS,EAAE,QAAQ;KACpB,CAAC;AACJ,CAAC,CAAA","sourcesContent":["import type { EventEmitter } from \"@stencil/core\";\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait),\n  } as EventEmitter;\n};\n\nexport const debounce = (func: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(func, wait, ...args);\n  };\n};\n\n// Add shared color normalization utility to unify token handling across components\n/**\n * Normalizes color values to ensure consistent CSS variable usage\n * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color\n * @param options.semanticMap - Optional mapping of semantic names to CSS variables\n * @returns Normalized color value or undefined for invalid inputs\n */\nexport const normalizeColorValue = (\n  value: string | undefined,\n  options?: { semanticMap?: Record<string, string> }\n): string | undefined => {\n  if (!value) return undefined;\n  const trimmed = value.trim();\n  // Treat whitespace-only as undefined to avoid invalid CSS values\n  if (trimmed === '') return undefined;\n\n  // If a semantic map is provided and the value matches a key, return mapped CSS var\n  if (options?.semanticMap && options.semanticMap[trimmed]) {\n    return options.semanticMap[trimmed];\n  }\n\n  // If already a CSS var, pass through\n  if (trimmed.startsWith('var(')) return trimmed;\n\n  // If raw token is provided (e.g., --pine-color-foo), wrap in var(...)\n  if (trimmed.startsWith('--')) return `var(${trimmed})`;\n\n  // Otherwise treat as literal CSS color value\n  return trimmed;\n};\n\nexport const setColor = (color: string, customColors?: Record<string, string>) => {\n  // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles\n  if (!color) return {} as Record<string, string>;\n\n  const defaultColors: Record<string, string> = {\n    primary: 'var(--pine-color-text-primary)',\n    secondary: 'var(--pine-color-text-secondary)',\n    neutral: 'var(--pine-color-text-neutral)',\n    accent: 'var(--pine-color-text-accent)',\n    danger: 'var(--pine-color-text-danger)',\n    info: 'var(--pine-color-text-info)',\n    success: 'var(--pine-color-text-success)',\n    warning: 'var(--pine-color-text-warning)',\n  };\n\n  // Merge defaults with any custom overrides so defaults are preserved\n  const semanticMap = { ...defaultColors, ...(customColors || {}) };\n\n  // Use the shared normalizer so components accept semantic names, raw tokens, var(...), or literals\n  const resolved = normalizeColorValue(color, { semanticMap });\n\n  // Ensure we never return an undefined style value; if unresolved, omit the property\n  if (!resolved) return {} as Record<string, string>;\n\n  return {\n    '--color': resolved\n  };\n}\n"]}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-07T19:53:57",
+  "timestamp": "2025-08-19T17:10:57",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.28.2",
@@ -1122,16 +1122,16 @@
         },
         {
           "name": "flex",
-          "type": "\"grow\" | \"none\" | \"shrink\"",
+          "type": "string",
           "complexType": {
-            "original": "`none` | `grow` | `shrink`",
-            "resolved": "\"grow\" | \"none\" | \"shrink\"",
+            "original": "`none` | `grow` | `shrink` | string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
           "attr": "flex",
           "reflectToAttr": false,
-          "docs": "Defines how a box will grow or shrink to fit the space available in its container.",
+          "docs": "Defines how a box will grow or shrink to fit the space available in its container.\nCan be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -1140,15 +1140,6 @@
           ],
           "values": [
             {
-              "value": "grow",
-              "type": "string"
-            },
-            {
-              "value": "none",
-              "type": "string"
-            },
-            {
-              "value": "shrink",
               "type": "string"
             }
           ],