@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs/components/select/daikin-select.d.cts

@@ -10,6 +10,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `daikin-input-group` > `daikin-select`
  *
  * @slot - A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.
+ * @slot left-icon - A slot for an icon to be placed to the left of the summary text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -40,18 +41,28 @@ export declare class DaikinSelect extends DDSElement {
      * Whether the select component is required.
      */
     required: boolean;
+    /**
+     * Whether the select is readonly.
+     */
+    readonly: boolean;
     /**
      * Whether the select component is disabled.
      * This value will also be applied to the `disabled` property of the `<select>` element in the slot.
      */
     disabled: boolean;
     private readonly _selects;
+    private _hasLeftIcon;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private _handleLeftIconSlotChange;
     private get _select();
+    /**
+     * Native <select> elements do not support the readonly attribute, so a custom controller is used to achieve a similar readonly behavior.
+     */
+    private readonly _readonlyController;
     private _updateSelect;
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs/components/slider/daikin-slider.cjs

@@ -24,10 +24,21 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaWrapper = classVarianceAuthority.cva(["relative", "w-full", "h-6"], {
   variants: {
     disabled: {
-      false: ["cursor-pointer"],
+      false: [],
+      true: []
+    },
+    readonly: {
+      false: [],
       true: []
     }
-  }
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      readonly: false,
+      class: ["cursor-pointer"]
+    }
+  ]
 });
 const cvaSliderThumb = classVarianceAuthority.cva(
   [
@@ -35,27 +46,42 @@ const cvaSliderThumb = classVarianceAuthority.cva(
     "top-1/2",
     "-translate-x-1/2",
     "-translate-y-1/2",
-    "w-4",
-    "h-4",
-    "rounded-full",
     "left-(--slider-ratio)"
   ],
   {
     variants: {
       disabled: {
         false: [
-          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
-          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
-          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
-          "data-dragging:bg-ddt-color-common-brand-press",
           "focus-visible:outline-solid",
           "focus-visible:outline-2",
           "focus-visible:outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus"
         ],
         true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
+      },
+      readonly: {
+        false: ["w-4", "h-4", "rounded-full"],
+        true: [
+          "w-1",
+          "h-3",
+          "rounded-xs",
+          "bg-ddt-color-common-neutral-default",
+          "pointer-events-none"
+        ]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: [
+          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
+          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
+          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
+          "data-dragging:bg-ddt-color-common-brand-press"
+        ]
+      }
+    ]
   }
 );
 const cvaSliderTrack = classVarianceAuthority.cva(
@@ -72,6 +98,10 @@ const cvaSliderTrack = classVarianceAuthority.cva(
       disabled: {
         false: ["bg-ddt-color-common-brand-default"],
         true: ["bg-ddt-color-common-border-empty"]
+      },
+      readonly: {
+        false: [],
+        true: ["bg-ddt-color-common-neutral-default"]
       }
     }
   }
@@ -80,6 +110,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
   constructor() {
     super();
     this.disabled = false;
+    this.readonly = false;
     this._dragging = false;
     this._sliderRef = ref_js.createRef();
     this._thumbRef = ref_js.createRef();
@@ -122,7 +153,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
   }
   // This function is called when an arrow key is pressed while the thumb is focused.
   _handleKeyDown(event) {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const value = sliderUtils.getValueByKeydown(this, event.key);
@@ -152,7 +183,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
   _startDrag(event) {
     var _a;
     event.preventDefault();
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const controller = new AbortController();
@@ -180,7 +211,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
   _startTouch(event) {
     var _a;
     event.preventDefault();
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const controller = new AbortController();
@@ -217,7 +248,10 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
     return lit.html`
       <span
         ${ref_js.ref(this._sliderRef)}
-        class=${cvaWrapper({ disabled: this.disabled })}
+        class=${cvaWrapper({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
         style="--slider-ratio:${progress}%"
         @mousedown=${this._startDrag}
         @touchstart=${this._startTouch}
@@ -225,10 +259,18 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
         <span
           class="w-full absolute top-1/2 -translate-y-1/2 left-0 h-1 bg-ddt-color-common-border-empty"
         ></span>
-        <span class=${cvaSliderTrack({ disabled: this.disabled })}></span>
+        <span
+          class=${cvaSliderTrack({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
+        ></span>
         <span
           ${ref_js.ref(this._thumbRef)}
-          class=${cvaSliderThumb({ disabled: this.disabled })}
+          class=${cvaSliderThumb({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
           tabindex=${this.disabled ? -1 : 0}
           role="slider"
           ?data-dragging=${this._dragging}
@@ -270,6 +312,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSlider.prototype, "disabled", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinSlider.prototype, "readonly", 2);
 __decorateClass([
   ddsProperty.property({
     type: String,

package/dist/cjs/components/slider/daikin-slider.d.cts

@@ -48,6 +48,10 @@ export declare class DaikinSlider extends DDSFormElement {
      * Specify the slider disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the slider is readonly.
+     */
+    readonly: boolean;
     /**
      * The aria-label of the slider.
      * You should specify this value based on the slider's use case, such as "air conditioner temperature".

package/dist/cjs/components/status-message/daikin-status-message.cjs

@@ -71,6 +71,7 @@ exports.DaikinStatusMessage = class DaikinStatusMessage extends ddsElement.DDSEl
   render() {
     return lit.html`
       <div
+        part="status-message"
         class=${cvaWrapper({ status: this.status, size: this.size })}
         role=${ifDefined_js.ifDefined(this.statusMessageRole ?? void 0)}
       >

package/dist/cjs/components/status-message/daikin-status-message.d.cts

@@ -2,6 +2,8 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * A status message is a concise UI component for displaying status feedback, notifications, or contextual information to users. It typically indicates success, warning, error, or other states, helping users quickly understand the current state or important updates in the interface.
  *
+ * @csspart status-message - CSS styles applied to the `status-message` part target the internal content container.
+ *
  * @example
  *
  * ```js

package/dist/cjs/components/table/daikin-table.cjs

@@ -25,11 +25,31 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const getColumnPartName = (key) => `column-${key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+const getRowPartName = (id) => `row-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
 const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
+const cvaTableHeaderCell = classVarianceAuthority.cva(["h-full", "p-0"], {
+  variants: {
+    hoverEnabled: {
+      false: [],
+      true: ["hover:bg-ddt-color-common-surface-hover"]
+    },
+    sortable: {
+      false: [],
+      true: [
+        "active:bg-ddt-color-common-surface-press",
+        "focus-within:outline-solid",
+        "focus-within:outline-2",
+        "focus-within:-outline-offset-2",
+        "focus-within:outline-ddt-color-common-border-focus"
+      ]
+    }
+  }
+});
 const cvaRow = classVarianceAuthority.cva(
   [
     "border-b",
-    "border-b-ddt-color-divider",
+    "border-b-(--ddc-table-border-color)",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
@@ -39,6 +59,7 @@ const cvaRow = classVarianceAuthority.cva(
     variants: {
       selected: {
         false: [
+          "bg-ddt-color-common-surface-default",
           "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-hover",
           "data-hover:bg-ddt-color-common-surface-hover"
         ],
@@ -58,6 +79,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     this.rows = [];
     this.selectable = false;
     this.sortable = false;
+    this.border = "underline";
+    this.stickyHeader = false;
     this.selection = [];
     this.sort = null;
     this.order = null;
@@ -156,12 +179,19 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
       this.headers,
       ({ key }) => key,
       ({ key, label, alignment, sortable }) => {
-        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        const isSortableHeader = this.sortable && sortable;
+        const isHeaderHoverEnabled = isSortableHeader;
+        const currentSort = isSortableHeader && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
         return lit.html`<th
-            class="h-full p-0"
+            class=${cvaTableHeaderCell({
+          hoverEnabled: isHeaderHoverEnabled,
+          sortable: isSortableHeader
+        })}
+            part=${`header cell ${getColumnPartName(String(key))}`}
             aria-sort=${ifDefined_js.ifDefined(currentSort)}
           >
             <slot
+              class="block h-full"
               name=${`header:${key}`}
               data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
@@ -169,7 +199,7 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
-                ?sortable=${this.sortable && sortable}
+                ?sortable=${isSortableHeader}
                 order=${ifDefined_js.ifDefined(currentSort && this.order)}
               >
                 ${label}
@@ -178,10 +208,20 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           </th>`;
       }
     );
-    const createRow = (item) => repeat_js.repeat(
+    const createRow = (item, isOddRow, isSelectedRow) => repeat_js.repeat(
       this.headers,
       ({ key }) => `${item.id}:${key}`,
-      ({ key, alignment }) => lit.html`<td class="h-full p-0">
+      ({ key, alignment }) => lit.html`<td
+            class="h-full p-0"
+            part=${[
+        "body",
+        "cell",
+        getRowPartName(String(item.id)),
+        getColumnPartName(String(key)),
+        isSelectedRow ? "selected" : null,
+        isOddRow ? "odd" : null
+      ].filter((partName) => !!partName).join(" ")}
+          >
             <slot name=${`cell:${item.id}:${key}`}>
               <daikin-table-cell alignment=${alignment ?? "left"}>
                 ${item[key]}
@@ -196,10 +236,13 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
         ?data-hover=${this._currentTouchHoverRowId != null}
       >
         <thead>
-          <tr class="border-b border-b-ddt-color-divider">
+          <tr
+            class="border-b border-b-(--ddc-table-border-color)"
+            part="header row"
+          >
             ${this.selectable ? lit.html`<td class="w-12 p-0">
                   <span
-                    class="flex items-center justify-center size-full min-h-12"
+                    class="flex items-center justify-center size-full min-h-(--dds-input-height)"
                   >
                     <daikin-checkbox
                       name="allItem"
@@ -228,16 +271,35 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           ${repeat_js.repeat(
       this._currentView,
       ({ id }) => id,
-      (row) => lit.html`<tr
+      (row, index) => {
+        const isOddRow = index % 2 === 0;
+        const isSelectedRow = this.selectable && this.selection.includes(row.id);
+        return lit.html`<tr
                 class=${cvaRow({
-        selected: this.selectable && !!this.selection.find((id) => id === row.id)
-      })}
+          selected: isSelectedRow
+        })}
+                part=${[
+          "body",
+          "row",
+          getRowPartName(String(row.id)),
+          isSelectedRow ? "selected" : null
+        ].filter((partName) => !!partName).join(" ")}
                 data-id=${row.id}
                 ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
-                ${this.selectable ? lit.html`<td class="w-12 p-0">
+                ${this.selectable ? lit.html`<td
+                      class="w-12 p-0"
+                      part=${[
+          "body",
+          "cell",
+          "checkbox-cell",
+          getRowPartName(String(row.id)),
+          isSelectedRow ? "selected" : null,
+          isOddRow ? "odd" : null
+        ].filter((partName) => !!partName).join(" ")}
+                    >
                       <span
-                        class="flex justify-center items-center size-full min-h-12"
+                        class="flex justify-center items-center size-full min-h-(--dds-input-height)"
                       >
                         <daikin-checkbox
                           name=${row.id}
@@ -248,8 +310,9 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
                         ></daikin-checkbox>
                       </span>
                     </td>` : lit.nothing}
-                ${createRow(row)}
-              </tr>`
+                ${createRow(row, isOddRow, isSelectedRow)}
+              </tr>`;
+      }
     )}
         </tbody>
       </table>
@@ -278,7 +341,25 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      overflow: auto;
+      overflow-x: auto;
+      overflow-y: visible;
+      --ddc-table-border-color: var(--dds-color-divider);
+    }
+
+    :host([border="none"]) {
+      --ddc-table-border-color: transparent;
+    }
+
+    :host([sticky-header]) {
+      overflow: visible;
+    }
+
+    :host([sticky-header]) thead tr > th,
+    :host([sticky-header]) thead tr > td {
+      position: sticky;
+      top: var(--table-sticky-header-top, 0px);
+      z-index: 1;
+      background-color: var(--dds-color-common-surface-default);
     }
   `;
 __decorateClass([
@@ -293,6 +374,17 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTable.prototype, "sortable", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "underline",
+    isAllowedValue: ddsProperty.oneOf(["none", "underline"])
+  })
+], exports.DaikinTable.prototype, "border", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "sticky-header" })
+], exports.DaikinTable.prototype, "stickyHeader", 2);
 __decorateClass([
   ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "selection", 2);

package/dist/cjs/components/table/daikin-table.d.cts

@@ -29,6 +29,21 @@ export type HeaderType<T extends string = string> = {
  * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
  * @slot empty - A slot to define the content displayed when the table rows are empty. Typically, the `daikin-empty-state` component can be used.
  *
+ * @csspart header - Targets the table header region.
+ * @csspart body - Targets the table body region.
+ * @csspart row - Targets all table rows.
+ * @csspart cell - Targets all table cells.
+ * @csspart row-${row.id} - Targets the specified body row.
+ * @csspart selected - Added to selected body rows and their body cells.
+ * @csspart odd - Added to body cells in odd-numbered rows (1st, 3rd, ...).
+ * @csspart checkbox-cell - Targets body cells in the selectable checkbox column.
+ * @csspart column-${header.key} - Targets both header and body cells for the specified column key. This is typically used to control a specific column's width and text wrapping. For example, you can allow the column to fit content by default, while enforcing min and max width: `daikin-table::part(column-name) { min-width: 12rem; max-width: 20rem; }` and optional truncation: `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+ *
+ * Background customization is also supported via CSS Parts. You can target an entire row (`row-${row.id} cell`), a specific column (`column-${header.key}`), or a row+column pair (`row-${row.id} column-${header.key}`), then apply design tokens for background colors. Example:
+ * `daikin-table::part(row-2 cell) { background-color: var(--dds-color-common-surface-danger-hover); }`
+ * `daikin-table::part(row-3 column-price) { background-color: var(--dds-color-common-warning); }`
+ * `daikin-table::part(row-2 cell):hover { background-color: var(--dds-color-common-surface-hover); }`
+ *
  * @example
  *
  * ```js
@@ -38,7 +53,32 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```html
- * <daikin-table>
+ * <!-- Column width can be set on the slotted <daikin-table-header-cell>, or via daikin-table::part(column-${headers[i].key}). -->
+ * <style>
+ *   daikin-table::part(column-price) {
+ *     min-width: 8rem;
+ *     max-width: 10rem;
+ *     white-space: nowrap;
+ *   }
+ *
+ *   .table-status-color-sample::part(row-3 column-price) {
+ *     background-color: var(--dds-color-common-warning);
+ *   }
+ *
+ *   .table-status-color-sample::part(row-2 row):hover {
+ *     --row-2-hover-bg: var(--dds-color-common-surface-danger-press);
+ *   }
+ *
+ *   .table-status-color-sample::part(row-2 cell) {
+ *     background-color: var(--row-2-hover-bg, var(--dds-color-common-surface-danger-hover));
+ *   }
+ * </style>
+ *
+ * <daikin-table class="table-status-color-sample">
+ *   <daikin-table-header-cell slot="header:name" style="min-width: 12rem; max-width: 20rem;">
+ *     Name
+ *   </daikin-table-header-cell>
+ *
  *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
  *   <daikin-table-cell slot="cell:1:name">
  *     Apple
@@ -118,6 +158,23 @@ export declare class DaikinTable<T extends {
      * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
+    /**
+     * The border style of the table row separators.
+     * - "none": Hide all table separator lines.
+     * - "underline": Show table separator lines.
+     *
+     * @default "underline"
+     */
+    border: "none" | "underline";
+    /**
+     * Whether to keep the header row fixed while the body scrolls.
+     *
+     * When `true`, header cells become sticky relative to this component's
+     * nearest scroll container. This works with page scrolling, and also works
+     * with internal scrolling when the host has a constrained height and
+     * `overflow: auto`.
+     */
+    stickyHeader: boolean;
     /**
      * An array of `id` values for the selected rows.
      * When controlling this property externally, listen to the `change-check` event and read the updated `selection` from the component to keep your state in sync.

package/dist/cjs/components/table-cell/daikin-table-cell.cjs

@@ -25,9 +25,9 @@ const cvaCell = classVarianceAuthority.cva(
     "gap-1",
     "justify-center",
     "size-full",
-    "min-h-12",
-    "px-4",
-    "py-3",
+    "px-(--dds-space-400)",
+    "py-(--dds-padding-30)",
+    "text-(length:--dds-font-size-label-text)",
     "text-ddt-color-common-text-primary",
     "natural-break"
   ],
@@ -58,7 +58,6 @@ exports.DaikinTableCell.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      min-height: 3rem;
     }
   `;
 __decorateClass([

package/dist/cjs/components/table-header-cell/daikin-table-header-cell.cjs

@@ -25,9 +25,10 @@ const cvaHeaderCell = classVarianceAuthority.cva(
     "items-center",
     "gap-2",
     "size-full",
-    "min-h-12",
-    "px-4",
-    "py-2",
+    "px-(--dds-space-400)",
+    "py-(--dds-padding-30)",
+    "text-(length:--dds-font-size-label-text)",
+    "leading-normal",
     "text-ddt-color-common-text-primary",
     "font-bold",
     "natural-break"
@@ -41,16 +42,7 @@ const cvaHeaderCell = classVarianceAuthority.cva(
       },
       sortable: {
         false: [],
-        true: [
-          "hover:bg-ddt-color-common-surface-hover",
-          "active:bg-ddt-color-common-surface-press",
-          "focus-visible:outline-solid",
-          "focus-visible:outline-2",
-          "focus-visible:-outline-offset-2",
-          "focus-visible:outline-ddt-color-common-border-focus",
-          "after:flex-none",
-          "after:size-6"
-        ]
+        true: ["after:flex-none", "after:size-(--dds-icon)"]
       },
       order: {
         asc: [],
@@ -93,20 +85,34 @@ exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.D
     (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
   }
   render() {
+    const rootNode = this.getRootNode();
+    const rootHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    const isInDaikinTable = !!this.closest("daikin-table") || (rootHost == null ? void 0 : rootHost.tagName) === "DAIKIN-TABLE";
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
       sortable: this.sortable,
       order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
+    const sortableInteractionCN = this.sortable && !isInDaikinTable ? "hover:bg-ddt-color-common-surface-hover active:bg-ddt-color-common-surface-press focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ddt-color-common-border-focus" : "";
+    const suppressNativeFocusRingCN = isInDaikinTable ? "focus:outline-none focus-visible:outline-none" : "";
     const content = lit.html`<slot
         name="left-icon"
-        class="flex-none slotted:flex-none icon-size-6"
+        class="flex-none slotted:flex-none icon-size-token"
       ></slot
       ><slot></slot>`;
     return this.sortable ? lit.html`<button
           ${ref_js.ref(this._focusableRef)}
           type="button"
-          class=${headerCellCN}
+          class=${[
+      headerCellCN,
+      sortableInteractionCN,
+      suppressNativeFocusRingCN
+    ].filter((className) => !!className).join(" ")}
+          @mousedown=${(event) => {
+      if (isInDaikinTable) {
+        event.preventDefault();
+      }
+    }}
           @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}
         >
           ${content}