@pine-ds/core 1.0.0 → 1.0.2

package/dist/cjs/pds-input.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-input.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,y5FAAy5F,CAAC;AAC96F,uBAAe,WAAW;;MCQb,QAAQ;;;;QAoEX,iBAAY,GAAG,CAAC,EAAS;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;SACtC,CAAC;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,QACEA,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,WAAW,IACpBA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACzDF,oEAAO,KAAK,EAAC,kBAAkB,sBACXG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B,EACD,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,YAAY;YAChBJ,gEACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;","names":["h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);\n\n  --color-text-default: var(-pine-color-charcoal-500);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-text: var(--pine-color-grey-500);\n  --color-placeholder-text: var(--pine-color-charcoal-200);\n\n  --font-size-helper-message: var(--pine-font-size-100);\n  --font-size-input-field: var(--pine-font-size-100);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-input-field: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-label: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-input-field: var(--pine-line-height-150);\n\n  --spacing-field-padding-block: var(--pine-spacing-100);\n  --spacing-input-field-padding-inline: var(--pine-spacing-200);\n  --spacing-label-margin-block-end: var(--pine-spacing-100);\n  --spacing-margin-top-helper-message: var(--pine-spacing-100);\n\n  display: inline;\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-label-margin-block-end);\n}\n\ninput {\n  border: 1px solid var(--color-border-default);\n  border-radius: 10px;\n  font-size: var(--font-size-input-field);\n  font-weight: var(--font-weight-input-field);\n  line-height: var(--line-height-input-field);\n  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-text);\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  /* stylelint-disable */\n  &::-webkit-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:-ms-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:has(~.pds-input__error-message) {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n  /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-end: 0;\n  margin-block-start: var(--spacing-margin-top-helper-message);\n}\n\n.pds-input__error-message {\n  color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrl: 'pds-input.scss',\n  shadow: true,\n})\nexport class PdsInput {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-input.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,05FAA05F,CAAC;AAC/6F,uBAAe,WAAW;;MCQb,QAAQ;;;;QAoEX,iBAAY,GAAG,CAAC,EAAS;YAC/B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;aAChC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;SACtC,CAAC;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,QACEA,QAACC,UAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,kEAAK,KAAK,EAAC,WAAW,IACpBA,QAACE,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACzDF,oEAAO,KAAK,EAAC,kBAAkB,sBACXG,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B,EACD,IAAI,CAAC,aAAa;YACjBH,gEACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,YAAY;YAChBJ,gEACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,EACP;KACH;;;;;;","names":["h","Host","PdsLabel","assignDescription","messageId"],"sources":["src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":[":host {\n  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);\n  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);\n\n  --color-text-default: var(--pine-color-charcoal-500);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-border-default: var(--pine-color-grey-400);\n  --color-border-error: var(--pine-color-red-300);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-disabled-text: var(--pine-color-grey-500);\n  --color-placeholder-text: var(--pine-color-charcoal-200);\n\n  --font-size-helper-message: var(--pine-font-size-100);\n  --font-size-input-field: var(--pine-font-size-100);\n  --font-size-label: var(--pine-font-size-100);\n  --font-weight-helper-message: var(--pine-font-weight-normal);\n  --font-weight-input-field: var(--pine-font-weight-normal);\n  --font-weight-label: var(--pine-font-weight-medium);\n\n  --line-height-label: var(--pine-line-height-150);\n  --line-height-helper-message: var(--pine-line-height-125);\n  --line-height-input-field: var(--pine-line-height-150);\n\n  --spacing-field-padding-block: var(--pine-spacing-100);\n  --spacing-input-field-padding-inline: var(--pine-spacing-200);\n  --spacing-label-margin-block-end: var(--pine-spacing-100);\n  --spacing-margin-top-helper-message: var(--pine-spacing-100);\n\n  display: inline;\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\nlabel {\n  font-size: var(--font-size-label);\n  font-weight: var(--font-weight-label);\n  line-height: var(--line-height-label);\n  margin-block-end: var(--spacing-label-margin-block-end);\n}\n\ninput {\n  border: 1px solid var(--color-border-default);\n  border-radius: 10px;\n  font-size: var(--font-size-input-field);\n  font-weight: var(--font-weight-input-field);\n  line-height: var(--line-height-input-field);\n  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);\n\n  &:disabled {\n    background-color: var(--color-background-disabled);\n    color: var(--color-disabled-text);\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  /* stylelint-disable */\n  &::-webkit-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &::-moz-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:-ms-input-placeholder {\n    color: var(--color-placeholder-text);\n  }\n\n  &:has(~.pds-input__error-message) {\n    border-color: var(--color-border-error);\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n  /* stylelint-enable */\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  font-size: var(--font-size-helper-message);\n  font-weight: var(--font-weight-helper-message);\n  line-height: var(--line-height-helper-message);\n  margin-block-end: 0;\n  margin-block-start: var(--spacing-margin-top-helper-message);\n}\n\n.pds-input__error-message {\n  color: var(--color-error);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-input',\n  styleUrl: 'pds-input.scss',\n  shadow: true,\n})\nexport class PdsInput {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Indicates whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Indicates whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Indicates whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-progress.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-progress.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gmEAAgmE,CAAC;AACxnE,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChED,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACRA,uEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAIA,kEAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n  --color-progress-fill: var(--pine-color-blue-300);\n  --sizing-progress-bar-height: 8px;\n  --sizing-progress-bar-width: 100%;\n\n  align-items: center;\n  display: flex;\n  width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n  0% {\n    width: 0\n  }\n\n  100% {\n    width: var(--sizing-progress-bar-width);\n  }\n}\n\n.pds-progress {\n  --border-radius: var(--pine-border-radius-050);\n  --color-progress-bar-background: var(--pine-color-grey-300);\n\n  align-items: center;\n  background-color: var(--color-progress-bar-background);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: row;\n  height: var(--sizing-progress-bar-height);\n  position: relative;\n  width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n  animation: progressBar 3s ease;\n  animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n  background-color: transparent;\n  border: 0;\n  height: var(--sizing-progress-bar-height);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  --border-radius: var(--pine-border-radius-050);\n  --color-background: var(--pine-color-blue-300);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n  --color-background: var(--pine-color-blue-300);\n  --border-radius: var(--pine-border-radius-050);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pds-progress__percentage {\n  --font-size: var(--pine-font-size-087);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-150);\n  --spacing-inline-start-margin: var(--pine-spacing-300);\n\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-progress.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gmEAAgmE,CAAC;AACxnE,0BAAe,cAAc;;MCMhB,WAAW;;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAChED,kEAAK,KAAK,EAAC,cAAc,IACvBA,oEAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL,EACRA,uEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP,EACL,IAAI,CAAC,WAAW,IAAIA,kEAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,MAAQ,CAC3E,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/pds-progress/pds-progress.scss?tag=pds-progress&encapsulation=shadow","src/components/pds-progress/pds-progress.tsx"],"sourcesContent":[":host {\n  --color-progress-fill: var(--pine-color-blue-300);\n\n  --sizing-progress-bar-height: 8px;\n  --sizing-progress-bar-width: 100%;\n\n  align-items: center;\n  display: flex;\n  width: var(--sizing-progress-bar-width);\n}\n\n@keyframes progressBar {\n  0% {\n    width: 0\n  }\n\n  100% {\n    width: var(--sizing-progress-bar-width);\n  }\n}\n\n.pds-progress {\n  --border-radius: var(--pine-border-radius-050);\n  --color-progress-bar-background: var(--pine-color-grey-300);\n\n  align-items: center;\n  background-color: var(--color-progress-bar-background);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: row;\n  height: var(--sizing-progress-bar-height);\n  position: relative;\n  width: 100%;\n}\n\n:host(.is-animated) progress,\n:host(.is-animated) progress::-webkit-progress-bar {\n  animation: progressBar 3s ease;\n  animation-fill-mode: forwards;\n}\n\nprogress,\nprogress::-webkit-progress-bar {\n  background-color: transparent;\n  border: 0;\n  height: var(--sizing-progress-bar-height);\n  width: 100%;\n}\n\nprogress::-webkit-progress-value {\n  --border-radius: var(--pine-border-radius-050);\n  --color-background: var(--pine-color-blue-300);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\nprogress::-moz-progress-bar {\n  --color-background: var(--pine-color-blue-300);\n  --border-radius: var(--pine-border-radius-050);\n\n  background-color: var(--color-progress-fill, var(--color-background));\n  border-radius: var(--border-radius);\n}\n\n.pds-progress__label {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.pds-progress__percentage {\n  --font-size: var(--pine-font-size-087);\n  --font-weight: var(--pine-font-weight-medium);\n  --line-height: var(--pine-line-height-150);\n  --spacing-inline-start-margin: var(--pine-spacing-300);\n\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  line-height: var(--line-height);\n  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\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  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-radio.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,glGAAglG,CAAC;AACrmG,uBAAe,WAAW;;MCQb,QAAQ;;;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5BD,wFACoBE,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,EACFF,QAACG,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjBH,kEACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBJ,kEACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);\n  --border-radius: 50%;\n  --box-shadow-focus: 0 0 0 2px var(--color-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);\n\n  --color: var(--pine-color-charcoal-200);\n  --color-background: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-hover: var(--pine-border-interactive-hover);\n  --color-border-disabled: var(--pine-color-grey-300);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(---pine-color-grey-500);\n  --color-focus: var(--pine-color-blue-200);\n  --color-invalid: var(--pine-color-red-300);\n  --color-invalid-focus: var(--pine-color-red-200);\n\n  --font-size: var(--pine-font-size-087);\n\n  --sizing-check-size: 6px;\n  --sizing-input-size: 16px;\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\n    }\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-radio__message--error {\n    color: var(--color-invalid);\n  }\n}\n\ninput {\n  appearance: none;\n  border: var(--border-interactive-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input-size);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input-size);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      background: var(--color-background);\n      border-radius: 50%;\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-border-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-border-hover);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-radio__message {\n      color: var(--color-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n}\n\nlabel {\n  margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n  color: var(--color);\n  font-size: var(--font-size);\n  margin-block-start: var(--sizing-margin-block-start);\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__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-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,glGAAglG,CAAC;AACrmG,uBAAe,WAAW;;MCQb,QAAQ;;;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACrC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5BD,wFACoBE,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC,EACFF,QAACG,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjBH,kEACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBJ,kEACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);\n  --border-radius: 50%;\n\n  --box-shadow-focus: 0 0 0 2px var(--color-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);\n\n  --color: var(--pine-color-charcoal-200);\n  --color-background: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-hover: var(--pine-border-interactive-hover);\n  --color-border-disabled: var(--pine-color-grey-300);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(---pine-color-grey-500);\n  --color-focus: var(--pine-color-blue-200);\n  --color-invalid: var(--pine-color-red-300);\n  --color-invalid-focus: var(--pine-color-red-200);\n\n  --font-size: var(--pine-font-size-087);\n\n  --sizing-check-size: 6px;\n  --sizing-input-size: 16px;\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\n    }\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-radio__message--error {\n    color: var(--color-invalid);\n  }\n}\n\ninput {\n  appearance: none;\n  border: var(--border-interactive-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input-size);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input-size);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      background: var(--color-background);\n      border-radius: 50%;\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-border-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-border-hover);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-radio__message {\n      color: var(--color-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n}\n\nlabel {\n  margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n  color: var(--color);\n  font-size: var(--font-size);\n  margin-block-start: var(--sizing-margin-block-start);\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\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   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__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}

package/dist/cjs/pds-sortable-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7d9c71f6.js');
 const index$1 = require('./index-f034f06e.js');
 
-const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-default);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
+const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
 const PdsSortableItemStyle0 = pdsSortableItemCss;
 
 const PdsSortableItem = class {

package/dist/cjs/pds-sortable-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-sortable-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,6/EAA6/E,CAAC;AACzhF,8BAAe,kBAAkB;;MCUpB,eAAe;;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;;;QAGjB,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;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,UAAU,KACdD,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,uEAAU,IAAI,EAAEE,cAAU,GAAa,CACnC,CACP,EACDF,oEAAa,EACZ,IAAI,CAAC,aAAa,KACjBA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host","handleIcon"],"sources":["src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss?tag=pds-sortable-item&encapsulation=scoped","src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"sourcesContent":[":host(.pds-sortable-item) {\n  --border-radius: var(--pine-border-radius-125);\n  --border-default: var(--pine-border-default);\n  --box-shadow: var(--pine-box-shadow-lg);\n  --color-background-default: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n  --color-interactive-handle: var(--pine-color-blue-300);\n  --spacing-margin-inline-end: var(--pine-spacing-300);\n  --spacing-padding-block-xs: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-300);\n  --spacing-padding-inline-start: var(--pine-spacing-300);\n\n  align-items: center;\n  display: flex;\n  padding-block: var(--spacing-padding-block-xs);\n  padding-inline: var(--spacing-padding-inline);\n\n  .pds-sortable-item__actions {\n    margin-inline-start: auto;\n    padding-inline-start: var(--spacing-padding-inline-start);\n  }\n\n  .pds-sortable-item__handle {\n    line-height: 1;\n    margin-inline-end: var(--spacing-margin-inline-end);\n  }\n\n  // styles when sortable is bordered\n  .pds-sortable--bordered & {\n    &:first-child {\n      border-start-end-radius: var(--border-radius);\n      border-start-start-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-end-end-radius: var(--border-radius);\n      border-end-start-radius: var(--border-radius);\n    }\n  }\n\n  // styles when sortable is divided\n  .pds-sortable--divided & {\n    border-block-end: var(--border-default);\n\n    &:last-child {\n      border-block-end: 0;\n    }\n  }\n\n  // cursor styles based on handle-type\n  .pds-sortable--handle-type-row & {\n    cursor: grab;\n  }\n\n  .pds-sortable--handle-type-handle & {\n    .pds-sortable-item__handle {\n      cursor: grab;\n    }\n  }\n}\n\n:host(.pds-sortable-item):hover {\n  background-color: var(--color-background-interactive);\n\n  pds-icon {\n    color: var(--color-interactive-handle)\n  }\n}\n\n:host(.pds-sortable-item--drag) {\n  background-color: var(--color-background-default);\n  border-radius: 0;\n  box-shadow: var(--box-shadow);\n  opacity: 1;\n}\n\n:host(.pds-sortable-item--ghost) {\n  background-color: var(--color-background-interactive);\n  border-radius: 0;\n}\n","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.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,iiFAAiiF,CAAC;AAC7jF,8BAAe,kBAAkB;;MCUpB,eAAe;;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;;;QAGjB,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;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,UAAU,KACdD,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,uEAAU,IAAI,EAAEE,cAAU,GAAa,CACnC,CACP,EACDF,oEAAa,EACZ,IAAI,CAAC,aAAa,KACjBA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host","handleIcon"],"sources":["src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss?tag=pds-sortable-item&encapsulation=scoped","src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"sourcesContent":[":host(.pds-sortable-item) {\n  --border-radius: var(--pine-border-radius-125);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow: var(--pine-box-shadow-lg);\n\n  --color-background-default: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n  --color-interactive-handle: var(--pine-color-blue-300);\n\n  --spacing-margin-inline-end: var(--pine-spacing-300);\n  --spacing-padding-block-xs: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-300);\n  --spacing-padding-inline-start: var(--pine-spacing-300);\n\n  align-items: center;\n  display: flex;\n  padding-block: var(--spacing-padding-block-xs);\n  padding-inline: var(--spacing-padding-inline);\n\n  .pds-sortable-item__actions {\n    margin-inline-start: auto;\n    padding-inline-start: var(--spacing-padding-inline-start);\n  }\n\n  .pds-sortable-item__handle {\n    line-height: 1;\n    margin-inline-end: var(--spacing-margin-inline-end);\n  }\n\n  // styles when sortable is bordered\n  .pds-sortable--bordered & {\n    &:first-child {\n      border-start-end-radius: var(--border-radius);\n      border-start-start-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-end-end-radius: var(--border-radius);\n      border-end-start-radius: var(--border-radius);\n    }\n  }\n\n  // styles when sortable is divided\n  .pds-sortable--divided & {\n    border-block-end: var(--border-default);\n\n    &:last-child {\n      border-block-end: 0;\n    }\n  }\n\n  // cursor styles based on handle-type\n  .pds-sortable--handle-type-row & {\n    cursor: grab;\n  }\n\n  .pds-sortable--handle-type-handle & {\n    .pds-sortable-item__handle {\n      cursor: grab;\n    }\n  }\n}\n\n:host(.pds-sortable-item):hover {\n  background-color: var(--color-background-interactive);\n\n  pds-icon {\n    color: var(--color-interactive-handle)\n  }\n}\n\n:host(.pds-sortable-item--drag) {\n  background-color: var(--color-background-default);\n  border-radius: 0;\n  box-shadow: var(--box-shadow);\n  opacity: 1;\n}\n\n:host(.pds-sortable-item--ghost) {\n  background-color: var(--color-background-interactive);\n  border-radius: 0;\n}\n","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}