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

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

@@ -1,14 +1,32 @@
 import { h, Host } 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, HostStylingKeeper } from "../../utils/attributes";
+/**
+ * @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
+ */
 export class PdsCheckbox {
     constructor() {
+        this.inheritedAttributes = {};
+        this._type = 'checkbox';
+        this.hostKeeper = new HostStylingKeeper();
+        this.hasLabelSlot = false;
+        /**
+         * It determines whether or not the checkbox is checked.
+         */
+        this.checked = false;
+        /**
+         * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleCheckboxChange = (e) => {
             if (this.disabled) {
                 return;
             }
             const target = e.target;
             this.checked = target.checked;
+            this.updateFormValue();
             this.pdsCheckboxChange.emit({
                 checked: target.checked,
                 value: this.value
@@ -20,18 +38,9 @@ export class PdsCheckbox {
                 value: this.value
             });
         };
-        this.checked = false;
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.indeterminate = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.labelHidden = undefined;
-        this.name = undefined;
-        this.required = undefined;
-        this.value = undefined;
+        this.updateHasLabelSlot = () => {
+            this.hasLabelSlot = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'label');
+        };
     }
     updateIndeterminate() {
         this.indeterminate = undefined;
@@ -47,23 +56,89 @@ export class PdsCheckbox {
         if (this.disabled) {
             classNames.push('is-disabled');
         }
+        if (this.hasLabelSlot) {
+            classNames.push('has-label-slot');
+        }
+        if (this.variant === 'pill') {
+            classNames.push('pds-checkbox--pill');
+        }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // 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);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    checkedChanged() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (isSpecTest())
+            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');
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.updateHasLabelSlot();
+    }
     render() {
-        return (h(Host, { key: 'ad7d0dd8ce09b69abc0024541ff2b2d69a8db0b0', class: this.classNames() }, h("input", { key: 'fbc513372055e685d3beb16fba9c404db3d0528a', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, 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 }), h(PdsLabel, { key: '12444bd716bc8ae952a0bf38471d00e6d3a9fe3b', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: 'e85ffb338c44a3f924b75d1869c781db9a93350b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '8071425f43f89ff44ce8bdb608737b1f574e2440', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: 'ba31bb0a6b87946aabd6c919701d0f8ffb02e390', class: hostClass }, h("label", { key: '8670fb23e0eda01a23c2246f1f147adc682976e6', htmlFor: this.componentId }, h("input", Object.assign({ key: '1382be5f2887193e5b0d44586769ef3c36d7a994', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), h("span", { key: '0717737091cf2045064f11e2b9478e3adb3aa1e3', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, h("slot", { key: '93c4e2842fcfd738a95fe8a34193339d683533e8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'd7c6aca24d1b1eea0e8c892349fea3380e23e70e', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '77983f7f87bb722adad8f2ea9ba479bf738071c8', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b7ed2ed0012573a04cda9bc1ba10de03ac38d8de', "aria-hidden": "true", 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 {
-            "$": ["pds-checkbox.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-checkbox.css"]
+            "$": ["../../global/styles/utils/label.css", "pds-checkbox.css"]
         };
     }
     static get properties() {
@@ -82,8 +157,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is checked."
                 },
-                "attribute": "checked",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -100,8 +177,10 @@ export class PdsCheckbox {
                     "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"
             },
             "disabled": {
                 "type": "boolean",
@@ -117,8 +196,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is disabled."
                 },
-                "attribute": "disabled",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
             },
             "errorMessage": {
                 "type": "string",
@@ -132,10 +213,12 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state."
+                    "text": "Displays an error message below the checkbox. It becomes the checkbox's accessible description only while `invalid` is set."
                 },
-                "attribute": "error-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
             },
             "helperMessage": {
                 "type": "string",
@@ -149,10 +232,12 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for helper message below checkbox."
+                    "text": "Displays a message or hint below the checkbox."
                 },
-                "attribute": "helper-message",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
             },
             "indeterminate": {
                 "type": "boolean",
@@ -166,10 +251,12 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly 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)."
+                    "text": "Shows the checkbox as indeterminate, for a checkbox whose group is only partly selected. It's exposed to screen readers as mixed.\nChanging `checked` clears it. Has no visual style when `variant` is `pill`."
                 },
-                "attribute": "indeterminate",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate"
             },
             "invalid": {
                 "type": "boolean",
@@ -183,10 +270,12 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "It determines whether or not the checkbox is invalid."
+                    "text": "Determines whether or not the checkbox is invalid."
                 },
-                "attribute": "invalid",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
             },
             "label": {
                 "type": "string",
@@ -200,12 +289,14 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String used for label text next to checkbox."
+                    "text": "Text to be displayed as the checkbox label."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
-            "labelHidden": {
+            "hideLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -217,10 +308,12 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
+                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`."
                 },
-                "attribute": "label-hidden",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
             },
             "name": {
                 "type": "string",
@@ -236,8 +329,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "String used for checkbox `name` attribute."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
@@ -253,8 +348,10 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "It determines whether or not the checkbox is required."
                 },
-                "attribute": "required",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
             },
             "value": {
                 "type": "string",
@@ -270,11 +367,41 @@ export class PdsCheckbox {
                     "tags": [],
                     "text": "The value of the checkbox that is submitted with a form."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "default"
+                        }],
+                    "text": "Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
             }
         };
     }
+    static get states() {
+        return {
+            "hasLabelSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsCheckboxChange",
@@ -284,7 +411,7 @@ export class PdsCheckbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted that contains the `value` and `checked`."
+                    "text": "Emitted when the user toggles the checkbox, by a click or `Space`, carrying the `value` and the new `checked` state.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",
@@ -293,7 +420,8 @@ export class PdsCheckbox {
                         "CheckboxChangeEventDetail": {
                             "location": "import",
                             "path": "./checkbox-interface",
-                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail",
+                            "referenceLocation": "CheckboxChangeEventDetail"
                         }
                     }
                 }
@@ -305,7 +433,7 @@ export class PdsCheckbox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted when the user toggles the checkbox, just before `pdsCheckboxChange`, carrying the `value` and `checked`.\n`checked` is still the state from before the toggle, so read the new state from `pdsCheckboxChange`.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "CheckboxChangeEventDetail",
@@ -314,17 +442,21 @@ export class PdsCheckbox {
                         "CheckboxChangeEventDetail": {
                             "location": "import",
                             "path": "./checkbox-interface",
-                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
+                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail",
+                            "referenceLocation": "CheckboxChangeEventDetail"
                         }
                     }
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "checked",
                 "methodName": "updateIndeterminate"
+            }, {
+                "propName": "checked",
+                "methodName": "checkedChanged"
             }];
     }
 }
-//# sourceMappingURL=pds-checkbox.js.map

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

@@ -1,41 +1,41 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
-  argTypes: extractArgTypes('pds-checkbox'),
   args: {
     checked: false,
     disabled: false,
     indeterminate: false,
     invalid: false,
-    labelHidden: false,
+    hideLabel: false,
     required: false,
+    variant: 'default',
   },
-  component: 'pds-checkbox',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsCheckboxChange'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'pill'],
     },
   },
+  component: 'pds-checkbox',
+  parameters: {},
   title: 'components/Checkbox',
 }
 
 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}
-    indeterminate=${args.indeterminate}
-    invalid=${args.invalid}
+    ?hide-label=${args.hideLabel}
+    ?indeterminate=${args.indeterminate}
+    ?invalid=${args.invalid}
     label=${args.label}
-    label-hidden=${args.labelHidden}
     name=${args.name}
-    required=${args.required}
+    ?required=${args.required}
     value=${args.value}
+    variant=${args.variant}
   />`;
 
 export const Default = BaseTemplate.bind();
@@ -80,3 +80,33 @@ Invalid.args = {
   label: 'Label text',
   invalid: true,
 };
+
+export const Pill = BaseTemplate.bind();
+Pill.args = {
+  componentId: 'pill',
+  label: 'Label text',
+  variant: 'pill',
+};
+
+const PillGroupTemplate = (args) =>
+  html`<fieldset style="border: 0; margin: 0; padding: 0;">
+    <legend style="font: var(--pine-typography-body-medium); margin-block-end: var(--pine-dimension-xs); padding: 0;">Send to</legend>
+    <pds-box wrap gap="xs">
+      <pds-checkbox component-id="pill-email" name="channels" value="email" label="Email" variant="pill" checked ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-sms" name="channels" value="sms" label="SMS" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-push" name="channels" value="push" label="Push notification" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+    </pds-box>
+  </fieldset>`;
+
+export const PillGroup = PillGroupTemplate.bind();
+PillGroup.args = {};
+
+export const PillDisabled = PillGroupTemplate.bind();
+PillDisabled.args = {
+  disabled: true,
+};
+
+export const PillInvalid = PillGroupTemplate.bind();
+PillInvalid.args = {
+  invalid: true,
+};