@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/table/table-cell.svelte

@@ -0,0 +1,35 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let colSpan = void 0;
+export let rowSpan = void 0;
+export let align = void 0;
+export let width = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<td
+  style={stringifyStyles({
+    textAlign: align || "left",
+    ...(width
+      ? {
+          width: width,
+        }
+      : {}),
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-cell ${className || ""}`.trim()}
+  {colSpan}
+  {rowSpan}><slot /></td
+>

package/dist/web/table/table-cell.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteComponent } from "svelte";
+export interface TableCellProps {
+    /**
+     * Penyelarasan teks sel ('left' | 'center' | 'right').
+     * @default 'left'
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Lebar sel kustom.
+     */
+    width?: string;
+    /**
+     * Jumlah span kolom (colspan).
+     */
+    colSpan?: number;
+    /**
+     * Jumlah span baris (rowspan).
+     */
+    rowSpan?: number;
+    /**
+     * Kustomisasi visual granular td (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten di dalam sel tabel.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableCellProps["className"];
+        colSpan?: TableCellProps["colSpan"];
+        rowSpan?: TableCellProps["rowSpan"];
+        align?: TableCellProps["align"];
+        width?: TableCellProps["width"];
+        ui?: TableCellProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableCellProps_ = typeof __propDef.props;
+export type TableCellEvents = typeof __propDef.events;
+export type TableCellSlots = typeof __propDef.slots;
+export default class TableCell extends SvelteComponent<TableCellProps_, TableCellEvents, TableCellSlots> {
+}
+export {};

package/dist/web/table/table-empty.svelte

@@ -0,0 +1,56 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+export let colSpan = void 0;
+export let title = void 0;
+export let description = void 0;
+export let actionLabel = void 0;
+export let onAction = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<tr
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-row ttdk-table-empty-row ${className || ""}`.trim()}
+  ><td class="ttdk-table-cell" colSpan={colSpan || 10}
+    ><div class="ttdk-table-empty-wrapper">
+      {#if title || description}
+        <p class="ttdk-table-empty-title">
+          {title || "Tidak ada dataset yang cocok"}
+        </p>
+
+        {#if description}
+          <p class="ttdk-table-empty-desc">{description}</p>
+        {/if}
+
+        {#if actionLabel}
+          <button
+            type="button"
+            class="ttdk-table-empty-action"
+            on:click={(event) => {
+              if (onAction) {
+                onAction();
+              }
+            }}>{actionLabel}</button
+          >
+        {/if}
+        <slot />
+      {:else}
+        <slot />
+      {/if}
+    </div></td
+  ></tr
+>

package/dist/web/table/table-empty.svelte.d.ts

@@ -0,0 +1,65 @@
+import { SvelteComponent } from "svelte";
+export interface TableEmptyProps {
+    /**
+     * Jumlah span kolom (colspan).
+     * @default 10
+     */
+    colSpan?: number;
+    /**
+     * Judul pesan data kosong.
+     * @default 'Tidak ada dataset yang cocok'
+     */
+    title?: string;
+    /**
+     * Deskripsi penjelasan data kosong.
+     * @default 'Atur ulang filter atau ubah kata kunci pencarian.'
+     */
+    description?: string;
+    /**
+     * Teks tombol aksi reset / refresh.
+     * @default 'Atur ulang'
+     */
+    actionLabel?: string;
+    /**
+     * Callback ketika tombol aksi diklik.
+     */
+    onAction?: () => void;
+    /**
+     * Kustomisasi visual granular wadah tr empty (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten kustom di dalam wadah empty state.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableEmptyProps["className"];
+        ui?: TableEmptyProps["ui"];
+        colSpan?: TableEmptyProps["colSpan"];
+        title?: TableEmptyProps["title"];
+        description?: TableEmptyProps["description"];
+        actionLabel?: TableEmptyProps["actionLabel"];
+        onAction?: TableEmptyProps["onAction"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableEmptyProps_ = typeof __propDef.props;
+export type TableEmptyEvents = typeof __propDef.events;
+export type TableEmptySlots = typeof __propDef.slots;
+export default class TableEmpty extends SvelteComponent<TableEmptyProps_, TableEmptyEvents, TableEmptySlots> {
+}
+export {};

package/dist/web/table/table-footer.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<tfoot
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-footer ${className || ""}`.trim()}><slot /></tfoot
+>

package/dist/web/table/table-footer.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface TableFooterProps {
+    /**
+     * Kustomisasi visual granular tfoot (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten baris footer (TableRow).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableFooterProps["className"];
+        ui?: TableFooterProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableFooterProps_ = typeof __propDef.props;
+export type TableFooterEvents = typeof __propDef.events;
+export type TableFooterSlots = typeof __propDef.slots;
+export default class TableFooter extends SvelteComponent<TableFooterProps_, TableFooterEvents, TableFooterSlots> {
+}
+export {};

package/dist/web/table/table-head.svelte

@@ -0,0 +1,39 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let sortable = void 0;
+export let align = void 0;
+export let width = void 0;
+export let ui = void 0;
+export let onClick = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<th
+  style={stringifyStyles({
+    textAlign: align || "left",
+    ...(width
+      ? {
+          width: width,
+        }
+      : {}),
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-head ${className || ""}`.trim()}
+  data-sortable={sortable ? "true" : "false"}
+  on:click={(e) => {
+    if (onClick) {
+      onClick(e);
+    }
+  }}><slot /></th
+>

package/dist/web/table/table-head.svelte.d.ts

@@ -0,0 +1,58 @@
+import { SvelteComponent } from "svelte";
+export interface TableHeadProps {
+    /**
+     * Penyelarasan teks header ('left' | 'center' | 'right').
+     * @default 'left'
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Lebar kolom (misal: '120px', '25%').
+     */
+    width?: string;
+    /**
+     * Menandakan kolom dapat disortir secara interaktif.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Kustomisasi visual granular th (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Fungsi callback saat header kolom diklik.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Konten teks atau komponen di dalam header kolom.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableHeadProps["className"];
+        sortable?: TableHeadProps["sortable"];
+        align?: TableHeadProps["align"];
+        width?: TableHeadProps["width"];
+        ui?: TableHeadProps["ui"];
+        onClick?: TableHeadProps["onClick"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableHeadProps_ = typeof __propDef.props;
+export type TableHeadEvents = typeof __propDef.events;
+export type TableHeadSlots = typeof __propDef.slots;
+export default class TableHead extends SvelteComponent<TableHeadProps_, TableHeadEvents, TableHeadSlots> {
+}
+export {};

package/dist/web/table/table-header.svelte

@@ -0,0 +1,23 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<thead
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-header ${className || ""}`.trim()}><slot /></thead
+>

package/dist/web/table/table-header.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export interface TableHeaderProps {
+    /**
+     * Kustomisasi visual granular thead (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Konten baris header (TableRow).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableHeaderProps["className"];
+        ui?: TableHeaderProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableHeaderProps_ = typeof __propDef.props;
+export type TableHeaderEvents = typeof __propDef.events;
+export type TableHeaderSlots = typeof __propDef.slots;
+export default class TableHeader extends SvelteComponent<TableHeaderProps_, TableHeaderEvents, TableHeaderSlots> {
+}
+export {};

package/dist/web/table/table-row.svelte

@@ -0,0 +1,33 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let className = void 0;
+export let selected = void 0;
+export let hoverable = void 0;
+export let onClick = void 0;
+export let ui = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+</script>
+
+<tr
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  class={`ttdk-table-row ${className || ""}`.trim()}
+  data-selected={selected ? "true" : "false"}
+  data-hoverable={hoverable !== false ? "true" : "false"}
+  on:click={(e) => {
+    if (onClick) {
+      onClick(e);
+    }
+  }}><slot /></tr
+>

package/dist/web/table/table-row.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponent } from "svelte";
+export interface TableRowProps {
+    /**
+     * Menandai baris sebagai aktif / terpilih (selected).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Efek hover saat kursor melayang di atas baris.
+     */
+    hoverable?: boolean;
+    /**
+     * Kustomisasi visual granular tr (UiProps).
+     */
+    ui?: UiProps;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Fungsi callback saat baris diklik.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Konten sel (TableCell atau TableHead).
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        className?: TableRowProps["className"];
+        selected?: TableRowProps["selected"];
+        hoverable?: TableRowProps["hoverable"];
+        onClick?: TableRowProps["onClick"];
+        ui?: TableRowProps["ui"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type TableRowProps_ = typeof __propDef.props;
+export type TableRowEvents = typeof __propDef.events;
+export type TableRowSlots = typeof __propDef.slots;
+export default class TableRow extends SvelteComponent<TableRowProps_, TableRowEvents, TableRowSlots> {
+}
+export {};

package/dist/web/table/table.css

@@ -0,0 +1 @@
+.ttdk-table-wrapper{width:100%;font-family:var(--ttdk-font-sans);background:var(--ttdk-bg-card);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);--table-corner-radius:var(--ttdk-ui-border-radius,var(--ttdk-radius-sm,8px));border-radius:var(--table-corner-radius);box-shadow:var(--ttdk-shadow-sm);box-sizing:border-box;transition:background-color .2s,border-color .2s;position:relative;overflow:auto}.ttdk-table-wrapper[data-rounded=none]{--table-corner-radius:var(--ttdk-radius-none,0px)}.ttdk-table-wrapper[data-rounded=xs]{--table-corner-radius:var(--ttdk-radius-xs,6px)}.ttdk-table-wrapper[data-rounded=sm]{--table-corner-radius:var(--ttdk-radius-sm,8px)}.ttdk-table-wrapper[data-rounded=md]{--table-corner-radius:var(--ttdk-radius-md,12px)}.ttdk-table-wrapper[data-rounded=lg]{--table-corner-radius:var(--ttdk-radius-lg,16px)}.ttdk-table-wrapper[data-rounded=xl],.ttdk-table-wrapper[data-rounded=full]{--table-corner-radius:var(--ttdk-radius-xl,24px)}.ttdk-table-wrapper.rounded-none{--table-corner-radius:0px!important}.ttdk-table-wrapper.rounded-xs,.ttdk-table-wrapper.rounded-sm{--table-corner-radius:var(--ttdk-radius-xs,6px)!important}.ttdk-table-wrapper.rounded,.ttdk-table-wrapper.rounded-md{--table-corner-radius:var(--ttdk-radius-sm,8px)!important}.ttdk-table-wrapper.rounded-lg{--table-corner-radius:var(--ttdk-radius-md,12px)!important}.ttdk-table-wrapper.rounded-xl{--table-corner-radius:var(--ttdk-radius-lg,16px)!important}.ttdk-table-wrapper.rounded-2xl{--table-corner-radius:var(--ttdk-radius-xl,24px)!important}.ttdk-table-wrapper[data-shadow=none]{box-shadow:none}.ttdk-table-wrapper[data-shadow=sm]{box-shadow:var(--ttdk-shadow-sm)}.ttdk-table-wrapper[data-shadow=md]{box-shadow:var(--ttdk-shadow-md)}.ttdk-table-wrapper[data-shadow=lg]{box-shadow:var(--ttdk-shadow-lg)}.dark .ttdk-table-wrapper[data-shadow=none]{box-shadow:none}.dark .ttdk-table-wrapper[data-shadow=sm]{box-shadow:var(--ttdk-shadow-sm)}.dark .ttdk-table-wrapper[data-shadow=md]{box-shadow:var(--ttdk-shadow-md)}.dark .ttdk-table-wrapper[data-shadow=lg]{box-shadow:var(--ttdk-shadow-lg)}.ttdk-table-wrapper.shadow-none{box-shadow:none!important}.ttdk-table-wrapper.shadow-sm,.ttdk-table-wrapper.shadow{box-shadow:var(--ttdk-shadow-sm)!important}.ttdk-table-wrapper.shadow-md{box-shadow:var(--ttdk-shadow-md)!important}.ttdk-table-wrapper.shadow-lg,.ttdk-table-wrapper.shadow-xl{box-shadow:var(--ttdk-shadow-lg)!important}.dark .ttdk-table-wrapper{background:var(--ttdk-bg-card);border-color:var(--ttdk-stroke-subtle);box-shadow:var(--ttdk-shadow-sm)}.ttdk-table-loading-overlay{background:color-mix(in srgb, var(--ttdk-bg-card) 75%, transparent);z-index:10;backdrop-filter:blur(2px);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dark .ttdk-table-loading-overlay{background:color-mix(in srgb, var(--ttdk-bg-card) 75%, transparent)}.ttdk-table-spinner{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;width:24px;height:24px;color:var(--ttdk-brand-default);animation:1.2s steps(12,end) infinite ttdk-table-spin}.ttdk-table-wrapper[data-size=sm] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=sm]) .ttdk-table-spinner{width:18px;height:18px}.ttdk-table-wrapper[data-size=md] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=md]) .ttdk-table-spinner{width:24px;height:24px}.ttdk-table-wrapper[data-size=lg] .ttdk-table-spinner,.ttdk-table-wrapper:has(.ttdk-table[data-size=lg]) .ttdk-table-spinner{width:32px;height:32px}@keyframes ttdk-table-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ttdk-table{caption-side:bottom;border-collapse:collapse;text-align:left;width:100%;font-size:13px;line-height:1.5}.ttdk-table-wrapper[data-variant=clean],.ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]){box-shadow:none;background:0 0;border:none;border-radius:0}.dark .ttdk-table-wrapper[data-variant=clean],.dark .ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]){box-shadow:none;background:0 0;border:none}.ttdk-table-wrapper[data-variant=clean] .ttdk-table-header,.ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]) .ttdk-table-header,.dark .ttdk-table-wrapper[data-variant=clean] .ttdk-table-header,.dark .ttdk-table-wrapper:has(.ttdk-table[data-variant=clean]) .ttdk-table-header{background:0 0}.ttdk-table[data-variant=clean]{border:none}.ttdk-table[data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper[data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head{z-index:10;background:var(--ttdk-bg-secondary-disabled);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle);position:sticky;top:0}.dark .ttdk-table[data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head{background:var(--ttdk-bg-secondary-disabled);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle)}.ttdk-table-wrapper[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.ttdk-table-wrapper[data-variant=clean]:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head,.ttdk-table[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-variant=clean][data-sticky-header=true] .ttdk-table-head,.dark .ttdk-table-wrapper[data-variant=clean]:has(.ttdk-table[data-sticky-header=true]) .ttdk-table-head,.dark .ttdk-table[data-variant=clean][data-sticky-header=true] .ttdk-table-head{background:var(--ttdk-bg-card);box-shadow:inset 0 -1px 0 var(--ttdk-stroke-subtle)}.ttdk-table[data-size=sm] th,.ttdk-table[data-size=sm] td{padding:8px 12px;font-size:12px}.ttdk-table[data-size=md] th,.ttdk-table[data-size=md] td{padding:14px 16px;font-size:13px}.ttdk-table[data-size=lg] th,.ttdk-table[data-size=lg] td{padding:18px 20px;font-size:14px}.ttdk-table-header{background:var(--ttdk-bg-secondary-disabled);border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle)}.dark .ttdk-table-header{background:var(--ttdk-bg-secondary-disabled);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-head{height:44px;color:var(--ttdk-text-icon-secondary);letter-spacing:.2px;vertical-align:middle;border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);white-space:nowrap;user-select:none;padding:12px 16px;font-size:12px;font-weight:600;transition:background-color .15s,color .15s}.dark .ttdk-table-head{color:var(--ttdk-text-icon-secondary);border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-head[data-sortable=true]{cursor:pointer}.ttdk-table-head[data-sortable=true]:hover,.dark .ttdk-table-head[data-sortable=true]:hover{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary)}.ttdk-th-inner{align-items:center;gap:6px;display:inline-flex}.ttdk-table-body{border-bottom:0}.ttdk-table-row{border-bottom:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);transition:background-color .15s}.dark .ttdk-table-row{border-bottom-color:var(--ttdk-stroke-subtle)}.ttdk-table-row:last-child{border-bottom:none}.ttdk-table[data-hoverable=true] .ttdk-table-row:hover,.ttdk-table-row[data-hoverable=true]:hover,.dark .ttdk-table[data-hoverable=true] .ttdk-table-row:hover,.dark .ttdk-table-row[data-hoverable=true]:hover,.ttdk-table[data-variant=striped] .ttdk-table-body .ttdk-table-row:nth-child(2n),.dark .ttdk-table[data-variant=striped] .ttdk-table-body .ttdk-table-row:nth-child(2n){background:var(--ttdk-bg-secondary-disabled)}.ttdk-table-row[data-selected=true]{background:var(--ttdk-bg-status-info-subtle)!important}.dark .ttdk-table-row[data-selected=true]{background:var(--ttdk-color-blue-900)!important}.ttdk-table-cell{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));vertical-align:middle;padding:14px 16px}.dark .ttdk-table-cell{color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-table-footer{background:var(--ttdk-bg-secondary-disabled);border-top:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary));font-weight:500}.dark .ttdk-table-footer{background:var(--ttdk-bg-secondary-disabled);border-top-color:var(--ttdk-stroke-subtle);color:var(--ttdk-ui-color,var(--ttdk-text-icon-primary))}.ttdk-table-caption{color:var(--ttdk-text-icon-secondary);text-align:center;margin-top:12px;padding:0 16px 12px;font-size:12px}.dark .ttdk-table-caption{color:var(--ttdk-text-icon-secondary)}.ttdk-table-empty-wrapper{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:56px 24px;display:flex}.ttdk-table-empty-title{color:var(--ttdk-text-icon-primary);margin:0;font-size:14px;font-weight:700}.dark .ttdk-table-empty-title{color:var(--ttdk-text-icon-primary)}.ttdk-table-empty-desc{color:var(--ttdk-text-icon-secondary);margin:4px 0 0;font-size:12px}.dark .ttdk-table-empty-desc{color:var(--ttdk-text-icon-secondary)}.ttdk-table-empty-action{color:var(--ttdk-brand-default);cursor:pointer;border-radius:var(--ttdk-radius-input-sm);background:0 0;border:none;margin-top:12px;padding:4px 8px;font-size:13px;font-weight:600;transition:color .15s}.ttdk-table-empty-action:hover{text-decoration:underline}.dark .ttdk-table-empty-action{color:var(--ttdk-brand-default)}.ttdk-cell-title-group{flex-direction:column;gap:2px;display:flex}.ttdk-cell-main-title{color:var(--ttdk-text-icon-primary);font-size:13px;font-weight:600}.dark .ttdk-cell-main-title{color:var(--ttdk-text-icon-primary)}.ttdk-cell-subtitle{color:var(--ttdk-text-icon-secondary);font-size:11px}.dark .ttdk-cell-subtitle{color:var(--ttdk-text-icon-secondary)}.ttdk-format-badges{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ttdk-format-tag{border-radius:var(--ttdk-radius-input-sm);background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);padding:2px 6px;font-size:11px;font-weight:600}.dark .ttdk-format-tag{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-primary)}.ttdk-view-count{color:var(--ttdk-text-icon-secondary);align-items:center;gap:6px;font-size:12px;display:flex}.dark .ttdk-view-count{color:var(--ttdk-text-icon-secondary)}.ttdk-btn-fav{border-radius:var(--ttdk-radius-xs);border:var(--ttdk-stroke-width-thin) solid var(--ttdk-stroke-subtle);width:32px;height:32px;color:var(--ttdk-text-icon-secondary);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.ttdk-btn-fav:hover{background:var(--ttdk-bg-secondary-disabled);border-color:var(--ttdk-stroke-strong)}.dark .ttdk-btn-fav{border-color:var(--ttdk-stroke-subtle);color:var(--ttdk-text-icon-secondary)}.dark .ttdk-btn-fav:hover{background:var(--ttdk-bg-secondary-disabled);color:var(--ttdk-text-icon-primary)}.ttdk-btn-fav.active{background:var(--ttdk-brand-default);border-color:var(--ttdk-brand-default);color:var(--ttdk-color-neutral-white)}