diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml index 4b76321ede7..17a05743e5e 100644 --- a/.github/workflows/ci-check.yml +++ b/.github/workflows/ci-check.yml @@ -2,9 +2,9 @@ name: ci-check on: push: - branches: [ main, release/v2*, feat/*, fix/content-updates ] + branches: [ main, release/*, release-cwc/*, feat/*, fix/content-updates ] pull_request: - branches: [ main, release/v2*, feat/*, fix/content-updates ] + branches: [ main, release/*, release-cwc/*, feat/*, fix/content-updates ] concurrency: group: ci-check-${{ github.ref }} diff --git a/.github/workflows/e2e-tests-parallel.yml b/.github/workflows/e2e-tests-parallel.yml index ef45aa2d57c..4a48fd41713 100644 --- a/.github/workflows/e2e-tests-parallel.yml +++ b/.github/workflows/e2e-tests-parallel.yml @@ -58,7 +58,7 @@ jobs: run: yarn build-storybook - name: Save build folder - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: storybook-build path: packages/web-components/storybook-static @@ -90,7 +90,7 @@ jobs: cache: 'yarn' - name: Download the build folders - uses: actions/download-artifact@v3 + uses: actions/download-artifact@v4 with: name: storybook-build path: packages/web-components/storybook-static @@ -125,7 +125,7 @@ jobs: - name: Save failure file if: steps.cypress-tests-wc.outcome == 'failure' - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: failure-wc path: failure-wc.txt @@ -139,7 +139,7 @@ jobs: runs-on: ubuntu-20.04 needs: web-components-tests steps: - - uses: actions/download-artifact@v3 + - uses: actions/download-artifact@v4 continue-on-error: true with: name: failure-wc diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts index 5681f4ed5ab..24b7db11659 100644 --- a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts +++ b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts @@ -10,7 +10,6 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; import { boolean } from '@storybook/addon-knobs'; -import { ifDefined } from 'lit/directives/if-defined.js'; import { prefix } from '../../globals/settings'; import textNullable from '../../../.storybook/knob-text-nullable'; import './index'; diff --git a/packages/carbon-web-components/src/components/data-table/_table-core.scss b/packages/carbon-web-components/src/components/data-table/_table-core.scss index afda21d06be..f5bdb89763e 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-core.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-core.scss @@ -70,6 +70,20 @@ :host(#{$prefix}-table-header-cell[sort-direction]) { height: $spacing-09; position: relative; + + .#{$prefix}--table-sort__flex { + display: flex; + align-items: center; + justify-content: space-between; + block-size: 100%; + inline-size: 100%; + min-block-size: $spacing-09; + } +} + +:host(#{$prefix}-table-header-cell[slug]), +:host(#{$prefix}-table-header-cell[slug]) .#{$prefix}--table-sort { + @include ai-gradient('top', 100%); } :host(#{$prefix}-table-header-cell[sticky-header]) { @@ -85,6 +99,17 @@ padding-top: rem(14px); } +:host(#{$prefix}-table-header-cell[slug]) { + .#{$prefix}--table-header-label--slug { + display: flex; + align-items: center; + } + + ::slotted(#{$prefix}-slug) { + margin-inline-start: $spacing-03; + } +} + // // Common style for table cell and table header cell // @@ -186,6 +211,35 @@ } } +:host(#{$prefix}-table-header-row), +:host(#{$prefix}-table-row) { + .#{$prefix}--table-column-checkbox div, + .#{$prefix}--table-expand div { + display: flex; + height: 100%; + } +} + +:host(#{$prefix}-table-header-row[rows-with-slug]) { + .#{$prefix}--table-column-checkbox, + .#{$prefix}--table-expand { + padding-left: $spacing-08; + } +} +:host(#{$prefix}-table-header-row[rows-with-slug]), +:host(#{$prefix}-table-row[rows-with-slug]) { + #{$prefix}-checkbox { + padding-left: $spacing-03; + } +} + +:host(#{$prefix}-table-header-row[rows-with-slug][selection-name][expandable]), +:host(#{$prefix}-table-row[rows-with-slug][selection-name][expandable]) { + .#{$prefix}--table-column-checkbox { + padding-left: 0; + } +} + // // Table row // @@ -396,6 +450,26 @@ } } +:host(#{$prefix}-table-row[rows-with-slug]) { + ::slotted(#{$prefix}-slug) { + padding: 0 $spacing-03; + margin-left: -$spacing-07; + } +} + +:host(#{$prefix}-table-row[rows-with-slug]) { + .#{$prefix}--table-column-checkbox, + .#{$prefix}--table-expand { + padding-left: $spacing-08; + } +} + +:host(#{$prefix}-table-row[slug]) { + @include ai-gradient('left', 50%); + + background-attachment: fixed; +} + :host(#{$prefix}-table-header-title) { @extend .#{$prefix}--data-table-header__title; diff --git a/packages/carbon-web-components/src/components/data-table/_table-selection.scss b/packages/carbon-web-components/src/components/data-table/_table-selection.scss index 166915f35b7..ce07b59579f 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-selection.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-selection.scss @@ -71,3 +71,16 @@ :host(#{$prefix}-table-row[filtered]) { display: none !important; } + +:host(#{$prefix}-table-row[selected][slug]) { + .#{$prefix}--table-column-checkbox, + ::slotted(#{$prefix}-table-cell), + .#{$prefix}--table-expand, + .#{$prefix}--table-column-checkbox { + background-color: transparent; + } +} + +:host(#{$prefix}-table-row[selected][rows-with-slug]) { + background-color: $layer-selected; +} diff --git a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss index 310452f1989..3253a9a3b95 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss @@ -185,13 +185,6 @@ // // "selection" and "expandable" sizes // -:host(#{$prefix}-table-header-row[selection-name][expandable]), -:host(#{$prefix}-table-row[selection-name][expandable]) { - ::slotted(#{$prefix}-table-header-cell), - ::slotted(#{$prefix}-table-cell) { - padding-left: $spacing-03; - } -} :host(#{$prefix}-table-header-row[selection-name][expandable][size='xs']), :host(#{$prefix}-table-row[selection-name][expandable][size='xs']) { diff --git a/packages/carbon-web-components/src/components/data-table/_table-sort.scss b/packages/carbon-web-components/src/components/data-table/_table-sort.scss index 2e8e85233ee..ffdb9dfa50c 100644 --- a/packages/carbon-web-components/src/components/data-table/_table-sort.scss +++ b/packages/carbon-web-components/src/components/data-table/_table-sort.scss @@ -57,3 +57,10 @@ .#{$prefix}--table-sort__icon { transform: rotate(180deg); } + +:host(#{$prefix}-table-header-cell[sort-direction]) { + ::slotted(#{$prefix}-slug) { + margin-inline-end: auto; + margin-inline-start: $spacing-03; + } +} diff --git a/packages/carbon-web-components/src/components/data-table/data-table.scss b/packages/carbon-web-components/src/components/data-table/data-table.scss index bd0f26dacfa..43df227037a 100644 --- a/packages/carbon-web-components/src/components/data-table/data-table.scss +++ b/packages/carbon-web-components/src/components/data-table/data-table.scss @@ -14,6 +14,7 @@ $css--plex: true !default; @use '@carbon/styles/scss/spacing' as *; @use '@carbon/styles/scss/motion' as *; @use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/styles/scss/utilities/ai-gradient' as *; @use '@carbon/styles/scss/components/checkbox'; @use '@carbon/styles/scss/components/data-table' as *; diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts index 1931efbe5f4..33f20c918e7 100644 --- a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts +++ b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts @@ -9,6 +9,7 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32'; import ArrowDown32 from '@carbon/icons/lib/arrow--down/32'; import { prefix } from '../../globals/settings'; @@ -37,23 +38,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { * Handles `click` event on the sort button. * */ - private _handleClickSortButton() { - const nextSortDirection = this._getNextSort(); - const init = { - bubbles: true, - cancelable: true, - composed: true, - detail: { - oldSortDirection: this.sortDirection, - sortDirection: nextSortDirection, - }, - }; - const constructor = this.constructor as typeof CDSTableHeaderCell; + private _handleClickSortButton(event) { if ( - this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init)) + !(event.target as HTMLElement).matches( + (this.constructor as typeof CDSTableHeaderCell).slugItem + ) ) { - this.sortActive = true; - this.sortDirection = nextSortDirection; + const nextSortDirection = this._getNextSort(); + const init = { + bubbles: true, + cancelable: true, + composed: true, + detail: { + oldSortDirection: this.sortDirection, + sortDirection: nextSortDirection, + }, + }; + const constructor = this.constructor as typeof CDSTableHeaderCell; + if ( + this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init)) + ) { + this.sortActive = true; + this.sortDirection = nextSortDirection; + } } } @@ -65,6 +72,26 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { this.requestUpdate(); } + /** + * Handles `slotchange` event. + */ + protected _handleSlugSlotChange({ target }: Event) { + const hasContent = (target as HTMLSlotElement) + .assignedNodes() + .filter((elem) => + (elem as HTMLElement).matches !== undefined + ? (elem as HTMLElement).matches( + (this.constructor as typeof CDSTableHeaderCell).slugItem + ) + : false + ); + if (hasContent.length > 0) { + this._hasSlug = Boolean(hasContent); + (hasContent[0] as HTMLElement).setAttribute('size', 'mini'); + } + this.requestUpdate(); + } + /** * @returns The next sort direction. */ @@ -94,6 +121,11 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { return directions[(index + 1) % directions.length]; } + /** + * `true` if there is a slug. + */ + protected _hasSlug = false; + /** * `true` if the table has expandable rows */ @@ -149,10 +181,19 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { if (this.isSortable && !changedProperties.has('sortDirection')) { this.sortDirection = TABLE_SORT_DIRECTION.NONE; } + if (this._hasSlug) { + this.setAttribute('slug', ''); + } else { + this.removeAttribute('slug'); + } } render() { const { sortDirection } = this; + const labelClasses = classMap({ + [`${prefix}--table-header-label`]: true, + [`${prefix}--table-header-label--slug`]: this._hasSlug, + }); if (sortDirection) { const sortIcon = sortDirection === TABLE_SORT_DIRECTION.NONE @@ -170,14 +211,29 @@ class CDSTableHeaderCell extends FocusMixin(LitElement) { class="${prefix}--table-sort" title="${this.textContent}" @click=${this._handleClickSortButton}> - - ${sortIcon} + + + + ${sortIcon} + `; } - return html` `; + return html` + `; + } + + /** + * A selector that will return the slug item. + */ + static get slugItem() { + return `${prefix}-slug`; } /** diff --git a/packages/carbon-web-components/src/components/data-table/table-row.ts b/packages/carbon-web-components/src/components/data-table/table-row.ts index 76880bc1d6d..fa4902ab8b4 100644 --- a/packages/carbon-web-components/src/components/data-table/table-row.ts +++ b/packages/carbon-web-components/src/components/data-table/table-row.ts @@ -32,6 +32,11 @@ import CDSTableCell from './table-cell'; */ @customElement(`${prefix}-table-row`) class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) { + /** + * `true` if there is a slug. + */ + protected _hasSlug = false; + /** * Handles `click` event on the radio button. * @@ -169,15 +174,38 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) { const { _handleClickExpando: handleClickExpando } = this; return html`
- +
+ + +
`; } + /** + * Handles `slotchange` event. + */ + protected _handleSlotChange({ target }: Event) { + const hasContent = (target as HTMLSlotElement) + .assignedNodes() + .filter((elem) => + (elem as HTMLElement).matches !== undefined + ? (elem as HTMLElement).matches( + (this.constructor as typeof CDSTableRow).slugItem + ) + : false + ); + if (hasContent.length > 0) { + this._hasSlug = Boolean(hasContent); + (hasContent[0] as HTMLElement).setAttribute('size', 'mini'); + } + this.requestUpdate(); + } + /** * @returns The first set of table cells. */ @@ -195,17 +223,20 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) { ? undefined : html`
- ${radio - ? html`` - : html` `} +
+ + ${radio + ? html`` + : html` `} +
`; } @@ -349,6 +380,12 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) { (nextElementSibling as CDSTableExpandedRow).highlighted = highlighted; } } + + if (this._hasSlug) { + this.setAttribute('slug', ''); + } else { + this.removeAttribute('slug'); + } } render() { @@ -407,6 +444,13 @@ class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) { return `${prefix}-table-expanded-row`; } + /** + * A selector that will return the slug item. + */ + static get slugItem() { + return `${prefix}-slug`; + } + /** * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture. * Cancellation of this event stops the user-initiated action of toggling the expanded state. diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts index fa3095eae87..7b25c531bea 100644 --- a/packages/carbon-web-components/src/components/data-table/table.ts +++ b/packages/carbon-web-components/src/components/data-table/table.ts @@ -218,6 +218,12 @@ class CDSTable extends HostListenerMixin(LitElement) { @property({ type: Boolean, attribute: 'with-header', reflect: true }) withHeader; + /** + * true if slugs are added in the rows + */ + @property({ type: Boolean, attribute: 'with-row-slugs' }) + withRowSlugs = false; + private _handleSlotChange({ target }: Event) { const hasContent = (target as HTMLSlotElement) .assignedNodes() @@ -724,6 +730,18 @@ class CDSTable extends HostListenerMixin(LitElement) { ); (tableBody as any).useZebraStyles = this.useZebraStyles; } + + if (this.withRowSlugs) { + this._tableHeaderRow.setAttribute('rows-with-slug', ''); + this._tableRows.forEach((row) => { + row.setAttribute('rows-with-slug', ''); + }); + } else { + this._tableHeaderRow.removeAttribute('rows-with-slug'); + this._tableRows.forEach((row) => { + row.removeAttribute('rows-with-slug'); + }); + } } /* eslint-disable no-constant-condition */ diff --git a/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts b/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts new file mode 100644 index 00000000000..16af9651e5e --- /dev/null +++ b/packages/carbon-web-components/src/components/slug/slug-data-table-story.ts @@ -0,0 +1,600 @@ +/** + * @license + * + * Copyright IBM Corp. 2019, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { html } from 'lit'; +import View16 from '@carbon/icons/lib/view/16'; +import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; +import Folders16 from '@carbon/icons/lib/folders/16'; +import '../data-table/index'; + +const content = html` +
+

AI Explained

+

84%

+

Confidence score

+

+ Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut fsil labore et dolore magna aliqua. +

+
+

Model type

+

Foundation model

+
+`; + +const actions = html` + + ${View16({ slot: 'icon' })} + View + + + ${FolderOpen16({ slot: 'icon' })} + Open folder + + + ${Folders16({ slot: 'icon' })} + Folders + + View Literature +`; + +export default { + title: 'Experimental/Slug/DataTable', +}; + +export const _ColumnSlugSort = () => { + return html` + + DataTable + With expansion + + + + Name + Protocol + Port + Rule + Attached groups + ${content}${actions} + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + + + `; +}; + +export const _ColumnSlugWithSelectionAndExpansion = () => { + return html` + + DataTable + With sorting + + + + Name + Protocol + ${content}${actions} + + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; +}; + +export const _SlugWithExpansion = () => { + return html` + + DataTable + With sorting + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; +}; + +export const _SlugWithRadioSelection = () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + ${content}${actions} + + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + ${content}${actions} + + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + ${content}${actions} + + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + + + `; +}; + +export const SlugWithSelection = () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + + ${content}${actions} + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + + + `; +}; + +export const SlugWithSelectionAndExpansion = () => { + return html` + + DataTable + With selection + + + + Name + Protocol + Port + Rule + Attached groups + Status + + + + + Load Balancer 3 + HTTP + 3000 + Round robin + Kevin's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 1 + HTTP + 443 + Round robin + Maureen's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 2 + HTTP + 80 + DNS delegation + Andrew's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 6 + HTTP + 3000 + Round robin + Marc's VM Groups + Disabled + + +
Expandable row content
+
Description here
+ + + ${content}${actions} + Load Balancer 4 + HTTP + 443 + Round robin + Mel's VM Groups + Starting + + +
Expandable row content
+
Description here
+ + + Load Balancer 5 + HTTP + 80 + DNS delegation + Ronja's VM Groups + Active + + +
Expandable row content
+
Description here
+ + + + `; +}; diff --git a/packages/carbon-web-components/src/components/slug/slug-example-story.ts b/packages/carbon-web-components/src/components/slug/slug-example-story.ts index c196e0196eb..5da43c79d39 100644 --- a/packages/carbon-web-components/src/components/slug/slug-example-story.ts +++ b/packages/carbon-web-components/src/components/slug/slug-example-story.ts @@ -12,6 +12,7 @@ import { boolean } from '@storybook/addon-knobs'; import View16 from '@carbon/icons/lib/view/16'; import FolderOpen16 from '@carbon/icons/lib/folder--open/16'; import Folders16 from '@carbon/icons/lib/folders/16'; +import Asleep16 from '@carbon/icons/lib/asleep/16'; import textNullable from '../../../.storybook/knob-text-nullable'; import { prefix } from '../../globals/settings'; import './index'; @@ -409,6 +410,67 @@ export const _Select = () => { `; }; +const tagTypes = [ + 'red', + 'magenta', + 'purple', + 'blue', + 'cyan', + 'teal', + 'green', + 'gray', + 'cool-gray', + 'warm-gray', + 'high-contrast', + 'outline', +]; + +export const _Tag = () => { + return html` + +
+ ${tagTypes.map( + (e) => html`Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + ${Asleep16({ slot: 'icon' })} Tag + ${content}${actions} + ` + )} +
+ +
+ ${tagTypes.map( + (e) => + html` + ${Asleep16({ slot: 'icon' })} Tag + ${content}${actions} + ` + )} +
+ `; +}; + export const _TextInput = () => { return html`