@lobehub/ui 5.62.1 → 5.63.1

package/es/base-ui/Table/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Table/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/** Own prefix so rc-table classNames never collide with antd's global `.ant-table` CSS. */\nexport const PREFIX_CLS = 'lobe-table';\n\nconst p = `.${PREFIX_CLS}`;\n\n// Cell padding comes from the size class through these vars, so title / footer / expanded rows\n// can reuse (and negate) it.\nconst PADDING_BLOCK = '--lobe-table-padding-block';\nconst PADDING_INLINE = '--lobe-table-padding-inline';\n\n// Matches antd's `zIndexTableFixed`.\nconst Z_FIXED = 2;\n\n// antd `expandColumnWidth`; nested tables start after it.\nexport const EXPAND_COLUMN_WIDTH = 48;\n\n// antd `selectionColumnWidth`, plus the `selections` trigger when there is one.\nexport const SELECTION_COLUMN_WIDTH = 32;\nexport const SELECTION_DROPDOWN_WIDTH = 24;\n\n/** Rows of this table's own sections only, so the rules never leak into nested tables. */\nconst ownRows = ['content', 'header', 'body', 'summary']\n  .map((section) => `& > ${p}-container > ${p}-${section} > table > * > tr`)\n  .join(', ');\nconst ownCells = (cell: string) =>\n  ownRows\n    .split(', ')\n    .map((row) => `${row} > ${cell}`)\n    .join(', ');\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  const border = `1px solid ${cssVar.colorBorderSecondary}`;\n  const fixShadowBase = `\n    pointer-events: none;\n    content: '';\n    position: absolute;\n    inset-block: 0 -1px;\n    width: 30px;\n    transition: box-shadow ${cssVar.motionDurationSlow};\n  `;\n  const startShadow = `box-shadow: inset 10px 0 8px -8px ${cssVar.colorSplit};`;\n  const endShadow = `box-shadow: inset -10px 0 8px -8px ${cssVar.colorSplit};`;\n\n  return {\n    outlined: css`\n      &${p}-outlined {\n        & > ${p}-title {\n          border: ${border};\n          border-block-end: 0;\n          border-start-start-radius: ${cssVar.borderRadiusLG};\n          border-start-end-radius: ${cssVar.borderRadiusLG};\n        }\n\n        /* Like antd: start + top on the container; cells draw the end / bottom edges\n           so rowspan group headers never lose a vertical line to \\`:last-child\\`. */\n        & > ${p}-container {\n          overflow: clip;\n          border-block-start: ${border};\n          border-inline-start: ${border};\n          border-radius: ${cssVar.borderRadiusLG};\n        }\n\n        & > ${p}-title + ${p}-container {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        &:has(> ${p}-footer) > ${p}-container {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        & > ${p}-footer {\n          border: ${border};\n          border-block-start: 0;\n          border-end-start-radius: ${cssVar.borderRadiusLG};\n          border-end-end-radius: ${cssVar.borderRadiusLG};\n        }\n\n        ${ownCells('th')}, ${ownCells('td')} {\n          border-inline-end: ${border};\n        }\n\n        /* Every header row (including the last) draws one bottom edge — no inset\n           shadow underneath, or group headers look double-thick. */\n        & > ${p}-container > * > table > thead > tr > th {\n          border-block-end: ${border};\n          box-shadow: inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n\n        & ${p}-tbody-virtual ${p}-cell {\n          border-inline-end: ${border};\n        }\n      }\n    `,\n\n    filled: css`\n      &${p}-filled {\n        & > ${p}-title, & > ${p}-footer {\n          border-radius: ${cssVar.borderRadiusLG};\n          background: ${cssVar.colorFillQuaternary};\n        }\n\n        & > ${p}-title {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        & > ${p}-footer {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        & > ${p}-container {\n          overflow: clip;\n          border-radius: ${cssVar.borderRadiusLG};\n          background: ${cssVar.colorFillTertiary};\n        }\n\n        & > ${p}-title + ${p}-container {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        &:has(> ${p}-footer) > ${p}-container {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        /* Soft header band: same FillTertiary surface as the body, plus the same\n           FillQuaternary inset wash borderless/outlined use — light layering, not a\n           heavy Secondary fill. Sticky thead keeps an opaque Tertiary base so rows\n           do not show through while scrolling. */\n        & ${p}-thead > tr > th,\n        & ${p}-thead > tr > td {\n          background: ${cssVar.colorFillTertiary};\n          box-shadow:\n            inset 0 -1px 0 ${cssVar.colorBorderSecondary},\n            inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n\n        & ${p}-tbody > tr > td,\n        & ${p}-tbody > tr > th,\n        & ${p}-tbody-virtual ${p}-cell {\n          background: transparent;\n        }\n\n        & ${p}-thead > tr > th${p}-cell-fix, & ${p}-thead > tr > td${p}-cell-fix {\n          background: ${cssVar.colorFillTertiary};\n          box-shadow:\n            inset 0 -1px 0 ${cssVar.colorBorderSecondary},\n            inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n      }\n    `,\n    clickable: css`\n      cursor: pointer;\n    `,\n    /** Title text of an `ellipsis` column; truncates inside the sort button / header controls. */\n    columnTitle: css`\n      overflow: hidden;\n\n      min-width: 0;\n\n      text-overflow: ellipsis;\n      word-break: keep-all;\n      white-space: nowrap;\n    `,\n    filterActive: css`\n      &&,\n      &&:hover {\n        color: ${cssVar.colorPrimary};\n      }\n    `,\n    filterButton: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    filterButtons: css`\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      padding-block: 7px;\n      padding-inline: 8px;\n      border-block-start: 1px solid ${cssVar.colorSplit};\n    `,\n    filterCheckAll: css`\n      margin-block-end: 4px;\n      padding-inline: 4px;\n    `,\n    filterDropdown: css`\n      display: flex;\n      flex-direction: column;\n      min-width: 120px;\n    `,\n    filterEmpty: css`\n      padding-block: 16px;\n      padding-inline: 0;\n    `,\n    filterGroup: css`\n      display: flex;\n      flex-direction: column;\n\n      & > div:not(:first-child) {\n        padding-inline-start: 20px;\n      }\n    `,\n    filterGroupTitle: css`\n      padding-block: 5px;\n      padding-inline: 8px;\n      font-size: 12px;\n      color: ${cssVar.colorTextDescription};\n    `,\n    filterItem: css`\n      display: flex;\n      align-items: center;\n\n      padding-block: 5px;\n      padding-inline: 8px;\n      border-radius: ${cssVar.borderRadiusSM};\n\n      white-space: nowrap;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      & > label {\n        cursor: pointer;\n        flex: 1;\n      }\n    `,\n    filterMenu: css`\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n\n      max-height: 264px;\n      padding: 4px;\n    `,\n    filterPopup: css`\n      overflow: hidden;\n      padding: 0;\n    `,\n    filterSearch: css`\n      padding: 8px;\n      border-block-end: 1px solid ${cssVar.colorSplit};\n    `,\n    filterTree: css`\n      overflow: auto;\n      max-height: 264px;\n      padding: 8px;\n    `,\n    headerInner: css`\n      display: inline-flex;\n      gap: 6px;\n      align-items: center;\n\n      min-width: 0;\n      max-width: 100%;\n\n      vertical-align: middle;\n    `,\n    hoverable: css`\n      & ${p}-tbody > tr > ${p}-cell-row-hover, & ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);\n      }\n    `,\n    loading: css`\n      position: absolute;\n      z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 2);\n      inset: 0;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      align-items: center;\n      justify-content: center;\n\n      color: ${cssVar.colorTextSecondary};\n\n      background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n    /**\n     * Empty-state loading body. Tracks follow leaf column widths so bars sit under the\n     * live header; cell padding reuses the size CSS vars on the table ancestor.\n     */\n    skeleton: css`\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      min-width: 0;\n\n      text-align: start;\n    `,\n    skeletonCell: css`\n      display: flex;\n      align-items: center;\n\n      min-width: 0;\n      padding-block: var(${PADDING_BLOCK});\n      padding-inline: var(${PADDING_INLINE});\n    `,\n    skeletonRow: css`\n      display: grid;\n      align-items: stretch;\n\n      width: 100%;\n      min-width: 0;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n      &:last-child {\n        border-block-end: 0;\n      }\n    `,\n    // antd `paginationMargin` (token.margin): keep the pager off the table above and off\n    // whatever sits below the table.\n    pagination: css`\n      display: flex;\n      margin-block: 16px;\n    `,\n    paginationCenter: css`\n      justify-content: center;\n    `,\n    paginationEnd: css`\n      justify-content: flex-end;\n    `,\n    paginationStart: css`\n      justify-content: flex-start;\n    `,\n    paginationTop: css`\n      margin-block: 0 16px;\n    `,\n    root: css`\n      min-width: 0;\n    `,\n    /** Header box of the selection column; `selectionExtra` hangs off its end. */\n    selection: css`\n      position: relative;\n      display: inline-flex;\n      flex-direction: column;\n      vertical-align: middle;\n    `,\n    selectionColumn: css`\n      && {\n        padding-inline: 8px;\n        text-align: center;\n      }\n\n      & > * {\n        vertical-align: middle;\n      }\n    `,\n    selectionExtra: css`\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n\n      display: flex;\n      align-items: center;\n\n      height: 100%;\n      margin-inline-start: 100%;\n      padding-inline-start: 2px;\n    `,\n    selectionRadioGroup: css`\n      display: inline-flex;\n      vertical-align: middle;\n    `,\n    selectionTrigger: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    sizeLarge: css`\n      ${PADDING_BLOCK}: 16px;\n      ${PADDING_INLINE}: 16px;\n    `,\n    sizeMedium: css`\n      ${PADDING_BLOCK}: 12px;\n      ${PADDING_INLINE}: 16px;\n    `,\n    sizeSmall: css`\n      ${PADDING_BLOCK}: 8px;\n      ${PADDING_INLINE}: 12px;\n    `,\n    // Title + sort ActionIcon row (not a button — the ActionIcon owns the click).\n    sortButton: css`\n      display: inline-flex;\n      gap: 4px;\n      align-items: center;\n\n      min-width: 0;\n      max-width: 100%;\n    `,\n    // Matches the filter trigger: small ActionIcon with a slight negative margin so the\n    // 24px block does not grow the header.\n    sortCaret: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    sortTitle: css`\n      cursor: pointer;\n      min-width: 0;\n    `,\n    sortedColumn: css`\n      ${p}-tbody > tr > &${p}-cell {\n        background: ${cssVar.colorFillQuaternary};\n      }\n    `,\n    spinContainer: css`\n      position: relative;\n    `,\n    table: css`\n      font-size: 14px;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorBgContainer};\n\n      & table {\n        border-spacing: 0;\n        border-collapse: separate;\n        width: 100%;\n        text-align: start;\n      }\n\n      /* ============================== Cell ============================== */\n      & ${p}-cell, & ${p}-thead > tr > th,\n      & ${p}-tbody > tr > td,\n      & tfoot > tr > th,\n      & tfoot > tr > td {\n        position: relative;\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n        overflow-wrap: break-word;\n      }\n\n      & ${p}-thead > tr > th,\n      & ${p}-thead > tr > td {\n        font-size: 13px;\n        font-weight: 500;\n        color: ${cssVar.colorTextSecondary};\n        text-align: start;\n\n        background: ${cssVar.colorBgContainer};\n        box-shadow:\n          inset 0 -1px 0 ${cssVar.colorBorderSecondary},\n          inset 0 999px 0 ${cssVar.colorFillQuaternary};\n\n        &[colspan]:not([colspan='1']) {\n          text-align: center;\n        }\n      }\n\n      /* th covers rowScope row headers. */\n      & ${p}-tbody > tr > td,\n      & ${p}-tbody > tr > th {\n        border-block-end: ${border};\n\n        font-weight: inherit;\n        font-variant-numeric: tabular-nums;\n        text-align: start;\n\n        background: ${cssVar.colorBgContainer};\n\n        transition: background-color ${cssVar.motionDurationMid};\n      }\n\n      &:not(${p}-outlined) ${p}-tbody > tr:last-child > td,\n      &:not(${p}-outlined) ${p}-tbody > tr:last-child > th {\n        border-block-end: 0;\n      }\n\n      & ${p}-tbody > tr${p}-placeholder > td {\n        padding-block: 32px;\n        color: ${cssVar.colorTextDescription};\n        text-align: center;\n      }\n\n      /* Skeleton loading fills the placeholder like real body rows. */\n      & ${p}-tbody > tr${p}-placeholder > td:has([data-table-skeleton]) {\n        padding: 0;\n        color: inherit;\n        text-align: start;\n        vertical-align: top;\n      }\n\n      & ${p}-cell-scrollbar:not([rowspan]) {\n        box-shadow: 0 1px 0 1px ${cssVar.colorFillQuaternary};\n      }\n\n      /* ============================ Ellipsis ============================ */\n      & ${p}-cell-ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        word-break: keep-all;\n        white-space: nowrap;\n\n        &${p}-cell-fix-start-shadow, &${p}-cell-fix-end-shadow {\n          overflow: visible;\n\n          & ${p}-cell-content {\n            overflow: hidden;\n            display: block;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          }\n        }\n      }\n\n      /* ========================== Title / Footer ========================= */\n      & > ${p}-title, & > ${p}-footer {\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n      }\n\n      & > ${p}-footer {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      /* ============================== Fixed ============================= */\n      & ${p}-container {\n        position: relative;\n\n        &::before,\n        &::after {\n          ${fixShadowBase}\n          z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        }\n\n        &::before {\n          inset-inline-start: 0;\n        }\n\n        &::after {\n          inset-inline-end: 0;\n        }\n      }\n\n      &${p}-has-fix-start > ${p}-container::before, &${p}-has-fix-end > ${p}-container::after {\n        display: none;\n      }\n\n      &${p}-fix-start-shadow-show > ${p}-container::before {\n        ${startShadow}\n      }\n\n      &${p}-fix-end-shadow-show > ${p}-container::after {\n        ${endShadow}\n      }\n\n      /* Must outrank the generic cell rule that sets position: relative. */\n      &\n        ${p}-thead\n        > tr\n        > th${p}-cell-fix,\n        &\n        ${p}-tbody\n        > tr\n        > td${p}-cell-fix,\n        &\n        ${p}-cell${p}-cell-fix {\n        position: sticky;\n        z-index: calc(var(--z-offset-reverse) + ${Z_FIXED});\n      }\n\n      & ${p}-cell-fix {\n        background: ${cssVar.colorBgContainer};\n\n        &::after {\n          ${fixShadowBase}\n        }\n      }\n\n      & ${p}-cell-fix-start::after {\n        inset-inline-start: 100%;\n      }\n\n      & ${p}-cell-fix-end::after {\n        inset-inline-end: 100%;\n      }\n\n      & ${p}-cell-fix-start-shadow-show::after {\n        ${startShadow}\n      }\n\n      & ${p}-cell-fix-end-shadow-show::after {\n        ${endShadow}\n      }\n\n      /* ============================= Sticky ============================= */\n      & ${p}-sticky-holder {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        background: ${cssVar.colorBgContainer};\n      }\n\n      & ${p}-sticky-scroll {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        inset-block-end: 0;\n\n        display: flex;\n        align-items: center;\n\n        height: 8px !important;\n        border-block-start: ${border};\n\n        opacity: 0.65;\n        background: ${cssVar.colorFillQuaternary};\n\n        &-bar {\n          position: absolute;\n          inset-block-end: 0;\n\n          height: 8px;\n          border-radius: 100px;\n\n          background-color: ${cssVar.colorFill};\n\n          transition:\n            all ${cssVar.motionDurationSlow},\n            transform 0s;\n\n          &:hover,\n          &-active {\n            background-color: ${cssVar.colorFillSecondary};\n          }\n        }\n      }\n\n      /* ============================ Selection =========================== */\n      & ${p}-selection-col {\n        width: ${SELECTION_COLUMN_WIDTH}px;\n\n        &${p}-selection-col-with-dropdown {\n          width: ${SELECTION_COLUMN_WIDTH + SELECTION_DROPDOWN_WIDTH}px;\n        }\n      }\n\n      &${p}-outlined ${p}-selection-col {\n        width: ${SELECTION_COLUMN_WIDTH + 16}px;\n\n        &${p}-selection-col-with-dropdown {\n          width: ${SELECTION_COLUMN_WIDTH + SELECTION_DROPDOWN_WIDTH + 16}px;\n        }\n      }\n\n      & ${p}-tbody > tr${p}-row-selected > td {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 6%);\n\n        &${p}-cell-row-hover {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 10%);\n        }\n      }\n\n      /* ========================= Expand / Tree ========================== */\n      & ${p}-expand-icon-col {\n        width: ${EXPAND_COLUMN_WIDTH}px;\n      }\n\n      & ${p}-row-expand-icon-cell {\n        text-align: center;\n\n        & ${p}-row-expand-icon {\n          float: none;\n          display: inline-flex;\n          vertical-align: sub;\n        }\n      }\n\n      & ${p}-row-indent {\n        float: inline-start;\n        height: 1px;\n      }\n\n      & ${p}-row-expand-icon {\n        float: inline-start;\n        flex: none;\n        vertical-align: middle;\n\n        &${p}-row-expand-icon-spaced {\n          display: inline-block;\n          width: 24px;\n          height: 24px;\n          visibility: hidden;\n        }\n      }\n\n      & ${p}-row-indent + ${p}-row-expand-icon {\n        margin-block: -1px;\n        margin-inline-end: 8px;\n      }\n\n      & tr${p}-expanded-row > td,\n      & tr${p}-expanded-row:hover > td {\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      & ${p}-expanded-row-fixed {\n        position: relative;\n\n        margin-block: calc(var(${PADDING_BLOCK}) * -1);\n        margin-inline: calc(var(${PADDING_INLINE}) * -1);\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n      }\n\n      /* ========================== Nested table ========================== */\n\n      /* A table alone in a cell fills it, starting after the expand column. */\n      &\n        ${p}-tbody\n        > tr\n        > td\n        > ${p}-wrapper:only-child,\n        &\n        ${p}-tbody\n        > tr\n        > td\n        > ${p}-expanded-row-fixed\n        > ${p}-wrapper:only-child {\n        & ${p} {\n          margin-block: calc(var(${PADDING_BLOCK}) * -1);\n          margin-inline: calc(${EXPAND_COLUMN_WIDTH}px - var(${PADDING_INLINE}))\n            calc(var(${PADDING_INLINE}) * -1);\n        }\n\n        & ${p}-tbody > tr:last-child > td {\n          border-block-end: 0;\n        }\n\n        /* The outer cell already draws the frame: keep only the start edge of a bordered nest. */\n        & ${p}${p}-outlined {\n          & > ${p}-title, & > ${p}-container, & > ${p}-footer {\n            border-block: 0;\n            border-inline-end: 0;\n            border-radius: 0;\n          }\n\n          & > ${p}-title + ${p}-container {\n            border-block-start: ${border};\n          }\n\n          &:has(> ${p}-footer) > ${p}-container {\n            border-block-end: ${border};\n          }\n        }\n      }\n\n      &${p}-outlined ${p}-tbody > tr > td > ${p}-expanded-row-fixed {\n        margin-inline: calc((var(${PADDING_INLINE}) + 1px) * -1);\n      }\n\n      /* ============================= Summary ============================ */\n      & ${p}-summary {\n        position: relative;\n        z-index: ${Z_FIXED};\n        background: ${cssVar.colorBgContainer};\n\n        & > tr > th,\n        & > tr > td {\n          border-block-end: ${border};\n        }\n      }\n\n      & div${p}-summary {\n        box-shadow: 0 -1px 0 ${cssVar.colorBorderSecondary};\n      }\n\n      /* A fixed summary under \\`sticky\\` is a sticky holder too; keep it sticky (antd orders sticky last). */\n      & ${p}-summary${p}-sticky-holder {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n      }\n\n      & tfoot > tr > th,\n      & tfoot > tr > td {\n        border-block-start: ${border};\n      }\n\n      /* ============================= Virtual ============================ */\n      & ${p}-tbody-virtual {\n        &\n          ${p}-tbody-virtual-holder-inner\n          > ${p}-row,\n          &\n          ${p}-tbody-virtual-holder-inner\n          > div:not(${p}-row)\n          > ${p}-row {\n          display: flex;\n          box-sizing: border-box;\n          width: 100%;\n\n          & > ${p}-cell {\n            align-content: center;\n          }\n        }\n\n        & ${p}-cell {\n          border-block-end: ${border};\n          background: ${cssVar.colorBgContainer};\n          transition: background-color ${cssVar.motionDurationMid};\n        }\n\n        & ${p}-tbody-virtual-scrollbar {\n          cursor: pointer;\n\n          &:hover {\n            background-color: ${cssVar.colorFillQuaternary};\n          }\n        }\n\n        & ${p}-expanded-row ${p}-expanded-row-cell${p}-expanded-row-cell-fixed {\n          position: sticky;\n          inset-inline-start: 0;\n          overflow: hidden;\n          width: calc(var(--virtual-width) - 1px);\n        }\n      }\n    `,\n  };\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Table/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\n/** Own prefix so rc-table classNames never collide with antd's global `.ant-table` CSS. */\nexport const PREFIX_CLS = 'lobe-table';\n\nconst p = `.${PREFIX_CLS}`;\n\n// Cell padding comes from the size class through these vars, so title / footer / expanded rows\n// can reuse (and negate) it.\nconst PADDING_BLOCK = '--lobe-table-padding-block';\nconst PADDING_INLINE = '--lobe-table-padding-inline';\n\n// Matches antd's `zIndexTableFixed`.\nconst Z_FIXED = 2;\n\n// antd `expandColumnWidth`; nested tables start after it.\nexport const EXPAND_COLUMN_WIDTH = 48;\n\n// antd `selectionColumnWidth`, plus the `selections` trigger when there is one.\nexport const SELECTION_COLUMN_WIDTH = 32;\nexport const SELECTION_DROPDOWN_WIDTH = 24;\n\n/** Rows of this table's own sections only, so the rules never leak into nested tables. */\nconst ownRows = ['content', 'header', 'body', 'summary']\n  .map((section) => `& > ${p}-container > ${p}-${section} > table > * > tr`)\n  .join(', ');\nconst ownCells = (cell: string) =>\n  ownRows\n    .split(', ')\n    .map((row) => `${row} > ${cell}`)\n    .join(', ');\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  // Light colorFill / dark colorFillSecondary (see --lobe-fill-border in ThemeProvider).\n  const borderColor = `var(--lobe-fill-border, ${cssVar.colorFill})`;\n  const border = `1px solid ${borderColor}`;\n  // Dark: colorFillQuaternary on the clipped container; unset in light so variants keep their fills.\n  const surface = (light: string) => `var(--lobe-table-surface, ${light})`;\n  // Cell background. Every table root resets it to colorBgContainer (so nested / borderless\n  // tables never inherit it); outlined / filled switch it to transparent in dark.\n  const cellBg = `var(--lobe-table-cell, ${cssVar.colorBgContainer})`;\n  // The variant fill that opaque composites (fixed cells, sticky holder, summary) repeat\n  // once. Reset to transparent per root; outlined / filled set it to the dark surface.\n  const fill = 'var(--lobe-table-fill, transparent)';\n  // Opaque base under fixed / sticky cells: the real color behind the table, so base + fill\n  // matches the translucent body exactly. Override with --lobe-table-canvas; inside a Surface\n  // card it is the card's solid color; dark default colorBgLayout (page), light colorBgContainer.\n  const solid = 'var(--lobe-table-solid)';\n  const solidWith = (...fills: string[]) =>\n    `${fills.map((f) => `linear-gradient(${f}, ${f})`).join(', ')}, ${solid}`;\n  const variantVars = `\n    --lobe-table-solid: var(\n      --lobe-table-canvas,\n      var(--lobe-surface-bg-solid, var(--lobe-table-canvas-default, ${cssVar.colorBgContainer}))\n    );\n    --lobe-table-cell: var(--lobe-table-cell-bg, ${cssVar.colorBgContainer});\n    --lobe-table-fill: var(--lobe-table-surface, transparent);\n  `;\n  const fixShadowBase = `\n    pointer-events: none;\n    content: '';\n    position: absolute;\n    inset-block: 0 -1px;\n    width: 30px;\n    transition: box-shadow ${cssVar.motionDurationSlow};\n  `;\n  const startShadow = `box-shadow: inset 10px 0 8px -8px ${cssVar.colorSplit};`;\n  const endShadow = `box-shadow: inset -10px 0 8px -8px ${cssVar.colorSplit};`;\n\n  return {\n    outlined: css`\n      &${p}-outlined {\n        ${variantVars}\n        /* The square root must not paint behind the rounded frame: the clipped container\n           is the ONE layer carrying the body (light colorBgContainer, dark\n           colorFillQuaternary). Title / footer are siblings, so they paint it once too. */\n        background: transparent;\n\n        & > ${p}-container {\n          background: ${surface(cssVar.colorBgContainer)};\n        }\n\n        & > ${p}-title, & > ${p}-footer {\n          background: ${surface(cssVar.colorBgContainer)};\n        }\n\n        & > ${p}-title {\n          border: ${border};\n          border-block-end: 0;\n          border-start-start-radius: ${cssVar.borderRadiusLG};\n          border-start-end-radius: ${cssVar.borderRadiusLG};\n        }\n\n        /* The container draws the top and both side edges; the last row draws the bottom.\n           No column dividers (grouped headers included): rows are split horizontally only. */\n        & > ${p}-container {\n          overflow: clip;\n\n          border-block-start: ${border};\n          border-inline: ${border};\n          border-radius: ${cssVar.borderRadiusLG};\n\n          /* Same lift as the dashboard Surface card (both modes). Outer shadow on the framed\n             container is not clipped by its own overflow. */\n          box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;\n        }\n\n        & > ${p}-title + ${p}-container {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        &:has(> ${p}-footer) > ${p}-container {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        & > ${p}-footer {\n          border: ${border};\n          border-block-start: 0;\n          border-end-start-radius: ${cssVar.borderRadiusLG};\n          border-end-end-radius: ${cssVar.borderRadiusLG};\n        }\n\n        /* Every header row (including the last) draws one bottom edge — no inset\n           shadow underneath, or group headers look double-thick. */\n        & > ${p}-container > * > table > thead > tr > th {\n          border-block-end: ${border};\n\n          /* Extra FillQuaternary layer on top of the container fill. */\n          background: ${cellBg};\n          box-shadow: inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n\n        /* Fixed cells: opaque canvas (--lobe-table-solid) + the container fill once. */\n        & ${p}-tbody > tr > td${p}-cell-fix, & ${p}-tbody-virtual ${p}-cell${p}-cell-fix {\n          background: ${solidWith(fill)};\n          box-shadow: none;\n        }\n\n        /* Header: container fill + one Quaternary wash (box-shadow), like other th. */\n        & ${p}-thead > tr > th${p}-cell-fix, & ${p}-thead > tr > td${p}-cell-fix {\n          background: ${solidWith(fill)};\n          box-shadow: inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n      }\n    `,\n\n    /* Mirrors Block \\`filled\\`: one colorFillTertiary (dark: colorFillQuaternary on the clipped\n       container) surface straight on the parent and no frame border. */\n    filled: css`\n      &${p}-filled {\n        ${variantVars}\n        /* Filled owns its fill in both modes (Block filled = colorFillTertiary; dark uses the\n           Quaternary surface) and its opaque base is the page behind it, not colorBgContainer. */\n        --lobe-table-fill: var(--lobe-table-surface, ${cssVar.colorFillTertiary});\n        --lobe-table-solid: var(\n          --lobe-table-canvas,\n          var(--lobe-surface-bg-solid, ${cssVar.colorBgLayout})\n        );\n\n        /* Root stays clear (square box, would bleed past the rounded corners); the clipped\n           container is the ONE fill layer: light FillTertiary, dark colorFillQuaternary. */\n        background: transparent;\n\n        & > ${p}-title, & > ${p}-footer {\n          border-radius: ${cssVar.borderRadiusLG};\n          background: ${fill};\n        }\n\n        & > ${p}-title {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        & > ${p}-footer {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        & > ${p}-container {\n          overflow: clip;\n          border-radius: ${cssVar.borderRadiusLG};\n          background: ${fill};\n        }\n\n        & > ${p}-title + ${p}-container {\n          border-start-start-radius: 0;\n          border-start-end-radius: 0;\n        }\n\n        &:has(> ${p}-footer) > ${p}-container {\n          border-end-start-radius: 0;\n          border-end-end-radius: 0;\n        }\n\n        /* Header band: one extra FillQuaternary wash over the container fill. */\n        & ${p}-thead > tr > th,\n        & ${p}-thead > tr > td {\n          background: transparent;\n          box-shadow:\n            inset 0 -1px 0 ${borderColor},\n            inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n\n        /* Row dividers stay on (base border rule); body is clear over the container fill. */\n        & ${p}-tbody > tr > td,\n        & ${p}-tbody > tr > th,\n        & ${p}-tbody-virtual ${p}-cell {\n          background: transparent;\n        }\n\n        /* Fixed cells must be opaque: canvas (--lobe-table-solid) + the same fill; header adds one wash. */\n        & ${p}-thead > tr > th${p}-cell-fix, & ${p}-thead > tr > td${p}-cell-fix {\n          background: ${solidWith(fill)};\n          box-shadow:\n            inset 0 -1px 0 ${borderColor},\n            inset 0 999px 0 ${cssVar.colorFillQuaternary};\n        }\n\n        & ${p}-tbody > tr > td${p}-cell-fix {\n          background: ${solidWith(fill)};\n          box-shadow: none;\n        }\n      }\n    `,\n    /**\n     * Borderless: everything but the header is see-through, so the table sits on whatever\n     * surface hosts it. Hover / selected rows are translucent fills. Fixed (sticky) cells\n     * stay opaque in colorBgContainer so scrolled content never shows underneath them.\n     */\n    borderless: css`\n      && {\n        background: transparent;\n      }\n\n      && ${p}-tbody > tr > td,\n      && ${p}-tbody > tr > th,\n      && ${p}-tbody-virtual ${p}-cell, && ${p}-summary, && ${p}-summary > tr > td,\n      && ${p}-summary > tr > th,\n      && > ${p}-footer {\n        background: transparent;\n      }\n\n      && ${p}-tbody > tr > td${p}-cell-row-hover, && ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {\n        background: color-mix(in srgb, ${cssVar.colorText} 3%, transparent);\n      }\n\n      && ${p}-tbody > tr${p}-row-selected > td {\n        background: color-mix(in srgb, ${cssVar.colorPrimary} 6%, transparent);\n\n        &${p}-cell-row-hover {\n          background: color-mix(in srgb, ${cssVar.colorPrimary} 10%, transparent);\n        }\n      }\n\n      &&\n        ${p}-tbody\n        > tr\n        > td${p}-cell-fix,\n        &&\n        ${p}-tbody\n        > tr\n        > th${p}-cell-fix,\n        &&\n        ${p}-tbody-virtual\n        ${p}-cell${p}-cell-fix {\n        background: ${cssVar.colorBgContainer};\n      }\n\n      && ${p}-tbody > tr > td${p}-cell-fix${p}-cell-row-hover {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);\n      }\n\n      && ${p}-tbody > tr${p}-row-selected > td${p}-cell-fix {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 6%);\n\n        &${p}-cell-row-hover {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 10%);\n        }\n      }\n    `,\n    /**\n     * Grouped (multi-level) headers only: column dividers in header and body so the\n     * group spans stay readable. Plain tables never get vertical dividers.\n     */\n    grouped: css`\n      ${ownCells('th')}, ${ownCells('td')} {\n        border-inline-end: ${border};\n      }\n\n      & ${p}-tbody-virtual ${p}-cell {\n        border-inline-end: ${border};\n      }\n\n      /* Outlined: the container already draws the trailing edge. Other variants: the\n         rightmost body cell and first header row cell stop at the table edge. */\n      &:not(${p}-outlined) ${p}-tbody > tr > td:last-child,\n      &:not(${p}-outlined) ${p}-thead > tr:first-child > th:last-child,\n      &${p}-outlined ${p}-tbody > tr > td:last-child,\n      &${p}-outlined ${p}-thead > tr:first-child > th:last-child {\n        border-inline-end: 0;\n      }\n    `,\n    clickable: css`\n      cursor: pointer;\n    `,\n    /** Title text of an `ellipsis` column; truncates inside the sort button / header controls. */\n    columnTitle: css`\n      overflow: hidden;\n\n      min-width: 0;\n\n      text-overflow: ellipsis;\n      word-break: keep-all;\n      white-space: nowrap;\n    `,\n    filterActive: css`\n      &&,\n      &&:hover {\n        color: ${cssVar.colorPrimary};\n      }\n    `,\n    filterButton: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    filterButtons: css`\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      padding-block: 7px;\n      padding-inline: 8px;\n      border-block-start: 1px solid ${cssVar.colorSplit};\n    `,\n    filterCheckAll: css`\n      margin-block-end: 4px;\n      padding-inline: 4px;\n    `,\n    filterDropdown: css`\n      display: flex;\n      flex-direction: column;\n      min-width: 120px;\n    `,\n    filterEmpty: css`\n      padding-block: 16px;\n      padding-inline: 0;\n    `,\n    filterGroup: css`\n      display: flex;\n      flex-direction: column;\n\n      & > div:not(:first-child) {\n        padding-inline-start: 20px;\n      }\n    `,\n    filterGroupTitle: css`\n      padding-block: 5px;\n      padding-inline: 8px;\n      font-size: 12px;\n      color: ${cssVar.colorTextDescription};\n    `,\n    filterItem: css`\n      display: flex;\n      align-items: center;\n\n      padding-block: 5px;\n      padding-inline: 8px;\n      border-radius: ${cssVar.borderRadiusSM};\n\n      white-space: nowrap;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      & > label {\n        cursor: pointer;\n        flex: 1;\n      }\n    `,\n    filterMenu: css`\n      overflow: auto;\n      display: flex;\n      flex-direction: column;\n\n      max-height: 264px;\n      padding: 4px;\n    `,\n    filterPopup: css`\n      overflow: hidden;\n      padding: 0;\n    `,\n    filterSearch: css`\n      padding: 8px;\n      border-block-end: 1px solid ${cssVar.colorSplit};\n    `,\n    filterTree: css`\n      overflow: auto;\n      max-height: 264px;\n      padding: 8px;\n    `,\n    headerInner: css`\n      display: inline-flex;\n      gap: 6px;\n      align-items: center;\n\n      min-width: 0;\n      max-width: 100%;\n\n      vertical-align: middle;\n    `,\n    hoverable: css`\n      & ${p}-tbody > tr > ${p}-cell-row-hover, & ${p}-tbody-virtual ${p}-row:hover > ${p}-cell {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorText} 3%);\n      }\n    `,\n    loading: css`\n      position: absolute;\n      z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 2);\n      inset: 0;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      align-items: center;\n      justify-content: center;\n\n      color: ${cssVar.colorTextSecondary};\n\n      background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n    `,\n    /**\n     * Empty-state loading body. Tracks follow leaf column widths so bars sit under the\n     * live header; cell padding reuses the size CSS vars on the table ancestor.\n     */\n    skeleton: css`\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      min-width: 0;\n\n      text-align: start;\n    `,\n    skeletonCell: css`\n      display: flex;\n      align-items: center;\n\n      min-width: 0;\n      padding-block: var(${PADDING_BLOCK});\n      padding-inline: var(${PADDING_INLINE});\n    `,\n    skeletonRow: css`\n      display: grid;\n      align-items: stretch;\n\n      width: 100%;\n      min-width: 0;\n      border-block-end: 1px solid ${borderColor};\n\n      &:last-child {\n        border-block-end: 0;\n      }\n    `,\n    // antd `paginationMargin` (token.margin): keep the pager off the table above and off\n    // whatever sits below the table.\n    pagination: css`\n      display: flex;\n      margin-block: 16px;\n    `,\n    paginationCenter: css`\n      justify-content: center;\n    `,\n    paginationEnd: css`\n      justify-content: flex-end;\n    `,\n    paginationStart: css`\n      justify-content: flex-start;\n    `,\n    paginationTop: css`\n      margin-block: 0 16px;\n    `,\n    root: css`\n      min-width: 0;\n    `,\n    /** Header box of the selection column; `selectionExtra` hangs off its end. */\n    selection: css`\n      position: relative;\n      display: inline-flex;\n      flex-direction: column;\n      vertical-align: middle;\n    `,\n    selectionColumn: css`\n      && {\n        padding-inline: 8px;\n        text-align: center;\n      }\n\n      & > * {\n        vertical-align: middle;\n      }\n    `,\n    selectionExtra: css`\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n\n      display: flex;\n      align-items: center;\n\n      height: 100%;\n      margin-inline-start: 100%;\n      padding-inline-start: 2px;\n    `,\n    selectionRadioGroup: css`\n      display: inline-flex;\n      vertical-align: middle;\n    `,\n    selectionTrigger: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    sizeLarge: css`\n      ${PADDING_BLOCK}: 16px;\n      ${PADDING_INLINE}: 16px;\n    `,\n    sizeMedium: css`\n      ${PADDING_BLOCK}: 12px;\n      ${PADDING_INLINE}: 16px;\n    `,\n    sizeSmall: css`\n      ${PADDING_BLOCK}: 8px;\n      ${PADDING_INLINE}: 12px;\n    `,\n    // Title + sort ActionIcon row (not a button — the ActionIcon owns the click).\n    sortButton: css`\n      display: inline-flex;\n      gap: 4px;\n      align-items: center;\n\n      min-width: 0;\n      max-width: 100%;\n    `,\n    // Matches the filter trigger: small ActionIcon with a slight negative margin so the\n    // 24px block does not grow the header.\n    sortCaret: css`\n      flex: none;\n      margin-block: -4px;\n    `,\n    sortTitle: css`\n      cursor: pointer;\n      min-width: 0;\n    `,\n    sortedColumn: css`\n      ${p}-tbody > tr > &${p}-cell {\n        background: ${cssVar.colorFillQuaternary};\n      }\n    `,\n    spinContainer: css`\n      position: relative;\n    `,\n    table: css`\n      /* Reset per root so nested / borderless tables never inherit a parent's variant vars. */\n      --lobe-table-cell: ${cssVar.colorBgContainer};\n      --lobe-table-fill: transparent;\n      --lobe-table-solid: ${cssVar.colorBgContainer};\n\n      font-size: 14px;\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorBgContainer};\n\n      & table {\n        border-spacing: 0;\n        border-collapse: separate;\n        width: 100%;\n        text-align: start;\n      }\n\n      /* ============================== Cell ============================== */\n      & ${p}-cell, & ${p}-thead > tr > th,\n      & ${p}-tbody > tr > td,\n      & tfoot > tr > th,\n      & tfoot > tr > td {\n        position: relative;\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n        overflow-wrap: break-word;\n      }\n\n      & ${p}-thead > tr > th,\n      & ${p}-thead > tr > td {\n        font-size: 13px;\n        font-weight: 500;\n        color: ${cssVar.colorTextSecondary};\n        text-align: start;\n\n        /* Clear in dark (outlined) so the container fill shows; Quaternary is the extra header layer. */\n        background: ${cellBg};\n        box-shadow:\n          inset 0 -1px 0 ${borderColor},\n          inset 0 999px 0 ${cssVar.colorFillQuaternary};\n\n        &[colspan]:not([colspan='1']) {\n          text-align: center;\n        }\n      }\n\n      /* th covers rowScope row headers. */\n      & ${p}-tbody > tr > td,\n      & ${p}-tbody > tr > th {\n        border-block-end: ${border};\n\n        font-weight: inherit;\n        font-variant-numeric: tabular-nums;\n        text-align: start;\n\n        /* Clear in dark (outlined) so the container fill shows through. */\n        background: ${cellBg};\n\n        transition: background-color ${cssVar.motionDurationMid};\n      }\n\n      &:not(${p}-outlined) ${p}-tbody > tr:last-child > td,\n      &:not(${p}-outlined) ${p}-tbody > tr:last-child > th {\n        border-block-end: 0;\n      }\n\n      & ${p}-tbody > tr${p}-placeholder > td {\n        padding-block: 32px;\n        color: ${cssVar.colorTextDescription};\n        text-align: center;\n      }\n\n      /* Skeleton loading fills the placeholder like real body rows. */\n      & ${p}-tbody > tr${p}-placeholder > td:has([data-table-skeleton]) {\n        padding: 0;\n        color: inherit;\n        text-align: start;\n        vertical-align: top;\n      }\n\n      & ${p}-cell-scrollbar:not([rowspan]) {\n        box-shadow: 0 1px 0 1px ${cssVar.colorFillQuaternary};\n      }\n\n      /* ============================ Ellipsis ============================ */\n      & ${p}-cell-ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        word-break: keep-all;\n        white-space: nowrap;\n\n        &${p}-cell-fix-start-shadow, &${p}-cell-fix-end-shadow {\n          overflow: visible;\n\n          & ${p}-cell-content {\n            overflow: hidden;\n            display: block;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n          }\n        }\n      }\n\n      /* ========================== Title / Footer ========================= */\n      & > ${p}-title, & > ${p}-footer {\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n      }\n\n      & > ${p}-footer {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      /* ============================== Fixed ============================= */\n      & ${p}-container {\n        position: relative;\n\n        &::before,\n        &::after {\n          ${fixShadowBase}\n          z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        }\n\n        &::before {\n          inset-inline-start: 0;\n        }\n\n        &::after {\n          inset-inline-end: 0;\n        }\n      }\n\n      &${p}-has-fix-start > ${p}-container::before, &${p}-has-fix-end > ${p}-container::after {\n        display: none;\n      }\n\n      &${p}-fix-start-shadow-show > ${p}-container::before {\n        ${startShadow}\n      }\n\n      &${p}-fix-end-shadow-show > ${p}-container::after {\n        ${endShadow}\n      }\n\n      /* Must outrank the generic cell rule that sets position: relative. */\n      &\n        ${p}-thead\n        > tr\n        > th${p}-cell-fix,\n        &\n        ${p}-tbody\n        > tr\n        > td${p}-cell-fix,\n        &\n        ${p}-cell${p}-cell-fix {\n        position: sticky;\n        z-index: calc(var(--z-offset-reverse) + ${Z_FIXED});\n      }\n\n      & ${p}-cell-fix {\n        background: ${cssVar.colorBgContainer};\n\n        &::after {\n          ${fixShadowBase}\n        }\n      }\n\n      & ${p}-cell-fix-start::after {\n        inset-inline-start: 100%;\n      }\n\n      & ${p}-cell-fix-end::after {\n        inset-inline-end: 100%;\n      }\n\n      & ${p}-cell-fix-start-shadow-show::after {\n        ${startShadow}\n      }\n\n      & ${p}-cell-fix-end-shadow-show::after {\n        ${endShadow}\n      }\n\n      /* ============================= Sticky ============================= */\n      & ${p}-sticky-holder {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        background: ${solidWith(fill)};\n      }\n\n      & ${p}-sticky-scroll {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n        inset-block-end: 0;\n\n        display: flex;\n        align-items: center;\n\n        height: 8px !important;\n        border-block-start: ${border};\n\n        opacity: 0.65;\n        background: ${cssVar.colorFillQuaternary};\n\n        &-bar {\n          position: absolute;\n          inset-block-end: 0;\n\n          height: 8px;\n          border-radius: 100px;\n\n          background-color: ${cssVar.colorFill};\n\n          transition:\n            all ${cssVar.motionDurationSlow},\n            transform 0s;\n\n          &:hover,\n          &-active {\n            background-color: ${cssVar.colorFillSecondary};\n          }\n        }\n      }\n\n      /* ============================ Selection =========================== */\n      & ${p}-selection-col {\n        width: ${SELECTION_COLUMN_WIDTH}px;\n\n        &${p}-selection-col-with-dropdown {\n          width: ${SELECTION_COLUMN_WIDTH + SELECTION_DROPDOWN_WIDTH}px;\n        }\n      }\n\n      &${p}-outlined ${p}-selection-col {\n        width: ${SELECTION_COLUMN_WIDTH + 16}px;\n\n        &${p}-selection-col-with-dropdown {\n          width: ${SELECTION_COLUMN_WIDTH + SELECTION_DROPDOWN_WIDTH + 16}px;\n        }\n      }\n\n      & ${p}-tbody > tr${p}-row-selected > td {\n        background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 6%);\n\n        &${p}-cell-row-hover {\n          background: color-mix(in srgb, ${cssVar.colorBgContainer}, ${cssVar.colorPrimary} 10%);\n        }\n      }\n\n      /* ========================= Expand / Tree ========================== */\n      & ${p}-expand-icon-col {\n        width: ${EXPAND_COLUMN_WIDTH}px;\n      }\n\n      & ${p}-row-expand-icon-cell {\n        text-align: center;\n\n        & ${p}-row-expand-icon {\n          float: none;\n          display: inline-flex;\n          vertical-align: sub;\n        }\n      }\n\n      & ${p}-row-indent {\n        float: inline-start;\n        height: 1px;\n      }\n\n      & ${p}-row-expand-icon {\n        float: inline-start;\n        flex: none;\n        vertical-align: middle;\n\n        &${p}-row-expand-icon-spaced {\n          display: inline-block;\n          width: 24px;\n          height: 24px;\n          visibility: hidden;\n        }\n      }\n\n      & ${p}-row-indent + ${p}-row-expand-icon {\n        margin-block: -1px;\n        margin-inline-end: 8px;\n      }\n\n      & tr${p}-expanded-row > td,\n      & tr${p}-expanded-row:hover > td {\n        background: ${cssVar.colorFillQuaternary};\n      }\n\n      & ${p}-expanded-row-fixed {\n        position: relative;\n\n        margin-block: calc(var(${PADDING_BLOCK}) * -1);\n        margin-inline: calc(var(${PADDING_INLINE}) * -1);\n        padding-block: var(${PADDING_BLOCK});\n        padding-inline: var(${PADDING_INLINE});\n      }\n\n      /* ========================== Nested table ========================== */\n\n      /* A table alone in a cell fills it, starting after the expand column. */\n      &\n        ${p}-tbody\n        > tr\n        > td\n        > ${p}-wrapper:only-child,\n        &\n        ${p}-tbody\n        > tr\n        > td\n        > ${p}-expanded-row-fixed\n        > ${p}-wrapper:only-child {\n        & ${p} {\n          margin-block: calc(var(${PADDING_BLOCK}) * -1);\n          margin-inline: calc(${EXPAND_COLUMN_WIDTH}px - var(${PADDING_INLINE}))\n            calc(var(${PADDING_INLINE}) * -1);\n        }\n\n        & ${p}-tbody > tr:last-child > td {\n          border-block-end: 0;\n        }\n\n        /* The outer cell already draws the frame: keep only the start edge of a bordered nest. */\n        & ${p}${p}-outlined {\n          & > ${p}-title, & > ${p}-container, & > ${p}-footer {\n            border-block: 0;\n            border-inline-end: 0;\n            border-radius: 0;\n            box-shadow: none;\n          }\n\n          & > ${p}-title + ${p}-container {\n            border-block-start: ${border};\n          }\n\n          &:has(> ${p}-footer) > ${p}-container {\n            border-block-end: ${border};\n          }\n        }\n      }\n\n      &${p}-outlined ${p}-tbody > tr > td > ${p}-expanded-row-fixed {\n        margin-inline: calc((var(${PADDING_INLINE}) + 1px) * -1);\n      }\n\n      /* ============================= Summary ============================ */\n      & ${p}-summary {\n        position: relative;\n        z-index: ${Z_FIXED};\n\n        /* Opaque: canvas + the variant fill once. */\n        background: ${solidWith(fill)};\n\n        & > tr > th,\n        & > tr > td {\n          border-block-end: ${border};\n        }\n      }\n\n      & div${p}-summary {\n        box-shadow: 0 -1px 0 ${borderColor};\n      }\n\n      /* A fixed summary under \\`sticky\\` is a sticky holder too; keep it sticky (antd orders sticky last). */\n      & ${p}-summary${p}-sticky-holder {\n        position: sticky;\n        z-index: calc(var(--columns-count, 1) * 2 + ${Z_FIXED} + 1);\n      }\n\n      & tfoot > tr > th,\n      & tfoot > tr > td {\n        border-block-start: ${border};\n      }\n\n      /* ============================= Virtual ============================ */\n      & ${p}-tbody-virtual {\n        &\n          ${p}-tbody-virtual-holder-inner\n          > ${p}-row,\n          &\n          ${p}-tbody-virtual-holder-inner\n          > div:not(${p}-row)\n          > ${p}-row {\n          display: flex;\n          box-sizing: border-box;\n          width: 100%;\n\n          & > ${p}-cell {\n            align-content: center;\n          }\n        }\n\n        & ${p}-cell {\n          border-block-end: ${border};\n          background: ${cellBg};\n          transition: background-color ${cssVar.motionDurationMid};\n        }\n\n        & ${p}-tbody-virtual-scrollbar {\n          cursor: pointer;\n\n          &:hover {\n            background-color: ${cssVar.colorFillQuaternary};\n          }\n        }\n\n        & ${p}-expanded-row ${p}-expanded-row-cell${p}-expanded-row-cell-fixed {\n          position: sticky;\n          inset-inline-start: 0;\n          overflow: hidden;\n          width: calc(var(--virtual-width) - 1px);\n        }\n      }\n    `,\n  };\n});\n"],"mappings":"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"}

package/es/base-ui/Text/style.d.mts

@@ -42,7 +42,7 @@ declare const variants: (props?: ({
   mark?: boolean | null | undefined;
   shiny?: boolean | null | undefined;
   strong?: boolean | null | undefined;
-  type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
+  type?: "warning" | "success" | "danger" | "info" | "secondary" | null | undefined;
   underline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/es/dashboard/ConsoleNav/style.mjs

@@ -135,7 +135,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => {
         block-size: 1px;
 
         opacity: 0;
-        background: ${cssVar.colorBorderSecondary};
+        background: var(--lobe-fill-border, ${cssVar.colorFill});
 
         transition: opacity 200ms ease;
       }
@@ -400,7 +400,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => {
       &[data-divided='true'] {
         margin-block-end: 6px;
         padding-block-end: 8px;
-        border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+        border-block-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});
       }
 
       [data-collapsed='true'] &[data-rail-empty='true'] {

package/es/dashboard/ConsoleNav/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: ${cssVar.colorBorderSecondary};\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    skeletonFooter: css`\n      display: flex;\n      gap: 10px;\n      align-items: center;\n      padding-inline: 4px;\n    `,\n    skeletonGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-block-start: 12px;\n    `,\n    skeletonRow: css`\n      pointer-events: none;\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;sBAoBQ,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC9C,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,gBAAgB,GAAG;;;;;;EAMnB,eAAe,GAAG;;;;;;EAMlB,aAAa,GAAG;;;EAGhB,UAAU,GAAG;;;;;;;;;;;;sCAYqB,OAAO,qBAAqB;;;;;;;;;;;;;CAahE;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/ConsoleNav/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => {\n  // Fades out at once on collapse, but waits on expand until the width has room for the text.\n  const railFade = `\n    transition: opacity 120ms ease 80ms;\n\n    [data-collapsed='true'] & {\n      opacity: 0;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `;\n\n  return {\n    badge: css`\n      flex: none;\n\n      min-inline-size: 20px;\n      padding-inline: 6px;\n      border-radius: 999px;\n\n      font-size: ${cssVar.fontSizeSM};\n      font-variant-numeric: tabular-nums;\n      color: ${cssVar.colorError};\n      text-align: center;\n\n      background: color-mix(in srgb, ${cssVar.colorError} 12%, transparent);\n\n      ${railFade}\n    `,\n    chevron: css`\n      flex: none;\n      transition:\n        transform 160ms ease,\n        opacity 120ms ease 80ms;\n\n      &[data-expanded='false'] {\n        transform: rotate(-90deg);\n      }\n\n      [data-collapsed='true'] & {\n        opacity: 0;\n        transition-delay: 0s;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    indicator: css`\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      width: 18px;\n      height: 18px;\n      margin-inline-start: -6px;\n\n      color: ${cssVar.colorTextDescription};\n\n      transition: transform 160ms ease;\n\n      &[data-expanded='true'] {\n        transform: rotate(90deg);\n      }\n    `,\n    dot: css`\n      position: absolute;\n      inset-block-start: 7px;\n      inset-inline-end: 9px;\n\n      inline-size: 7px;\n      block-size: 7px;\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorError};\n\n      transition: opacity 120ms ease;\n\n      [data-collapsed='true'] & {\n        opacity: 1;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    fold: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition:\n        grid-template-rows 200ms ease,\n        margin 200ms ease,\n        opacity 120ms ease;\n\n      > div {\n        overflow: hidden;\n        min-block-size: 0;\n      }\n\n      &[data-folded='true'] {\n        grid-template-rows: 0fr;\n        opacity: 0;\n      }\n\n      &[data-folded='true']:not(:first-child) {\n        margin-block-start: -2px;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n    group: css`\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      margin-block-start: 12px;\n\n      transition: margin 200ms ease;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: -6px;\n        inset-inline: 0;\n\n        block-size: 1px;\n\n        opacity: 0;\n        background: var(--lobe-fill-border, ${cssVar.colorFill});\n\n        transition: opacity 200ms ease;\n      }\n\n      &[data-level='0'][data-icon='true'] {\n        margin-block-start: 2px;\n      }\n\n      &:not([data-level='0']) {\n        margin-block-start: 6px;\n      }\n\n      [data-collapsed='true'] & + &[data-level='0'][data-icon='false']::before {\n        opacity: 1;\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-start: 0;\n\n        &::before {\n          opacity: 0;\n        }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n\n        &::before {\n          transition: none;\n        }\n      }\n    `,\n    groupHead: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n    groupHeader: css`\n      cursor: pointer;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: space-between;\n\n      min-block-size: 32px;\n      padding-inline: 10px;\n      border: none;\n      border-radius: ${cssVar.borderRadius};\n\n      font-size: ${cssVar.fontSizeSM};\n      font-weight: 500;\n      color: ${cssVar.colorTextSecondary};\n      text-align: start;\n      white-space: nowrap;\n\n      background: none;\n\n      &:hover,\n      &[data-active='true'] {\n        color: ${cssVar.colorText};\n      }\n\n      &[data-icon='true'] {\n        gap: 10px;\n        justify-content: flex-start;\n        min-block-size: 36px;\n        font-size: ${cssVar.fontSize};\n\n        > [role='img'] {\n          justify-content: center;\n          inline-size: 18px;\n        }\n      }\n\n      &[data-level='0'][data-icon='true']:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      /* Nested groups read as quiet subheadings with the indicator right after the label. */\n      &:not([data-level='0']) {\n        gap: 8px;\n        justify-content: flex-start;\n\n        min-block-size: 26px;\n\n        font-size: ${cssVar.fontSizeSM};\n        font-weight: 400;\n        color: ${cssVar.colorTextDescription};\n\n        > [data-label] {\n          flex: 0 1 auto;\n        }\n\n        &:hover,\n        &[data-active='true'] {\n          color: ${cssVar.colorTextSecondary};\n        }\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n    `,\n    groupItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      min-block-size: 0;\n    `,\n    groupPanel: css`\n      display: grid;\n      grid-template-rows: 1fr;\n      transition: grid-template-rows 160ms ease;\n\n      > div {\n        overflow: hidden;\n      }\n\n      &[data-expanded='false'] {\n        grid-template-rows: 0fr;\n      }\n\n      &[data-instant='true'] {\n        transition: none;\n      }\n    `,\n    item: css`\n      position: relative;\n\n      display: flex;\n      gap: 10px;\n      align-items: center;\n\n      min-block-size: 36px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadius};\n\n      color: ${cssVar.colorTextSecondary};\n      text-decoration: none;\n      white-space: nowrap;\n\n      transition:\n        background 120ms ease,\n        color 120ms ease;\n\n      &:hover {\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        font-weight: 500;\n        color: ${cssVar.colorText};\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      &[data-indent='1'],\n      &[data-indent='2'] {\n        min-block-size: 32px;\n        color: ${cssVar.colorText};\n      }\n\n      &[data-indent='1'] {\n        padding-inline-start: 38px;\n      }\n\n      &[data-indent='2'] {\n        padding-inline-start: 56px;\n      }\n\n      [data-collapsed='true'] &:not([data-indent='0']) {\n        padding-inline-start: 10px;\n      }\n\n      > [role='img'] {\n        display: flex;\n        flex: none;\n      }\n\n      ${responsive.mobile} {\n        min-block-size: 44px;\n      }\n    `,\n    itemLabel: css`\n      overflow: hidden;\n      flex: 1;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      [data-collapsed='true'] & {\n        text-overflow: clip;\n      }\n\n      ${railFade}\n    `,\n    nav: css`\n      /* Scroll anchoring would jump the list in one frame while rail rows fold and unfold. */\n      overflow-anchor: none;\n      scrollbar-width: thin;\n\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: 2px;\n\n      min-block-size: 0;\n      padding-block-end: 12px;\n      padding-inline: 8px;\n    `,\n    railLink: css`\n      position: absolute;\n      inset: 0;\n      border-radius: ${cssVar.borderRadius};\n      transition: background 120ms ease;\n\n      &:hover {\n        background: ${cssVar.colorFillTertiary};\n      }\n\n      &[data-active='true'] {\n        background: ${cssVar.colorFillSecondary};\n      }\n\n      @starting-style {\n        background: transparent;\n      }\n    `,\n    skeletonFooter: css`\n      display: flex;\n      gap: 10px;\n      align-items: center;\n      padding-inline: 4px;\n    `,\n    skeletonGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-block-start: 12px;\n    `,\n    skeletonRow: css`\n      pointer-events: none;\n    `,\n    topItems: css`\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      transition:\n        margin 200ms ease,\n        padding 200ms ease,\n        border-color 200ms ease;\n\n      &[data-divided='true'] {\n        margin-block-end: 6px;\n        padding-block-end: 8px;\n        border-block-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});\n      }\n\n      [data-collapsed='true'] &[data-rail-empty='true'] {\n        margin-block-end: 0;\n        padding-block-end: 0;\n        border-block-end-color: transparent;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,iBAAiB;CAExE,MAAM,WAAW;;;;;;;;;;;;CAajB,OAAO;EACL,OAAO,GAAG;;;;;;;mBAOK,OAAO,WAAW;;eAEtB,OAAO,WAAW;;;uCAGM,OAAO,WAAW;;QAEjD,SAAS;;EAEb,SAAS,GAAG;;;;;;;;;;;;;;;;;;;EAmBZ,WAAW,GAAG;;;;;;;;;;eAUH,OAAO,qBAAqB;;;;;;;;EAQvC,KAAK,GAAG;;;;;;;;;;oBAUQ,OAAO,WAAW;;;;;;;;;;;;EAYlC,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BT,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;8CAoBgC,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC3D,WAAW,GAAG;;;;;EAKd,aAAa,GAAG;;;;;;;;;;;uBAWG,OAAO,aAAa;;mBAExB,OAAO,WAAW;;eAEtB,OAAO,mBAAmB;;;;;;;;iBAQxB,OAAO,UAAU;;;;;;;qBAOb,OAAO,SAAS;;;;;;;;;sBASf,OAAO,kBAAkB;;;;;;;;;;qBAU1B,OAAO,WAAW;;iBAEtB,OAAO,qBAAqB;;;;;;;;mBAQ1B,OAAO,mBAAmB;;;;;;;;;;;;;;;;;EAiBzC,YAAY,GAAG;;;;;;EAMf,YAAY,GAAG;;;;;;;;;;;;;;;;;EAiBf,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;eAE5B,OAAO,mBAAmB;;;;;;;;;iBASxB,OAAO,UAAU;sBACZ,OAAO,kBAAkB;;;;;iBAK9B,OAAO,UAAU;sBACZ,OAAO,mBAAmB;;;;;;iBAM/B,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;QAoB1B,WAAW,OAAO;;;;EAItB,WAAW,GAAG;;;;;;;;;;QAUV,SAAS;;EAEb,KAAK,GAAG;;;;;;;;;;;;;;EAcR,UAAU,GAAG;;;uBAGM,OAAO,aAAa;;;;sBAIrB,OAAO,kBAAkB;;;;sBAIzB,OAAO,mBAAmB;;;;;;;EAO5C,gBAAgB,GAAG;;;;;;EAMnB,eAAe,GAAG;;;;;;EAMlB,aAAa,GAAG;;;EAGhB,UAAU,GAAG;;;;;;;;;;;;8DAY6C,OAAO,UAAU;;;;;;;;;;;;;CAa7E;AACF,CAAC"}

package/es/dashboard/FilterSidebar/style.mjs

@@ -133,11 +133,11 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     flex-direction: column;
 
     min-block-size: 0;
-    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
+    border-inline-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});
 
     [data-split-card='true'] & {
       block-size: 100%;
-      border-inline-end-color: ${cssVar.colorBorder};
+      border-inline-end-color: var(--lobe-fill-border-strong, ${cssVar.colorFill});
     }
   `,
 	sidebar: css`

package/es/dashboard/FilterSidebar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  body: css`\n    overflow-y: auto;\n    max-block-size: 360px;\n    padding-block-end: 16px;\n    padding-inline: 12px;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n      max-block-size: none;\n    }\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 16px;\n\n    min-inline-size: 0;\n    padding-inline-start: 20px;\n\n    &[data-flush='true'] {\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    [data-split-card='true'] & {\n      padding-block: 16px 0;\n      padding-inline: 16px;\n\n      > :last-child {\n        margin-inline: -16px;\n      }\n    }\n\n    ${responsive.laptop} {\n      overflow: visible;\n      padding: 0;\n\n      > :last-child {\n        margin-inline: 0;\n      }\n    }\n  `,\n  count: css`\n    flex: none;\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  drawerPanel: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  `,\n  head: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 8px;\n\n    padding: 12px;\n  `,\n  layout: css`\n    display: flex;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n    }\n\n    &[data-split-card='true'] {\n      overflow: hidden;\n      align-items: stretch;\n    }\n\n    ${responsive.laptop} {\n      flex-direction: column;\n      gap: 12px;\n    }\n  `,\n  name: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-inline-size: 0;\n\n    text-align: start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  option: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    inline-size: 100%;\n    min-block-size: 36px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 500;\n      background: ${cssVar.controlItemBgActive};\n    }\n  `,\n  row: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  panel: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    min-block-size: 0;\n    border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n\n    [data-split-card='true'] & {\n      block-size: 100%;\n      border-inline-end-color: ${cssVar.colorBorder};\n    }\n  `,\n  sidebar: css`\n    align-self: stretch;\n    min-block-size: 0;\n\n    &[data-flush='true'] {\n      block-size: 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;;;;CAYT,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;MAuBR,WAAW,OAAO;;;;;;;;;CAStB,OAAO,GAAG;;iBAEK,OAAO,WAAW;;aAEtB,OAAO,kBAAkB;;CAEpC,aAAa,GAAG;;;;;CAKhB,MAAM,GAAG;;;;;;;;CAQT,QAAQ,GAAG;;;;;;;;;;;;;MAaP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;;;;;;CAUT,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;oBAKzB,OAAO,oBAAoB;;;CAG7C,KAAK,GAAG;;;;;;;;CAQR,OAAO,GAAG;;;;;;mCAMuB,OAAO,qBAAqB;;;;iCAI9B,OAAO,YAAY;;;CAGlD,SAAS,GAAG;;;;;;;;AAQd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterSidebar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  body: css`\n    overflow-y: auto;\n    max-block-size: 360px;\n    padding-block-end: 16px;\n    padding-inline: 12px;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n      max-block-size: none;\n    }\n  `,\n  content: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 16px;\n\n    min-inline-size: 0;\n    padding-inline-start: 20px;\n\n    &[data-flush='true'] {\n      overflow-y: auto;\n      padding: 24px;\n    }\n\n    [data-split-card='true'] & {\n      padding-block: 16px 0;\n      padding-inline: 16px;\n\n      > :last-child {\n        margin-inline: -16px;\n      }\n    }\n\n    ${responsive.laptop} {\n      overflow: visible;\n      padding: 0;\n\n      > :last-child {\n        margin-inline: 0;\n      }\n    }\n  `,\n  count: css`\n    flex: none;\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  drawerPanel: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  `,\n  head: css`\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    gap: 8px;\n\n    padding: 12px;\n  `,\n  layout: css`\n    display: flex;\n\n    &[data-flush='true'] {\n      flex: 1;\n      min-block-size: 0;\n    }\n\n    &[data-split-card='true'] {\n      overflow: hidden;\n      align-items: stretch;\n    }\n\n    ${responsive.laptop} {\n      flex-direction: column;\n      gap: 12px;\n    }\n  `,\n  name: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-inline-size: 0;\n\n    text-align: start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  option: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    inline-size: 100%;\n    min-block-size: 36px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadius};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n\n    background: none;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &[aria-pressed='true'] {\n      font-weight: 500;\n      background: ${cssVar.controlItemBgActive};\n    }\n  `,\n  row: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  panel: css`\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    min-block-size: 0;\n    border-inline-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});\n\n    [data-split-card='true'] & {\n      block-size: 100%;\n      border-inline-end-color: var(--lobe-fill-border-strong, ${cssVar.colorFill});\n    }\n  `,\n  sidebar: css`\n    align-self: stretch;\n    min-block-size: 0;\n\n    &[data-flush='true'] {\n      block-size: 100%;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,MAAM,GAAG;;;;;;;;;;;;CAYT,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;MAuBR,WAAW,OAAO;;;;;;;;;CAStB,OAAO,GAAG;;iBAEK,OAAO,WAAW;;aAEtB,OAAO,kBAAkB;;CAEpC,aAAa,GAAG;;;;;CAKhB,MAAM,GAAG;;;;;;;;CAQT,QAAQ,GAAG;;;;;;;;;;;;;MAaP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;;;;;;CAUT,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;;;oBAKV,OAAO,kBAAkB;;;;;oBAKzB,OAAO,oBAAoB;;;CAG7C,KAAK,GAAG;;;;;;;;CAQR,OAAO,GAAG;;;;;;2DAM+C,OAAO,UAAU;;;;gEAIZ,OAAO,UAAU;;;CAG/E,SAAS,GAAG;;;;;;;;AAQd,EAAE"}

package/es/dashboard/FilterStrip/style.mjs

@@ -67,7 +67,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     color: ${cssVar.colorWarning};
   `,
 	frame: css`
-    --filter-seam: ${cssVar.colorFillSecondary};
+    --filter-seam: var(--lobe-fill-border, ${cssVar.colorFill});
 
     overflow: hidden;
     border-radius: inherit;

package/es/dashboard/FilterStrip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n    margin: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n    box-shadow:\n      inset -1px 0 0 var(--filter-seam),\n      inset 0 -1px 0 var(--filter-seam);\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-end: 1px;\n      inset-inline: 0;\n\n      block-size: 3px;\n\n      background: transparent;\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  cellActive: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &::after {\n      background: ${cssVar.colorText};\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  count: css`\n    font-size: ${cssVar.fontSizeHeading4};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n  `,\n  countDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  countWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n  frame: css`\n    --filter-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  labelActive: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsCS,OAAO,oBAAoB;;;CAG7C,YAAY,GAAG;kBACC,OAAO,kBAAkB;;;oBAGvB,OAAO,UAAU;;;;oBAIjB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;CAE5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;CAK7C,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,aAAa,GAAG;aACL,OAAO,UAAU;;AAE9B,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/FilterStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-start;\n\n    min-inline-size: 0;\n    margin: 0;\n    padding-block: 14px 16px;\n    padding-inline: 16px;\n    border: 0;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    background: transparent;\n    box-shadow:\n      inset -1px 0 0 var(--filter-seam),\n      inset 0 -1px 0 var(--filter-seam);\n\n    &::after {\n      content: '';\n\n      position: absolute;\n      inset-block-end: 1px;\n      inset-inline: 0;\n\n      block-size: 3px;\n\n      background: transparent;\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  cellActive: css`\n    background: ${cssVar.colorFillTertiary};\n\n    &::after {\n      background: ${cssVar.colorText};\n    }\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  count: css`\n    font-size: ${cssVar.fontSizeHeading4};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n  `,\n  countDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  countWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n  frame: css`\n    --filter-seam: var(--lobe-fill-border, ${cssVar.colorFill});\n\n    overflow: hidden;\n    border-radius: inherit;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  labelActive: css`\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAsCS,OAAO,oBAAoB;;;CAG7C,YAAY,GAAG;kBACC,OAAO,kBAAkB;;;oBAGvB,OAAO,UAAU;;;;oBAIjB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;iBACK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;CAE5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;CAE/B,OAAO,GAAG;6CACiC,OAAO,UAAU;;;;;CAK5D,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,aAAa,GAAG;aACL,OAAO,UAAU;;AAE9B,EAAE"}

package/es/dashboard/MetricStrip/style.mjs

@@ -99,7 +99,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	* track, which reads louder than the cells.
 	*/
 	frame: css`
-    --metric-seam: ${cssVar.colorFillSecondary};
+    --metric-seam: var(--lobe-fill-border, ${cssVar.colorFill});
 
     overflow: hidden;
     border-radius: inherit;

package/es/dashboard/MetricStrip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  /** Label-row control, pushed to the trailing edge. */\n  headAction: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n  `,\n  /** Full-width chart slot under the delta and hint. */\n  chart: css`\n    inline-size: 100%;\n    min-inline-size: 0;\n    margin-block-start: 6px;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: ${cssVar.colorFillSecondary};\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;;;;CASb,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;qBACS,OAAO,mBAAmB;;;;;;CAM7C,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/MetricStrip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  cell: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n\n    min-inline-size: 0;\n    padding-block: 16px;\n    padding-inline: 20px;\n\n    background: transparent;\n  `,\n  /** Joined strip only: the divider on the cell's trailing and bottom edges. */\n  cellSeam: css`\n    box-shadow:\n      inset -1px 0 0 var(--metric-seam),\n      inset 0 -1px 0 var(--metric-seam);\n  `,\n  /** Split strip and StatCard: one card per item. */\n  card: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  /* One fixed 32px row (a small Segmented or ActionIcon fits): an action or mark in the head must not push the value down, so cells with and\n     without header controls line up across a split strip or a row of StatCards. */\n  head: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    box-sizing: border-box;\n    min-inline-size: 0;\n    block-size: 32px;\n  `,\n  headCopy: css`\n    display: flex;\n    flex: 1;\n    gap: 6px;\n    align-items: center;\n\n    min-inline-size: 0;\n  `,\n  /** Label-row control, pushed to the trailing edge. */\n  headAction: css`\n    display: flex;\n    flex: none;\n    align-items: center;\n  `,\n  /** Full-width chart slot under the delta and hint. */\n  chart: css`\n    inline-size: 100%;\n    min-inline-size: 0;\n    margin-block-start: 6px;\n  `,\n  mark: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    inline-size: 24px;\n    block-size: 24px;\n    border: 1px solid ${cssVar.colorFillSecondary};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  split: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  delta: css`\n    font-size: 13px;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.4;\n  `,\n  deltaDown: css`\n    color: ${cssVar.colorError};\n  `,\n  deltaFlat: css`\n    color: ${cssVar.colorTextSecondary};\n  `,\n  deltaUp: css`\n    color: ${cssVar.colorSuccess};\n  `,\n  foot: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: baseline;\n  `,\n  /**\n   * Clips the seam that would otherwise sit on the card's trailing and bottom\n   * edges. A short last row used to show the seam color across the empty\n   * track, which reads louder than the cells.\n   */\n  frame: css`\n    --metric-seam: var(--lobe-fill-border, ${cssVar.colorFill});\n\n    overflow: hidden;\n    border-radius: inherit;\n    background: transparent;\n  `,\n  grid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n\n    inline-size: calc(100% + 1px);\n    margin-block-end: -1px;\n\n    background: transparent;\n  `,\n  hint: css`\n    font-size: 13px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  label: css`\n    font-size: 13px;\n    font-weight: 500;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  link: css`\n    color: inherit;\n    text-decoration: none;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  press: css`\n    cursor: pointer;\n\n    border: none;\n\n    font: inherit;\n    color: inherit;\n    text-align: start;\n\n    &:hover {\n      background: ${cssVar.colorFillQuaternary};\n    }\n  `,\n  /** Grid cell around a rendered link, so the link fills it. */\n  slot: css`\n    display: grid;\n    min-inline-size: 0;\n  `,\n  value: css`\n    overflow: hidden;\n\n    font-size: ${cssVar.fontSizeHeading3};\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.15;\n    color: ${cssVar.colorText};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  valueDanger: css`\n    color: ${cssVar.colorError};\n  `,\n  valueWarning: css`\n    color: ${cssVar.colorWarning};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;;CAYT,UAAU,GAAG;;;;;;CAMb,MAAM,GAAG;;;;CAMT,MAAM,GAAG;;;;;;;;;;CAUT,UAAU,GAAG;;;;;;;;;CASb,YAAY,GAAG;;;;;;CAMf,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;wBAQa,OAAO,mBAAmB;qBAC7B,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;kBAEpB,OAAO,kBAAkB;;CAEzC,OAAO,GAAG;;;;;CAKV,OAAO,GAAG;;;;;CAKV,WAAW,GAAG;aACH,OAAO,WAAW;;CAE7B,WAAW,GAAG;aACH,OAAO,mBAAmB;;CAErC,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;;;;;;;;;;;CAWT,OAAO,GAAG;6CACiC,OAAO,UAAU;;;;;;CAM5D,MAAM,GAAG;;;;;;;;;CAST,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,OAAO,GAAG;;;;aAIC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;oBAKS,OAAO,oBAAoB;;;CAG7C,OAAO,GAAG;;;;;;;;;;oBAUQ,OAAO,oBAAoB;;;;CAI7C,MAAM,GAAG;;;;CAIT,OAAO,GAAG;;;iBAGK,OAAO,iBAAiB;;;;aAI5B,OAAO,UAAU;;;;CAI5B,aAAa,GAAG;aACL,OAAO,WAAW;;CAE7B,cAAc,GAAG;aACN,OAAO,aAAa;;AAEjC,EAAE"}

package/es/dashboard/PageSkeleton/style.mjs

@@ -52,7 +52,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     min-block-size: 54px;
     padding-block: 12px;
     padding-inline: 16px;
-    border-block-end: 1px solid ${cssVar.colorFillSecondary};
+    border-block-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});
 
     &:last-child {
       border-block-end: none;
@@ -76,6 +76,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
     gap: 12px;
   `,
 	stat: css`
+    overflow: clip;
     display: flex;
     flex-direction: column;
     padding: 16px;

package/es/dashboard/PageSkeleton/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorFillSecondary};\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;kCAQwB,OAAO,mBAAmB;;;;;;CAM1D,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;CAKT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/PageSkeleton/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n  action: css`\n    flex: none;\n    inline-size: 96px;\n    block-size: 32px;\n\n    ${responsive.mobile} {\n      inline-size: 100%;\n      block-size: 44px;\n    }\n  `,\n  cell: css`\n    flex: none;\n    inline-size: 88px;\n    block-size: 14px;\n  `,\n  copy: css`\n    flex: 1;\n    min-inline-size: 0;\n  `,\n  header: css`\n    display: flex;\n    gap: 16px;\n    align-items: flex-start;\n    justify-content: space-between;\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  `,\n  headerCopy: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 8px;\n\n    min-inline-size: 0;\n  `,\n  page: css`\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  `,\n  row: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 54px;\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid var(--lobe-fill-border, ${cssVar.colorFill});\n\n    &:last-child {\n      border-block-end: none;\n    }\n  `,\n  srOnly: css`\n    position: absolute;\n\n    overflow: hidden;\n\n    inline-size: 1px;\n    block-size: 1px;\n\n    white-space: nowrap;\n\n    clip-path: inset(50%);\n  `,\n  statGrid: css`\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n    gap: 12px;\n  `,\n  stat: css`\n    overflow: clip;\n    display: flex;\n    flex-direction: column;\n    padding: 16px;\n  `,\n  statValue: css`\n    inline-size: 42%;\n    block-size: ${cssVar.fontSizeHeading2};\n    margin-block: 6px 14px;\n  `,\n  table: css`\n    overflow: hidden;\n    min-inline-size: 0;\n  `,\n  tag: css`\n    flex: none;\n    inline-size: 72px;\n    block-size: 22px;\n    border-radius: ${cssVar.borderRadiusSM};\n  `,\n  thead: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n\n    min-block-size: 39px;\n    padding-block: 10px;\n    padding-inline: 16px;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  theadCell: css`\n    flex: none;\n    block-size: 12px;\n  `,\n  title: css`\n    inline-size: 220px;\n    max-inline-size: 70%;\n    block-size: ${cssVar.fontSizeHeading3};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,QAAQ,GAAG;;;;;MAKP,WAAW,OAAO;;;;;CAKtB,MAAM,GAAG;;;;;CAKT,MAAM,GAAG;;;;CAIT,QAAQ,GAAG;;;;;;MAMP,WAAW,OAAO;;;;;CAKtB,YAAY,GAAG;;;;;;;;CAQf,MAAM,GAAG;;;;;CAKT,KAAK,GAAG;;;;;;;;0DAQgD,OAAO,UAAU;;;;;;CAMzE,QAAQ,GAAG;;;;;;;;;;;;CAYX,UAAU,GAAG;;;;;CAKb,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;kBAEE,OAAO,iBAAiB;;;CAGxC,OAAO,GAAG;;;;CAIV,KAAK,GAAG;;;;qBAIW,OAAO,eAAe;;CAEzC,OAAO,GAAG;;;;;;;;;kBASM,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;kBAGM,OAAO,iBAAiB;;AAE1C,EAAE"}

package/es/dashboard/Surface/Surface.mjs

@@ -21,7 +21,6 @@ function Surface({ bleed = false, chart, children, className, description, extra
 	const placeholder = Boolean(loading) && !defined(children);
 	const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;
 	const pad = bleed ? false : padded ?? (hasHeader || placeholder);
-	const clip = hasHeader || bleed || pad || defined(chart);
 	const heading = /* @__PURE__ */ jsxs("div", {
 		className: styles.heading,
 		children: [defined(title) ? /* @__PURE__ */ jsx("div", {
@@ -50,7 +49,7 @@ function Surface({ bleed = false, chart, children, className, description, extra
 	return /* @__PURE__ */ jsx(SurfaceDepthContext, {
 		value: depth + 1,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: cx(cardClassName, styles.content, clip && styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
+			className: cx(cardClassName, styles.content, styles.clip, href && styles.cardLinked, bleed && styles.bleed, className),
 			...rest,
 			children: [
 				hasHeader ? /* @__PURE__ */ jsxs("div", {

package/es/dashboard/Surface/Surface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport {\n  SurfaceDepthContext,\n  useSurfaceCardClassName,\n  useSurfaceDepth,\n  useSurfaceLink,\n} from './link';\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\nconst defined = (node: ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,\n * `description` or `extra` it gets a header and a padded body that lets a\n * trailing table meet the card edges.\n */\nfunction Surface({\n  bleed = false,\n  chart,\n  children,\n  className,\n  description,\n  extra,\n  href,\n  loading,\n  padded,\n  renderLink,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const cardClassName = useSurfaceCardClassName();\n  const refreshing = Boolean(loading) && defined(children);\n  const placeholder = Boolean(loading) && !defined(children);\n  const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;\n  const pad = bleed ? false : (padded ?? (hasHeader || placeholder));\n  const clip = hasHeader || bleed || pad || defined(chart);\n\n  const heading = (\n    <div className={styles.heading}>\n      {defined(title) ? <div className={styles.title}>{title}</div> : null}\n      {defined(description) ? <div className={styles.desc}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" className={styles.loading}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  // With header actions, the arrow sits after them as the rightmost item.\n  const trailing = refreshing || defined(extra);\n  const arrow = <ArrowUpRight aria-hidden data-surface-arrow className={styles.arrow} size={16} />;\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          cardClassName,\n          styles.content,\n          clip && styles.clip,\n          href && styles.cardLinked,\n          bleed && styles.bleed,\n          className,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div className={styles.header}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      {trailing ? null : arrow}\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {trailing ? (\n              <div className={styles.extra}>\n                {refreshing ? <Spin size=\"small\" variant=\"network\" /> : null}\n                {extra}\n                {href\n                  ? link({\n                      'aria-hidden': true,\n                      'children': arrow,\n                      'className': styles.arrowLink,\n                      href,\n                      'tabIndex': -1,\n                    } as any)\n                  : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div className={cx(styles.body, styles.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div className={styles.chart}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,WAAW,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;;;;;;AAOrF,SAAS,QAAQ,EACf,QAAQ,OACR,OACA,UACA,WACA,aACA,OACA,MACA,SACA,QACA,YACA,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,aAAa,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACvD,MAAM,cAAc,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;CACzD,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK;CAC9E,MAAM,MAAM,QAAQ,QAAS,WAAW,aAAa;CACrD,MAAM,OAAO,aAAa,SAAS,OAAO,QAAQ,KAAK;CAEvD,MAAM,UACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,MAC/D,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAiB,CAAA,IAAI,IACxE;;CAGP,MAAM,OAAO,cACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL;CAIF,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,QAAQ,oBAAC,cAAD;EAAc,eAAA;EAAY,sBAAA;EAAmB,WAAW,OAAO;EAAO,MAAM;CAAK,CAAA;CAE/F,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,eACA,OAAO,SACP,QAAQ,OAAO,MACf,QAAQ,OAAO,YACf,SAAS,OAAO,OAChB,SACF;GACA,GAAI;GATN,UAAA;IAWG,YACC,qBAAC,OAAD;KAAK,WAAW,OAAO;KAAvB,UAAA,CACG,OACG,KAAK;MACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,WAAW,OAAO,KACnB,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,WACC,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA;OACG,aAAa,oBAAC,MAAD;QAAM,MAAK;QAAQ,SAAQ;OAAW,CAAA,IAAI;OACvD;OACA,OACG,KAAK;QACH,eAAe;QACf,YAAY;QACZ,aAAa,OAAO;QACpB;QACA,YAAY;OACd,CAAQ,IACR;MACD;KACH,CAAA,IAAA,IACD;IACH,CAAA,IAAA;IACH,MAAM,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACzE,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;GAC7D;;CACc,CAAA;AAEzB;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"Surface.mjs","names":[],"sources":["../../../src/dashboard/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ArrowUpRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Spin from '@/base-ui/Spin';\n\nimport {\n  SurfaceDepthContext,\n  useSurfaceCardClassName,\n  useSurfaceDepth,\n  useSurfaceLink,\n} from './link';\nimport { styles } from './style';\nimport type { SurfaceProps } from './type';\n\nconst defined = (node: ReactNode) => node !== null && node !== undefined && node !== false;\n\n/**\n * Elevated card on a workspace canvas. Bare, it is a plain frame. With `title`,\n * `description` or `extra` it gets a header and a padded body that lets a\n * trailing table meet the card edges.\n */\nfunction Surface({\n  bleed = false,\n  chart,\n  children,\n  className,\n  description,\n  extra,\n  href,\n  loading,\n  padded,\n  renderLink,\n  title,\n  ...rest\n}: SurfaceProps) {\n  const depth = useSurfaceDepth();\n  const link = useSurfaceLink(renderLink);\n  const cardClassName = useSurfaceCardClassName();\n  const refreshing = Boolean(loading) && defined(children);\n  const placeholder = Boolean(loading) && !defined(children);\n  const hasHeader = defined(title) || defined(description) || defined(extra) || refreshing;\n  const pad = bleed ? false : (padded ?? (hasHeader || placeholder));\n\n  const heading = (\n    <div className={styles.heading}>\n      {defined(title) ? <div className={styles.title}>{title}</div> : null}\n      {defined(description) ? <div className={styles.desc}>{description}</div> : null}\n    </div>\n  );\n\n  const body = placeholder ? (\n    <div aria-busy=\"true\" className={styles.loading}>\n      <Skeleton height={220} radius={8} />\n    </div>\n  ) : (\n    children\n  );\n\n  // With header actions, the arrow sits after them as the rightmost item.\n  const trailing = refreshing || defined(extra);\n  const arrow = <ArrowUpRight aria-hidden data-surface-arrow className={styles.arrow} size={16} />;\n\n  return (\n    <SurfaceDepthContext value={depth + 1}>\n      <div\n        className={cx(\n          cardClassName,\n          styles.content,\n          styles.clip,\n          href && styles.cardLinked,\n          bleed && styles.bleed,\n          className,\n        )}\n        {...rest}\n      >\n        {hasHeader ? (\n          <div className={styles.header}>\n            {href\n              ? link({\n                  children: (\n                    <>\n                      {heading}\n                      {trailing ? null : arrow}\n                    </>\n                  ),\n                  className: styles.headingLink,\n                  href,\n                })\n              : heading}\n            {trailing ? (\n              <div className={styles.extra}>\n                {refreshing ? <Spin size=\"small\" variant=\"network\" /> : null}\n                {extra}\n                {href\n                  ? link({\n                      'aria-hidden': true,\n                      'children': arrow,\n                      'className': styles.arrowLink,\n                      href,\n                      'tabIndex': -1,\n                    } as any)\n                  : null}\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n        {pad ? <div className={cx(styles.body, styles.tableBleed)}>{body}</div> : body}\n        {defined(chart) ? <div className={styles.chart}>{chart}</div> : null}\n      </div>\n    </SurfaceDepthContext>\n  );\n}\n\nSurface.displayName = 'Surface';\n\nexport default Surface;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,WAAW,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;;;;;;AAOrF,SAAS,QAAQ,EACf,QAAQ,OACR,OACA,UACA,WACA,aACA,OACA,MACA,SACA,QACA,YACA,OACA,GAAG,QACY;CACf,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe,UAAU;CACtC,MAAM,gBAAgB,wBAAwB;CAC9C,MAAM,aAAa,QAAQ,OAAO,KAAK,QAAQ,QAAQ;CACvD,MAAM,cAAc,QAAQ,OAAO,KAAK,CAAC,QAAQ,QAAQ;CACzD,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK;CAC9E,MAAM,MAAM,QAAQ,QAAS,WAAW,aAAa;CAErD,MAAM,UACJ,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,QAAQ,KAAK,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAQ,UAAA;EAAW,CAAA,IAAI,MAC/D,QAAQ,WAAW,IAAI,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAO,UAAA;EAAiB,CAAA,IAAI,IACxE;;CAGP,MAAM,OAAO,cACX,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,OAAO;EACtC,UAAA,oBAAC,UAAD;GAAU,QAAQ;GAAK,QAAQ;EAAI,CAAA;CAChC,CAAA,IAEL;CAIF,MAAM,WAAW,cAAc,QAAQ,KAAK;CAC5C,MAAM,QAAQ,oBAAC,cAAD;EAAc,eAAA;EAAY,sBAAA;EAAmB,WAAW,OAAO;EAAO,MAAM;CAAK,CAAA;CAE/F,OACE,oBAAC,qBAAD;EAAqB,OAAO,QAAQ;EAClC,UAAA,qBAAC,OAAD;GACE,WAAW,GACT,eACA,OAAO,SACP,OAAO,MACP,QAAQ,OAAO,YACf,SAAS,OAAO,OAChB,SACF;GACA,GAAI;GATN,UAAA;IAWG,YACC,qBAAC,OAAD;KAAK,WAAW,OAAO;KAAvB,UAAA,CACG,OACG,KAAK;MACH,UACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACA,WAAW,OAAO,KACnB,EAAA,CAAA;MAEJ,WAAW,OAAO;MAClB;KACF,CAAC,IACD,SACH,WACC,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA;OACG,aAAa,oBAAC,MAAD;QAAM,MAAK;QAAQ,SAAQ;OAAW,CAAA,IAAI;OACvD;OACA,OACG,KAAK;QACH,eAAe;QACf,YAAY;QACZ,aAAa,OAAO;QACpB;QACA,YAAY;OACd,CAAQ,IACR;MACD;KACH,CAAA,IAAA,IACD;IACH,CAAA,IAAA;IACH,MAAM,oBAAC,OAAD;KAAK,WAAW,GAAG,OAAO,MAAM,OAAO,UAAU;KAAI,UAAA;IAAU,CAAA,IAAI;IACzE,QAAQ,KAAK,IAAI,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI;GAC7D;;CACc,CAAA;AAEzB;AAEA,QAAQ,cAAc"}

package/es/dashboard/Surface/link.d.mts

@@ -10,7 +10,7 @@ declare const useSurfaceLink: (override?: SurfaceRenderLink) => SurfaceRenderLin
 /** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
 declare const useSurfaceDepth: () => number;
 /**
- * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in
+ * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in
  * dark, and no fill of its own when nested in another Surface.
  */
 declare const useSurfaceCardClassName: () => string;

package/es/dashboard/Surface/link.mjs

@@ -19,7 +19,7 @@ const useSurfaceLink = (override) => override ?? use(SurfaceLinkContext);
 /** How many Surface cards wrap this node. A table can skip its own card when already inside one. */
 const useSurfaceDepth = () => use(SurfaceDepthContext);
 /**
-* Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in
+* Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in
 * dark, and no fill of its own when nested in another Surface.
 */
 const useSurfaceCardClassName = () => {

package/es/dashboard/Surface/link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { createContext, type ReactNode, use } from 'react';\n\nimport { styles } from './style';\nimport type { SurfaceLinkProps, SurfaceRenderLink } from './type';\n\nconst defaultRenderLink: SurfaceRenderLink = ({ children, ...rest }: SurfaceLinkProps) => (\n  <a {...rest}>{children}</a>\n);\n\nconst SurfaceLinkContext = createContext<SurfaceRenderLink>(defaultRenderLink);\n\nconst SurfaceDepthContext = createContext(0);\n\n/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */\nexport const SurfaceLinkProvider = ({\n  children,\n  renderLink,\n}: {\n  children?: ReactNode;\n  renderLink: SurfaceRenderLink;\n}) => <SurfaceLinkContext value={renderLink}>{children}</SurfaceLinkContext>;\n\nexport const useSurfaceLink = (override?: SurfaceRenderLink) => override ?? use(SurfaceLinkContext);\n\n/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */\nexport const useSurfaceDepth = () => use(SurfaceDepthContext);\n\nexport { SurfaceDepthContext };\n\n/**\n * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillTertiary` in\n * dark, and no fill of its own when nested in another Surface.\n */\nexport const useSurfaceCardClassName = () => {\n  const { isDarkMode } = useThemeMode();\n  const depth = useSurfaceDepth();\n  return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);\n};\n"],"mappings":";;;;;;AAQA,MAAM,qBAAwC,EAAE,UAAU,GAAG,WAC3D,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAG5B,MAAM,qBAAqB,cAAiC,iBAAiB;AAE7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAE3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB;;;;;AAQ5D,MAAa,gCAAgC;CAC3C,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,QAAQ,gBAAgB;CAC9B,OAAO,GAAG,OAAO,MAAM,cAAc,OAAO,UAAU,QAAQ,KAAK,OAAO,UAAU;AACtF"}
+{"version":3,"file":"link.mjs","names":[],"sources":["../../../src/dashboard/Surface/link.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { createContext, type ReactNode, use } from 'react';\n\nimport { styles } from './style';\nimport type { SurfaceLinkProps, SurfaceRenderLink } from './type';\n\nconst defaultRenderLink: SurfaceRenderLink = ({ children, ...rest }: SurfaceLinkProps) => (\n  <a {...rest}>{children}</a>\n);\n\nconst SurfaceLinkContext = createContext<SurfaceRenderLink>(defaultRenderLink);\n\nconst SurfaceDepthContext = createContext(0);\n\n/** Plugs the app router into every dashboard card link (Surface, MetricStrip, Section). */\nexport const SurfaceLinkProvider = ({\n  children,\n  renderLink,\n}: {\n  children?: ReactNode;\n  renderLink: SurfaceRenderLink;\n}) => <SurfaceLinkContext value={renderLink}>{children}</SurfaceLinkContext>;\n\nexport const useSurfaceLink = (override?: SurfaceRenderLink) => override ?? use(SurfaceLinkContext);\n\n/** How many Surface cards wrap this node. A table can skip its own card when already inside one. */\nexport const useSurfaceDepth = () => use(SurfaceDepthContext);\n\nexport { SurfaceDepthContext };\n\n/**\n * Class for a dashboard card: `colorBgContainer` in light, translucent `colorFillQuaternary` in\n * dark, and no fill of its own when nested in another Surface.\n */\nexport const useSurfaceCardClassName = () => {\n  const { isDarkMode } = useThemeMode();\n  const depth = useSurfaceDepth();\n  return cx(styles.card, isDarkMode && styles.cardDark, depth > 0 && styles.cardNested);\n};\n"],"mappings":";;;;;;AAQA,MAAM,qBAAwC,EAAE,UAAU,GAAG,WAC3D,oBAAC,KAAD;CAAG,GAAI;CAAO;AAAY,CAAA;AAG5B,MAAM,qBAAqB,cAAiC,iBAAiB;AAE7E,MAAM,sBAAsB,cAAc,CAAC;;AAG3C,MAAa,uBAAuB,EAClC,UACA,iBAII,oBAAC,oBAAD;CAAoB,OAAO;CAAa;AAA6B,CAAA;AAE3E,MAAa,kBAAkB,aAAiC,YAAY,IAAI,kBAAkB;;AAGlG,MAAa,wBAAwB,IAAI,mBAAmB;;;;;AAQ5D,MAAa,gCAAgC;CAC3C,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,QAAQ,gBAAgB;CAC9B,OAAO,GAAG,OAAO,MAAM,cAAc,OAAO,UAAU,QAAQ,KAAK,OAAO,UAAU;AACtF"}

package/es/dashboard/Surface/style.d.mts

@@ -3,16 +3,18 @@
  * A content card sitting on the workspace.
  *
  * Backgrounds: light mode uses `colorBgContainer`. Dark mode uses the translucent
- * `colorFillTertiary` (white 6%): on the #0d0d0d workspace it reads as about #1c1c1c, a subtle
- * raised step. `colorFillQuaternary` (white 2%, about #111) would barely separate from the page.
+ * `colorFillQuaternary` (white 2%), one step below `colorFillTertiary`, for a quieter raised
+ * step on the workspace.
  *
- * Borders and inner dividers (table, header and cell lines, PageSkeleton) use `colorFillSecondary`
- * (white 10% in dark, black 6% in light); hover and focus use the stronger `colorFill`. The light
- * card outline itself is one step darker (`colorFill`); dark keeps `colorFillSecondary`, which over
- * the dark card lands near #2f2f2f against #1c1c1c.
+ * Borders and inner dividers (table, header and cell lines, PageSkeleton, strip seams) all use
+ * `--lobe-fill-border` (`colorFill` in light, `colorFillSecondary` in dark; set on `:root` by
+ * ThemeProvider). Hover / focus / stronger edges use `--lobe-fill-border-strong` (light:
+ * `colorFill` mixed 15% toward `colorText`; dark: `colorFill`). Light is Block `outlined`
+ * (`colorBgContainer` + border); dark uses translucent `colorFillQuaternary` with the same
+ * border var.
  *
  * Anything that must hide content scrolled beneath it (table header cells, pinned and sticky
- * cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 6% blended onto
+ * cells, their scroll shadows) uses `--lobe-surface-bg-solid`: the same white 2% blended onto
  * `--lobe-surface-canvas` (default `colorBgContainer`, the ConsoleShell workspace). `color-mix`
  * in srgb with an opaque base is plain alpha compositing, so it matches the translucent card.
  * Set `--lobe-surface-canvas` when a card sits on another page color.
@@ -28,7 +30,11 @@ declare const styles: {
   cardDark: string;
   cardNested: string;
   chart: string;
-  /** Rounded corners clip a bled table, header rule, or chart. Bare cards keep overflow visible. */
+  /**
+   * Rounded corners clip whatever reaches the edge: a bled table, header rule, chart, or a
+   * tab / segmented indicator. \`clip\` (not \`hidden\`) creates no scroll container, so sticky
+   * table headers keep sticking to the page scroller; popups are portaled and unaffected.
+   */
   clip: string;
   loading: string;
   arrow: string;