@pine-ds/core 3.2.0 → 3.3.0

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

@@ -7,6 +7,7 @@ export class PdsChip {
     constructor() {
         /**
          * Determines whether a dot should be displayed on the chip.
+         * Note: This prop is ignored when sentiment is 'brand'.
          * @defaultValue false
          */
         this.dot = false;
@@ -22,6 +23,7 @@ export class PdsChip {
         this.sentiment = 'neutral';
         /**
          * Sets the style variant of the chip.
+         * Note: This prop is ignored when sentiment is 'brand'.
          * @defaultValue 'text'
          */
         this.variant = 'text';
@@ -34,21 +36,33 @@ export class PdsChip {
         if (this.large) {
             classNames.push('pds-chip--large');
         }
-        if (this.variant) {
-            classNames.push('pds-chip--' + this.variant);
+        // For brand sentiment, always use text variant
+        const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;
+        if (effectiveVariant) {
+            classNames.push('pds-chip--' + effectiveVariant);
         }
         if (this.sentiment) {
             classNames.push('pds-chip--' + this.sentiment);
         }
         return classNames.join(' ');
     }
+    get effectiveVariant() {
+        // For brand sentiment, force text variant behavior
+        return this.sentiment === 'brand' ? 'text' : this.variant;
+    }
+    get iconSize() {
+        // Icon size based on large prop
+        return this.large ? '14px' : '12px';
+    }
     setChipContent() {
-        const isDropdown = this.variant === 'dropdown';
-        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null), h("pds-icon", { icon: downSmall, size: "12px", "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.dot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null)));
+        const isDropdown = this.effectiveVariant === 'dropdown';
+        // For brand sentiment, ignore dot prop
+        const showDot = this.sentiment === 'brand' ? false : this.dot;
+        const chipContent = isDropdown ? (h("button", { class: "pds-chip__button", type: "button" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null), h("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (h("span", { class: "pds-chip__label" }, this.icon && h("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && h("i", { class: "pds-chip__dot", "aria-hidden": "true" }), h("slot", null)));
         return chipContent;
     }
     render() {
-        return (h(Host, { key: 'b1987e434a5b9dcc4a5536660822bcb9c1f79e4f', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '8f658cd564e86297a9b988d6080135e6d612be36', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '32266c84697e0ffa3ff5d2e554cdf6b7e598d0e6', icon: remove, size: "12px" })))));
+        return (h(Host, { key: '87b74bdc74dcf3d0a7e9818a9643abcaac6ed732', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && (h("button", { key: '98644f17a57514b541cd00be5c0972e589f7c44e', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '056913f77f7179db7e8f6f8b69df18c4bd98b891', icon: remove, size: this.iconSize })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +112,7 @@ export class PdsChip {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether a dot should be displayed on the chip."
+                    "text": "Determines whether a dot should be displayed on the chip.\nNote: This prop is ignored when sentiment is 'brand'."
                 },
                 "getter": false,
                 "setter": false,
@@ -106,6 +120,25 @@ export class PdsChip {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display before the chip text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
             "large": {
                 "type": "boolean",
                 "mutable": false,
@@ -133,8 +166,8 @@ export class PdsChip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
-                    "resolved": "\"accent\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "original": "'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning'",
+                    "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -167,7 +200,7 @@ export class PdsChip {
                             "name": "defaultValue",
                             "text": "'text'"
                         }],
-                    "text": "Sets the style variant of the chip."
+                    "text": "Sets the style variant of the chip.\nNote: This prop is ignored when sentiment is 'brand'."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;GAEG;AAOH,MAAM,OAAO,OAAO;IALpB;QAWE;;;WAGG;QACK,QAAG,GAAG,KAAK,CAAC;QAGpB;;;WAGG;QACK,UAAK,GAAG,KAAK,CAAC;QAEtB;;;WAGG;QACK,cAAS,GAAqE,SAAS,CAAC;QAEhG;;;WAGG;QACK,YAAO,GAAgC,MAAM,CAAC;QAO9C,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;QAC/B,CAAC,CAAC;KAgDH;IA9CS,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,CAC/B,cAAQ,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ;YAC3C,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC7D,eAAa;YACb,gBAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAY,CAC9D,CACV,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,iBAAiB;YAC1B,IAAI,CAAC,GAAG,IAAI,SAAG,KAAK,EAAC,eAAe,iBAAa,MAAM,GAAK;YAC7D,eAAa,CACR,CACR,CAAC;QAEF,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,CACzB,+DAAQ,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBAAa,QAAQ;gBAC/F,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,GAAY,CACxC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-chip.js","sourceRoot":"","sources":["../../../src/components/pds-chip/pds-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * The name of the icon to display before the chip text.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n\n    // For brand sentiment, always use text variant\n    const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n    if (effectiveVariant) {\n      classNames.push('pds-chip--' + effectiveVariant);\n    }\n\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private get effectiveVariant() {\n    // For brand sentiment, force text variant behavior\n    return this.sentiment === 'brand' ? 'text' : this.variant;\n  }\n\n  private get iconSize() {\n    // Icon size based on large prop\n    return this.large ? '14px' : '12px';\n  }\n\n  private setChipContent() {\n    const isDropdown = this.effectiveVariant === 'dropdown';\n\n    // For brand sentiment, ignore dot prop\n    const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,6 +18,7 @@ const BaseTemplate = (args) => html`
 <pds-chip
   component-id="${args.componentId}"
   dot="${args.dot}"
+  icon="${args.icon}"
   large="${args.large}"
   sentiment="${args.sentiment}"
   variant="${args.variant}"
@@ -28,6 +29,7 @@ const BaseTemplate = (args) => html`
 export const Default = BaseTemplate.bind();
 Default.args = {
   dot: false,
+  icon: "",
   large: false,
   sentiment: "neutral",
   slot: "label",
@@ -38,6 +40,7 @@ export const Sentiment = BaseTemplate.bind();
 Sentiment.args = {
   dot: false,
   large: false,
+  icon: "",
   sentiment: "success",
   slot: "label",
   variant: "text",
@@ -46,6 +49,17 @@ Sentiment.args = {
 export const Dots = BaseTemplate.bind();
 Dots.args = {
   dot: true,
+  icon: "",
+  large: false,
+  sentiment: "neutral",
+  slot: "label",
+  variant: "text",
+}
+
+export const Icon = BaseTemplate.bind();
+Icon.args = {
+  dot: false,
+  icon: "check",
   large: false,
   sentiment: "neutral",
   slot: "label",
@@ -55,6 +69,7 @@ Dots.args = {
 export const Dropdown = BaseTemplate.bind();
 Dropdown.args = {
   dot: false,
+  icon: "",
   large: false,
   sentiment: "neutral",
   slot: "label",
@@ -64,6 +79,7 @@ Dropdown.args = {
 export const Tag = BaseTemplate.bind();
 Tag.args = {
   dot: false,
+  icon: "",
   large: false,
   sentiment: "neutral",
   slot: "label",
@@ -73,6 +89,7 @@ Tag.args = {
 export const Large = BaseTemplate.bind();
 Large.args = {
   dot: false,
+  icon: "",
   large: true,
   sentiment: "neutral",
   slot: "label",

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

@@ -1,93 +1,217 @@
 :host {
+  --pds-input-background: var(--pine-color-background-container);
+  --pds-input-border-color: var(--pine-color-border);
+  --pds-input-border-color-hover: var(--pine-color-border-hover);
+  --pds-input-border-color-disabled: var(--pine-color-border-disabled);
+  --pds-input-border-radius: var(--pine-dimension-125);
+  --pds-input-border-width: var(--pine-border-width-thin);
+  --pds-input-padding-x: var(--pine-dimension-150);
+  --pds-input-padding-y: var(--pine-dimension-xs);
+  --pds-input-font: var(--pine-typography-body);
+  --pds-input-text-color: var(--pine-color-text-active);
+  --pds-input-placeholder-color: var(--pine-color-text-placeholder);
+  --pds-input-icon-color: var(--pine-color-text-secondary);
+  --pds-input-disabled-background: var(--pine-color-background-container-disabled);
+  --pds-input-disabled-text-color: var(--pine-color-text-disabled);
+  --pds-input-error-color: var(--pine-color-text-message-danger);
+  --pds-input-error-background: var(--pine-input-color-background-danger);
+  --pds-input-error-border: var(--pine-color-border-danger);
+  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);
+  --pds-input-addon-background: var(--pine-color-background-subtle);
+  --pds-input-addon-color: var(--pine-color-text-secondary);
+  --pds-input-field-min-height: calc(var(--pine-dimension-450) + 2px);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   display: inline;
 }
+:host pds-select::part(select) {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host::part(prefix), :host::part(suffix) {
+  align-items: center;
+  color: var(--pine-color-text-label-readonly);
+  display: flex;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  z-index: 1;
+}
+:host::part(prefix) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+  left: var(--pds-input-padding-x);
+}
+:host::part(suffix) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+  right: var(--pds-input-padding-x);
+}
+:host::part(prepend), :host::part(append) {
+  align-items: center;
+  background-color: var(--pds-input-addon-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  color: var(--pds-input-addon-color);
+  display: flex;
+}
+:host::part(prepend) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+}
+:host::part(append) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-button[slot=prepend]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius-end-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pine-dimension-none);
+  --pds-button-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-button[slot=append]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius-end-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pine-dimension-none);
+  --pds-button-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-select[slot=prepend]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pine-dimension-none);
+  --pds-select-border-radius-start-end: var(--pine-dimension-none);
+  --pds-select-min-height: var(--pine-dimension-450);
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-select[slot=append]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-start: var(--pine-dimension-none);
+  --pds-select-border-radius-start-start: var(--pine-dimension-none);
+  --pds-select-min-height: var(--pine-dimension-450);
+}
 
 :host([aria-readonly=true]) input {
   background-color: var(--pine-color-background-container-disabled);
   color: var(--pine-color-text-readonly);
 }
 
+:host([disabled=true])::part(prepend), :host([disabled=true])::part(append) {
+  background-color: var(--pds-input-disabled-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);
+}
+
+:host([invalid=true])::part(prepend), :host([invalid=true])::part(append) {
+  background-color: var(--pds-input-error-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-error-border);
+}
+
 .pds-input {
   display: flex;
   flex-direction: column;
+  gap: var(--pine-dimension-2xs);
 }
 
 .pds-input__label {
+  color: var(--pine-color-text-active);
+  font: var(--pine-typography-body-sm-medium);
   margin-block-end: var(--pine-dimension-2xs);
 }
 
+.pds-input__field-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pds-input__field-wrapper.has-prefix .pds-input__field {
+  padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));
+}
+.pds-input__field-wrapper.has-suffix .pds-input__field {
+  padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));
+}
+.pds-input__field-wrapper.has-prepend .pds-input__field {
+  border-end-start-radius: var(--pine-dimension-none);
+  border-start-start-radius: var(--pine-dimension-none);
+}
+.pds-input__field-wrapper.has-append .pds-input__field {
+  border-end-end-radius: var(--pine-dimension-none);
+  border-start-end-radius: var(--pine-dimension-none);
+}
+
 .pds-input__field {
-  background: var(--pine-color-background-container);
-  border: 1px solid var(--pine-color-border);
-  border-radius: var(--pine-dimension-125);
-  color: var(--pine-color-text-active);
-  font: var(--pine-typography-body);
+  background: var(--pds-input-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  border-radius: var(--pds-input-border-radius);
+  box-sizing: border-box;
+  color: var(--pds-input-text-color);
+  flex: 1;
+  font: var(--pds-input-font);
   letter-spacing: var(--pine-letter-spacing);
-  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
-  /* stylelint-disable */
-  /* stylelint-enable */
+  min-height: var(--pds-input-field-min-height);
+  min-width: var(--pine-dimension-none);
+  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
+  transition: border-color 0.2s ease;
+  width: 100%;
 }
-.pds-input__field:hover:not(:disabled, .is-invalid) {
-  border: var(--pine-border-hover);
+.pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-border-color-hover);
 }
 .pds-input__field:disabled {
-  background-color: var(--pine-color-background-container-disabled);
+  background: var(--pds-input-disabled-background);
   border-color: var(--pine-color-border-disabled);
-  color: var(--pine-color-text-disabled);
+  color: var(--pds-input-disabled-text-color);
   cursor: not-allowed;
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.pds-input__field:disabled::-webkit-input-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
-}
-.pds-input__field:disabled::-moz-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
-}
-.pds-input__field:disabled::-moz-placeholder {
-  color: var(--pine-color-text-placeholder-disabled);
 }
-.pds-input__field:disabled:-ms-input-placeholder {
+.pds-input__field:disabled::placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-.pds-input__field:hover {
-  border-color: var(--pine-color-border-hover);
+.has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-error-border-hover);
 }
-.pds-input__field:focus-visible {
+.pds-input__field:focus-visible:not(.has-error) {
   border-color: var(--pine-color-border-active);
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width);
 }
-.pds-input__field::-webkit-input-placeholder {
-  color: var(--pine-color-text-placeholder);
-}
-.pds-input__field::-moz-placeholder {
-  color: var(--pine-color-text-placeholder);
-}
-.pds-input__field::-moz-placeholder {
-  color: var(--pine-color-text-placeholder);
+:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error), :host([has-append]) .pds-input__field:focus-visible:not(.has-error), :host([has-prefix]) .pds-input__field:focus-visible:not(.has-error), :host([has-suffix]) .pds-input__field:focus-visible:not(.has-error) {
+  outline-offset: var(--pine-dimension-none);
 }
-.pds-input__field:-ms-input-placeholder {
-  color: var(--pine-color-text-placeholder);
+.pds-input__field::placeholder {
+  color: var(--pds-input-placeholder-color);
 }
-.pds-input__field.is-invalid {
-  background-color: var(--pine-input-color-background-danger);
-  border-color: var(--pine-color-border-danger);
+.has-error .pds-input__field {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
 }
-.pds-input__field.is-invalid:focus-visible {
+.has-error .pds-input__field:focus-visible {
   outline-color: var(--pine-color-focus-ring-danger);
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
   font: var(--pine-typography-body-sm-medium);
-  margin-block-end: 0;
+  margin-block-end: var(--pine-dimension-none);
   margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-input__error-message {
   align-items: center;
-  color: var(--pine-color-text-message-danger);
+  color: var(--pds-input-error-color);
   display: flex;
   gap: var(--pine-dimension-2xs);
 }