@pine-ds/core 4.0.0-mercury.0 → 4.0.0

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

@@ -1,136 +1,134 @@
 :host {
-  --border-radius-input: var(--pine-border-radius-200);
-  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);
-  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);
-  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  --color-background-checked: var(--pine-color-charcoal-400);
-  --color-background-checked-hover: var(--pine-color-charcoal-400);
-  --color-background-disabled: var(--pine-color-grey-300);
-  --color-background-hover: var(--pine-color-grey-500);
-  --color-background-input-default: var(--pine-color-grey-400);
-  --color-input-toggle: var(--pine-color-white);
-  --color-message-text: var(--pine-color-charcoal-200);
-  --color-outline-focus: var(--pine-color-blue-200);
-  --color-outline-focus-error: var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-400);
-  --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-error: var(--pine-color-red-300);
-  --dimension-input-height: 20px;
-  --dimension-input-width: 36px;
-  --line-height-label: var(--pine-line-height-150);
-  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));
-  --spacing-label-gap-size: var(--pine-spacing-150);
-  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);
-  --spacing-message-block: var(--pine-spacing-050);
-  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));
+  --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));
+  --pine-dimension-025: 2px;
+  --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));
   --number-transition-timing: 0.15s ease-out;
   align-items: flex-start;
-  color: var(--color-text-default);
+  color: var(--pine-color-text);
   display: inline-flex;
   flex-flow: row wrap;
-  margin-block-end: var(--pine-spacing-md);
   position: relative;
 }
 
 :host(.pds-switch--error) {
-  color: var(--color-text-error);
+  color: var(--pine-color-text-message-danger);
 }
 :host(.pds-switch--error) input,
 :host(.pds-switch--error) input:checked,
 :host(.pds-switch--error) input:hover:not(:disabled):not(:checked) {
-  background-color: var(--color-text-error);
+  background-color: var(--pine-color-danger);
 }
 :host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked) {
-  box-shadow: var(--box-shadow-focus-error);
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+:host(.pds-switch--error) label {
+  color: var(--color-text-error);
 }
 
 input {
   appearance: none;
-  background: var(--color-background-input-default);
+  background: var(--pine-color-neutral);
   border: 0;
-  border-radius: var(--border-radius-input);
+  border-radius: var(--pine-dimension-sm);
   cursor: pointer;
   display: inline-block;
-  height: var(--dimension-input-height);
+  flex-shrink: 0;
+  height: var(--pine-dimension-250);
   margin: 0;
   padding: 0;
   position: relative;
-  transform: translateY(2px);
   transition: var(--number-transition-timing);
   transition-property: background, border, color;
-  width: var(--dimension-input-width);
+  width: var(--pine-dimension-450);
 }
 input::after {
-  background: var(--color-input-toggle);
-  border-radius: 50%;
-  box-shadow: var(--box-shadow-input-toggle);
+  background: var(--pine-color-secondary);
+  border-radius: var(--pine-border-radius-full);
+  box-shadow: var(--pine-box-shadow);
   content: "";
   display: block;
   height: var(--sizing-input-toggle-size);
   inset-block-start: 50%;
-  inset-inline-start: 50%;
+  inset-inline-start: var(--pine-dimension-025);
   position: absolute;
-  transform: translate3d(-100%, -50%, 0);
-  transition: transform var(--number-transition-timing);
+  transform: translateY(-50%);
+  transition: inset-inline-start var(--number-transition-timing);
   width: var(--sizing-input-toggle-size);
 }
 
 label {
-  cursor: pointer;
-  display: inline-flex;
-  flex-grow: 1;
-  line-height: var(--line-height-label);
-  margin-inline-start: var(--spacing-label-gap-size);
+  display: flex;
+  gap: var(--pine-dimension-150);
 }
 .pds-switch--error label {
   color: inherit;
 }
 
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .pds-switch__message {
-  color: var(--color-message-text);
-  flex: 1 0 100%;
-  font-size: var(--pine-font-size-body-sm);
-  line-height: var(--pine-line-height-sm);
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-xs);
   margin-inline-start: var(--spacing-message-inline);
+  width: 100%;
 }
 .pds-switch__message + .pds-switch__message {
-  margin-block-start: var(--spacing-message-block);
+  margin-block-start: var(--spacing-message-inline);
 }
 
 .pds-switch__message--error {
   color: inherit;
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-switch__message--error pds-icon {
+  margin-block-start: var(--pine-dimension-025);
 }
 
 input:disabled {
-  background-color: var(--color-background-disabled);
+  background-color: var(--pine-color-neutral-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ label {
-  color: var(--color-text-disabled);
   cursor: initial;
 }
+input:disabled:hover::after {
+  background-color: var(--pine-color-secondary);
+}
 input:disabled .pds-switch__message {
   color: initial;
 }
 
 input:hover:not(:disabled) {
-  background-color: var(--color-background-hover);
+  background-color: var(--pine-color-neutral-hover);
 }
 
 input:focus-visible:not(:disabled) {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 
 input:checked::after {
-  transform: translate3d(0, -50%, 0);
+  inset-inline-start: calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025));
 }
 
 input:checked:not(:disabled) {
   background-color: currentColor;
-  color: var(--color-background-checked);
+  color: var(--pine-color-accent);
 }
 input:checked:not(:disabled):hover {
   border-color: currentColor;
-  color: var(--color-background-checked-hover);
+  color: var(--pine-color-accent-hover);
 }

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

@@ -1,16 +1,35 @@
 import { Host, h } from "@stencil/core";
-import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
+import { danger } from "@pine-ds/icons/icons";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsSwitch {
     constructor() {
+        this.inheritedAttributes = {};
+        this._type = 'checkbox';
+        /**
+         * Determines the input 'checked' state.
+         */
+        this.checked = false;
+        /**
+         * Determines the input 'disabled' state, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Determines the input 'invalid' state, signifying an error is present.
+         */
+        this.invalid = false;
+        /**
+         * Determines the 'required' state of the input.
+         */
+        this.required = false;
         this.onSwitchUpdate = (e) => {
             if (this.disabled)
                 return;
+            const input = e.target;
+            this.checked = input.checked;
+            this.updateFormValue();
             this.pdsSwitchChange.emit(e);
         };
-        /**
-         * Generate switch classes
-         */
         this.switchClassNames = () => {
             let switchClasses = `pds-switch`;
             if (this.invalid === true) {
@@ -21,33 +40,63 @@ export class PdsSwitch {
             }
             return switchClasses;
         };
-        this.componentId = undefined;
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = false;
-        this.label = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.type = 'checkbox';
-        this.value = undefined;
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // Expose type property on the element instance to match native form element behavior
+        exposeTypeProperty(this.el, () => this._type);
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (isSpecTest())
+            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: '5c33e5bd4a42f187450a81faec033832524f1b29', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'cb2a8287cdb44f337b4ecae15968e823f314b4d1', "aria-describedby": assignDescription(this.componentId, this.invalid, 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: this.type, value: this.value }), h(PdsLabel, { key: '86c700a16a23513b3ba34f2add1775274ecc6784', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '30c8b18c990a54330bf3442d9cbbb35387de0ec3', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '1eb57d78271d8c1fbe2fa680eeb88fd2fd1d35c9', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        return (h(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', 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 {
-            "$": ["pds-switch.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-switch.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-switch.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-switch.css"]
         };
     }
     static get properties() {
@@ -66,12 +115,14 @@ export class PdsSwitch {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "checked": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -81,10 +132,12 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the input 'checked' state"
+                    "text": "Determines the input 'checked' state."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -99,10 +152,12 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the input 'disabled' state, preventing user interaction"
+                    "text": "Determines the input 'disabled' state, preventing user interaction."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "errorMessage": {
@@ -117,10 +172,31 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state"
+                    "text": "Displays message text describing an invalid state."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "helperMessage": {
                 "type": "string",
@@ -134,10 +210,12 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays help text for additional description of an input"
+                    "text": "Displays help text for additional description of an input."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
             },
             "invalid": {
                 "type": "boolean",
@@ -151,10 +229,12 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the input 'invalid' state, signifying an error is present"
+                    "text": "Determines the input 'invalid' state, signifying an error is present."
                 },
-                "attribute": "invalid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
             "label": {
@@ -169,10 +249,12 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays text to describe the input"
+                    "text": "Displays text to describe the input."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "name": {
                 "type": "string",
@@ -186,10 +268,12 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Identifies form data and unifies a group of radio inputs for toggling a single property/value"
+                    "text": "Identifies form data and unifies a group of radio inputs for toggling a single property/value."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
@@ -203,33 +287,14 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the 'required' state of the input"
+                    "text": "Determines the 'required' state of the input."
                 },
-                "attribute": "required",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'checkbox' | 'radio'",
-                    "resolved": "\"checkbox\" | \"radio\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "'checkbox'"
-                        }],
-                    "text": "Specifies the underlying input element type"
-                },
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'checkbox'"
-            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -242,10 +307,12 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Provides input with a string submitted in form data, and can be used to distinguish radio inputs"
+                    "text": "Provides input with a string submitted in form data."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
@@ -258,7 +325,7 @@ export class PdsSwitch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event on input change"
+                    "text": "Emits an event on input change."
                 },
                 "complexType": {
                     "original": "InputEvent",
@@ -273,5 +340,10 @@ 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/stories/pds-switch.stories.js

@@ -1,35 +1,31 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
+
   args: {
     disabled: false,
+    hideLabel: false,
     required: false,
   },
-  argTypes: extractArgTypes('pds-switch'),
   component: 'pds-switch',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsSwitchChange'],
-    },
-  },
+  parameters: {},
   title: 'components/Switch',
 }
 
 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}
     name=${args.name}
     onChange=${args.onChange}
-    required=${args.required}
+    ?required=${args.required}
     type=${args.type}
   />
 `;
@@ -47,19 +43,6 @@ Default.args = {
   type: 'checkbox',
 };
 
-export const Radio = BaseTemplate.bind({});
-
-Radio.args = {
-  checked: false,
-  disabled: false,
-  componentId: 'pds-switch-radio-example',
-  invalid: false,
-  label: 'radio switch',
-  name: 'pds-switch-radio',
-  required: false,
-  type: 'radio',
-};
-
 export const Disabled = BaseTemplate.bind({});
 
 Disabled.args = {
@@ -73,9 +56,9 @@ Disabled.args = {
   type: 'checkbox',
 };
 
-export const HelperMessage = BaseTemplate.bind({});
+export const WithMessage = BaseTemplate.bind({});
 
-HelperMessage.args = {
+WithMessage.args = {
   checked: true,
   disabled: false,
   componentId: 'pds-switch-helper-example',

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '53ae547e27857b0e8e11adcbab634979555b37ab', role: "rowgroup" }, h("slot", { key: 'ba94c5332cdb944a36eecfd8f16c63e1fd0c0c0c' })));
+        return (h(Host, { key: '457fc5406a1fe67055038398e03bfad97a393747', role: "rowgroup", part: "body" }, h("slot", { key: '5950bced36f7ba590f34173149cf8663ba76103b' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +16,3 @@ export class PdsTableBody {
         };
     }
 }
-//# sourceMappingURL=pds-table-body.js.map