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

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

@@ -5,8 +5,15 @@ import { handle as handleIcon } from "@pine-ds/icons/icons";
  */
 export class PdsSortableItem {
     constructor() {
+        /**
+         * Determines whether `sortable-item-actions` slot should be enabled.
+         * @defaultValue false
+         */
         this.enableActions = false;
-        this.componentId = undefined;
+        /**
+         * Determines whether `sortable-item` should have a handle.
+         * @defaultValue false
+         */
         this.showHandle = false;
     }
     componentWillRender() {
@@ -18,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: handleIcon }))), h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '1a5e7d46d027bf6aa95b9d688e390ab42a40cc8d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a6653d963a7a8f39937507dd94042943b4627686', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'a5c340eaf2f3f4d3fb4a0cc66371444d8844b078', icon: handleIcon }))), h("slot", { key: '647f24778a2450c040596c6bea279236b0148e0f' }), this.enableActions && (h("div", { key: '7b8c76b0519c21fe0bd29cb5ef3f213296f30ef4', class: "pds-sortable-item__actions" }, h("slot", { key: '636480cd939b04ed739a2e6a7dbc489680a18a57', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }
@@ -51,6 +58,8 @@ export class PdsSortableItem {
                         }],
                     "text": "Determines whether `sortable-item-actions` slot should be enabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "enable-actions",
                 "reflect": false,
                 "defaultValue": "false"
@@ -69,6 +78,8 @@ export class PdsSortableItem {
                     "tags": [],
                     "text": "A unique identifier used for the sortable item `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -89,6 +100,8 @@ export class PdsSortableItem {
                         }],
                     "text": "Determines whether `sortable-item` should have a handle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-handle",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5D;;GAEG;AAMH,MAAM,OAAO,eAAe;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;QACjB,sEAAsE;QACtE,+CAA+C;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,iEAAU,IAAI,EAAE,UAAU,GAAa,CACnC,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,4BAA4B;gBACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5D;;GAEG;AAMH,MAAM,OAAO,eAAe;IAL5B;QAQE;;;WAGG;QACK,kBAAa,GAAG,KAAK,CAAC;QAO9B;;;WAGG;QACsB,eAAU,GAAG,KAAK,CAAC;KA6B7C;IA3BC,mBAAmB;QACjB,sEAAsE;QACtE,+CAA+C;QAC/C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,iEAAU,IAAI,EAAE,UAAU,GAAa,CACnC,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,4BAA4B;gBACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,10 +1,8 @@
 :host(.pds-sortable) {
-  --border-radius: var(--pine-border-radius-050);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
   display: flex;
   flex-direction: column;
 }
 :host(.pds-sortable).pds-sortable--bordered {
-  border: var(--border-default);
-  border-radius: var(--border-radius);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);
 }

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

@@ -2,9 +2,18 @@ import { Host, h } from "@stencil/core";
 import Sortable from "sortablejs";
 export class PdsSortable {
     constructor() {
+        /**
+         * Determines whether `sortable` should have a border.
+         * @defaultValue false
+         */
         this.border = false;
-        this.componentId = undefined;
+        /**
+         * Deternines whether `sortable` items should be divided with border.
+         */
         this.dividers = false;
+        /**
+         * Determines the grabbable area for the `pds-sortable-item`.
+         */
         this.handleType = 'row';
     }
     classNames() {
@@ -35,7 +44,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '030286aa0de920f4b5ce4470f3d1b5ab14be2792', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c38822d7c82273c2fbc28d09c919e4c179ebb49d' })));
+        return (h(Host, { key: 'd120089730b34d5e787a34439f5d308e0c476c7a', class: this.classNames(), id: this.componentId }, h("slot", { key: 'b796c6aca1acde55085163049ecb869952cf8fb6' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }
@@ -68,6 +77,8 @@ export class PdsSortable {
                         }],
                     "text": "Determines whether `sortable` should have a border."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "border",
                 "reflect": true,
                 "defaultValue": "false"
@@ -86,6 +97,8 @@ export class PdsSortable {
                     "tags": [],
                     "text": "A unique identifier used for the sortable container `id` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -103,6 +116,8 @@ export class PdsSortable {
                     "tags": [],
                     "text": "Deternines whether `sortable` items should be divided with border."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dividers",
                 "reflect": true,
                 "defaultValue": "false"
@@ -121,6 +136,8 @@ export class PdsSortable {
                     "tags": [],
                     "text": "Determines the grabbable area for the `pds-sortable-item`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "handle-type",
                 "reflect": false,
                 "defaultValue": "'row'"

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

@@ -1 +1 @@
-{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;;sBAYY,KAAK;;wBAUH,KAAK;0BAKF,KAAK;;IAEpC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrl: 'pds-sortable.scss',\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;IALxB;QAaE;;;WAGG;QACsB,WAAM,GAAG,KAAK,CAAC;QAOxC;;WAEG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAE1C;;WAEG;QACK,eAAU,GAAqB,KAAK,CAAC;KAgD9C;IA9CS,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrls: ['pds-sortable.scss'],\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,69 +1,50 @@
 :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);
@@ -76,50 +57,67 @@ input::after {
 }
 
 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-background-container-disabled);
+}
 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 {
@@ -128,9 +126,9 @@ input:checked::after {
 
 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,31 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
+import { danger } from "@pine-ds/icons/icons";
 export class PdsSwitch {
     constructor() {
+        /**
+         * 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.pdsSwitchChange.emit(e);
         };
-        /**
-         * Generate switch classes
-         */
         this.switchClassNames = () => {
             let switchClasses = `pds-switch`;
             if (this.invalid === true) {
@@ -21,33 +36,22 @@ 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;
     }
     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: 'd285cd7bc35c8b367a6475d5553334e52cad6ae5', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '89d5f498ad8550eb5960e2eafbccb69660bf633a', htmlFor: this.componentId }, h("input", { key: 'f01f178ef26f41bc776a63272e332da7f5b1ec8c', "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: "checkbox", value: this.value }), h("span", { key: 'cfcd91b3e87014dd289d7a330497bd60c3d24b0c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '455568a2d73d387ccd5109a96646b678f6d1a89b', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e558cec7862ca02b943d93c34271696d7115228a', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '835f4c94c049b087aef06b443de3b92e81b0dad3', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
     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 +70,14 @@ export class PdsSwitch {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -81,8 +87,10 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the input 'checked' state"
+                    "text": "Determines the input 'checked' state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
@@ -99,8 +107,10 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -117,11 +127,32 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state"
+                    "text": "Displays message text describing an invalid state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-message",
                 "reflect": false
             },
+            "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,
+                "attribute": "hide-label",
+                "reflect": false
+            },
             "helperMessage": {
                 "type": "string",
                 "mutable": false,
@@ -134,8 +165,10 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "helper-message",
                 "reflect": false
             },
@@ -151,8 +184,10 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
@@ -169,8 +204,10 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays text to describe the input"
+                    "text": "Displays text to describe the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -186,8 +223,10 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -203,33 +242,14 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the 'required' state of the input"
+                    "text": "Determines the 'required' state of the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "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,8 +262,10 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }
@@ -258,7 +280,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",

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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,SAAS;;QAgEZ,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAe,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF;;WAEG;QACK,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,aAAa,GAAG,YAAY,CAAC;YAEjC,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC1B,aAAa,IAAI,oBAAoB,CAAC;YACxC,CAAC;YACD,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;gBACrC,aAAa,IAAI,sBAAsB,CAAC;YAC1C,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;;uBAvEgB,KAAK;wBAKH,KAAK;;;uBAeN,KAAK;;;wBAeJ,KAAK;oBAMY,UAAU;;;IAgC/C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAChF,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAC9C,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;YACF,EAAC,QAAQ,qDAAC,UAAU,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACvF,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,qBAAqB,EAC5B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,gDAAgD,EACvD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-switch',\n  styleUrl: 'pds-switch.scss',\n  shadow: true,\n})\nexport class PdsSwitch {\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() 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   * 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   * Specifies the underlying input element type\n   * @defaultValue 'checkbox'\n   */\n  @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n  /**\n   * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\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    this.pdsSwitchChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Generate switch classes\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  render() {\n    return (\n      <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, 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={this.type}\n          value={this.value}\n        />\n        <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.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            {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 } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\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  @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  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.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          />\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"]}