@kyndryl-design-system/shidoka-applications 2.3.0 → 2.5.0

package/components/reusable/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{o as i,n as l,t as o,l as s,i as a,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as n,x as d,s as h}from"../../../vendor/lit-element-3185f710.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";import"./dropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{j as u,f as m,i as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-22009eb5.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var g=n`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{o as i,n as l,t as o,l as s,i as a,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as n,x as d,s as h}from"../../../vendor/lit-element-3185f710.js";import{FormMixin as p}from"../../../common/mixins/form-input.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";import"./dropdownOption.js";import"../tag/tag.js";import"../tag/tagGroup.js";import"../tag/tag.skeleton.js";import"../button/button.js";import{j as u,f as v,i as m}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../checkbox/checkboxGroup.js";import"../textInput/textInput.js";import"../../../common/helpers/helpers.js";import"../button/defs.js";import"../checkbox/checkboxSubgroup.js";import"../../../tag-22009eb5.js";import"../link/link.js";import"../link/defs.js";import"../loaders/skeleton.js";var g=n`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -481,6 +481,9 @@ slot[name=icon]::slotted(*) {
   border-color: transparent;
   background-color: transparent;
 }
+.select.inline:hover {
+  border-color: var(--kd-color-border-ui-hover);
+}
 [disabled] .select.inline:hover {
   border-color: transparent;
 }
@@ -723,7 +726,7 @@ kyn-tag-group {
                     </span>
                   `}
 
-              <span class="arrow-icon">${t(m)}</span>
+              <span class="arrow-icon">${t(v)}</span>
             </div>
 
             <ul
@@ -805,7 +808,7 @@ kyn-tag-group {
                     role="img"
                     title=${this._textStrings.errorText}
                     aria-label=${this._textStrings.errorText}
-                    >${t(v)}</span
+                    >${t(m)}</span
                   >
                   ${this.invalidText||this._internalValidationMsg}
                 </div>

package/components/reusable/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n  title: 'Dropdown',\n  selectedOptions: 'List of selected options',\n  requiredText: 'Required',\n  errorText: 'Error',\n  clearAll: 'Clear all',\n};\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          id=\"label-${this.name}\"\n          class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n          for=${this.name}\n          aria-disabled=${this.disabled}\n          @click=${() => this._handleLabelClick()}\n        >\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                role=\"img\"\n                aria-label=${this._textStrings?.requiredText || 'Required'}\n                >*</abbr\n              >`\n            : null}\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              title=${this._textStrings.title}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <span style=\"display:flex;\" slot=\"icon\"\n                        >${unsafeSVG(clearIcon)}</span\n                      >\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      aria-disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span aria-disabled=${this.disabled}>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n            </div>\n\n            <ul\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n          ${this.searchText !== ''\n            ? html`\n                <kyn-button\n                  ?disabled=${this.disabled}\n                  class=\"clear-button dropdown-clear\"\n                  kind=\"ghost\"\n                  size=\"small\"\n                  description=${this._textStrings.clearAll}\n                  @click=${(e: Event) => this.handleClear(e)}\n                >\n                  <span style=\"display:flex;\" slot=\"icon\"\n                    >${unsafeSVG(clearIcon)}</span\n                  >\n                </kyn-button>\n              `\n            : null}\n        </div>\n        ${this.renderHelperContent()}\n      </div>\n    `;\n  }\n\n  private renderHelperContent() {\n    return html`\n        ${\n          this.multiple && !this.hideTags && this._tags.length\n            ? html`\n                <kyn-tag-group\n                  filter\n                  role=\"list\"\n                  aria-label=${this._textStrings.selectedOptions}\n                >\n                  ${this._tags.map((tag: any) => {\n                    return html`\n                      <kyn-tag\n                        role=\"listitem\"\n                        label=${tag.text}\n                        ?disabled=${this.disabled}\n                        clearTagText=\"Clear Tag ${tag.text}\"\n                        @on-close=${() => this.handleTagClear(tag.value)}\n                      ></kyn-tag>\n                    `;\n                  })}\n                </kyn-tag-group>\n              `\n            : null\n        }\n        ${\n          this.caption !== ''\n            ? html`\n                <div class=\"caption\" aria-disabled=${this.disabled}>\n                  ${this.caption}\n                </div>\n              `\n            : null\n        }\n        ${\n          this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    class=\"error-icon\"\n                    role=\"img\"\n                    title=${this._textStrings.errorText}\n                    aria-label=${this._textStrings.errorText}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null\n        }\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this._updateOptions();\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      e.relatedTarget &&\n      e.relatedTarget.localName !== 'kyn-dropdown-option'\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            if (visibleOptions[highlightedIndex].selected) {\n              this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n            } else {\n              this.assistiveText = `Deselected ${visibleOptions[highlightedIndex].innerHTML}`;\n            }\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n          }\n        }\n        if (highlightedEl && isListboxElOpened)\n          this.updateValue(\n            visibleOptions[highlightedIndex].value,\n            visibleOptions[highlightedIndex].selected\n          );\n\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._validate(true, false);\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      this._updateOptions();\n      this._updateTags();\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","textStrings","_textStrings","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","handleClear","renderHelperContent","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","_updateOptions","searchEl","focus","buttonEl","handleKeyboard","keyCode","forEach","option","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","scrollIntoView","block","innerHTML","updateValue","emitValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","detail","dispatchEvent","_emitSearch","classList","contains","_b","findIndex","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","_updateTags","AllOptions","Array","from","querySelectorAll","textContent","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Tags","Selected","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../../src/components/reusable/dropdown/dropdown.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport DropdownScss from './dropdown.scss';\nimport { FormMixin } from '../../../common/mixins/form-input';\nimport { deepmerge } from 'deepmerge-ts';\n\nimport './dropdownOption';\nimport '../tag';\nimport '../button';\n\nimport downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';\nimport errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/20/close-simple.svg';\n\nconst _defaultTextStrings = {\n  title: 'Dropdown',\n  selectedOptions: 'List of selected options',\n  requiredText: 'Required',\n  errorText: 'Error',\n  clearAll: 'Clear all',\n};\n\n/**\n * Dropdown, single select.\n * @fires on-change - Captures the input event and emits the selected value and original event details.\n * @fires on-search - Capture the search input event and emits the search text.\n * @fires on-clear-all - Captures the the multi-select clear all button click event and emits the value.\n * @slot unnamed - Slot for dropdown options.\n * @slot tooltip - Slot for tooltip.\n */\n@customElement('kyn-dropdown')\nexport class Dropdown extends FormMixin(LitElement) {\n  static override styles = DropdownScss;\n\n  /** Label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Dropdown size/height. \"sm\", \"md\", or \"lg\". */\n  @property({ type: String })\n  size = 'md';\n\n  /** Dropdown inline style type. */\n  @property({ type: Boolean })\n  inline = false;\n\n  /** Optional text beneath the input. */\n  @property({ type: String })\n  caption = '';\n\n  /** Dropdown placeholder. */\n  @property({ type: String })\n  placeholder = '';\n\n  /** Listbox/drawer open state. */\n  @property({ type: Boolean })\n  open = false;\n\n  /** Makes the dropdown searchable. */\n  @property({ type: Boolean })\n  searchable = false;\n\n  /** Searchable variant filters results. */\n  @property({ type: Boolean })\n  filterSearch = false;\n\n  /** Enabled multi-select functionality. */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /** Makes the dropdown required. */\n  @property({ type: Boolean })\n  required = false;\n\n  /** Visually hide the label. */\n  @property({ type: Boolean })\n  hideLabel = false;\n\n  /** Dropdown disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Hide the tags below multi-select. */\n  @property({ type: Boolean })\n  hideTags = false;\n\n  /** Adds a \"Select all\" option to the top of a multi-select dropdown. */\n  @property({ type: Boolean })\n  selectAll = false;\n\n  /** \"Select all\" text customization. */\n  @property({ type: String })\n  selectAllText = 'Select all';\n\n  /** Menu CSS min-width value. */\n  @property({ type: String })\n  menuMinWidth = 'initial';\n\n  /** Is \"Select All\" box checked.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllChecked = false;\n\n  /** Is \"Select All\" indeterminate.\n   * @internal\n   */\n  @property({ type: Boolean })\n  selectAllIndeterminate = false;\n\n  /** Text string customization. */\n  @property({ type: Object })\n  textStrings = _defaultTextStrings;\n\n  /** Internal text strings.\n   * @internal\n   */\n  @state()\n  _textStrings = _defaultTextStrings;\n\n  /**\n   * Selected option text, automatically derived.\n   * @ignore\n   */\n  @state()\n  text = '';\n\n  /**\n   * Search input value.\n   */\n  @property({ type: String })\n  searchText = '';\n\n  /**\n   * Assistive text for screen readers.\n   * @ignore\n   */\n  @state()\n  assistiveText = 'Dropdown menu options.';\n\n  /**\n   * Queries any slotted options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option' })\n  options!: Array<any>;\n\n  /**\n   * Queries any slotted selected options.\n   * @ignore\n   */\n  @queryAssignedElements({ selector: 'kyn-dropdown-option[selected]' })\n  selectedOptions!: Array<any>;\n\n  /**\n   * Queries the .search DOM element.\n   * @ignore\n   */\n  @query('.search')\n  searchEl!: HTMLInputElement;\n\n  /**\n   * Queries the .select DOM element.\n   * @ignore\n   */\n  @query('.select')\n  buttonEl!: HTMLElement;\n\n  /**\n   * Queries the .options DOM element.\n   * @ignore\n   */\n  @query('.options')\n  listboxEl!: HTMLElement;\n\n  /**\n   * Queries the .clear-multiple DOM element.\n   * @ignore\n   */\n  @query('.clear-multiple')\n  clearMultipleEl!: HTMLElement;\n\n  /**\n   * Open drawer upwards.\n   * @ignore\n   */\n  @state()\n  _openUpwards = false;\n\n  /**\n   * Tags value/text reference.\n   * @ignore\n   */\n  @state()\n  _tags: Array<object> = [];\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  searchTextEntered: any = false;\n\n  /** Toggles on clicking enter key in the search input.\n   * @internal\n   */\n  prevSearchKeydownIndex = -1;\n\n  override render() {\n    return html`\n      <div\n        class=\"dropdown\"\n        ?disabled=${this.disabled}\n        ?open=${this.open}\n        ?inline=${this.inline}\n        ?searchable=${this.searchable}\n      >\n        <label\n          id=\"label-${this.name}\"\n          class=\"label-text ${this.hideLabel || this.inline ? 'sr-only' : ''}\"\n          for=${this.name}\n          aria-disabled=${this.disabled}\n          @click=${() => this._handleLabelClick()}\n        >\n          ${this.required\n            ? html`<abbr\n                class=\"required\"\n                title=${this._textStrings.requiredText}\n                role=\"img\"\n                aria-label=${this._textStrings?.requiredText || 'Required'}\n                >*</abbr\n              >`\n            : null}\n          ${this.label}\n          <slot name=\"tooltip\"></slot>\n        </label>\n\n        <div\n          class=${classMap({\n            wrapper: true,\n            open: this.open,\n          })}\n        >\n          <div class=\"custom\">\n            <div\n              class=\"${classMap({\n                select: true,\n                'input-custom': true,\n                'size--sm': this.size === 'sm',\n                'size--lg': this.size === 'lg',\n                inline: this.inline,\n              })}\"\n              aria-labelledby=\"label-${this.name}\"\n              aria-expanded=${this.open}\n              aria-controls=\"options\"\n              role=\"combobox\"\n              id=${this.name}\n              name=${this.name}\n              title=${this._textStrings.title}\n              ?required=${this.required}\n              ?disabled=${this.disabled}\n              ?invalid=${this._isInvalid}\n              tabindex=${this.disabled ? '' : '0'}\n              @click=${() => this.handleClick()}\n              @keydown=${(e: any) => this.handleButtonKeydown(e)}\n              @mousedown=${(e: any) => {\n                if (!this.searchable) {\n                  e.preventDefault();\n                }\n              }}\n              @blur=${(e: any) => this.handleButtonBlur(e)}\n            >\n              ${this.multiple && this.value.length\n                ? html`\n                    <button\n                      class=\"clear-multiple\"\n                      aria-label=\"${this.value\n                        .length} items selected. Clear selections\"\n                      ?disabled=${this.disabled}\n                      @click=${(e: Event) => this.handleClearMultiple(e)}\n                    >\n                      ${this.value.length}\n                      <span style=\"display:flex;\" slot=\"icon\"\n                        >${unsafeSVG(clearIcon)}</span\n                      >\n                    </button>\n                  `\n                : null}\n              ${this.searchable\n                ? html`\n                    <input\n                      class=\"search\"\n                      type=\"text\"\n                      placeholder=${this.placeholder}\n                      value=${this.searchText}\n                      ?disabled=${this.disabled}\n                      aria-disabled=${this.disabled}\n                      @keydown=${(e: any) => this.handleSearchKeydown(e)}\n                      @input=${(e: any) => this.handleSearchInput(e)}\n                      @blur=${(e: any) => this.handleSearchBlur(e)}\n                      @click=${(e: any) => this.handleSearchClick(e)}\n                    />\n                  `\n                : html`\n                    <span aria-disabled=${this.disabled}>\n                      ${this.multiple\n                        ? this.placeholder\n                        : this.value === ''\n                        ? this.placeholder\n                        : this.text}\n                    </span>\n                  `}\n\n              <span class=\"arrow-icon\">${unsafeSVG(downIcon)}</span>\n            </div>\n\n            <ul\n              id=\"options\"\n              class=${classMap({\n                options: true,\n                open: this.open,\n                upwards: this._openUpwards,\n              })}\n              style=\"min-width: ${this.menuMinWidth};\"\n              aria-labelledby=\"label-${this.name}\"\n              name=${this.name}\n              role=\"listbox\"\n              tabindex=\"0\"\n              aria-expanded=${this.open}\n              aria-hidden=${!this.open}\n              @keydown=${(e: any) => this.handleListKeydown(e)}\n              @blur=${(e: any) => this.handleListBlur(e)}\n            >\n              ${this.multiple && this.selectAll\n                ? html`\n                    <kyn-dropdown-option\n                      class=\"select-all\"\n                      value=\"selectAll\"\n                      multiple\n                      ?selected=${this.selectAllChecked}\n                      ?indeterminate=${this.selectAllIndeterminate}\n                      ?disabled=${this.disabled}\n                    >\n                      ${this.selectAllText}\n                    </kyn-dropdown-option>\n                  `\n                : null}\n\n              <slot\n                id=\"children\"\n                @slotchange=${() => this.handleSlotChange()}\n              ></slot>\n            </ul>\n          </div>\n          ${this.searchText !== ''\n            ? html`\n                <kyn-button\n                  ?disabled=${this.disabled}\n                  class=\"clear-button dropdown-clear\"\n                  kind=\"ghost\"\n                  size=\"small\"\n                  description=${this._textStrings.clearAll}\n                  @click=${(e: Event) => this.handleClear(e)}\n                >\n                  <span style=\"display:flex;\" slot=\"icon\"\n                    >${unsafeSVG(clearIcon)}</span\n                  >\n                </kyn-button>\n              `\n            : null}\n        </div>\n        ${this.renderHelperContent()}\n      </div>\n    `;\n  }\n\n  private renderHelperContent() {\n    return html`\n        ${\n          this.multiple && !this.hideTags && this._tags.length\n            ? html`\n                <kyn-tag-group\n                  filter\n                  role=\"list\"\n                  aria-label=${this._textStrings.selectedOptions}\n                >\n                  ${this._tags.map((tag: any) => {\n                    return html`\n                      <kyn-tag\n                        role=\"listitem\"\n                        label=${tag.text}\n                        ?disabled=${this.disabled}\n                        clearTagText=\"Clear Tag ${tag.text}\"\n                        @on-close=${() => this.handleTagClear(tag.value)}\n                      ></kyn-tag>\n                    `;\n                  })}\n                </kyn-tag-group>\n              `\n            : null\n        }\n        ${\n          this.caption !== ''\n            ? html`\n                <div class=\"caption\" aria-disabled=${this.disabled}>\n                  ${this.caption}\n                </div>\n              `\n            : null\n        }\n        ${\n          this._isInvalid\n            ? html`\n                <div class=\"error\">\n                  <span\n                    class=\"error-icon\"\n                    role=\"img\"\n                    title=${this._textStrings.errorText}\n                    aria-label=${this._textStrings.errorText}\n                    >${unsafeSVG(errorIcon)}</span\n                  >\n                  ${this.invalidText || this._internalValidationMsg}\n                </div>\n              `\n            : null\n        }\n\n        <div\n          class=\"assistive-text\"\n          role=\"status\"\n          aria-live=\"assertive\"\n          aria-relevant=\"additions text\"\n        >\n          ${this.assistiveText}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated() {\n    // set a default placeholder if none provided\n    if (this.placeholder === '') {\n      if (this.searchable) {\n        this.placeholder = 'Search';\n      } else {\n        if (this.multiple) {\n          this.placeholder = 'Select items';\n        } else {\n          this.placeholder = 'Select an option';\n        }\n      }\n    }\n  }\n\n  private handleSlotChange() {\n    this._updateOptions();\n  }\n\n  private handleClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      // focus search input if searchable\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _handleLabelClick() {\n    if (!this.disabled) {\n      this.open = !this.open;\n\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private handleButtonKeydown(e: any) {\n    this.handleKeyboard(e, e.keyCode, 'button');\n  }\n\n  private handleListKeydown(e: any) {\n    const TAB_KEY_CODE = 9;\n\n    if (e.keyCode !== TAB_KEY_CODE) {\n      e.preventDefault();\n    }\n\n    this.handleKeyboard(e, e.keyCode, 'list');\n  }\n\n  private handleListBlur(e: any) {\n    this.options.forEach((option) => (option.highlighted = false));\n\n    // don't blur if clicking an option inside\n    if (\n      e.relatedTarget &&\n      e.relatedTarget.localName !== 'kyn-dropdown-option'\n    ) {\n      this.open = false;\n    }\n    this.assistiveText = 'Dropdown menu options.';\n  }\n\n  private handleKeyboard(e: any, keyCode: number, target: string) {\n    const SPACEBAR_KEY_CODE = [0, 32];\n    const ENTER_KEY_CODE = 13;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const UP_ARROW_KEY_CODE = 38;\n    const ESCAPE_KEY_CODE = 27;\n\n    // get highlighted element + index and selected element\n    const visibleOptions = this.options.filter(\n      (option: any) => option.style.display !== 'none'\n    );\n    const highlightedEl = visibleOptions.find(\n      (option: any) => option.highlighted\n    );\n    const selectedEl = visibleOptions.find((option: any) => option.selected);\n    let highlightedIndex = highlightedEl\n      ? visibleOptions.indexOf(highlightedEl)\n      : visibleOptions.find((option: any) => option.selected)\n      ? visibleOptions.indexOf(selectedEl)\n      : 0;\n\n    // prevent page scroll on spacebar press\n    if (SPACEBAR_KEY_CODE.includes(keyCode)) {\n      e.preventDefault();\n    }\n\n    const isListboxElOpened = this.open;\n    // open the listbox\n    if (target === 'button') {\n      let openDropdown =\n        SPACEBAR_KEY_CODE.includes(keyCode) ||\n        keyCode === ENTER_KEY_CODE ||\n        keyCode == DOWN_ARROW_KEY_CODE ||\n        keyCode == UP_ARROW_KEY_CODE;\n\n      if (e.target === this.clearMultipleEl) {\n        openDropdown = false;\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[highlightedIndex].selected =\n          !visibleOptions[highlightedIndex].selected;\n        highlightedIndex = 0;\n        if (keyCode !== ENTER_KEY_CODE) return;\n      }\n\n      if (openDropdown) {\n        this.open = true;\n\n        // scroll to highlighted option\n        if (!this.multiple && this.value !== '') {\n          visibleOptions[highlightedIndex].scrollIntoView({ block: 'nearest' });\n        }\n      }\n    }\n    switch (keyCode) {\n      case 0:\n      case 32:\n      case ENTER_KEY_CODE: {\n        // select highlighted option\n        visibleOptions[highlightedIndex].highlighted = true;\n        if (isListboxElOpened) {\n          if (this.multiple) {\n            visibleOptions[highlightedIndex].selected =\n              !visibleOptions[highlightedIndex].selected;\n            if (visibleOptions[highlightedIndex].selected) {\n              this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n            } else {\n              this.assistiveText = `Deselected ${visibleOptions[highlightedIndex].innerHTML}`;\n            }\n          } else {\n            visibleOptions.forEach((e) => (e.selected = false));\n            visibleOptions[highlightedIndex].selected = true;\n            this.open = false;\n            this.assistiveText = `Selected ${visibleOptions[highlightedIndex].innerHTML}`;\n          }\n        }\n        if (highlightedEl && isListboxElOpened)\n          this.updateValue(\n            visibleOptions[highlightedIndex].value,\n            visibleOptions[highlightedIndex].selected\n          );\n\n        this.emitValue();\n        return;\n      }\n      case DOWN_ARROW_KEY_CODE: {\n        // go to next option\n        let nextIndex =\n          !highlightedEl && !selectedEl\n            ? 0\n            : highlightedIndex === visibleOptions.length - 1\n            ? 0\n            : highlightedIndex + 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === visibleOptions.length - 1 ? 0 : nextIndex + 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case UP_ARROW_KEY_CODE: {\n        // go to previous option\n        let nextIndex =\n          highlightedIndex === 0\n            ? visibleOptions.length - 1\n            : highlightedIndex - 1;\n\n        // skip disabled options\n        if (visibleOptions[nextIndex].disabled) {\n          nextIndex =\n            nextIndex === 0 ? visibleOptions.length - 1 : nextIndex - 1;\n        }\n\n        visibleOptions[highlightedIndex].highlighted = false;\n        visibleOptions[nextIndex].highlighted = true;\n\n        // scroll to option\n        visibleOptions[nextIndex].scrollIntoView({ block: 'nearest' });\n\n        this.assistiveText = visibleOptions[nextIndex].text;\n        return;\n      }\n      case ESCAPE_KEY_CODE: {\n        // close listbox\n        this.open = false;\n\n        // restore focus\n        if (this.searchable) {\n          this.searchEl.focus();\n        } else {\n          this.buttonEl.focus();\n        }\n\n        this.assistiveText = 'Dropdown menu options.';\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n\n  private handleClearMultiple(e: any) {\n    e.stopPropagation();\n\n    // clear values\n    if (this.multiple) {\n      this.value = [];\n    } else {\n      this.value = '';\n    }\n\n    this._validate(true, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n\n    const event = new CustomEvent('on-clear-all', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private handleTagClear(value: string) {\n    // remove value\n    this.updateValue(value, false);\n    this._updateSelectedOptions();\n    this.emitValue();\n  }\n\n  private handleClear(e: any) {\n    e.stopPropagation();\n\n    // reset search input text\n    this.text = '';\n    this.searchText = '';\n    this.searchEl.value = '';\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // reveal all options\n      this.options.map((option: any) => {\n        option.style.display = 'block';\n      });\n    }\n\n    // clear selection for single select\n    if (!this.multiple) {\n      this.value = '';\n      this._validate(true, false);\n      this._updateSelectedOptions();\n      this.emitValue();\n    }\n  }\n\n  private handleSearchClick(e: any) {\n    e.stopPropagation();\n    this.open = true;\n  }\n\n  private handleButtonBlur(e: any) {\n    // don't blur if entering listbox or search input\n    if (\n      !e.relatedTarget?.classList.contains('options') &&\n      !e.relatedTarget?.classList.contains('search')\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchBlur(e: any) {\n    // don't blur if entering listbox of button\n    if (\n      !e.relatedTarget ||\n      (e.relatedTarget.localName !== 'kyn-dropdown-option' &&\n        !e.relatedTarget?.classList.contains('options') &&\n        !e.relatedTarget?.classList.contains('select'))\n    ) {\n      this.open = false;\n    }\n    this._validate(true, false);\n  }\n\n  private handleSearchKeydown(e: any) {\n    e.stopPropagation();\n\n    const ENTER_KEY_CODE = 13;\n    const ESCAPE_KEY_CODE = 27;\n    const option = this.options.find((option) => option.highlighted);\n    const highlightedIndex = this.options.findIndex(\n      (option) => option.highlighted\n    );\n    this.searchTextEntered = false;\n    // select option\n    if (e.keyCode === ENTER_KEY_CODE) {\n      this.searchTextEntered = true;\n      if (option) {\n        if (this.prevSearchKeydownIndex !== highlightedIndex) {\n          if (this.multiple) {\n            option.selected = !option.selected;\n          } else {\n            this.options.forEach((e) => (e.selected = false));\n            option.selected = true;\n            this.open = false;\n          }\n          this.updateValue(option.value, option.selected);\n        }\n\n        if (option.selected) {\n          this.assistiveText = `Selected ${option.innerHTML}`;\n          this.prevSearchKeydownIndex = highlightedIndex;\n        } else {\n          this.assistiveText = `Deselected ${option.innerHTML}`;\n        }\n      } else {\n        this.assistiveText = 'No item matched.';\n      }\n    }\n\n    // close listbox\n    if (e.keyCode === ESCAPE_KEY_CODE) {\n      this.open = false;\n      this.buttonEl.focus();\n    }\n  }\n\n  private handleSearchInput(e: any) {\n    const value = e.target.value;\n    this.searchText = value;\n    this.open = true;\n\n    this._emitSearch();\n\n    if (this.filterSearch) {\n      // hide items that don't match\n      this.options.map((option: any) => {\n        const text = option.text;\n        if (text.toLowerCase().includes(value.toLowerCase())) {\n          option.style.display = 'block';\n        } else {\n          option.style.display = 'none';\n        }\n      });\n    } else {\n      // find matches\n      const options = this.options.filter((option: any) => {\n        const text = option.text;\n        return text.toLowerCase().startsWith(value.toLowerCase());\n      });\n\n      // reset options highlighted state\n      this.options.forEach((option) => (option.highlighted = false));\n\n      // option highlight and scroll\n      if (value !== '' && options.length) {\n        options[0].highlighted = true;\n        options[0].scrollIntoView({ block: 'nearest' });\n        if (this.searchTextEntered) this.assistiveText = 'Option Matched';\n      }\n    }\n  }\n\n  private _updateSelectedOptions() {\n    // set selected state for each option\n    this.options.forEach((option: any) => {\n      if (this.multiple) {\n        option.selected = this.value.includes(option.value);\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n\n  private _handleClick(e: any) {\n    if (e.detail.value === 'selectAll') {\n      if (e.detail.selected) {\n        this.value = this.options\n          .filter((option) => !option.disabled)\n          .map((option) => {\n            return option.value;\n          });\n        this.assistiveText = 'Selected all items.';\n      } else {\n        this.value = [];\n        this.assistiveText = 'Deselected all items.';\n      }\n\n      this._validate(true, false);\n    } else {\n      this.updateValue(e.detail.value, e.detail.selected);\n      this.assistiveText = 'Selected an item.';\n    }\n\n    this._updateSelectedOptions();\n\n    // close listbox\n    if (!this.multiple) {\n      this.open = false;\n    }\n\n    // emit selected value\n    this.emitValue();\n  }\n\n  private _handleBlur(e: any) {\n    const relatedTarget = e.detail.origEvent.relatedTarget;\n\n    if (\n      !relatedTarget ||\n      (relatedTarget.localName !== 'kyn-dropdown-option' &&\n        relatedTarget.localName !== 'kyn-dropdown')\n    ) {\n      this.open = false;\n    }\n  }\n\n  private _handleClickOut(e: Event) {\n    if (!e.composedPath().includes(this)) {\n      this.open = false;\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    // preserve FormMixin connectedCallback function\n    this._onConnected();\n\n    document.addEventListener('click', (e) => this._handleClickOut(e));\n\n    // capture child options click event\n    this.addEventListener('on-click', (e: any) => this._handleClick(e));\n\n    // capture child options blur event\n    this.addEventListener('on-blur', (e: any) => this._handleBlur(e));\n  }\n\n  override disconnectedCallback() {\n    // preserve FormMixin disconnectedCallback function\n    this._onDisconnected();\n\n    document.removeEventListener('click', (e) => this._handleClickOut(e));\n    this.removeEventListener('on-click', (e: any) => this._handleClick(e));\n    this.removeEventListener('on-blur', (e: any) => this._handleBlur(e));\n\n    super.disconnectedCallback();\n  }\n\n  private updateValue(value: string, selected = false) {\n    // set value\n    if (this.multiple) {\n      const values =\n        this.value === '' ? [] : JSON.parse(JSON.stringify(this.value));\n\n      // update array\n      if (selected) {\n        values.push(value);\n      } else {\n        const index = values.indexOf(value);\n        values.splice(index, 1);\n      }\n\n      this.value = values;\n    } else {\n      this.value = value;\n    }\n\n    this._validate(true, false);\n\n    // reset focus\n    if (!this.multiple) {\n      if (this.searchable) {\n        this.searchEl.focus();\n      } else {\n        this.buttonEl.focus();\n      }\n    }\n  }\n\n  private _validate(interacted: Boolean, report: Boolean) {\n    // set validity flags\n    const Validity = {\n      customError: this.invalidText !== '',\n      valueMissing:\n        this.required &&\n        (!this.value ||\n          (this.multiple && !this.value.length) ||\n          (!this.multiple && this.value === '')),\n    };\n\n    // set validationMessage\n    const InternalMsg =\n      this.required && !this.value.length ? 'Please fill out this field.' : '';\n    const ValidationMessage =\n      this.invalidText !== '' ? this.invalidText : InternalMsg;\n\n    // set validity on custom element, anchor to buttonEl\n    this._internals.setValidity(Validity, ValidationMessage, this.buttonEl);\n\n    // set internal validation message if value was changed by user input\n    if (interacted) {\n      this._internalValidationMsg = InternalMsg;\n    }\n\n    // focus the buttonEl to show validity\n    if (report) {\n      this._internals.reportValidity();\n    }\n  }\n\n  private emitValue() {\n    const event = new CustomEvent('on-change', {\n      detail: {\n        value: this.value,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _emitSearch() {\n    const event = new CustomEvent('on-search', {\n      detail: {\n        searchText: this.searchText,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('textStrings')) {\n      this._textStrings = deepmerge(_defaultTextStrings, this.textStrings);\n    }\n  }\n\n  override updated(changedProps: any) {\n    // preserve FormMixin updated function\n    this._onUpdated(changedProps);\n\n    if (changedProps.has('value')) {\n      const Slot: any = this.shadowRoot?.querySelector('slot#children');\n      const Options: Array<any> = Slot.assignedElements().filter(\n        (option: any) => !option.disabled\n      );\n      const SelectedOptions: Array<any> = Options.filter(\n        (option: any) => option.selected\n      );\n\n      // sync \"Select All\" checkbox state\n      this.selectAllChecked = SelectedOptions.length === Options.length;\n\n      // sync \"Select All\" indeterminate state\n      this.selectAllIndeterminate =\n        SelectedOptions.length < Options.length && SelectedOptions.length > 0;\n\n      this._updateOptions();\n      this._updateTags();\n\n      // update selected option text\n      const AllOptions: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n\n      if (!this.multiple) {\n        if (AllOptions.length && this.value !== '') {\n          const option = AllOptions.find(\n            (option: any) => option.value === this.value\n          );\n\n          this.text = option.textContent;\n        }\n\n        // set search input value\n        if (this.searchable && this.text) {\n          this.searchText = this.text === this.placeholder ? '' : this.text;\n          this.searchEl.value = this.searchText;\n        }\n      }\n    }\n\n    if (changedProps.has('open')) {\n      if (this.open && !this.searchable) {\n        // focus listbox if not searchable\n        this.listboxEl.focus({ preventScroll: true });\n        this.assistiveText =\n          'Selecting items. Use up and down arrow keys to navigate.';\n      }\n\n      if (this.open) {\n        if (!this.multiple) {\n          // scroll to selected option\n          this.options\n            .find((option) => option.selected)\n            ?.scrollIntoView({ block: 'nearest' });\n        }\n\n        // open dropdown upwards if closer to bottom of viewport\n        const Threshold = 0.6;\n\n        if (\n          this.buttonEl.getBoundingClientRect().top >\n          window.innerHeight * Threshold\n        ) {\n          this._openUpwards = true;\n        } else {\n          this._openUpwards = false;\n        }\n      }\n    }\n\n    if (changedProps.has('multiple')) {\n      // set multiple for each option\n      this.options.forEach((option: any) => {\n        option.multiple = this.multiple;\n      });\n    }\n\n    if (changedProps.has('searchText') && this.searchEl) {\n      this.searchEl.value = this.searchText;\n    }\n  }\n\n  // add selected options to Tags array\n  private _updateTags() {\n    if (this.multiple) {\n      const Options: any = Array.from(\n        this.querySelectorAll('kyn-dropdown-option')\n      );\n      const Tags: Array<object> = [];\n\n      if (Options) {\n        Options.forEach((option: any) => {\n          if (option.selected) {\n            Tags.push({\n              value: option.value,\n              text: option.textContent,\n            });\n          }\n        });\n\n        this._tags = Tags;\n      }\n    }\n  }\n\n  private _updateOptions() {\n    const Options: any = Array.from(\n      this.querySelectorAll('kyn-dropdown-option')\n    );\n\n    Options.forEach((option: any) => {\n      // set option multiple state\n      option.multiple = this.multiple;\n\n      if (this.multiple) {\n        const Selected = this.value.includes(option.value);\n        // set option selected state\n        option.selected = Selected;\n      } else {\n        option.selected = this.value === option.value;\n      }\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-dropdown': Dropdown;\n  }\n}\n"],"names":["_defaultTextStrings","title","selectedOptions","requiredText","errorText","clearAll","Dropdown","FormMixin","LitElement","constructor","this","label","size","inline","caption","placeholder","open","searchable","filterSearch","multiple","required","hideLabel","disabled","hideTags","selectAll","selectAllText","menuMinWidth","selectAllChecked","selectAllIndeterminate","textStrings","_textStrings","text","searchText","assistiveText","_openUpwards","_tags","searchTextEntered","prevSearchKeydownIndex","render","html","name","_handleLabelClick","_a","classMap","wrapper","select","_isInvalid","handleClick","e","handleButtonKeydown","preventDefault","handleButtonBlur","value","length","handleClearMultiple","unsafeSVG","clearIcon","handleSearchKeydown","handleSearchInput","handleSearchBlur","handleSearchClick","downIcon","options","upwards","handleListKeydown","handleListBlur","handleSlotChange","handleClear","renderHelperContent","map","tag","handleTagClear","errorIcon","invalidText","_internalValidationMsg","firstUpdated","_updateOptions","searchEl","focus","buttonEl","handleKeyboard","keyCode","forEach","option","highlighted","relatedTarget","localName","target","SPACEBAR_KEY_CODE","visibleOptions","filter","style","display","highlightedEl","find","selectedEl","selected","highlightedIndex","indexOf","includes","isListboxElOpened","openDropdown","clearMultipleEl","scrollIntoView","block","innerHTML","updateValue","emitValue","nextIndex","stopPropagation","_validate","_updateSelectedOptions","event","CustomEvent","detail","dispatchEvent","_emitSearch","classList","contains","_b","findIndex","toLowerCase","startsWith","_handleClick","_handleBlur","origEvent","_handleClickOut","composedPath","connectedCallback","super","_onConnected","document","addEventListener","disconnectedCallback","_onDisconnected","removeEventListener","values","JSON","parse","stringify","push","index","splice","interacted","report","Validity","customError","valueMissing","InternalMsg","ValidationMessage","_internals","setValidity","reportValidity","willUpdate","changedProps","has","deepmerge","updated","_onUpdated","Options","shadowRoot","querySelector","assignedElements","SelectedOptions","_updateTags","AllOptions","Array","from","querySelectorAll","textContent","listboxEl","preventScroll","Threshold","getBoundingClientRect","top","window","innerHeight","Tags","Selected","styles","DropdownScss","__decorate","property","type","String","prototype","Boolean","Object","state","queryAssignedElements","selector","query","customElement"],"mappings":"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"}

package/components/reusable/table/index.js

@@ -1,2 +1,2 @@
-export{T as Table}from"../../../table-f6b54ef0.js";export{TableCell}from"./table-cell.js";export{TableRow}from"./table-row.js";export{TableBody}from"./table-body.js";export{TableHead}from"./table-head.js";export{TableHeader}from"./table-header.js";export{TableFoot}from"./table-foot.js";export{TableFooter}from"./table-footer.js";export{TableLegend}from"./table-legend.js";export{TableLegendItem}from"./table-legend-item.js";export{TableToolbar}from"./table-toolbar.js";export{TableContainer}from"./table-container.js";export{TableHeaderRow}from"./table-header-row.js";export{TableExpandedRow}from"./table-expanded-row.js";export{TableSkeleton}from"./table.skeleton.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"./defs.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../../../pagination-0ed1cd84.js";import"../globalFilter/globalFilter.js";
+export{T as Table}from"../../../table-7b5747f8.js";export{TableCell}from"./table-cell.js";export{TableRow}from"./table-row.js";export{TableBody}from"./table-body.js";export{TableHead}from"./table-head.js";export{TableHeader}from"./table-header.js";export{TableFoot}from"./table-foot.js";export{TableFooter}from"./table-footer.js";export{TableLegend}from"./table-legend.js";export{TableLegendItem}from"./table-legend-item.js";export{TableToolbar}from"./table-toolbar.js";export{TableContainer}from"./table-container.js";export{TableHeaderRow}from"./table-header-row.js";export{TableExpandedRow}from"./table-expanded-row.js";export{TableSkeleton}from"./table.skeleton.js";import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-6f74d22e.js";import"./table-context.js";import"./defs.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../../../pagination-0ed1cd84.js";import"../globalFilter/globalFilter.js";
 //# sourceMappingURL=index.js.map

package/components/reusable/table/table-body.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as s,s as n,x as i}from"../../../vendor/lit-element-3185f710.js";import{s as d}from"../../../vendor/@lit/context-81eb2692.js";import{tableContext as l}from"./table-context.js";import{TableRow as p}from"./table-row.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";var a=s`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,e as r}from"../../../vendor/lit-6e2a7867.js";import{i as s,s as n,x as i}from"../../../vendor/lit-element-3185f710.js";import{s as d}from"../../../vendor/@lit/context-6f74d22e.js";import{tableContext as l}from"./table-context.js";import{TableRow as p}from"./table-row.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";var a=s`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table-cell.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as r,s as d,x as n}from"../../../vendor/lit-element-3185f710.js";import{s}from"../../../vendor/@lit/context-81eb2692.js";import{tableContext as l}from"./table-context.js";import{TABLE_CELL_ALIGN as a}from"./defs.js";var h=r`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as i,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as r,s as d,x as n}from"../../../vendor/lit-element-3185f710.js";import{s}from"../../../vendor/@lit/context-6f74d22e.js";import{tableContext as l}from"./table-context.js";import{TABLE_CELL_ALIGN as a}from"./defs.js";var h=r`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table-context.js

@@ -1,2 +1,2 @@
-import{n as e}from"../../../vendor/@lit/context-81eb2692.js";const t=e({dense:!1,striped:!1,checkboxSelection:!1,stickyHeader:!1});export{t as tableContext};
+import{n as e}from"../../../vendor/@lit/context-6f74d22e.js";const t=e({dense:!1,striped:!1,checkboxSelection:!1,stickyHeader:!1});export{t as tableContext};
 //# sourceMappingURL=table-context.js.map

package/components/reusable/table/table-head.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,l as r,e as s}from"../../../vendor/lit-6e2a7867.js";import{i as n,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{s as d}from"../../../vendor/@lit/context-81eb2692.js";import{tableContext as a}from"./table-context.js";var c=n`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,l as r,e as s}from"../../../vendor/lit-6e2a7867.js";import{i as n,s as i,x as l}from"../../../vendor/lit-element-3185f710.js";import{s as d}from"../../../vendor/@lit/context-6f74d22e.js";import{tableContext as a}from"./table-context.js";var c=n`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table-header-row.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,e as i}from"../../../vendor/lit-6e2a7867.js";import{TableRow as d}from"./table-row.js";import{i as r,x as n}from"../../../vendor/lit-element-3185f710.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";var l=r`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,e as i}from"../../../vendor/lit-6e2a7867.js";import{TableRow as d}from"./table-row.js";import{i as r,x as n}from"../../../vendor/lit-element-3185f710.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@lit/context-6f74d22e.js";import"./table-context.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";var l=r`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table-header.js

@@ -1,4 +1,4 @@
-import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{e as i,o as e}from"../../../vendor/lit-html-29220869.js";import{n as o,t as r,b as s,c as n,e as a}from"../../../vendor/lit-6e2a7867.js";import{i as d,s as l,x as h}from"../../../vendor/lit-element-3185f710.js";import{s as c}from"../../../vendor/@lit/context-81eb2692.js";import{tableContext as p}from"./table-context.js";import{l as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import{TABLE_CELL_ALIGN as m,SORT_DIRECTION as g}from"./defs.js";var y=d`*,
+import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{e as i,o as e}from"../../../vendor/lit-html-29220869.js";import{n as o,t as r,b as s,c as n,e as a}from"../../../vendor/lit-6e2a7867.js";import{i as d,s as l,x as h}from"../../../vendor/lit-element-3185f710.js";import{s as c}from"../../../vendor/@lit/context-6f74d22e.js";import{tableContext as p}from"./table-context.js";import{l as v}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import{TABLE_CELL_ALIGN as m,SORT_DIRECTION as g}from"./defs.js";var y=d`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table-row.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,t as i,l as s,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as d,s as a,x as r}from"../../../vendor/lit-element-3185f710.js";import{s as l}from"../../../vendor/@lit/context-81eb2692.js";import{tableContext as p}from"./table-context.js";import{f as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";var b=d`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../../vendor/lit-html-29220869.js";import{n as o,t as i,l as s,e as n}from"../../../vendor/lit-6e2a7867.js";import{i as d,s as a,x as r}from"../../../vendor/lit-element-3185f710.js";import{s as l}from"../../../vendor/@lit/context-6f74d22e.js";import{tableContext as p}from"./table-context.js";import{f as h}from"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import{d as c}from"../../../vendor/deepmerge-ts-e62363e6.js";var b=d`*,
 *::before,
 *::after {
   box-sizing: border-box;

package/components/reusable/table/table.js

@@ -1,2 +1,2 @@
-import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";export{T as Table}from"../../../table-f6b54ef0.js";
+import"../../../vendor/tslib-53a81efe.js";import"../../../vendor/lit-6e2a7867.js";import"../../../vendor/lit-element-3185f710.js";import"../../../vendor/@lit/context-6f74d22e.js";import"./table-context.js";export{T as Table}from"../../../table-7b5747f8.js";
 //# sourceMappingURL=table.js.map

package/components/reusable/table/table.skeleton.js

@@ -1,4 +1,4 @@
-import{c as t}from"../../../table-f6b54ef0.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-foot.js";import"./table-footer.js";import"./table-legend.js";import"./table-legend-item.js";import"./table-toolbar.js";import"./table-container.js";import"./table-header-row.js";import"./table-expanded-row.js";import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{e as o,n as l}from"../../../vendor/lit-6e2a7867.js";import{i,s as n,x as r}from"../../../vendor/lit-element-3185f710.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../globalFilter/globalFilter.js";import"../../../vendor/@lit/context-81eb2692.js";import"./table-context.js";import"./defs.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../pagination-0ed1cd84.js";let s=class extends n{render(){return r`
+import{c as t}from"../../../table-7b5747f8.js";import"./table-cell.js";import"./table-row.js";import"./table-body.js";import"./table-head.js";import"./table-header.js";import"./table-foot.js";import"./table-footer.js";import"./table-legend.js";import"./table-legend-item.js";import"./table-toolbar.js";import"./table-container.js";import"./table-header-row.js";import"./table-expanded-row.js";import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{e as o,n as l}from"../../../vendor/lit-6e2a7867.js";import{i,s as n,x as r}from"../../../vendor/lit-element-3185f710.js";import"../loaders/skeleton.js";import"../pagination/pagination.skeleton.js";import"../globalFilter/globalFilter.js";import"../../../vendor/@lit/context-6f74d22e.js";import"./table-context.js";import"./defs.js";import"../../../vendor/lit-html-29220869.js";import"../../../vendor/@kyndryl-design-system/shidoka-icons-a1631225.js";import"../checkbox/checkbox.js";import"../../../vendor/deepmerge-ts-e62363e6.js";import"../../../pagination-0ed1cd84.js";let s=class extends n{render(){return r`
       <kyn-global-filter>
         <div class="left-wrapper">
           <kyn-skeleton

package/components/reusable/tabs/defs.d.ts

@@ -0,0 +1,5 @@
+export declare enum TAB_SIZES {
+    SMALL = "sm",
+    MEDIUM = "md"
+}
+//# sourceMappingURL=defs.d.ts.map

package/components/reusable/tabs/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IAEnB,KAAK,OAAO;IACZ,MAAM,OAAO;CACd"}

package/components/reusable/tabs/defs.js

@@ -0,0 +1,2 @@
+var M;!function(M){M.SMALL="sm",M.MEDIUM="md"}(M||(M={}));export{M as TAB_SIZES};
+//# sourceMappingURL=defs.js.map

package/components/reusable/tabs/defs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/tabs/defs.ts"],"sourcesContent":["export enum TAB_SIZES {\n  // LARGE = 'lg',\n  SMALL = 'sm',\n  MEDIUM = 'md',\n}\n"],"names":["TAB_SIZES"],"mappings":"IAAYA,GAAZ,SAAYA,GAEVA,EAAA,MAAA,KACAA,EAAA,OAAA,IACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}

package/components/reusable/tabs/tab.d.ts

@@ -1,65 +1,22 @@
 import { LitElement } from 'lit';
-/**
- * Tabs.
- * @slot unnamed - Slot for tab button text.
- */
 export declare class Tab extends LitElement {
     static styles: any;
-    /** Tab ID, required. */
     id: string;
-    /** Tab selected state. Must match Tab Panel visible state. */
     selected: boolean;
-    /** Tab disabled state. */
     disabled: boolean;
-    /** Size of the tab buttons. Inherited.
-     * @internal
-     */
     private _size;
-    /** Vertical orientation. Inherited.
-     * @internal
-     */
     private _vertical;
-    /** Tab style. Inherited.
-     * @internal
-     */
-    private _tabStyle;
-    /** aria role.
-     * @internal
-     */
+    aiConnected: boolean;
+    tabStyle: string;
     role: string;
-    /** Make host tabbable.
-     * @internal
-     */
     tabIndex: number;
-    /** aria-controls.
-     * @internal
-     */
     'aria-selected': string;
-    /** aria-controls.
-     * @internal
-     */
     'aria-controls': string;
-    /** aria-disabled.
-     * @internal
-     */
     'aria-disabled': string;
     render(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /**
-     * Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the
-     * 'id' and 'selected' properties, respectively.
-     * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties
-     * that have changed in the component. It is used to determine which properties have been updated and
-     * perform specific actions based on those changes.
-     */
-    willUpdate(changedProps: any): void;
-    /**
-     * Dispatches a custom event called 'tab-activated' with the original event and tabId as details,
-     * if the tab is not selected.
-     * @param {any} e - The parameter "e" is an event object that represents the event that triggered the
-     * click event handler.
-     */
+    willUpdate(changedProps: Map<string, unknown>): void;
     private _handleClick;
 }
 declare global {

package/components/reusable/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAEjC,wBAAwB;IAEf,EAAE,SAAM;IAEjB,8DAA8D;IAE9D,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAQ;IAErB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEM,IAAI,SAAS;IAEtB;;OAEG;IAEM,QAAQ,SAAK;IAEtB;;OAEG;IAEH,eAAe,SAAW;IAE1B;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,eAAe,SAAW;IAEjB,MAAM;IAgBN,iBAAiB;IAKjB,oBAAoB;IAK7B;;;;;;OAMG;IACM,UAAU,CAAC,YAAY,EAAE,GAAG;IAerC;;;;;OAKG;IACH,OAAO,CAAC,YAAY;CAUrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,MAAW;IAGxB,EAAE,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,CAAC,KAAK,CAAQ;IAGrB,OAAO,CAAC,SAAS,CAAS;IAW1B,WAAW,UAAS;IAGpB,QAAQ,SAAe;IAGd,IAAI,SAAS;IAGb,QAAQ,SAAK;IAGtB,eAAe,SAAW;IAG1B,eAAe,SAAM;IAGrB,eAAe,SAAW;IAEjB,MAAM;IAoBN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAetD,OAAO,CAAC,YAAY,CASlB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}

package/components/reusable/tabs/tab.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as r,e as o}from"../../../vendor/lit-6e2a7867.js";import{i as a,s as d,x as l}from"../../../vendor/lit-element-3185f710.js";var n=a`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as o,o as r,e as a}from"../../../vendor/lit-6e2a7867.js";import{i,s as d,x as n}from"../../../vendor/lit-element-3185f710.js";var l=i`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -38,6 +38,21 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
 :host(:focus) {
   outline-color: var(--kd-color-border-variants-focus);
 }
+:host(:focus) .tab {
+  font-weight: 400;
+}
+
+:host([data-aiconnected=true][data-tab-style=contained]:focus) {
+  outline-color: var(--kd-color-border-button-ai-state-hover);
+  background: transparent;
+  color: var(--kd-color-text-button-ai-default);
+}
+
+:host([data-aiconnected=true][data-tab-style=line]:focus) {
+  outline-color: var(--kd-color-border-button-ai-state-focused);
+  background: transparent;
+  color: var(--kd-color-text-button-ai-default);
+}
 
 :host([disabled]:focus) {
   outline-color: transparent;
@@ -138,14 +153,64 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
   border-top: 2px solid transparent;
   background: var(--kd-color-background-container-soft);
 }
+.tab.contained.ai-connected--true:not(.disabled) {
+  color: var(--kd-color-text-button-ai-default);
+  border-color: transparent;
+  background: var(--kd-color-background-container-ai-subtle);
+}
+.tab.contained.ai-connected--true:not(.disabled).selected {
+  border-top-color: var(--kd-color-border-button-ai-state-default);
+  background: var(--kd-color-background-button-secondary-ai-default);
+}
+.tab.contained.ai-connected--true:not(.disabled):hover {
+  background: var(--kd-color-background-button-secondary-ai-hover);
+  color: var(--kd-color-text-button-ai-default);
+  border-color: transparent;
+}
+.tab.contained.ai-connected--true:not(.disabled):active {
+  background: var(--kd-color-background-button-primary-ai-hover);
+  color: var(--kd-color-text-button-dark-primary);
+  border-color: transparent;
+}
+.tab.contained.ai-connected--false {
+  border-left: 2px solid var(--kd-color-border-error);
+}
+.tab.line.ai-connected--true:not(.disabled) {
+  color: var(--kd-color-text-button-ai-default);
+  border-color: var(--kd-color-border-variants-ai);
+  background: transparent;
+}
+.tab.line.ai-connected--true:not(.disabled).selected {
+  border-color: var(--kd-color-border-button-ai-state-default);
+  background: transparent;
+}
+.tab.line.ai-connected--true:not(.disabled):hover {
+  background: var(--kd-color-background-button-secondary-ai-hover);
+  color: var(--kd-color-text-button-ai-default);
+  border-color: var(--kd-color-border-button-ai-state-hover);
+}
+.tab.line.ai-connected--true:not(.disabled):active {
+  background: var(--kd-color-background-button-secondary-ai-pressed);
+  color: var(--kd-color-text-button-dark-primary);
+  border-color: transparent;
+}
+.tab.line.ai-connected--false {
+  background: transparent;
+}
+.tab.line.ai-connected--false.selected {
+  background: transparent;
+}
 @media (min-width: 42rem) {
   .tab.contained.vertical {
     border-top: none;
     border-color: transparent;
   }
-  .tab.contained.vertical.selected {
+  .tab.contained.vertical.selected.ai-connected--false {
     border-color: var(--kd-color-border-level-tertiary);
   }
+  .tab.contained.vertical.selected.ai-connected--true {
+    border-color: var(--kd-color-border-button-ai-state-default);
+  }
 }
 .tab:hover {
   color: var(--kd-color-text-link-level-hover);
@@ -186,5 +251,9 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,t as i,o as
 .tab.disabled.contained {
   background: var(--kd-color-background-ui-default-disabled);
   border-color: transparent;
-}`;let s=class extends d{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this._vertical=!1,this._tabStyle="contained",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false"}render(){const e={tab:!0,contained:"contained"===this._tabStyle,line:"line"===this._tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled};return l` <div class=${r(e)}><slot></slot></div> `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",(e=>this._handleClick(e)))}disconnectedCallback(){this.removeEventListener("click",(e=>this._handleClick(e))),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=this.id+"-panel"),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),e.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}_handleClick(e){if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}};s.styles=n,e([t({type:String,reflect:!0})],s.prototype,"id",void 0),e([t({type:Boolean,reflect:!0})],s.prototype,"selected",void 0),e([t({type:Boolean})],s.prototype,"disabled",void 0),e([i()],s.prototype,"_size",void 0),e([i()],s.prototype,"_vertical",void 0),e([i()],s.prototype,"_tabStyle",void 0),e([t({type:String,reflect:!0})],s.prototype,"role",void 0),e([t({type:Number,reflect:!0})],s.prototype,"tabIndex",void 0),e([t({type:String,reflect:!0})],s.prototype,"aria-selected",void 0),e([t({type:String,reflect:!0})],s.prototype,"aria-controls",void 0),e([t({type:String,reflect:!0})],s.prototype,"aria-disabled",void 0),s=e([o("kyn-tab")],s);export{s as Tab};
+}`;let c=class extends d{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this._vertical=!1,this.aiConnected=!1,this.tabStyle="contained",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]="",this["aria-disabled"]="false",this._handleClick=e=>{if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}}render(){const e={tab:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled,[`ai-connected--${this.aiConnected}`]:!0};return n`
+      <div class=${r(e)}>
+        <slot></slot>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){this.removeEventListener("click",this._handleClick),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=`${this.id}-panel`),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1),e.has("disabled")&&(this["aria-disabled"]=this.disabled.toString())}};c.styles=l,e([t({type:String,reflect:!0})],c.prototype,"id",void 0),e([t({type:Boolean,reflect:!0})],c.prototype,"selected",void 0),e([t({type:Boolean})],c.prototype,"disabled",void 0),e([o()],c.prototype,"_size",void 0),e([o()],c.prototype,"_vertical",void 0),e([t({type:Boolean,reflect:!0,attribute:"data-aiconnected",converter:{fromAttribute:e=>"true"===e,toAttribute:e=>e?"true":"false"}})],c.prototype,"aiConnected",void 0),e([t({type:String,reflect:!0,attribute:"data-tab-style"})],c.prototype,"tabStyle",void 0),e([t({type:String,reflect:!0})],c.prototype,"role",void 0),e([t({type:Number,reflect:!0})],c.prototype,"tabIndex",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-selected",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-controls",void 0),e([t({type:String,reflect:!0})],c.prototype,"aria-disabled",void 0),c=e([a("kyn-tab")],c);export{c as Tab};
 //# sourceMappingURL=tab.js.map