@scania/tegel 0.0.4 → 0.0.6

package/dist/cjs/sdds-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-textarea.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea","./src/components/textarea/textarea.tsx"],"sourcesContent":["@import './textarea-vars.scss';\n\n@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .sdds-textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.sdds-textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.sdds-textarea-container {\n  .sdds-textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.sdds-textarea-container:not(.sdds-textarea-disabled) {\n  .sdds-textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.sdds-textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.sdds-textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.sdds-textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.sdds-textarea-container {\n  &.sdds-textarea-label-inside {\n    .sdds-textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .sdds-textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.sdds-textarea-focus {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .sdds-textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.sdds-textarea-data {\n    &.sdds-textarea-label-inside {\n      .sdds-textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.sdds-textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .sdds-textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.sdds-textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .sdds-textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.sdds-textarea-success {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.sdds-textarea-error {\n  .sdds-textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .sdds-textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .sdds-textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.sdds-textarea-disabled {\n  .sdds-textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .sdds-textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.sdds-textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.sdds-textarea-readonly {\n  pointer-events: none;\n\n  .sdds-textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .sdds-textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .sdds-textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        sdds-textarea-container\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        ${this.labelPosition === 'inside' ? 'sdds-textarea-label-inside' : ''}\n        ${this.focusInput ? 'sdds-textarea-focus' : ''}\n        ${this.disabled ? 'sdds-textarea-disabled' : ''}\n        ${this.readOnly ? 'sdds-textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'sdds-textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `sdds-textarea-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && (\n          <span class={'sdds-textarea-label'}>{this.label}</span>\n        )}\n        <div class=\"sdds-textarea-wrapper\">\n          <textarea\n            class={'sdds-textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"sdds-textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'sdds-textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'sdds-textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"sdds-textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-textarea.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n}\n\n.textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.textarea-container {\n  .textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.textarea-container:not(.textarea-disabled) {\n  .textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.textarea-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.textarea-container {\n  &.textarea-label-inside {\n    .textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.textarea-focus {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.textarea-data {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.textarea-success {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.textarea-error {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.textarea-disabled {\n  .textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.textarea-readonly {\n  pointer-events: none;\n\n  .textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        textarea-container\n        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n        ${this.focusInput ? 'textarea-focus' : ''}\n        ${this.disabled ? 'textarea-disabled' : ''}\n        ${this.readOnly ? 'textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n        <div class=\"textarea-wrapper\">\n          <textarea\n            class={'textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-textfield.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.js');
 
-const textfieldCss = ":root,.sdds-mode-light{--sdds-textfield-background-primary:var(--sdds-grey-50);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-color:var(--sdds-grey-868);--sdds-textfield-placeholder:var(--sdds-grey-500);--sdds-textfield-background-disabled-primary:var(--sdds-grey-50);--sdds-textfield-background-disabled-secondary:var(--sdds-white);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-color-disabled:var(--sdds-grey-400);--sdds-textfield-placeholder-disabled:var(--sdds-grey-400);--sdds-textfield-label-disabled:var(--sdds-grey-400);--sdds-textfield-ps-color-disabled:var(--sdds-grey-400);--sdds-textfield-label-color:var(--sdds-grey-958);--sdds-textfield-label-inside-color:var(--sdds-grey-700);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-500);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-700);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-700);--sdds-textfield-textcounter-divider:var(--sdds-grey-500);--sdds-textfield-ps-color:var(--sdds-grey-600);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-background-secondary:var(--sdds-white);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-800);--sdds-textfield-border-bottom-success:var(--sdds-grey-958);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-958);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-958)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-mode-dark{--sdds-textfield-background-primary:var(--sdds-grey-900);--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-secondary:var(--sdds-grey-868);--sdds-textfield-color:var(--sdds-grey-200);--sdds-textfield-placeholder:var(--sdds-grey-600);--sdds-textfield-ps-color-disabled:var(--sdds-grey-700);--sdds-textfield-color-disabled:var(--sdds-grey-800);--sdds-textfield-background-disabled-primary:var(--sdds-grey-900);--sdds-textfield-background-disabled-secondary:var(--sdds-grey-868);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary);--sdds-textfield-placeholder-disabled:var(--sdds-grey-800);--sdds-textfield-label-disabled:var(--sdds-grey-700);--sdds-textfield-label-color:var(--sdds-grey-100);--sdds-textfield-label-inside-color:var(--sdds-grey-400);--sdds-textfield-placeholder-focus-color:var(--sdds-grey-700);--sdds-textfield-bar:var(--sdds-blue-400);--sdds-textfield-helper:var(--sdds-grey-600);--sdds-textfield-helper-error:var(--sdds-negative);--sdds-textfield-bar-error:var(--sdds-negative);--sdds-textfield-icon-error:var(--sdds-negative);--sdds-textfield-textcounter:var(--sdds-grey-600);--sdds-textfield-textcounter-divider:var(--sdds-grey-700);--sdds-textfield-ps-color:var(--sdds-grey-100);--sdds-textfield-resize-icon:var(--sdds-grey-500);--sdds-textfield-border-bottom:var(--sdds-grey-600);--sdds-textfield-border-bottom-hover:var(--sdds-grey-400);--sdds-textfield-border-bottom-success:var(--sdds-grey-50);--sdds-textfield-border-bottom-error:var(--sdds-negative);--sdds-textfield-icon-read-only-color:var(--sdds-grey-100);--sdds-textfield-icon-read-only-label-color:var(--sdds-grey-50)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-textfield-background:var(--sdds-textfield-background-primary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-textfield-background:var(--sdds-textfield-background-secondary);--sdds-textfield-background-disabled:var(--sdds-textfield-background-disabled-secondary)}.sdds-textfield-input{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-textfield-input::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-md{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-md::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-md:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-md:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-md:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-input-sm{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-textfield-input-sm::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.sdds-textfield-input-sm:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.sdds-textfield-input-sm:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.sdds-textfield-input-sm:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.sdds-textfield-container:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.sdds-form-textfield-md .sdds-textfield-container{height:48px}.sdds-form-textfield-sm .sdds-textfield-container{height:40px}.sdds-textfield-input-container{position:relative;width:100%}.sdds-textfield-label-outside>*{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.sdds-textfield-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.sdds-form-textfield{display:block;min-width:208px}.sdds-form-textfield-nomin{min-width:auto}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside{top:20px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside{top:16px}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder{color:transparent}.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-textfield-bar{position:absolute;width:100%}.sdds-textfield-bar::before,.sdds-textfield-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.sdds-form-textfield-md .sdds-textfield-bar::before,.sdds-form-textfield-md .sdds-textfield-bar::after{top:46px}.sdds-form-textfield-sm .sdds-textfield-bar::before,.sdds-form-textfield-sm .sdds-textfield-bar::after{top:40px}.sdds-textfield-bar::before{left:50%}.sdds-textfield-bar::after{right:50%}.sdds-textfield-focus .sdds-textfield-bar::before,.sdds-textfield-focus .sdds-textfield-bar::after{width:50%}.sdds-textfield-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.sdds-textfield-helper .sdds-textfield-textcounter{margin-left:auto}.sdds-form-textfield-disabled .sdds-textfield-container{border-bottom-color:transparent}.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>*,.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>*{color:var(--sdds-textfield-ps-color-disabled)}.sdds-form-textfield-disabled .sdds-textfield-label-outside>*{color:var(--sdds-textfield-label-disabled)}.sdds-textfield-icon__readonly{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.sdds-textfield-icon__readonly-label{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.sdds-form-textfield-readonly{pointer-events:none}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly{display:block}.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label{display:block}.sdds-form-textfield-readonly .sdds-textfield-input{padding-right:54px;background-color:transparent}.sdds-form-textfield-success .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.sdds-form-textfield-error .sdds-textfield-helper{color:var(--sdds-textfield-helper-error)}.sdds-form-textfield-error .sdds-textfield-container{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.sdds-form-textfield-error .sdds-textfield-bar::before,.sdds-form-textfield-error .sdds-textfield-bar::after{background:var(--sdds-textfield-bar-error)}.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon){color:var(--sdds-textfield-icon-error)}.sdds-textfield-helper-error-state{display:flex;gap:8px;flex-wrap:nowrap}.sdds-textfield-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.sdds-textfield-textcounter .sdds-textfield-textcounter-divider{color:var(--sdds-textfield-textcounter-divider)}.sdds-textfield-slot-wrap-prefix{align-self:center}.sdds-textfield-slot-wrap-prefix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}.sdds-textfield-slot-wrap-suffix{align-self:center}.sdds-textfield-slot-wrap-suffix>*{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,.sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon{color:var(--sdds-negative)}slot[name=sdds-prefix]::slotted(sdds-icon),slot[name=sdds-suffix]::slotted(sdds-icon){font-size:24px;line-height:0}slot[name=sdds-prefix]::slotted(*){padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix]::slotted(*)~.sdds-textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix]::slotted(*){padding-right:var(--sdds-spacing-element-20)}";
+const textfieldCss = ".textfield-input-lg.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield,.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin:0 0 0 14px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.sc-sdds-textfield-s>:not(sdds-icon),.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 0 0 2px}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-error)}.textfield-slot-wrap-suffix.sc-sdds-textfield{margin:0 14px 0 0}.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 2px 0 0}";
 
 const Textfield = class {
   constructor(hostRef) {
@@ -51,31 +51,20 @@ const Textfield = class {
   }
   render() {
     var _a;
-    let className = ' sdds-textfield-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
     return (index.h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
-        ${this.focusInput && !this.disabled
-        ? 'sdds-form-textfield sdds-textfield-focus'
-        : ' sdds-form-textfield'}
-        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.noMinWidth ? 'form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}
+        ${this.value ? 'textfield-data' : ''}
         ${this.labelPosition === 'inside' && this.size !== 'sm'
-        ? 'sdds-textfield-container-label-inside'
+        ? 'textfield-container-label-inside'
         : ''}
-        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
-        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.disabled ? 'form-textfield-disabled' : ''}
+        ${this.readOnly ? 'form-textfield-readonly' : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-textfield-${this.state}`
-        : ''}
-        ` }, this.labelPosition === 'outside' && (index.h("div", { class: "sdds-textfield-label-outside" }, index.h("div", null, this.label))), index.h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, index.h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, index.h("slot", { name: "sdds-prefix" })), index.h("div", { class: "sdds-textfield-input-container" }, index.h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ${this.size === 'md' ? 'form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}
+        ` }, this.labelPosition === 'outside' && (index.h("div", { class: "textfield-label-outside" }, index.h("div", null, this.label))), index.h("div", { onClick: () => this.textInput.focus(), class: "textfield-container" }, index.h("div", { class: `textfield-slot-wrap-prefix textfield-${this.state}` }, index.h("slot", { name: "prefix" })), index.h("div", { class: "textfield-input-container" }, index.h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `textfield-input textfield-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -83,7 +72,7 @@ const Textfield = class {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { class: "sdds-textfield-label-inside" }, this.label))), index.h("div", { class: "sdds-textfield-bar" }), index.h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, index.h("slot", { name: "sdds-suffix" })), index.h("span", { class: "sdds-textfield-icon__readonly" }, index.h("sdds-icon", { name: "edit_inactive", size: "20px" })), index.h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), index.h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (index.h("div", { class: "sdds-textfield-helper-error-state" }, index.h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (index.h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { class: "textfield-label-inside" }, this.label))), index.h("div", { class: "textfield-bar" }), index.h("div", { class: `textfield-slot-wrap-suffix textfield-${this.state}` }, index.h("slot", { name: "suffix" })), index.h("span", { class: "textfield-icon__readonly" }, index.h("sdds-icon", { name: "edit_inactive", size: "20px" })), index.h("span", { class: "textfield-icon__readonly-label" }, "This field is non-editable")), index.h("div", { class: "textfield-helper" }, this.state === 'error' && (index.h("div", { class: "textfield-helper-error-state" }, index.h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (index.h("div", { class: "textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { class: "textfield-textcounter-divider" }, " / "), this.maxLength)))));
   }
 };
 Textfield.style = textfieldCss;

package/dist/cjs/sdds-textfield.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-textfield.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield","./src/components/textfield/textfield.tsx"],"sourcesContent":["@import './textfield-vars.scss';\n\n@mixin textfield-base {\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .sdds-textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.sdds-textfield-input {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-textfield-input-md {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-textfield-input-sm {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-textfield-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .sdds-form-textfield-md & {\n    height: 48px;\n  }\n\n  .sdds-form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n/* slot[name=\"sdds-label\"]::slotted(*) {\n  @include type-style(\"detail-05\");\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\n.sdds-textfield-label-outside > * {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n}\n\n.sdds-textfield-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-textfield.sdds-textfield-container-label-inside {\n  .sdds-textfield-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-textfield-focus,\n  &.sdds-textfield-data {\n    .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-textfield-input-md ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-textfield-input ~ .sdds-textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.sdds-textfield-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-textfield-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-textfield-md & {\n      top: 46px;\n    }\n\n    .sdds-form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-textfield-focus &::before,\n  .sdds-textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .sdds-textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.sdds-form-textfield-disabled {\n  .sdds-textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .sdds-textfield-slot-wrap-prefix,\n  .sdds-textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .sdds-textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.sdds-textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.sdds-form-textfield-readonly {\n  pointer-events: none;\n\n  .sdds-textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .sdds-textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .sdds-textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.sdds-form-textfield-success {\n  .sdds-textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.sdds-form-textfield-error {\n  .sdds-textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .sdds-textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .sdds-textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n\n  slot[name='sdds-prefix']::slotted(sdds-icon),\n  slot[name='sdds-suffix']::slotted(sdds-icon) {\n    color: var(--sdds-textfield-icon-error);\n  }\n}\n\n// .sdds-textfield-textcounter {\n.sdds-textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.sdds-textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .sdds-textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n  @include type-style(\"detail-02\");\n  align-self: center;\n  color: var(--sdds-textfield-ps-color);\n} */\n\n.sdds-textfield-slot-wrap-prefix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-left: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.sdds-textfield-error {\n    sdds-icon,\n    .sdds-icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n.sdds-textfield-slot-wrap-suffix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-right: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.sdds-textfield-error {\n    sdds-icon,\n    .sdds-icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n  font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n  line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n  padding-left: var(--sdds-spacing-element-20);\n\n  & ~ .sdds-textfield-input {\n    padding-left: var(--sdds-spacing-element-12);\n  }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n  padding-right: var(--sdds-spacing-element-20);\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    let className = ' sdds-textfield-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}\n        ${\n          this.focusInput && !this.disabled\n            ? 'sdds-form-textfield sdds-textfield-focus'\n            : ' sdds-form-textfield'\n        }\n        ${this.value ? 'sdds-textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'sdds-textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}\n        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-textfield-${this.state}`\n            : ''\n        }\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"sdds-textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"sdds-textfield-container\">\n          <div class={`sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-prefix\" />\n          </div>\n\n          <div class=\"sdds-textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"sdds-textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"sdds-textfield-bar\"></div>\n\n          <div class={`sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}`}>\n            <slot name=\"sdds-suffix\" />\n          </div>\n          <span class=\"sdds-textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"sdds-textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"sdds-textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"sdds-textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"sdds-textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"sdds-textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-textfield.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n  all: unset;\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.textfield-input-lg {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.textfield-input-md {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.textfield-input-sm {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.textfield-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .form-textfield-md & {\n    height: 48px;\n  }\n\n  .form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n.textfield-label-outside > * {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n}\n\n.textfield-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.form-textfield.textfield-container-label-inside {\n  .textfield-input-lg {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.textfield-focus,\n  &.textfield-data {\n    .textfield-input-sm ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-md ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-lg ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.textfield-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-textfield-bar);\n    transition: 0.35s ease all;\n\n    .form-textfield-md & {\n      top: 46px;\n    }\n\n    .form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .textfield-focus &::before,\n  .textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.form-textfield-disabled {\n  .textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .textfield-slot-wrap-prefix,\n  .textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.form-textfield-readonly {\n  pointer-events: none;\n\n  .textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.form-textfield-success {\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.form-textfield-error {\n  .textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n.textfield-slot-wrap-prefix,\n.textfield-slot-wrap-suffix {\n  align-self: center;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  margin: 0 0 0 14px;\n  color: var(--sdds-textfield-ps-color);\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 0 0 2px;\n  }\n\n  &.textfield-error {\n    color: var(--sdds-textfield-ps-color-error);\n  }\n}\n\n.textfield-slot-wrap-suffix {\n  margin: 0 14px 0 0;\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 2px 0 0;\n  }\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n        ${this.value ? 'textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'form-textfield-disabled' : ''}\n        ${this.readOnly ? 'form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n          <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n            <slot name=\"prefix\" />\n          </div>\n\n          <div class=\"textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={`textfield-input textfield-input-${this.size}`}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"textfield-bar\"></div>\n\n          <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n            <slot name=\"suffix\" />\n          </div>\n          <span class=\"textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-toast.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.js');
 
 const sddsToastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .toast-wrapper{display:flex;width:348px;background-color:var(--sdds-toast-background-color);border-radius:4px}:host .toast-wrapper.information{border-left:4px solid var(--sdds-information)}:host .toast-wrapper.information sdds-icon{color:var(--sdds-information)}:host .toast-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .toast-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .toast-wrapper.error{border-left:4px solid var(--sdds-negative)}:host .toast-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .toast-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .toast-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .toast-wrapper button.toast-close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .toast-wrapper button.toast-close:hover{cursor:pointer}:host .toast-wrapper button.toast-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .toast-wrapper button.toast-close sdds-icon{color:var(--sdds-toast-dissmiss-color);padding:0}:host sdds-icon{padding:14px 0 0 12px}:host .toast-content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .toast-content .toast-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-toast-headline-color)}:host .toast-content .toast-header.no-subheader{margin-bottom:4px}:host .toast-content .toast-header.only-header{margin-bottom:0}:host .toast-content .toast-subheader slot::slotted(*){margin-top:4px;color:var(--sdds-toast-subheadline-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding-bottom:16px;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .toast-content .toast-subheader.no-link slot::slotted(*){padding-bottom:0}:host slot[name=toast-link]::slotted(*){color:var(--sdds-toast-link-color)}:host .sdds-mode-variant-primary{--sdds-toast-background:var(--sdds-toast-background-primary)}:host .sdds-mode-variant-secondary{--sdds-toast-background:var(--sdds-toast-background-secondary)}";
 
@@ -32,6 +32,14 @@ const SddsToast = class {
         this.hidden = true;
       }
     };
+    this.handleShow = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
     this.getHeaderClasses = () => {
       if (!this.hasSubheader && !this.hasLink) {
         return 'only-header';
@@ -52,17 +60,11 @@ const SddsToast = class {
   }
   /** Hides the toast. */
   async hideToast() {
-    this.hidden = true;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleClose();
   }
   /** Shows the toast. */
   async showToast() {
-    this.hidden = false;
-    return {
-      toastId: this.toastId,
-    };
+    this.handleShow();
   }
   connectedCallback() {
     const children = Array.from(this.host.children);

package/dist/cjs/sdds-toast.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-toast.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,upEAAupE;;MCQ/pE,SAAS;;;;IAsDpB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;IAEF,gBAAW,GAAG;MACZ,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACzC,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,gBAAgB,EAAE;QACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;OACpB;KACF,CAAC;IAQF,qBAAgB,GAAG;MACjB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACvC,OAAO,aAAa,CAAC;OACtB;MACD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO,cAAc,CAAC;OACvB;MACD,OAAO,EAAE,CAAC;KACX,CAAC;mBA1FwB,MAAM,CAAC,UAAU,EAAE;;;gBASmB,aAAa;kBAGnD,KAAK;qBAGiB,OAAO;;;;;EAUvD,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAID,MAAM,SAAS;IACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,OAAO;MACL,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAqCD,iBAAiB;IACf,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,iBAAiB,CAAC,CAAC;IAC7F,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;GACpF;EAYD,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAC5D,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,IAEzCD,iBACE,KAAK,EAAE;;cAEH,IAAI,CAAC,IAAI;aACV,IAEHA,uBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC7DA,iBAAK,KAAK,EAAE,eAAe,IACzBA,iBACE,KAAK,EAAE;gBACL,IAAI,CAAC,gBAAgB,EAAE;eACxB,IAEA,IAAI,CAAC,MAAM,CACR,EACNA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,SAAS,EAAE,IAC5DA,kBAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EACNA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EACNA,oBACE,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,EACD,KAAK,EAAE,aAAa,IAEpBA,uBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-toast.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.handleClose();\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.handleShow();\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-toggle.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.js');
 
 const sddsToggleCss = ".sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.sc-sdds-toggle{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-toggle-headline);margin-bottom:12px}.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.disabled.sc-sdds-toggle{color:var(--sdds-toggle-headline-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle{margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after,.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--sdds-toggle-off-slider);left:0}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after{width:16px;height:16px;background-color:var(--sdds-toggle-switch);border-radius:50%;left:4px;top:4px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus{outline:none}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus::before{background-color:var(--sdds-toggle-off-slider-focus);border:1px solid var(--sdds-toggle-off-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider);border:1px solid var(--sdds-toggle-on-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::after{left:24px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::before{background-color:var(--sdds-toggle-on-slider-disabled);border:1px solid var(--sdds-toggle-on-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::before{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::after{width:8px;height:8px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::after{left:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle label.sc-sdds-toggle{display:inline-block;vertical-align:middle;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);color:var(--sdds-toggle-label-color);padding-left:8px}.sdds-toggle-webcomponent.sc-sdds-toggle label.disabled.sc-sdds-toggle{color:var(--sdds-toggle-label-color-disabled)}";
 
@@ -34,7 +34,7 @@ const SddsToggle = class {
     };
   }
   render() {
-    return (index.h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (index.h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), index.h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), index.h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, index.h("slot", null))));
+    return (index.h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (index.h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), index.h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), index.h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, index.h("slot", { name: "label" }))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/sdds-toggle.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"sdds-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnH,UAAU;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACDA,uCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACFA,mBAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxEA,qBAAa,CACP,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,ymHAAymH;;MCSlnH,UAAU;;;;IA8CrB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;;EAM9C,MAAM,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;EAsBD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,QAAQ,KACZA,iBAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF,EACDA,uCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb,EACFA,mBAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,IACxEA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/sdds-tooltip.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.js');
 const popper = require('./popper-11d5f714.js');
 
 const tooltipCss = ":root,.sdds-mode-light{--sdds-tooltip-background:var(--sdds-grey-800);--sdds-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-tooltip-background:var(--sdds-grey-200);--sdds-tooltip-color:var(--sdds-grey-958)}.sdds-tooltip{box-sizing:border-box;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-tooltip-color);background-color:var(--sdds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:800;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.sdds-tooltip *{box-sizing:border-box}.sdds-tooltip.sdds-tooltip-top-left{border-radius:0 4px 4px}.sdds-tooltip.sdds-tooltip-top-right{border-radius:4px 0 4px 4px}.sdds-tooltip.sdds-tooltip-bottom-right{border-radius:4px 4px 0}.sdds-tooltip.sdds-tooltip-bottom-left{border-radius:4px 4px 4px 0}.sdds-tooltip-show{opacity:1;visibility:visible}";