@bitrise/bitkit-v2 0.3.372 → 0.3.373
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitTable/BitkitExpandableRow.js +30 -54
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -1
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js +28 -41
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -1
- package/dist/theme/slot-recipes/Table.recipe.d.ts +20 -7
- package/dist/theme/slot-recipes/Table.recipe.js +97 -14
- package/dist/theme/slot-recipes/Table.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +20 -7
- package/package.json +1 -1
|
@@ -1,66 +1,42 @@
|
|
|
1
1
|
import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
|
|
2
2
|
import { Box } from "@chakra-ui/react/box";
|
|
3
|
-
import { chakra } from "@chakra-ui/react/styled-system";
|
|
4
3
|
import { forwardRef } from "react";
|
|
5
4
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
6
5
|
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
7
|
-
import { Table } from "@chakra-ui/react/table";
|
|
6
|
+
import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
8
7
|
//#region lib/components/BitkitTable/BitkitExpandableRow.tsx
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
display: "flex",
|
|
21
|
-
justifyContent: "center",
|
|
22
|
-
padding: "12",
|
|
23
|
-
paddingInlineEnd: "4",
|
|
24
|
-
width: "full"
|
|
25
|
-
};
|
|
26
|
-
var expandedContentCss = {
|
|
27
|
-
paddingBlock: "16",
|
|
28
|
-
paddingInlineEnd: "16",
|
|
29
|
-
paddingInlineStart: "64"
|
|
30
|
-
};
|
|
31
|
-
var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
|
|
32
|
-
asChild: true,
|
|
33
|
-
defaultOpen,
|
|
34
|
-
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
|
|
35
|
-
ref,
|
|
36
|
-
children: [/* @__PURE__ */ jsx(Table.Cell, {
|
|
37
|
-
css: expandCellCss,
|
|
38
|
-
children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
|
|
39
|
-
asChild: true,
|
|
40
|
-
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
8
|
+
var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {
|
|
9
|
+
const styles = useTableStyles();
|
|
10
|
+
return /* @__PURE__ */ jsx(Collapsible.Root, {
|
|
11
|
+
asChild: true,
|
|
12
|
+
defaultOpen,
|
|
13
|
+
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
|
|
14
|
+
ref,
|
|
15
|
+
css: styles.expandableRow,
|
|
16
|
+
children: [/* @__PURE__ */ jsx(Table.Cell, {
|
|
17
|
+
css: styles.expandCell,
|
|
18
|
+
children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
|
|
41
19
|
"aria-label": "Toggle row details",
|
|
42
|
-
css:
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
css: styles.expandTrigger,
|
|
21
|
+
children: /* @__PURE__ */ jsx(Collapsible.Indicator, {
|
|
22
|
+
asChild: true,
|
|
23
|
+
children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/text" })
|
|
24
|
+
})
|
|
45
25
|
})
|
|
26
|
+
}), children]
|
|
27
|
+
}), /* @__PURE__ */ jsx(Table.Row, {
|
|
28
|
+
css: styles.expandedRow,
|
|
29
|
+
children: /* @__PURE__ */ jsx(Table.Cell, {
|
|
30
|
+
colSpan,
|
|
31
|
+
css: styles.expandedCell,
|
|
32
|
+
children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
|
|
33
|
+
css: styles.expandedContent,
|
|
34
|
+
children: expandedContent
|
|
35
|
+
}) })
|
|
46
36
|
})
|
|
47
|
-
})
|
|
48
|
-
})
|
|
49
|
-
|
|
50
|
-
children: /* @__PURE__ */ jsx(Table.Cell, {
|
|
51
|
-
colSpan,
|
|
52
|
-
css: {
|
|
53
|
-
paddingBlock: 0,
|
|
54
|
-
paddingInline: 0,
|
|
55
|
-
height: 0
|
|
56
|
-
},
|
|
57
|
-
children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
|
|
58
|
-
css: expandedContentCss,
|
|
59
|
-
children: expandedContent
|
|
60
|
-
}) })
|
|
61
|
-
})
|
|
62
|
-
})] })
|
|
63
|
-
}));
|
|
37
|
+
})] })
|
|
38
|
+
});
|
|
39
|
+
});
|
|
64
40
|
BitkitExpandableRow.displayName = "BitkitExpandableRow";
|
|
65
41
|
//#endregion
|
|
66
42
|
export { BitkitExpandableRow as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport {
|
|
1
|
+
{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n children: ReactNode;\n colSpan: number;\n defaultOpen?: boolean;\n expandedContent: ReactNode;\n}\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {\n const styles = useTableStyles();\n\n return (\n <Collapsible.Root asChild defaultOpen={defaultOpen}>\n <>\n <Table.Row ref={ref} css={styles.expandableRow}>\n <Table.Cell css={styles.expandCell}>\n <Collapsible.Trigger aria-label=\"Toggle row details\" css={styles.expandTrigger}>\n <Collapsible.Indicator asChild>\n <AssetSelectChevron color=\"button/secondary/text\" />\n </Collapsible.Indicator>\n </Collapsible.Trigger>\n </Table.Cell>\n {children}\n </Table.Row>\n <Table.Row css={styles.expandedRow}>\n <Table.Cell colSpan={colSpan} css={styles.expandedCell}>\n <Collapsible.Content>\n <Box css={styles.expandedContent}>{expandedContent}</Box>\n </Collapsible.Content>\n </Table.Cell>\n </Table.Row>\n </>\n </Collapsible.Root>\n );\n },\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;AAcA,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAAQ;CACpE,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,YAAY,MAAb;EAAkB,SAAA;EAAqB;EACrC,UAAA,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;GAAgB;GAAK,KAAK,OAAO;GAAjC,UAAA,CACE,oBAAC,MAAM,MAAP;IAAY,KAAK,OAAO;IACtB,UAAA,oBAAC,YAAY,SAAb;KAAqB,cAAW;KAAqB,KAAK,OAAO;KAC/D,UAAA,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,EAAoB,OAAM,wBAAyB,CAAA;KAC9B,CAAA;IACJ,CAAA;GACX,CAAA,GACX,QACQ;EACX,CAAA,GAAA,oBAAC,MAAM,KAAP;GAAW,KAAK,OAAO;GACrB,UAAA,oBAAC,MAAM,MAAP;IAAqB;IAAS,KAAK,OAAO;IACxC,UAAA,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAkB,UAAA;IAAqB,CAAA,EACrC,CAAA;GACX,CAAA;EACH,CAAA,CACX,EAAA,CAAA;CACc,CAAA;AAEtB,CACF;AAEA,oBAAoB,cAAc"}
|
|
@@ -1,31 +1,9 @@
|
|
|
1
1
|
import { chakra } from "@chakra-ui/react/styled-system";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { Icon } from "@chakra-ui/react/icon";
|
|
4
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { Table } from "@chakra-ui/react/table";
|
|
4
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Table, useTableStyles } from "@chakra-ui/react/table";
|
|
6
6
|
//#region lib/components/BitkitTable/BitkitSortableColumnHeader.tsx
|
|
7
|
-
var sortHeaderCss = {
|
|
8
|
-
paddingBlock: 0,
|
|
9
|
-
paddingInline: 0
|
|
10
|
-
};
|
|
11
|
-
var sortButtonCss = {
|
|
12
|
-
alignItems: "center",
|
|
13
|
-
appearance: "none",
|
|
14
|
-
background: "none",
|
|
15
|
-
border: "none",
|
|
16
|
-
color: "inherit",
|
|
17
|
-
cursor: "pointer",
|
|
18
|
-
display: "flex",
|
|
19
|
-
font: "inherit",
|
|
20
|
-
gap: "4",
|
|
21
|
-
height: "100%",
|
|
22
|
-
paddingBlock: "12",
|
|
23
|
-
paddingInline: "16",
|
|
24
|
-
userSelect: "none",
|
|
25
|
-
_focusVisible: { outlineOffset: "-3px" },
|
|
26
|
-
width: "100%",
|
|
27
|
-
_hover: { backgroundColor: "background/active" }
|
|
28
|
-
};
|
|
29
7
|
var SortIcon = forwardRef((props, ref) => {
|
|
30
8
|
const { direction, ...rest } = props;
|
|
31
9
|
const upFill = direction === "ascending" ? "currentColor" : "var(--sort-icon-inactive)";
|
|
@@ -57,23 +35,32 @@ var SortIcon = forwardRef((props, ref) => {
|
|
|
57
35
|
});
|
|
58
36
|
});
|
|
59
37
|
SortIcon.displayName = "SortIcon";
|
|
60
|
-
var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) =>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
38
|
+
var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => {
|
|
39
|
+
const styles = useTableStyles();
|
|
40
|
+
const isEndAligned = textAlign === "end";
|
|
41
|
+
const sortIcon = /* @__PURE__ */ jsx(SortIcon, { direction });
|
|
42
|
+
return /* @__PURE__ */ jsx(Table.ColumnHeader, {
|
|
43
|
+
ref,
|
|
44
|
+
"aria-sort": direction === "none" ? void 0 : direction,
|
|
45
|
+
css: styles.sortColumnHeader,
|
|
46
|
+
...rest,
|
|
47
|
+
children: /* @__PURE__ */ jsx(chakra.button, {
|
|
48
|
+
css: styles.sortTrigger,
|
|
49
|
+
justifyContent: isEndAligned ? "flex-end" : void 0,
|
|
50
|
+
onClick: onSort,
|
|
51
|
+
type: "button",
|
|
52
|
+
children: isEndAligned ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
53
|
+
sortIcon,
|
|
54
|
+
" ",
|
|
55
|
+
children
|
|
56
|
+
] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
57
|
+
children,
|
|
58
|
+
" ",
|
|
59
|
+
sortIcon
|
|
60
|
+
] })
|
|
61
|
+
})
|
|
62
|
+
});
|
|
63
|
+
});
|
|
77
64
|
BitkitSortableColumnHeader.displayName = "BitkitSortableColumnHeader";
|
|
78
65
|
//#endregion
|
|
79
66
|
export { BitkitSortableColumnHeader as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n direction: SortDirection;\n onSort: () => void;\n}\n\nconst
|
|
1
|
+
{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n direction: SortDirection;\n onSort: () => void;\n}\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n const { direction, ...rest } = props;\n const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n return (\n <Icon\n ref={ref}\n asChild\n css={{\n '--sort-icon-inactive': 'colors.icon/disabled',\n color: 'icon/primary',\n display: 'inline-block',\n verticalAlign: 'middle',\n }}\n {...rest}\n >\n <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n fill={upFill}\n />\n <path\n d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n fill={downFill}\n />\n </svg>\n </Icon>\n );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n ({ children, direction, onSort, textAlign, ...rest }, ref) => {\n const styles = useTableStyles();\n const isEndAligned = textAlign === 'end';\n const sortIcon = <SortIcon direction={direction} />;\n\n return (\n <Table.ColumnHeader\n ref={ref}\n aria-sort={direction === 'none' ? undefined : direction}\n css={styles.sortColumnHeader}\n {...rest}\n >\n {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n <chakra.button\n css={styles.sortTrigger}\n justifyContent={isEndAligned ? 'flex-end' : undefined}\n onClick={onSort}\n type=\"button\"\n >\n {isEndAligned ? (\n <>\n {sortIcon} {children}\n </>\n ) : (\n <>\n {children} {sortIcon}\n </>\n )}\n </chakra.button>\n </Table.ColumnHeader>\n );\n },\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QAAQ;CAC5D,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,WAAW,oBAAC,UAAD,EAAqB,UAAY,CAAA;CAElD,OACE,oBAAC,MAAM,cAAP;EACO;EACL,aAAW,cAAc,SAAS,KAAA,IAAY;EAC9C,KAAK,OAAO;EACZ,GAAI;EAGJ,UAAA,oBAAC,OAAO,QAAR;GACE,KAAK,OAAO;GACZ,gBAAgB,eAAe,aAAa,KAAA;GAC5C,SAAS;GACT,MAAK;GAEJ,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA;EAES,CAAA;CACG,CAAA;AAExB,CACF;AAEA,2BAA2B,cAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
|
|
1
|
+
declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2
2
|
variant: {
|
|
3
3
|
default: {
|
|
4
4
|
root: {
|
|
5
|
-
borderColor: "border/
|
|
5
|
+
borderColor: "border/regular";
|
|
6
6
|
borderRadius: "4";
|
|
7
7
|
borderStyle: "solid";
|
|
8
8
|
borderWidth: "1";
|
|
@@ -73,6 +73,9 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
73
73
|
marginBlockEnd: "24";
|
|
74
74
|
};
|
|
75
75
|
columnHeader: {
|
|
76
|
+
'& > :where(label):only-child': {
|
|
77
|
+
display: string;
|
|
78
|
+
};
|
|
76
79
|
borderBottomStyle: "solid";
|
|
77
80
|
borderBottomWidth: "1";
|
|
78
81
|
color: "text/primary";
|
|
@@ -82,14 +85,17 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
82
85
|
verticalAlign: "middle";
|
|
83
86
|
};
|
|
84
87
|
cell: {
|
|
85
|
-
borderBottomStyle: "solid";
|
|
86
|
-
borderBottomWidth: "1";
|
|
87
|
-
verticalAlign: "middle";
|
|
88
88
|
'tfoot &': {
|
|
89
89
|
borderBottomWidth: number;
|
|
90
90
|
borderTopStyle: "solid";
|
|
91
91
|
borderTopWidth: "1";
|
|
92
92
|
};
|
|
93
|
+
'& > :where(label):only-child': {
|
|
94
|
+
display: string;
|
|
95
|
+
};
|
|
96
|
+
borderBottomStyle: "solid";
|
|
97
|
+
borderBottomWidth: "1";
|
|
98
|
+
verticalAlign: "middle";
|
|
93
99
|
};
|
|
94
100
|
body: {
|
|
95
101
|
'& :where(tr)': {
|
|
@@ -112,7 +118,7 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
112
118
|
caption: {
|
|
113
119
|
display: "block";
|
|
114
120
|
padding: "16";
|
|
115
|
-
backgroundColor: "background/
|
|
121
|
+
backgroundColor: "background/secondary";
|
|
116
122
|
borderBottomColor: "border/minimal";
|
|
117
123
|
borderBottomStyle: "solid";
|
|
118
124
|
borderBottomWidth: "1";
|
|
@@ -152,9 +158,16 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
|
|
|
152
158
|
content: "attr(data-label)";
|
|
153
159
|
flexShrink: number;
|
|
154
160
|
fontWeight: "semibold";
|
|
155
|
-
|
|
161
|
+
marginInlineEnd: "16";
|
|
156
162
|
width: "96";
|
|
157
163
|
};
|
|
164
|
+
'tfoot &': {
|
|
165
|
+
display: "block";
|
|
166
|
+
paddingInline: number;
|
|
167
|
+
_before: {
|
|
168
|
+
content: "none";
|
|
169
|
+
};
|
|
170
|
+
};
|
|
158
171
|
};
|
|
159
172
|
footer: {
|
|
160
173
|
borderTopStyle: "solid";
|
|
@@ -2,9 +2,20 @@ import { rem } from "../themeUtils.js";
|
|
|
2
2
|
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
3
3
|
import { tableAnatomy } from "@chakra-ui/react/anatomy";
|
|
4
4
|
//#region lib/theme/slot-recipes/Table.recipe.ts
|
|
5
|
+
var controlOnlyCell = { "& > :where(label):only-child": { display: "flex" } };
|
|
5
6
|
var tableSlotRecipe = defineSlotRecipe({
|
|
6
7
|
className: "table",
|
|
7
|
-
slots:
|
|
8
|
+
slots: [
|
|
9
|
+
...tableAnatomy.keys(),
|
|
10
|
+
"expandCell",
|
|
11
|
+
"expandTrigger",
|
|
12
|
+
"expandableRow",
|
|
13
|
+
"expandedCell",
|
|
14
|
+
"expandedContent",
|
|
15
|
+
"expandedRow",
|
|
16
|
+
"sortColumnHeader",
|
|
17
|
+
"sortTrigger"
|
|
18
|
+
],
|
|
8
19
|
base: {
|
|
9
20
|
root: {
|
|
10
21
|
fontVariantNumeric: "lining-nums tabular-nums",
|
|
@@ -19,13 +30,71 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
19
30
|
cell: {
|
|
20
31
|
color: "text/body",
|
|
21
32
|
textStyle: "body/md/regular"
|
|
33
|
+
},
|
|
34
|
+
expandCell: {
|
|
35
|
+
paddingBlock: 0,
|
|
36
|
+
paddingInline: 0,
|
|
37
|
+
verticalAlign: "middle",
|
|
38
|
+
width: "48"
|
|
39
|
+
},
|
|
40
|
+
expandTrigger: {
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
background: "none",
|
|
43
|
+
border: "none",
|
|
44
|
+
cursor: "pointer",
|
|
45
|
+
display: "flex",
|
|
46
|
+
height: "32",
|
|
47
|
+
justifyContent: "center",
|
|
48
|
+
marginInlineStart: "12",
|
|
49
|
+
padding: 0,
|
|
50
|
+
width: "32"
|
|
51
|
+
},
|
|
52
|
+
expandableRow: { "& > td": { borderBottomWidth: 0 } },
|
|
53
|
+
expandedCell: {
|
|
54
|
+
height: 0,
|
|
55
|
+
paddingBlock: 0,
|
|
56
|
+
paddingInline: 0
|
|
57
|
+
},
|
|
58
|
+
expandedContent: {
|
|
59
|
+
borderBlockStartColor: "border/minimal",
|
|
60
|
+
borderBlockStartStyle: "solid",
|
|
61
|
+
borderBlockStartWidth: "1",
|
|
62
|
+
marginInlineEnd: "16",
|
|
63
|
+
marginInlineStart: "48",
|
|
64
|
+
paddingBlockEnd: "24",
|
|
65
|
+
paddingBlockStart: "16",
|
|
66
|
+
paddingInlineEnd: "16",
|
|
67
|
+
paddingInlineStart: "12"
|
|
68
|
+
},
|
|
69
|
+
expandedRow: { _hover: { background: "none" } },
|
|
70
|
+
sortColumnHeader: {
|
|
71
|
+
paddingBlock: 0,
|
|
72
|
+
paddingInline: 0
|
|
73
|
+
},
|
|
74
|
+
sortTrigger: {
|
|
75
|
+
alignItems: "center",
|
|
76
|
+
appearance: "none",
|
|
77
|
+
background: "none",
|
|
78
|
+
border: "none",
|
|
79
|
+
color: "inherit",
|
|
80
|
+
cursor: "pointer",
|
|
81
|
+
display: "flex",
|
|
82
|
+
font: "inherit",
|
|
83
|
+
gap: "8",
|
|
84
|
+
height: "full",
|
|
85
|
+
paddingBlock: "12",
|
|
86
|
+
paddingInline: "16",
|
|
87
|
+
userSelect: "none",
|
|
88
|
+
width: "full",
|
|
89
|
+
_focusVisible: { outlineOffset: "-3px" },
|
|
90
|
+
_hover: { backgroundColor: "background/active" }
|
|
22
91
|
}
|
|
23
92
|
},
|
|
24
93
|
variants: {
|
|
25
94
|
variant: {
|
|
26
95
|
default: {
|
|
27
96
|
root: {
|
|
28
|
-
borderColor: "border/
|
|
97
|
+
borderColor: "border/regular",
|
|
29
98
|
borderRadius: "4",
|
|
30
99
|
borderStyle: "solid",
|
|
31
100
|
borderWidth: "1",
|
|
@@ -80,12 +149,14 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
80
149
|
fontWeight: "bold",
|
|
81
150
|
textAlign: "start",
|
|
82
151
|
textStyle: "heading/h5",
|
|
83
|
-
verticalAlign: "middle"
|
|
152
|
+
verticalAlign: "middle",
|
|
153
|
+
...controlOnlyCell
|
|
84
154
|
},
|
|
85
155
|
cell: {
|
|
86
156
|
borderBottomStyle: "solid",
|
|
87
157
|
borderBottomWidth: "1",
|
|
88
158
|
verticalAlign: "middle",
|
|
159
|
+
...controlOnlyCell,
|
|
89
160
|
"tfoot &": {
|
|
90
161
|
borderBottomWidth: 0,
|
|
91
162
|
borderTopStyle: "solid",
|
|
@@ -105,7 +176,7 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
105
176
|
caption: {
|
|
106
177
|
display: "block",
|
|
107
178
|
padding: "16",
|
|
108
|
-
backgroundColor: "background/
|
|
179
|
+
backgroundColor: "background/secondary",
|
|
109
180
|
borderBottomColor: "border/minimal",
|
|
110
181
|
borderBottomStyle: "solid",
|
|
111
182
|
borderBottomWidth: "1"
|
|
@@ -141,8 +212,13 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
141
212
|
content: "attr(data-label)",
|
|
142
213
|
flexShrink: 0,
|
|
143
214
|
fontWeight: "semibold",
|
|
144
|
-
|
|
215
|
+
marginInlineEnd: "16",
|
|
145
216
|
width: "96"
|
|
217
|
+
},
|
|
218
|
+
"tfoot &": {
|
|
219
|
+
display: "block",
|
|
220
|
+
paddingInline: 0,
|
|
221
|
+
_before: { content: "none" }
|
|
146
222
|
}
|
|
147
223
|
},
|
|
148
224
|
footer: {
|
|
@@ -153,15 +229,22 @@ var tableSlotRecipe = defineSlotRecipe({
|
|
|
153
229
|
}
|
|
154
230
|
}
|
|
155
231
|
},
|
|
156
|
-
compoundVariants: [
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
232
|
+
compoundVariants: [
|
|
233
|
+
{
|
|
234
|
+
css: { row: { borderBottomColor: "border/regular" } },
|
|
235
|
+
layout: "stacked",
|
|
236
|
+
variant: "borderless"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
css: { cell: { height: "auto" } },
|
|
240
|
+
layout: "stacked"
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
css: { body: { "& :where(tr)": { _hover: { backgroundColor: "background/secondary" } } } },
|
|
244
|
+
layout: "table",
|
|
245
|
+
rowHover: true
|
|
246
|
+
}
|
|
247
|
+
],
|
|
165
248
|
defaultVariants: {
|
|
166
249
|
layout: "table",
|
|
167
250
|
rowHover: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: tableAnatomy.keys(),\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/minimal',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n },\n },\n body: {\n '& :where(tr)': {\n '&:has(input:checked), &[data-selected]': {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/tertiary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n paddingInlineEnd: '16',\n width: '96',\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n '& > :where(label):only-child': {\n display: 'flex',\n },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n className: 'table',\n slots: [\n ...tableAnatomy.keys(),\n 'expandCell',\n 'expandTrigger',\n 'expandableRow',\n 'expandedCell',\n 'expandedContent',\n 'expandedRow',\n 'sortColumnHeader',\n 'sortTrigger',\n ],\n base: {\n root: {\n fontVariantNumeric: 'lining-nums tabular-nums',\n textAlign: 'start',\n width: 'full',\n },\n caption: {\n captionSide: 'top !important',\n textAlign: 'start',\n '& > * + *': {\n marginBlockStart: '4',\n },\n },\n cell: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n },\n expandCell: {\n paddingBlock: 0,\n paddingInline: 0,\n verticalAlign: 'middle',\n width: '48',\n },\n // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n expandTrigger: {\n alignItems: 'center',\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n display: 'flex',\n height: '32',\n justifyContent: 'center',\n marginInlineStart: '12',\n padding: 0,\n width: '32',\n },\n expandableRow: {\n '& > td': {\n borderBottomWidth: 0,\n },\n },\n expandedCell: {\n height: 0,\n paddingBlock: 0,\n paddingInline: 0,\n },\n expandedContent: {\n borderBlockStartColor: 'border/minimal',\n borderBlockStartStyle: 'solid',\n borderBlockStartWidth: '1',\n marginInlineEnd: '16',\n marginInlineStart: '48',\n paddingBlockEnd: '24',\n paddingBlockStart: '16',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n expandedRow: {\n _hover: {\n background: 'none',\n },\n },\n sortColumnHeader: {\n paddingBlock: 0,\n paddingInline: 0,\n },\n sortTrigger: {\n alignItems: 'center',\n appearance: 'none',\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n font: 'inherit',\n gap: '8',\n height: 'full',\n paddingBlock: '12',\n paddingInline: '16',\n userSelect: 'none',\n width: 'full',\n _focusVisible: {\n outlineOffset: '-3px',\n },\n _hover: {\n backgroundColor: 'background/active',\n },\n },\n },\n variants: {\n variant: {\n default: {\n root: {\n borderColor: 'border/regular',\n borderRadius: '4',\n borderStyle: 'solid',\n borderWidth: '1',\n overflow: 'hidden',\n },\n header: {\n '& :where(th)': {\n backgroundColor: 'background/tertiary',\n },\n },\n columnHeader: {\n borderBottomColor: 'border/minimal',\n paddingBlock: '12',\n paddingInline: '16',\n },\n cell: {\n borderBottomColor: 'border/minimal',\n borderTopColor: 'border/minimal',\n paddingInline: '16',\n },\n footer: {\n borderTopColor: 'border/minimal',\n },\n },\n borderless: {\n columnHeader: {\n borderBottomColor: 'border/regular',\n padding: '12',\n },\n cell: {\n borderBottomColor: 'border/regular',\n borderTopColor: 'border/regular',\n paddingInline: '12',\n },\n footer: {\n borderTopColor: 'border/regular',\n },\n },\n },\n size: {\n sm: {\n cell: {\n height: '48',\n },\n },\n md: {\n cell: {\n height: rem(56),\n },\n },\n lg: {\n cell: {\n height: '64',\n },\n },\n },\n // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n // that the row is clickable, so it says nothing about the row being interactive — turn it off\n // for short, static tables where there is no place to lose.\n rowHover: {\n true: {},\n false: {},\n },\n layout: {\n table: {\n root: {\n borderCollapse: 'separate',\n borderSpacing: '0',\n },\n caption: {\n marginBlockEnd: '24',\n },\n columnHeader: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n color: 'text/primary',\n fontWeight: 'bold',\n textAlign: 'start',\n textStyle: 'heading/h5',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n },\n cell: {\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n verticalAlign: 'middle',\n ...controlOnlyCell,\n // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n // so the body/footer divider has to live on the footer's cells.\n 'tfoot &': {\n borderBottomWidth: 0,\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n },\n },\n body: {\n '& :where(tr)': {\n '&:has(input:checked), &[data-selected]': {\n backgroundColor: 'background/selected',\n _hover: {\n backgroundColor: 'background/selected',\n },\n },\n },\n '& :where(tr:last-child) td': {\n borderBottomWidth: 0,\n },\n },\n },\n stacked: {\n root: {\n display: 'block',\n },\n caption: {\n display: 'block',\n padding: '16',\n backgroundColor: 'background/secondary',\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n },\n header: {\n borderWidth: 0,\n clip: 'rect(0, 0, 0, 0)',\n height: '1',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n position: 'absolute',\n whiteSpace: 'nowrap',\n width: '1',\n },\n body: {\n display: 'block',\n },\n row: {\n borderBottomColor: 'border/minimal',\n borderBottomStyle: 'solid',\n borderBottomWidth: '1',\n display: 'block',\n paddingBlock: '12',\n '&:last-child': {\n borderBottomWidth: 0,\n },\n },\n cell: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '48',\n paddingInline: '16',\n _before: {\n alignSelf: 'center',\n color: 'text/primary',\n content: 'attr(data-label)',\n flexShrink: 0,\n fontWeight: 'semibold',\n marginInlineEnd: '16',\n width: '96',\n },\n 'tfoot &': {\n display: 'block',\n paddingInline: 0,\n _before: {\n content: 'none',\n },\n },\n },\n // display: block takes tfoot out of the table model, so a border on it does render here\n footer: {\n borderTopStyle: 'solid',\n borderTopWidth: '1',\n display: 'block',\n },\n },\n },\n },\n compoundVariants: [\n {\n css: {\n row: {\n borderBottomColor: 'border/regular',\n },\n },\n layout: 'stacked',\n variant: 'borderless',\n },\n // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n // regardless of declaration order — so only a compound variant can release it. Stacked cells\n // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n {\n css: {\n cell: {\n height: 'auto',\n },\n },\n layout: 'stacked',\n },\n // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n // renders rows as blocks and never tinted them.\n {\n css: {\n body: {\n '& :where(tr)': {\n _hover: {\n backgroundColor: 'background/secondary',\n },\n },\n },\n },\n layout: 'table',\n rowHover: true,\n },\n ],\n defaultVariants: {\n layout: 'table',\n rowHover: true,\n size: 'lg',\n variant: 'default',\n },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
|
|
@@ -2112,11 +2112,11 @@ declare const slotRecipes: {
|
|
|
2112
2112
|
};
|
|
2113
2113
|
};
|
|
2114
2114
|
}>;
|
|
2115
|
-
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
|
|
2115
|
+
table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
|
|
2116
2116
|
variant: {
|
|
2117
2117
|
default: {
|
|
2118
2118
|
root: {
|
|
2119
|
-
borderColor: "border/
|
|
2119
|
+
borderColor: "border/regular";
|
|
2120
2120
|
borderRadius: "4";
|
|
2121
2121
|
borderStyle: "solid";
|
|
2122
2122
|
borderWidth: "1";
|
|
@@ -2187,6 +2187,9 @@ declare const slotRecipes: {
|
|
|
2187
2187
|
marginBlockEnd: "24";
|
|
2188
2188
|
};
|
|
2189
2189
|
columnHeader: {
|
|
2190
|
+
'& > :where(label):only-child': {
|
|
2191
|
+
display: string;
|
|
2192
|
+
};
|
|
2190
2193
|
borderBottomStyle: "solid";
|
|
2191
2194
|
borderBottomWidth: "1";
|
|
2192
2195
|
color: "text/primary";
|
|
@@ -2196,14 +2199,17 @@ declare const slotRecipes: {
|
|
|
2196
2199
|
verticalAlign: "middle";
|
|
2197
2200
|
};
|
|
2198
2201
|
cell: {
|
|
2199
|
-
borderBottomStyle: "solid";
|
|
2200
|
-
borderBottomWidth: "1";
|
|
2201
|
-
verticalAlign: "middle";
|
|
2202
2202
|
'tfoot &': {
|
|
2203
2203
|
borderBottomWidth: number;
|
|
2204
2204
|
borderTopStyle: "solid";
|
|
2205
2205
|
borderTopWidth: "1";
|
|
2206
2206
|
};
|
|
2207
|
+
'& > :where(label):only-child': {
|
|
2208
|
+
display: string;
|
|
2209
|
+
};
|
|
2210
|
+
borderBottomStyle: "solid";
|
|
2211
|
+
borderBottomWidth: "1";
|
|
2212
|
+
verticalAlign: "middle";
|
|
2207
2213
|
};
|
|
2208
2214
|
body: {
|
|
2209
2215
|
'& :where(tr)': {
|
|
@@ -2226,7 +2232,7 @@ declare const slotRecipes: {
|
|
|
2226
2232
|
caption: {
|
|
2227
2233
|
display: "block";
|
|
2228
2234
|
padding: "16";
|
|
2229
|
-
backgroundColor: "background/
|
|
2235
|
+
backgroundColor: "background/secondary";
|
|
2230
2236
|
borderBottomColor: "border/minimal";
|
|
2231
2237
|
borderBottomStyle: "solid";
|
|
2232
2238
|
borderBottomWidth: "1";
|
|
@@ -2266,9 +2272,16 @@ declare const slotRecipes: {
|
|
|
2266
2272
|
content: "attr(data-label)";
|
|
2267
2273
|
flexShrink: number;
|
|
2268
2274
|
fontWeight: "semibold";
|
|
2269
|
-
|
|
2275
|
+
marginInlineEnd: "16";
|
|
2270
2276
|
width: "96";
|
|
2271
2277
|
};
|
|
2278
|
+
'tfoot &': {
|
|
2279
|
+
display: "block";
|
|
2280
|
+
paddingInline: number;
|
|
2281
|
+
_before: {
|
|
2282
|
+
content: "none";
|
|
2283
|
+
};
|
|
2284
|
+
};
|
|
2272
2285
|
};
|
|
2273
2286
|
footer: {
|
|
2274
2287
|
borderTopStyle: "solid";
|