@tempoxyz/ds 0.2.5 → 0.3.0

package/dist/web/components/Table.css

@@ -1 +1 @@
-.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-caption-side-0{caption-side:bottom}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-text-1{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-padding-block-2{padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-padding-inline-3{padding-inline:var(--z-tds_2f_web-spacing-16,1rem)}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-text-align-4{text-align:start}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-font-family-5{font-family:var(--z-tds_2f_web-typography-copy-13-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-font-size-6{font-size:var(--z-tds_2f_web-typography-copy-13-fontSize,13px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-font-weight-7{font-weight:var(--z-tds_2f_web-typography-copy-13-fontWeight,450)}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-letter-spacing-8{letter-spacing:var(--z-tds_2f_web-typography-copy-13-letterSpacing,-.04px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_caption-line-height-9{line-height:var(--z-tds_2f_web-typography-copy-13-lineHeight,18px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-box-sizing-0{box-sizing:border-box}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-1{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-h-2{height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-vertical-align-3{vertical-align:middle}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-align-4{&:where([data-justify=end]){text-align:end}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-align-5{&:where([data-justify=start]){text-align:start}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-font-family-6{&:where([data-mono=true]){font-family:var(--z-tds_2f_web-typography-copy-13-mono-fontFamily,"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-font-weight-7{&:where([data-mono=true]){font-weight:var(--z-tds_2f_web-typography-copy-13-mono-fontWeight,400)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-letter-spacing-8{&:where([data-mono=true]){letter-spacing:var(--z-tds_2f_web-typography-copy-13-mono-letterSpacing,0px)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-line-height-9{&:where([data-mono=true]){line-height:var(--z-tds_2f_web-typography-copy-13-mono-lineHeight,18px)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-font-size-10{&:where([data-mono=true]){font-size:var(--z-tds_2f_web-fontSize-14,.875rem)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-11{&:where([data-numeric=true]){color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-font-variant-numeric-12{&:where([data-numeric=true]){font-variant-numeric:tabular-nums}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-13{&:where([data-status=negative]){color:var(--z-tds_2f_web-color-red-900,light-dark(#cf2203,#f55c45))}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-14{&:where([data-status=positive]){color:var(--z-tds_2f_web-color-green-900,light-dark(#037c46,#59e5a4))}}.z-tds_2f_web-tds_2f_web_2f_table_2f_cell-text-15{&:where([data-status=warning]){color:var(--z-tds_2f_web-color-amber-900,light-dark(#a55008,#fa8e36))}}.z-tds_2f_web-tds_2f_web_2f_table_2f_head-bg-0{&:where([data-sticky=true]){& th{background-color:var(--z-tds_2f_web-color-background-surface,light-dark(#fff,#1a1919))}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_head-inset-block-start-1{&:where([data-sticky=true]){& th{inset-block-start:var(--z-tds_2f_web-spacing-0,0rem)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_head-position-2{&:where([data-sticky=true]){& th{position:sticky}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_head-z-index-3{&:where([data-sticky=true]){& th{z-index:1}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-text-0{color:var(--z-tds_2f_web-color-gray-900,light-dark(#4d4d4d,#bcbbbb))}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-font-family-1{font-family:var(--z-tds_2f_web-typography-label-14-strong-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-font-size-2{font-size:var(--z-tds_2f_web-typography-label-14-strong-fontSize,14px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-font-weight-3{font-weight:var(--z-tds_2f_web-typography-label-14-strong-fontWeight,500)}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-letter-spacing-4{letter-spacing:var(--z-tds_2f_web-typography-label-14-strong-letterSpacing,-.09px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_header_2d_cell-line-height-5{line-height:var(--z-tds_2f_web-typography-label-14-strong-lineHeight,20px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-collapse-0{border-collapse:separate}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-spacing-1{border-spacing:var(--z-tds_2f_web-spacing-0,0rem)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-text-2{color:var(--z-tds_2f_web-color-foreground,light-dark(#171717,#fff))}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-font-family-3{font-family:var(--z-tds_2f_web-typography-copy-14-fontFamily,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-font-size-4{font-size:var(--z-tds_2f_web-typography-copy-14-fontSize,14px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-font-weight-5{font-weight:var(--z-tds_2f_web-typography-copy-14-fontWeight,450)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-letter-spacing-6{letter-spacing:var(--z-tds_2f_web-typography-copy-14-letterSpacing,-.09px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-line-height-7{line-height:var(--z-tds_2f_web-typography-copy-14-lineHeight,20px)}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-w-8{width:100%}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-block-end-9{& tbody td{border-block-end:1px solid}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-color-10{& tbody td{border-color:var(--z-tds_2f_web-color-grayAlpha-200,light-dark(#00000014,#ffffff1a))}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-block-end-11{& tbody tr:last-child td{border-block-end:none}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-text-align-12{& tr>:last-child{text-align:end}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-border-block-end-13{&:where([data-dividers=false]){& tbody td{border-block-end:none}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-mask-image-14{&:where([data-fade=true]){mask-image:linear-gradient(#000 calc(100% - 4rem),#0000)}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-color-15{&:where([data-interactive=true]){& tbody tr{outline-color:#0000}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-offset-16{&:where([data-interactive=true]){& tbody tr{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-style-17{&:where([data-interactive=true]){& tbody tr{outline-style:solid}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-width-18{&:where([data-interactive=true]){& tbody tr{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-transition-duration-19{&:where([data-interactive=true]){& tbody tr{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-transition-property-20{&:where([data-interactive=true]){& tbody tr{transition-property:background-color,outline-color,outline-offset}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-transition-timing-function-21{&:where([data-interactive=true]){& tbody tr{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-bg-22{&:where([data-interactive=true]){& tbody tr:hover{background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-color-23{&:where([data-interactive=true]){& tbody tr:focus-visible{outline-color:var(--z-tds_2f_web-color-blue-700,#4471ed)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-outline-offset-24{&:where([data-interactive=true]){& tbody tr:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-cursor-25{&:where([data-interactive=true]){& tbody tr:is([tabindex],[role=button],[data-href]):hover{cursor:pointer}}}@media (prefers-reduced-motion:reduce){.z-tds_2f_web-tds_2f_web_2f_table_2f_root-transition-property-26{&:where([data-interactive=true]){& tbody tr{transition-property:background-color,outline-color}}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-padding-block-27{&:where([data-size=medium]){& :is(td,th){padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-h-28{&:where([data-size=medium]){& td{height:var(--z-tds_2f_web-spacing-40,2.5rem)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-padding-block-29{&:where([data-size=small]){& :is(td,th){padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-h-30{&:where([data-size=small]){& td{height:var(--z-tds_2f_web-spacing-32,2rem)}}}.z-tds_2f_web-tds_2f_web_2f_table_2f_root-bg-31{&:where([data-striped=true]){& tbody tr:nth-child(2n){background-color:var(--z-tds_2f_web-color-grayAlpha-100,light-dark(#0000000d,#ffffff12))}}}
+.z_tds_2f_web-Rk7BHL0{caption-side:bottom}.z_tds_2f_web-Rk7BHL1{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-Rk7BHL2{padding-block-end:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-Rk7BHL3{padding-block-start:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-Rk7BHL4{padding-inline:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-Rk7BHL5{text-align:start}.z_tds_2f_web-Rk7BHL6{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-Rk7BHL7{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-Rk7BHL8{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-Rk7BHL9{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-Rk7BHLa{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-Rk7BHLb{& :where(svg:not(:is(a,button) svg)){color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}}.z_tds_2f_web-Rk7BHLc{box-sizing:border-box}.z_tds_2f_web-Rk7BHLd{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-Rk7BHLe{height:var(--z-tds_2f_web-spacing-56,3.5rem)}.z_tds_2f_web-Rk7BHLf{padding-block:var(--z-tds_2f_web-spacing-12,.75rem)}.z_tds_2f_web-Rk7BHLg{padding-inline:var(--z-tds_2f_web-spacing-6,.375rem)}.z_tds_2f_web-Rk7BHLh{text-align:start}.z_tds_2f_web-Rk7BHLi{vertical-align:middle}.z_tds_2f_web-Rk7BHLj{&:where([data-justify=end]){text-align:end}}.z_tds_2f_web-Rk7BHLk{&:where([data-justify=start]){text-align:start}}.z_tds_2f_web-Rk7BHLl{&:where([data-mono=true]){font-family:var(--z-tds_2f_web-typography-mono-m1-fontFamily,var(--z-tds_2f_web-fontFamily-mono,"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace))}}.z_tds_2f_web-Rk7BHLm{&:where([data-mono=true]){font-weight:var(--z-tds_2f_web-typography-mono-m1-fontWeight,400)}}.z_tds_2f_web-Rk7BHLn{&:where([data-mono=true]){letter-spacing:var(--z-tds_2f_web-typography-mono-m1-letterSpacing,0px)}}.z_tds_2f_web-Rk7BHLo{&:where([data-mono=true]){line-height:var(--z-tds_2f_web-typography-mono-m1-lineHeight,16px)}}.z_tds_2f_web-Rk7BHLp{&:where([data-mono=true]){font-size:var(--z-tds_2f_web-fontSize-14,.875rem)}}.z_tds_2f_web-Rk7BHLq{&:where([data-muted=true]){color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}}.z_tds_2f_web-Rk7BHLr{&:where([data-numeric=true]){font-variant-numeric:tabular-nums}}.z_tds_2f_web-Rk7BHLs{&:where([data-status=negative]){color:var(--z-tds_2f_web-color-content-negative,var(--z-tds_2f_web-color-accent-red-background,light-dark(#eb3417,#f55c45)))}}.z_tds_2f_web-Rk7BHLt{&:where([data-status=positive]){color:var(--z-tds_2f_web-color-content-positive,var(--z-tds_2f_web-color-accent-green-background,light-dark(#13a963,#59e5a4)))}}.z_tds_2f_web-Rk7BHLu{&:where([data-status=warning]){color:var(--z-tds_2f_web-color-content-warning,var(--z-tds_2f_web-color-accent-orange-background,light-dark(#e06f12,#fa8e36)))}}.z_tds_2f_web-Rk7BHLv{&:where([data-sticky=true]){& th{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}}.z_tds_2f_web-Rk7BHLw{&:where([data-sticky=true]){& th{inset-block-start:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-Rk7BHLx{&:where([data-sticky=true]){& th{position:sticky}}}.z_tds_2f_web-Rk7BHLy{&:where([data-sticky=true]){& th{z-index:1}}}.z_tds_2f_web-Rk7BHLz{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-Rk7BHL10{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}.z_tds_2f_web-Rk7BHL11{padding-inline:var(--z-tds_2f_web-spacing-6,.375rem)}.z_tds_2f_web-Rk7BHL12{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-Rk7BHL13{transition-property:color}.z_tds_2f_web-Rk7BHL14{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-Rk7BHL15{font-family:var(--z-tds_2f_web-typography-body-b3Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-Rk7BHL16{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}.z_tds_2f_web-Rk7BHL17{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}.z_tds_2f_web-Rk7BHL18{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.15px)}.z_tds_2f_web-Rk7BHL19{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}.z_tds_2f_web-Rk7BHL1a{&:is([aria-sort=ascending],[aria-sort=descending]){color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}}.z_tds_2f_web-Rk7BHL1b{align-items:center}.z_tds_2f_web-Rk7BHL1c{background-color:var(--z-tds_2f_web-color-container-regular,light-dark(var(--z-tds_2f_web-color-neutral-shade-004,#0000000a),var(--z-tds_2f_web-color-neutral-tint-012,#ffffff1f)))}.z_tds_2f_web-Rk7BHL1d{border-radius:var(--z-tds_2f_web-radius-2xs,calc(.5rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-Rk7BHL1e{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}.z_tds_2f_web-Rk7BHL1f{display:inline-flex}.z_tds_2f_web-Rk7BHL1g{flex-shrink:0}.z_tds_2f_web-Rk7BHL1h{font-size:var(--z-tds_2f_web-fontSize-16,1rem)}.z_tds_2f_web-Rk7BHL1i{height:var(--z-tds_2f_web-spacing-32,2rem)}.z_tds_2f_web-Rk7BHL1j{justify-content:center}.z_tds_2f_web-Rk7BHL1k{width:var(--z-tds_2f_web-spacing-32,2rem)}.z_tds_2f_web-Rk7BHL1l{border-collapse:separate}.z_tds_2f_web-Rk7BHL1m{border-spacing:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-Rk7BHL1n{font-family:var(--z-tds_2f_web-typography-body-b2-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-Rk7BHL1o{font-size:var(--z-tds_2f_web-typography-body-b2-fontSize,14px)}.z_tds_2f_web-Rk7BHL1p{font-weight:var(--z-tds_2f_web-typography-body-b2-fontWeight,400)}.z_tds_2f_web-Rk7BHL1q{letter-spacing:var(--z-tds_2f_web-typography-body-b2-letterSpacing,.14px)}.z_tds_2f_web-Rk7BHL1r{line-height:var(--z-tds_2f_web-typography-body-b2-lineHeight,20px)}.z_tds_2f_web-Rk7BHL1s{width:100%}.z_tds_2f_web-Rk7BHL1t{& tr>:first-child{padding-inline-start:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-Rk7BHL1u{& tr>:last-child{padding-inline-end:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-Rk7BHL1v{& tr>:last-child:not([data-justify]){text-align:end}}.z_tds_2f_web-Rk7BHL1w{& td [data-intent]:not([data-intent] *){margin-block:var(--z-tds_2f_web-spacing-8,.5rem)}}.z_tds_2f_web-Rk7BHL1x{& tbody tr[aria-busy=true] [data-show]:after{display:none}}.z_tds_2f_web-Rk7BHL1y{&:where([data-dividers=true]){& tbody tr:not(:last-child){position:relative}}}.z_tds_2f_web-Rk7BHL1z{&:where([data-dividers=true]){& tbody tr:not(:last-child)>:is(td,th){border-block-end:1px solid #0000}}}.z_tds_2f_web-Rk7BHL20{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{background-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}}.z_tds_2f_web-Rk7BHL21{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{content:""}}}.z_tds_2f_web-Rk7BHL22{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{height:var(--z-tds_2f_web-spacing-1,1px)}}}.z_tds_2f_web-Rk7BHL23{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{inset-block-end:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-Rk7BHL24{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{inset-inline:var(--z-tds_2f_web-spacing-12,.75rem)}}}.z_tds_2f_web-Rk7BHL25{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{position:absolute}}}.z_tds_2f_web-Rk7BHL26{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}}.z_tds_2f_web-Rk7BHL27{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{transition-property:background-color}}}.z_tds_2f_web-Rk7BHL28{&:where([data-dividers=true]){& tbody tr:not(:last-child):after{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}}.z_tds_2f_web-Rk7BHL29{&:where([data-interactive=true]){& tbody tr{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}}.z_tds_2f_web-Rk7BHL2a{&:where([data-interactive=true]){& tbody tr{clip-path:inset(0 round 12px)}}}.z_tds_2f_web-Rk7BHL2b{&:where([data-interactive=true]){& tbody tr{outline-color:#0000}}}.z_tds_2f_web-Rk7BHL2c{&:where([data-interactive=true]){& tbody tr{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}}}.z_tds_2f_web-Rk7BHL2d{&:where([data-interactive=true]){& tbody tr{outline-style:solid}}}.z_tds_2f_web-Rk7BHL2e{&:where([data-interactive=true]){& tbody tr{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}}}.z_tds_2f_web-Rk7BHL2f{&:where([data-interactive=true]){& tbody tr{position:relative}}}.z_tds_2f_web-Rk7BHL2g{&:where([data-interactive=true]){& tbody tr{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}}}.z_tds_2f_web-Rk7BHL2h{&:where([data-interactive=true]){& tbody tr{transition-property:background-color,outline-color,outline-offset}}}.z_tds_2f_web-Rk7BHL2i{&:where([data-interactive=true]){& tbody tr{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}}.z_tds_2f_web-Rk7BHL2j{&:where([data-interactive=true]){& tbody tr:hover{background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}}.z_tds_2f_web-Rk7BHL2k{&:where([data-interactive=true]){& tbody tr:hover:after{animation:z-kid-tds_2f_web_2f_table_2f_fill .16s var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}}}.z_tds_2f_web-Rk7BHL2l{&:where([data-interactive=true]){& tbody tr:hover:after{background-color:var(--z-tds_2f_web-color-container-subtle,light-dark(var(--z-tds_2f_web-color-neutral-shade-003,#00000008),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}}.z_tds_2f_web-Rk7BHL2m{&:where([data-interactive=true]){& tbody tr:hover:after{border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}}.z_tds_2f_web-Rk7BHL2n{&:where([data-interactive=true]){& tbody tr:hover:after{content:""}}}.z_tds_2f_web-Rk7BHL2o{&:where([data-interactive=true]){& tbody tr:hover:after{height:auto}}}.z_tds_2f_web-Rk7BHL2p{&:where([data-interactive=true]){& tbody tr:hover:after{inset:var(--z-tds_2f_web-spacing-0,0rem)}}}.z_tds_2f_web-Rk7BHL2q{&:where([data-interactive=true]){& tbody tr:hover:after{position:absolute}}}.z_tds_2f_web-Rk7BHL2r{&:where([data-interactive=true]){& tbody tr:hover:after{transition-property:none}}}.z_tds_2f_web-Rk7BHL2s{&:where([data-interactive=true]){& tbody tr:hover:after{z-index:-1}}}.z_tds_2f_web-Rk7BHL2t{&:where([data-interactive=true]){& tbody tr:has(+tr:hover):after{background-color:#0000}}}.z_tds_2f_web-Rk7BHL2u{&:where([data-interactive=true]){& tbody tr:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}}.z_tds_2f_web-Rk7BHL2v{&:where([data-interactive=true]){& tbody tr:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-_2d_2,-2px)}}}.z_tds_2f_web-Rk7BHL2w{&:where([data-interactive=true]){& tbody tr:is([tabindex],[role=button],[data-href]):hover{cursor:pointer}}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-Rk7BHL2x{&:where([data-interactive=true]){& tbody tr{transition-property:background-color,outline-color}}}}.z_tds_2f_web-Rk7BHL2y{&:where([data-size=medium]){& td{height:var(--z-tds_2f_web-spacing-40,2.5rem)}}}.z_tds_2f_web-Rk7BHL2z{&:where([data-size=medium]){& td{padding-block:var(--z-tds_2f_web-spacing-8,.5rem)}}}.z_tds_2f_web-Rk7BHL30{&:where([data-size=small]){& :is(td,th){padding-block:var(--z-tds_2f_web-spacing-4,.25rem)}}}.z_tds_2f_web-Rk7BHL31{&:where([data-size=small]){& td{height:var(--z-tds_2f_web-spacing-32,2rem)}}}.z_tds_2f_web-Rk7BHL32{background-color:#0000}.z_tds_2f_web-Rk7BHL33{border:none}.z_tds_2f_web-Rk7BHL34{border-radius:var(--z-tds_2f_web-radius-3xs,calc(.25rem * var(--tds-corner-scale,1)))}.z_tds_2f_web-Rk7BHL35{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-Rk7BHL36{cursor:pointer}.z_tds_2f_web-Rk7BHL37{display:block}.z_tds_2f_web-Rk7BHL38{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-Rk7BHL39{outline-color:#0000}.z_tds_2f_web-Rk7BHL3a{outline-offset:var(--z-tds_2f_web-outlineOffset-0,0px)}.z_tds_2f_web-Rk7BHL3b{outline-style:solid}.z_tds_2f_web-Rk7BHL3c{outline-width:var(--z-tds_2f_web-outlineWidth-2,2px)}.z_tds_2f_web-Rk7BHL3d{padding:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-Rk7BHL3e{text-align:inherit}.z_tds_2f_web-Rk7BHL3f{transition-duration:var(--z-tds_2f_web-transitionDuration-160,.16s)}.z_tds_2f_web-Rk7BHL3g{transition-property:color,outline-color,outline-offset}.z_tds_2f_web-Rk7BHL3h{transition-timing-function:var(--z-tds_2f_web-ease-snappy,cubic-bezier(.23, 1, .32, 1))}.z_tds_2f_web-Rk7BHL3i{font-family:var(--z-tds_2f_web-typography-body-b3Strong-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-Rk7BHL3j{font-size:var(--z-tds_2f_web-typography-body-b3Strong-fontSize,12px)}.z_tds_2f_web-Rk7BHL3k{font-weight:var(--z-tds_2f_web-typography-body-b3Strong-fontWeight,500)}.z_tds_2f_web-Rk7BHL3l{letter-spacing:var(--z-tds_2f_web-typography-body-b3Strong-letterSpacing,.15px)}.z_tds_2f_web-Rk7BHL3m{line-height:var(--z-tds_2f_web-typography-body-b3Strong-lineHeight,16px)}.z_tds_2f_web-Rk7BHL3n{&:is(:hover,:focus-visible):not(:disabled),[aria-sort=ascending]>&,[aria-sort=descending]>&{color:var(--z-tds_2f_web-color-content-primary,light-dark(var(--z-tds_2f_web-color-neutral-100,#000),var(--z-tds_2f_web-color-neutral-000,#fff)))}}.z_tds_2f_web-Rk7BHL3o{&:disabled{cursor:default}}.z_tds_2f_web-Rk7BHL3p{&:focus-visible{outline-color:var(--z-tds_2f_web-color-border-focus,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-052,#ffffff85)))}}.z_tds_2f_web-Rk7BHL3q{&:focus-visible{outline-offset:var(--z-tds_2f_web-outlineOffset-2,2px)}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-Rk7BHL3r{transition-property:color,outline-color}}.z_tds_2f_web-Rk7BHL3s{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-Rk7BHL3t{display:none}.z_tds_2f_web-Rk7BHL3u{font-size:var(--z-tds_2f_web-fontSize-12,.75rem)}.z_tds_2f_web-Rk7BHL3v{opacity:.4}.z_tds_2f_web-Rk7BHL3w{transition-property:opacity,rotate}.z_tds_2f_web-Rk7BHL3x{:is(:hover,:focus-visible):not(:disabled)>*>&{display:block}}.z_tds_2f_web-Rk7BHL3y{:is([aria-sort=ascending],[aria-sort=descending])>*>*>&{display:block}}.z_tds_2f_web-Rk7BHL3z{:is([aria-sort=ascending],[aria-sort=descending])>*>*>&{opacity:1}}.z_tds_2f_web-Rk7BHL40{[aria-sort=ascending]>*>*>&{rotate:180deg}}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-Rk7BHL41{transition-property:opacity}}.z_tds_2f_web-Rk7BHL42{column-gap:var(--z-tds_2f_web-spacing-4,.25rem)}.z_tds_2f_web-Rk7BHL43{display:inline-flex}.z_tds_2f_web-Rk7BHL44{color:var(--z-tds_2f_web-color-content-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-056,#0000008f),var(--z-tds_2f_web-color-neutral-tint-056,#ffffff8f)))}.z_tds_2f_web-Rk7BHL45{margin-block-start:var(--z-tds_2f_web-spacing-2,.125rem)}.z_tds_2f_web-Rk7BHL46{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-Rk7BHL47{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-Rk7BHL48{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-Rk7BHL49{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-Rk7BHL4a{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}

package/dist/web/components/Table.d.ts

@@ -7,7 +7,13 @@ import type * as zyzz from 'zyzz';
  *
  * - Use it for tabular data only, never for layout.
  * - Name the table with `Table.Caption`, which renders below the rows.
- * - The last column aligns to the end. Set `justify="end"` on other numeric columns to match.
+ * - Each row pads its cells 12px at its edges and keeps 12px between their content.
+ * - The last column aligns to the end. Set `justify="end"` on other amount columns to match, or
+ *   `justify="start"` on a last cell to keep it at the start.
+ * - Set a second line in `Table.Subtitle`, and lead a cell with a `TokenLogo` or a
+ *   `Table.LeadTile`.
+ * - For a sortable column, set `aria-sort` on its `Table.HeaderCell` and put a `Table.SortButton`
+ *   in it.
  * - With `interactive`, make each clickable row reachable by keyboard through a link or button.
  *
  * @example
@@ -16,18 +22,24 @@ import type * as zyzz from 'zyzz';
  *   <Table.Head>
  *     <Table.Row>
  *       <Table.HeaderCell>Recipient</Table.HeaderCell>
- *       <Table.HeaderCell>Amount</Table.HeaderCell>
+ *       <Table.HeaderCell aria-sort="descending">
+ *         <Table.SortButton>Amount</Table.SortButton>
+ *       </Table.HeaderCell>
  *     </Table.Row>
  *   </Table.Head>
  *   <Table.Body>
  *     <Table.Row>
- *       <Table.Cell>Ada</Table.Cell>
- *       <Table.Cell numeric>120.00</Table.Cell>
+ *       <Table.Cell>
+ *         Ada
+ *         <Table.Subtitle>Rent</Table.Subtitle>
+ *       </Table.Cell>
+ *       <Table.Cell>120.00</Table.Cell>
  *     </Table.Row>
  *   </Table.Body>
  * </Table>
  *
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/table/ | WAI-ARIA APG Table pattern}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/ | WAI-ARIA APG Sortable Table example}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table | MDN table element}
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html | WCAG 2.2 Meaningful Sequence}
@@ -40,15 +52,21 @@ export declare namespace Table {
     namespace Body {
         type Props = ComponentPropsWithRef<'tbody'>;
     }
-    /** The table's accessible name, rendered as a `caption` below the rows. */
+    /**
+     * The table's accessible name, rendered as a `caption` below the rows, such as a note on hidden
+     * rows with an action. An icon in it takes the tertiary color, apart from the icons of its
+     * buttons and links.
+     */
     function Caption(props: Caption.Props): import("react").JSX.Element;
     namespace Caption {
         type Props = ComponentPropsWithRef<'caption'> & zyzz.Props.Variants<typeof styles.caption>;
     }
     /**
-     * A data cell. `numeric` sets tabular figures in the foreground color, `mono` sets monospace
-     * type, and `status` colors the text `negative`, `positive` or `warning`. Pair a status color
-     * with text that carries the same meaning.
+     * A data cell, with its text in the primary color. `muted` sets the text in the tertiary color,
+     * `status` colors it `negative`, `positive` or `warning`, `numeric` sets tabular figures, and
+     * `mono` sets monospace type. A `Table.Subtitle` keeps its own type and color. Pair a status
+     * color with text that carries the same meaning. A `StatusChip` in a cell sits 8px inside the
+     * edges of the cell's content.
      */
     function Cell(props: Cell.Props): import("react").JSX.Element;
     namespace Cell {
@@ -61,49 +79,84 @@ export declare namespace Table {
     }
     /**
      * A column header with `scope="col"` by default. Pass `scope="row"` for a row header. Its text
-     * renders in the `label.14.strong` set, heavier than the `copy.14` body cells.
+     * renders in the tertiary color and the smaller `body.b3Strong` set, apart from the primary
+     * `body.b2` body cells. `aria-sort="ascending"` or `"descending"` marks the sorted column and
+     * sets its text in the primary color.
      */
     function HeaderCell(props: HeaderCell.Props): import("react").JSX.Element;
     namespace HeaderCell {
         type Props = ComponentPropsWithRef<'th'> & zyzz.Props.Variants<typeof styles.headerCell>;
     }
     /**
-     * The `table` element and its row styles. `size` sets 32, 40 or 56px body rows. Pass
-     * `dividers={false}` to drop row separators. `striped` shades even rows, `fade` masks the bottom
-     * 4rem, and `interactive` adds row hover and focus-visible styles.
+     * A 32px rounded-square `span` that centers a 16px icon at the start of a cell, beside two lines
+     * of text. It adds no semantics, so the text beside it names the row.
+     */
+    function LeadTile(props: LeadTile.Props): import("react").JSX.Element;
+    namespace LeadTile {
+        type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.leadTile>;
+    }
+    /**
+     * The `table` element and its row styles. `size` sets 32, 40 or 56px body rows. Rows draw a
+     * divider inset by their padding, except the last one. Pass `dividers={false}` to drop the
+     * dividers, and `interactive` to fill a hovered row and outline a focus-visible one. An
+     * interactive table clips each body row to its 12px corners, so a popup in a cell renders in a
+     * portal.
      */
     function Root(props: Root.Props): import("react").JSX.Element;
     namespace Root {
         type Props = ComponentPropsWithRef<'table'> & zyzz.Props.Variants<typeof styles.root>;
     }
+    /** A row. `aria-busy` marks a row of `Skeleton` placeholders, which draw their fill alone. */
     function Row(props: Row.Props): import("react").JSX.Element;
     namespace Row {
         type Props = ComponentPropsWithRef<'tr'>;
     }
+    /**
+     * A `button` that fills its `Table.HeaderCell` and sorts the column, with a chevron after its
+     * label. The chevron shows at reduced opacity on hover and focus, and in full once the header
+     * cell sets `aria-sort="ascending"` or `"descending"`. It points up for an ascending sort. The
+     * button handles no sorting itself, so update `aria-sort` in its `onClick`.
+     */
+    function SortButton(props: SortButton.Props): import("react").JSX.Element;
+    namespace SortButton {
+        type Props = ComponentPropsWithRef<'button'> & zyzz.Props.Variants<typeof styles.sortButton>;
+    }
+    /** The second line of a cell, such as the token amount below a value, in secondary `body.b3`. */
+    function Subtitle(props: Subtitle.Props): import("react").JSX.Element;
+    namespace Subtitle {
+        type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.subtitle>;
+    }
 }
 declare namespace styles {
     const caption: zyzz.variants.ReturnType<{
         readonly base: {
             readonly captionSide: "bottom";
-            readonly color: "gray.900";
-            readonly paddingBlock: "12";
-            readonly paddingInline: "16";
+            readonly color: "content.secondary";
+            readonly paddingBlockEnd: "4";
+            readonly paddingBlockStart: "12";
+            readonly paddingInline: "12";
             readonly textAlign: "start";
-            readonly typography: "copy.13";
+            readonly typography: "body.b3";
+            readonly selectors: {
+                readonly '& :where(svg:not(:is(a, button) svg))': {
+                    readonly color: "content.tertiary";
+                };
+            };
         };
     }, "react">;
     const cell: zyzz.variants.ReturnType<{
         readonly base: {
             readonly boxSizing: "border-box";
-            readonly color: "gray.900";
+            readonly color: "content.primary";
             readonly height: "56";
             readonly paddingBlock: "12";
-            readonly paddingInline: "16";
+            readonly paddingInline: "6";
+            readonly textAlign: "start";
             readonly verticalAlign: "middle";
         };
         readonly defaultVariants: {
-            readonly justify: "start";
             readonly mono: false;
+            readonly muted: false;
             readonly numeric: false;
         };
         readonly variants: {
@@ -118,26 +171,31 @@ declare namespace styles {
             readonly mono: {
                 readonly false: {};
                 readonly true: {
-                    readonly typography: "copy.13.mono";
+                    readonly typography: "mono.m1";
                     readonly fontSize: "14";
                 };
             };
+            readonly muted: {
+                readonly false: {};
+                readonly true: {
+                    readonly color: "content.tertiary";
+                };
+            };
             readonly numeric: {
                 readonly false: {};
                 readonly true: {
-                    readonly color: "foreground";
                     readonly fontVariantNumeric: "tabular-nums !custom";
                 };
             };
             readonly status: {
                 readonly negative: {
-                    readonly color: "red.900";
+                    readonly color: "content.negative";
                 };
                 readonly positive: {
-                    readonly color: "green.900";
+                    readonly color: "content.positive";
                 };
                 readonly warning: {
-                    readonly color: "amber.900";
+                    readonly color: "content.warning";
                 };
             };
         };
@@ -153,7 +211,7 @@ declare namespace styles {
                 readonly true: {
                     readonly selectors: {
                         readonly '& th': {
-                            readonly backgroundColor: "background.surface";
+                            readonly backgroundColor: "background.elevated";
                             readonly insetBlockStart: "0";
                             readonly position: "sticky";
                             readonly zIndex: "1 !custom";
@@ -165,13 +223,19 @@ declare namespace styles {
     }, "react">;
     const headerCell: zyzz.variants.ReturnType<{
         readonly base: {
-            readonly color: "gray.900";
-            readonly paddingBlock: "12";
-            readonly paddingInline: "16";
-            readonly typography: "label.14.strong";
-        };
-        readonly defaultVariants: {
-            readonly justify: "start";
+            readonly color: "content.tertiary";
+            readonly paddingBlock: "8";
+            readonly paddingInline: "6";
+            readonly textAlign: "start";
+            readonly transitionDuration: "160";
+            readonly transitionProperty: "color";
+            readonly transitionTimingFunction: "snappy";
+            readonly typography: "body.b3Strong";
+            readonly selectors: {
+                readonly '&:is([aria-sort="ascending"], [aria-sort="descending"])': {
+                    readonly color: "content.primary";
+                };
+            };
         };
         readonly variants: {
             readonly justify: {
@@ -184,68 +248,97 @@ declare namespace styles {
             };
         };
     }, "react">;
+    const leadTile: zyzz.style.ReturnType<"react">;
     const root: zyzz.variants.ReturnType<{
         readonly base: {
             readonly borderCollapse: "separate";
             readonly borderSpacing: "0";
-            readonly color: "foreground";
-            readonly typography: "copy.14";
+            readonly color: "content.primary";
+            readonly typography: "body.b2";
             readonly width: "100% !custom";
             readonly selectors: {
-                readonly '& tbody td': {
-                    readonly borderBlockEnd: "1px solid !custom";
-                    readonly borderColor: "grayAlpha.200";
-                };
-                readonly '& tbody tr:last-child td': {
-                    readonly borderBlockEnd: "none !custom";
+                readonly '& tr > :first-child': {
+                    readonly paddingInlineStart: "12";
                 };
                 readonly '& tr > :last-child': {
+                    readonly paddingInlineEnd: "12";
+                };
+                readonly '& tr > :last-child:not([data-justify])': {
                     readonly textAlign: "end";
                 };
+                readonly '& td [data-intent]:not([data-intent] *)': {
+                    readonly marginBlock: "8";
+                };
+                readonly '& tbody tr[aria-busy="true"] [data-show]::after': {
+                    readonly display: "none";
+                };
             };
         };
         readonly defaultVariants: {
             readonly dividers: true;
-            readonly fade: false;
             readonly interactive: false;
             readonly size: "medium";
-            readonly striped: false;
         };
         readonly variants: {
             readonly dividers: {
-                readonly false: {
+                readonly false: {};
+                readonly true: {
                     readonly selectors: {
-                        readonly '& tbody td': {
-                            readonly borderBlockEnd: "none !custom";
+                        readonly '& tbody tr:not(:last-child)': {
+                            readonly position: "relative";
+                        };
+                        readonly '& tbody tr:not(:last-child) > :is(td, th)': {
+                            readonly borderBlockEnd: "1px solid transparent !custom";
+                        };
+                        readonly '& tbody tr:not(:last-child)::after': {
+                            readonly backgroundColor: "line.secondary";
+                            readonly content: "\"\" !custom";
+                            readonly height: "1";
+                            readonly insetBlockEnd: "0";
+                            readonly insetInline: "12";
+                            readonly position: "absolute";
+                            readonly transitionDuration: "160";
+                            readonly transitionProperty: "background-color";
+                            readonly transitionTimingFunction: "snappy";
                         };
                     };
                 };
-                readonly true: {};
-            };
-            readonly fade: {
-                readonly false: {};
-                readonly true: {
-                    readonly maskImage: "linear-gradient(to bottom, black calc(100% - 4rem), transparent) !custom";
-                };
             };
             readonly interactive: {
                 readonly false: {};
                 readonly true: {
                     readonly selectors: {
                         readonly '& tbody tr': {
+                            readonly borderRadius: "xs";
+                            readonly clipPath: "inset(0 round 12px) !custom";
                             readonly outlineColor: "transparent !custom";
                             readonly outlineOffset: "0";
                             readonly outlineStyle: "solid !custom";
                             readonly outlineWidth: "2";
+                            readonly position: "relative";
                             readonly transitionDuration: "160";
                             readonly transitionProperty: "background-color, outline-color, outline-offset";
                             readonly transitionTimingFunction: "snappy";
                         };
                         readonly '& tbody tr:hover': {
-                            readonly backgroundColor: "grayAlpha.100";
+                            readonly backgroundColor: "background.elevated";
+                        };
+                        readonly '& tbody tr:hover::after': {
+                            readonly animation: `${string} 160ms ${string} !custom`;
+                            readonly backgroundColor: "container.subtle";
+                            readonly borderRadius: "xs";
+                            readonly content: "\"\" !custom";
+                            readonly height: "auto !custom";
+                            readonly inset: "0";
+                            readonly position: "absolute";
+                            readonly transitionProperty: "none";
+                            readonly zIndex: "-1 !custom";
+                        };
+                        readonly '& tbody tr:has(+ tr:hover)::after': {
+                            readonly backgroundColor: "transparent !custom";
                         };
                         readonly '& tbody tr:focus-visible': {
-                            readonly outlineColor: "blue.700";
+                            readonly outlineColor: "border.focus";
                             readonly outlineOffset: "-2";
                         };
                         readonly '& tbody tr:is([tabindex], [role="button"], [data-href]):hover': {
@@ -265,11 +358,9 @@ declare namespace styles {
                 readonly large: {};
                 readonly medium: {
                     readonly selectors: {
-                        readonly '& :is(td, th)': {
-                            readonly paddingBlock: "8";
-                        };
                         readonly '& td': {
                             readonly height: "40";
+                            readonly paddingBlock: "8";
                         };
                     };
                 };
@@ -284,18 +375,12 @@ declare namespace styles {
                     };
                 };
             };
-            readonly striped: {
-                readonly false: {};
-                readonly true: {
-                    readonly selectors: {
-                        readonly '& tbody tr:nth-child(even)': {
-                            readonly backgroundColor: "grayAlpha.100";
-                        };
-                    };
-                };
-            };
         };
     }, "react">;
+    const sortButton: zyzz.style.ReturnType<"react">;
+    const sortIcon: zyzz.style.ReturnType<"react">;
+    const sortLabel: zyzz.style.ReturnType<"react">;
+    const subtitle: zyzz.style.ReturnType<"react">;
 }
 export {};
 //# sourceMappingURL=Table.d.ts.map

package/dist/web/components/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/web/components/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,+BAEvC;AAED,yBAAiB,KAAK,CAAC;IACrB,KAAY,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;IAE9B,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAErC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAA;KACnD;IAED,2EAA2E;IAC3E,SAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAI3C;IAED,UAAiB,OAAO,CAAC;QACvB,KAAY,KAAK,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAClD,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;KAC7C;IAED;;;;OAIG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BASrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAA;KAC1F;IAED,kGAAkG;IAClG,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAMrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAA;KAC7F;IAED;;;OAGG;IACH,SAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,+BAUjD;IAED,UAAiB,UAAU,CAAC;QAC1B,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,UAAU,CAAC,CAAA;KAChG;IAED;;;;OAIG;IACH,SAAgB,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,+BAoBrC;IAED,UAAiB,IAAI,CAAC;QACpB,KAAY,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAA;KAC7F;IAED,SAAgB,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,+BAEnC;IAED,UAAiB,GAAG,CAAC;QACnB,KAAY,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAA;KAChD;CACF;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,OAAO;;;;;;;;;eAYnB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BhB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;eAqBhB,CAAA;IAEM,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;eAetB,CAAA;IAEM,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAmFhB,CAAA;CACF"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/web/components/Table.tsx"],"names":[],"mappings":"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"}