@kiefer-tek/sophea-design-system 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,79 @@
1
+ import { ReactNode } from 'react';
2
+ export interface CopyButtonProps {
3
+ /** Returns the plain-text payload to copy (computed lazily on click). */
4
+ getText: () => string;
5
+ /** Used in the title/aria ("Copy {label}"). */
6
+ label: string;
7
+ /** Extra classes on the button root (e.g. a hover-reveal utility). */
8
+ className?: string;
9
+ }
10
+ /**
11
+ * Copy-to-clipboard button: a Copy glyph that flips to a Check for ~1.4s after
12
+ * a successful copy. Visible by default; pass a className to control reveal
13
+ * (OverviewCard reveals it on the card's hover).
14
+ */
15
+ export declare function CopyButton({ getText, label, className }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
16
+ export interface DetailPanelProps {
17
+ children: ReactNode;
18
+ /** Fill a height-constrained flex parent so the list scrolls inside via
19
+ * DetailScrollRegion while the toolbar stays pinned. Omit for normal flow. */
20
+ fill?: boolean;
21
+ className?: string;
22
+ }
23
+ /** Bordered card container for a tab section. */
24
+ export declare function DetailPanel({ children, fill, className }: DetailPanelProps): import("react/jsx-runtime").JSX.Element;
25
+ /** The scrolling body under a fixed toolbar — only meaningful inside a `fill`
26
+ * panel. `data-scroll-region` lets a consumer centre an item inside it. */
27
+ export declare function DetailScrollRegion({ children }: {
28
+ children: ReactNode;
29
+ }): import("react/jsx-runtime").JSX.Element;
30
+ export interface DetailToolbarProps {
31
+ value: string;
32
+ onChange: (v: string) => void;
33
+ placeholder: string;
34
+ ariaLabel?: string;
35
+ clearLabel?: string;
36
+ /** Right-aligned action slot (e.g. a Copy button, a Select, an export). */
37
+ children?: ReactNode;
38
+ }
39
+ /** Search toolbar: a SearchInput on the left + an optional right action slot. */
40
+ export declare function DetailToolbar({ value, onChange, placeholder, ariaLabel, clearLabel, children }: DetailToolbarProps): import("react/jsx-runtime").JSX.Element;
41
+ /** Divided list wrapper for section rows. */
42
+ export declare function DetailList({ children }: {
43
+ children: ReactNode;
44
+ }): import("react/jsx-runtime").JSX.Element;
45
+ export interface DetailRowProps {
46
+ icon?: ReactNode;
47
+ children: ReactNode;
48
+ onClick?: () => void;
49
+ }
50
+ /** A section row: leading icon + content + a reveal chevron on hover (when
51
+ * clickable). The clickable hover affordance is a title underline. */
52
+ export declare function DetailRow({ icon, children, onClick }: DetailRowProps): import("react/jsx-runtime").JSX.Element;
53
+ /** Centered italic empty message inside a panel. */
54
+ export declare function DetailEmptyRow({ children }: {
55
+ children: ReactNode;
56
+ }): import("react/jsx-runtime").JSX.Element;
57
+ export interface OverviewCardProps {
58
+ icon: ReactNode;
59
+ title: string;
60
+ count?: number;
61
+ children: ReactNode;
62
+ onViewAll?: () => void;
63
+ viewAllLabel?: string;
64
+ /** When set, a hover-revealed copy button appears in the header. Returns the
65
+ * section's plain-text representation. */
66
+ copyText?: () => string;
67
+ copyLabel?: string;
68
+ }
69
+ /** Overview dashboard card: icon + title + count header (with an optional
70
+ * hover-revealed copy button), a body of jump rows, and an optional
71
+ * full-width "View all" footer. */
72
+ export declare function OverviewCard({ icon, title, count, children, onViewAll, viewAllLabel, copyText, copyLabel, }: OverviewCardProps): import("react/jsx-runtime").JSX.Element;
73
+ export interface OverviewBulletProps {
74
+ children: ReactNode;
75
+ onClick?: () => void;
76
+ }
77
+ /** A bullet jump-row inside an OverviewCard. */
78
+ export declare function OverviewBullet({ children, onClick }: OverviewBulletProps): import("react/jsx-runtime").JSX.Element;
79
+ //# sourceMappingURL=DetailSection.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DetailSection.d.ts","sourceRoot":"","sources":["../../../src/components/DetailSection/DetailSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA2DjD,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,OAAO,EAAE,MAAM,MAAM,CAAC;IACtB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,eAAe,2CAmBxE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;mFAC+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iDAAiD;AACjD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAY,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAElF;AAED;4EAC4E;AAC5E,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMvE;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAelH;AAED,6CAA6C;AAC7C,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE/D;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;uEACuE;AACvE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,cAAc,2CASpE;AAED,oDAAoD;AACpD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAEnE;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;+CAC2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;oCAEoC;AACpC,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,YAAyB,EACzB,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CAwBnB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,gDAAgD;AAChD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CAcxE"}
@@ -0,0 +1,3 @@
1
+ export { DetailPanel, DetailScrollRegion, DetailToolbar, DetailList, DetailRow, DetailEmptyRow, OverviewCard, OverviewBullet, CopyButton, } from './DetailSection';
2
+ export type { DetailPanelProps, DetailToolbarProps, DetailRowProps, OverviewCardProps, OverviewBulletProps, CopyButtonProps, } from './DetailSection';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DetailSection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,cAAc,EACd,UAAU,GACX,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,GAChB,MAAM,iBAAiB,CAAC"}
@@ -53,6 +53,7 @@ export * from './AIAnatomy';
53
53
  export * from './Citation';
54
54
  export * from './EmptyState';
55
55
  export * from './Card';
56
+ export * from './DetailSection';
56
57
  export * from './AnimatedBorder';
57
58
  export * from './VisuallyHidden';
58
59
  export * from './SkipLink';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC"}
package/dist/index.css CHANGED
@@ -6916,6 +6916,375 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
6916
6916
  .dark .sn-Card-module__footer--Mu-JC {
6917
6917
  background: var(--surface-s3);
6918
6918
  }
6919
+ /* Detail-section primitives — the shared shell for tabbed detail pages
6920
+ (meeting detail, project detail). Presentational only; each page feeds its
6921
+ own data into the same panels / rows / cards so the surfaces stay identical.
6922
+ Tokens only (no hardcoded colours); see Guidelines / Scrollable list pages
6923
+ (Shape B) for the page frame these sit in. */
6924
+
6925
+ /* ── Panel ───────────────────────────────────────────────────────────────── */
6926
+ .sn-DetailSection-module__panel--rvOxd {
6927
+ display: flex;
6928
+ flex-direction: column;
6929
+ border-radius: 16px;
6930
+ border: 1px solid var(--border-02);
6931
+ background: var(--surface-s2);
6932
+ padding: 20px;
6933
+ }
6934
+ /* Fill a height-constrained flex parent; the list scrolls inside via
6935
+ DetailScrollRegion while the toolbar stays pinned. */
6936
+ .sn-DetailSection-module__panelFill--UPHdg {
6937
+ min-height: 0;
6938
+ flex: 1 1 0%;
6939
+ }
6940
+
6941
+ /* ── Scroll region ───────────────────────────────────────────────────────── */
6942
+ .sn-DetailSection-module__scrollRegion--wI64N {
6943
+ min-height: 0;
6944
+ flex: 1 1 0%;
6945
+ overflow-y: auto;
6946
+ overflow-x: hidden;
6947
+ padding-right: 4px;
6948
+ padding-bottom: 12px;
6949
+ }
6950
+
6951
+ /* ── Toolbar ─────────────────────────────────────────────────────────────── */
6952
+ .sn-DetailSection-module__toolbar--hlS2f {
6953
+ margin-bottom: 16px;
6954
+ display: flex;
6955
+ align-items: center;
6956
+ gap: 8px;
6957
+ }
6958
+ .sn-DetailSection-module__toolbarSearch--KB3Vb {
6959
+ min-width: 0;
6960
+ max-width: 420px;
6961
+ flex: 1 1 0%;
6962
+ }
6963
+ .sn-DetailSection-module__toolbarActions--OkR79 {
6964
+ margin-left: auto;
6965
+ display: flex;
6966
+ align-items: center;
6967
+ gap: 8px;
6968
+ }
6969
+
6970
+ /* ── List + rows ─────────────────────────────────────────────────────────── */
6971
+ .sn-DetailSection-module__list--ksAKO {
6972
+ list-style: none;
6973
+ margin: 0 -8px;
6974
+ padding: 0;
6975
+ }
6976
+ .sn-DetailSection-module__list--ksAKO > li + li {
6977
+ border-top: 1px solid var(--border-01);
6978
+ }
6979
+ .sn-DetailSection-module__row--aTiRQ {
6980
+ display: flex;
6981
+ align-items: flex-start;
6982
+ gap: 12px;
6983
+ border-radius: 6px;
6984
+ padding: 10px 8px;
6985
+ }
6986
+ .sn-DetailSection-module__rowClickable--E9Dce {
6987
+ cursor: pointer;
6988
+ }
6989
+ .sn-DetailSection-module__rowIcon--E6msp {
6990
+ margin-top: 2px;
6991
+ flex-shrink: 0;
6992
+ display: flex;
6993
+ color: var(--theme-primary-05);
6994
+ }
6995
+ .sn-DetailSection-module__rowContent--f0lcw {
6996
+ min-width: 0;
6997
+ flex: 1 1 0%;
6998
+ }
6999
+ /* Hover affordance is a title underline — the content's first child — not a
7000
+ surface fill. */
7001
+ .sn-DetailSection-module__rowClickable--E9Dce:hover .sn-DetailSection-module__rowContent--f0lcw > :first-child {
7002
+ text-decoration: underline;
7003
+ text-underline-offset: 2px;
7004
+ }
7005
+ .sn-DetailSection-module__rowChevron--mcYhI {
7006
+ margin-top: 2px;
7007
+ width: 16px;
7008
+ height: 16px;
7009
+ flex-shrink: 0;
7010
+ color: var(--text-03);
7011
+ opacity: 0;
7012
+ transition: opacity 0.15s ease;
7013
+ }
7014
+ .sn-DetailSection-module__rowClickable--E9Dce:hover .sn-DetailSection-module__rowChevron--mcYhI {
7015
+ opacity: 1;
7016
+ }
7017
+
7018
+ .sn-DetailSection-module__emptyRow--KlqBi {
7019
+ margin: 0;
7020
+ padding: 32px 0;
7021
+ text-align: center;
7022
+ font-size: 14px;
7023
+ font-style: italic;
7024
+ color: var(--text-03);
7025
+ }
7026
+
7027
+ /* ── Overview card ───────────────────────────────────────────────────────── */
7028
+ .sn-DetailSection-module__overviewCard--QIw-m {
7029
+ display: flex;
7030
+ flex-direction: column;
7031
+ border-radius: 16px;
7032
+ border: 1px solid var(--border-02);
7033
+ background: var(--surface-s2);
7034
+ padding: 20px;
7035
+ }
7036
+ .sn-DetailSection-module__overviewHeader--fUUF1 {
7037
+ margin-bottom: 12px;
7038
+ display: flex;
7039
+ align-items: center;
7040
+ gap: 10px;
7041
+ }
7042
+ .sn-DetailSection-module__overviewIcon--dFo9r {
7043
+ display: flex;
7044
+ color: var(--theme-primary-05);
7045
+ }
7046
+ .sn-DetailSection-module__overviewTitle--Q1e1y {
7047
+ margin: 0;
7048
+ font-size: 16px;
7049
+ font-weight: 600;
7050
+ color: var(--text-05);
7051
+ }
7052
+ .sn-DetailSection-module__overviewCount--dM4fD {
7053
+ margin-left: 4px;
7054
+ font-weight: 400;
7055
+ color: var(--text-03);
7056
+ }
7057
+ .sn-DetailSection-module__overviewSpacer--C9rb0 {
7058
+ flex: 1 1 0%;
7059
+ }
7060
+ .sn-DetailSection-module__overviewBody--YPzkN {
7061
+ flex: 1 1 0%;
7062
+ }
7063
+ .sn-DetailSection-module__viewAll--R-nHE {
7064
+ margin-top: 12px;
7065
+ display: inline-flex;
7066
+ width: 100%;
7067
+ align-items: center;
7068
+ justify-content: center;
7069
+ gap: 6px;
7070
+ border-radius: 10px;
7071
+ border: 1px solid var(--border-02);
7072
+ background: var(--surface-s2);
7073
+ padding: 8px 14px;
7074
+ font-size: 12px;
7075
+ font-weight: 500;
7076
+ color: var(--theme-primary-05);
7077
+ cursor: pointer;
7078
+ transition: background-color 0.15s ease, color 0.15s ease;
7079
+ }
7080
+ .sn-DetailSection-module__viewAll--R-nHE:hover {
7081
+ background: var(--surface-s3);
7082
+ color: var(--theme-primary-06);
7083
+ }
7084
+
7085
+ /* Header copy button: hidden at rest, revealed on the card's hover or when the
7086
+ button itself takes keyboard focus. */
7087
+ .sn-DetailSection-module__overviewCopy--H-ITM {
7088
+ opacity: 0;
7089
+ transition: opacity 0.15s ease;
7090
+ }
7091
+ .sn-DetailSection-module__overviewCard--QIw-m:hover .sn-DetailSection-module__overviewCopy--H-ITM,
7092
+ .sn-DetailSection-module__overviewCard--QIw-m:focus-within .sn-DetailSection-module__overviewCopy--H-ITM {
7093
+ opacity: 1;
7094
+ }
7095
+
7096
+ /* ── Overview bullet (jump row) ──────────────────────────────────────────── */
7097
+ .sn-DetailSection-module__bullet--ENOxX {
7098
+ display: flex;
7099
+ width: 100%;
7100
+ align-items: center;
7101
+ gap: 10px;
7102
+ border-radius: 6px;
7103
+ padding: 8px 6px;
7104
+ text-align: left;
7105
+ background: transparent;
7106
+ border: 0;
7107
+ color: inherit;
7108
+ font: inherit;
7109
+ }
7110
+ .sn-DetailSection-module__bulletClickable--E-sdz {
7111
+ cursor: pointer;
7112
+ }
7113
+ .sn-DetailSection-module__bulletDisabled--U-GZL {
7114
+ cursor: default;
7115
+ }
7116
+ .sn-DetailSection-module__bulletDot--z0w3u {
7117
+ width: 6px;
7118
+ height: 6px;
7119
+ flex-shrink: 0;
7120
+ border-radius: 9999px;
7121
+ background: var(--theme-primary-05);
7122
+ }
7123
+ .sn-DetailSection-module__bulletText--qeb-2 {
7124
+ min-width: 0;
7125
+ flex: 1 1 0%;
7126
+ overflow: hidden;
7127
+ text-overflow: ellipsis;
7128
+ white-space: nowrap;
7129
+ font-size: 14px;
7130
+ color: var(--text-05);
7131
+ text-underline-offset: 2px;
7132
+ }
7133
+ .sn-DetailSection-module__bulletClickable--E-sdz:hover .sn-DetailSection-module__bulletText--qeb-2 {
7134
+ text-decoration: underline;
7135
+ }
7136
+ .sn-DetailSection-module__bulletChevron--lvzGx {
7137
+ width: 14px;
7138
+ height: 14px;
7139
+ flex-shrink: 0;
7140
+ color: var(--text-03);
7141
+ }
7142
+ .sn-SearchInput-module__wrapper--q8GEq {
7143
+ display: flex;
7144
+ flex-direction: column;
7145
+ gap: 6px;
7146
+ font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
7147
+ min-width: 0;
7148
+ }
7149
+
7150
+ .sn-SearchInput-module__label--4lcBT {
7151
+ font-size: 12px;
7152
+ font-weight: 500;
7153
+ color: var(--text-04);
7154
+ letter-spacing: -0.005em;
7155
+ }
7156
+
7157
+ .sn-SearchInput-module__field--ONU-p {
7158
+ display: flex;
7159
+ align-items: center;
7160
+ gap: 10px;
7161
+ min-width: 200px;
7162
+ /* Defaults: an elevated field on a page (s3 fill + a >=3:1 border that clears
7163
+ SC 1.4.11 in both themes — --border-04 = #7f8da1/#6b7a90). Both are tunable
7164
+ so a host can soften them where the default reads as a bright floating box
7165
+ — e.g. a search field seated in the app-shell header over a flat-dark /
7166
+ glass surface. */
7167
+ background: var(--search-input-bg, var(--surface-s3));
7168
+ border: 1px solid var(--search-input-border, var(--border-04));
7169
+ border-radius: 10px;
7170
+ padding: 10px 12px;
7171
+ transition:
7172
+ border-color var(--duration-fast, 120ms) var(--ease-out, ease-out),
7173
+ box-shadow var(--duration-fast, 120ms) var(--ease-out, ease-out);
7174
+ }
7175
+
7176
+ .sn-SearchInput-module__field--ONU-p:focus-within {
7177
+ border-color: var(--theme-primary-06);
7178
+ outline: 3px solid var(--sophea-focus-halo);
7179
+ outline-offset: 0;
7180
+ }
7181
+
7182
+ .sn-SearchInput-module__field-error--XjiQc {
7183
+ border-color: var(--status-error-05, #dc2626);
7184
+ }
7185
+
7186
+ .sn-SearchInput-module__field-error--XjiQc:focus-within {
7187
+ outline-color: rgba(220, 38, 38, 0.25);
7188
+ }
7189
+
7190
+ .sn-SearchInput-module__icon--I9nEG {
7191
+ display: inline-flex;
7192
+ align-items: center;
7193
+ justify-content: center;
7194
+ flex-shrink: 0;
7195
+ color: var(--text-03, #6b7a90);
7196
+ }
7197
+
7198
+ .sn-SearchInput-module__spin--kpH-o {
7199
+ animation: sn-SearchInput-module__sds-search-spin--cmFTn 900ms linear infinite;
7200
+ }
7201
+
7202
+ .sn-SearchInput-module__input--rhhzi {
7203
+ flex: 1 1 auto;
7204
+ min-width: 0;
7205
+ border: 0;
7206
+ background: transparent;
7207
+ outline: none;
7208
+ font: inherit;
7209
+ font-size: 14px;
7210
+ line-height: 1.4;
7211
+ color: var(--text-05, #0f172a);
7212
+ }
7213
+
7214
+ /* Strip the WebKit search clear button — we ship our own. */
7215
+ .sn-SearchInput-module__input--rhhzi::-webkit-search-cancel-button {
7216
+ appearance: none;
7217
+ }
7218
+
7219
+ .sn-SearchInput-module__input--rhhzi::placeholder {
7220
+ color: var(--text-04); /* placeholder is text: 4.5:1 AA — text-02 measured 2.0:1 dark / 2.4:1 light */
7221
+ }
7222
+
7223
+ .sn-SearchInput-module__input--rhhzi:disabled {
7224
+ cursor: not-allowed;
7225
+ opacity: 0.6;
7226
+ }
7227
+
7228
+ .sn-SearchInput-module__trailing--ZJbHB {
7229
+ display: inline-flex;
7230
+ align-items: center;
7231
+ flex-shrink: 0;
7232
+ color: var(--text-03, #6b7a90);
7233
+ }
7234
+
7235
+ .sn-SearchInput-module__clear--r3kgN {
7236
+ display: inline-flex;
7237
+ align-items: center;
7238
+ justify-content: center;
7239
+ flex-shrink: 0;
7240
+ padding: 2px;
7241
+ margin: -2px;
7242
+ background: transparent;
7243
+ border: 0;
7244
+ border-radius: 999px;
7245
+ color: var(--text-03);
7246
+ cursor: pointer;
7247
+ }
7248
+
7249
+ .sn-SearchInput-module__clear--r3kgN:hover:not(:disabled) {
7250
+ background: rgba(15, 23, 42, 0.08);
7251
+ color: var(--text-05);
7252
+ }
7253
+
7254
+ .sn-SearchInput-module__clear--r3kgN:focus-visible {
7255
+ outline: 2px solid var(--sophea-focus-ring);
7256
+ outline-offset: 2px;
7257
+ }
7258
+
7259
+ .sn-SearchInput-module__clear--r3kgN:disabled {
7260
+ opacity: 0.5;
7261
+ cursor: not-allowed;
7262
+ }
7263
+
7264
+ .sn-SearchInput-module__hint--6W4as {
7265
+ font-size: 12px;
7266
+ color: var(--text-04);
7267
+ }
7268
+
7269
+ .sn-SearchInput-module__error--Ewib2 {
7270
+ font-size: 12px;
7271
+ color: var(--status-error-50, #dc2626);
7272
+ }
7273
+
7274
+ @keyframes sn-SearchInput-module__sds-search-spin--cmFTn {
7275
+ to {
7276
+ transform: rotate(360deg);
7277
+ }
7278
+ }
7279
+
7280
+ @media (prefers-reduced-motion: reduce) {
7281
+ .sn-SearchInput-module__field--ONU-p {
7282
+ transition: none;
7283
+ }
7284
+ .sn-SearchInput-module__spin--kpH-o {
7285
+ animation: none;
7286
+ }
7287
+ }
6919
7288
  .sn-SkipLink-module__link--bc0O7 {
6920
7289
  /* Off-screen until focused. Stays in the DOM so screen-reader navigation
6921
7290
  still picks it up; only the visual sits out of view. */
@@ -7691,152 +8060,6 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
7691
8060
  transition: none;
7692
8061
  }
7693
8062
  }
7694
- .sn-SearchInput-module__wrapper--q8GEq {
7695
- display: flex;
7696
- flex-direction: column;
7697
- gap: 6px;
7698
- font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
7699
- min-width: 0;
7700
- }
7701
-
7702
- .sn-SearchInput-module__label--4lcBT {
7703
- font-size: 12px;
7704
- font-weight: 500;
7705
- color: var(--text-04);
7706
- letter-spacing: -0.005em;
7707
- }
7708
-
7709
- .sn-SearchInput-module__field--ONU-p {
7710
- display: flex;
7711
- align-items: center;
7712
- gap: 10px;
7713
- min-width: 200px;
7714
- /* Defaults: an elevated field on a page (s3 fill + a >=3:1 border that clears
7715
- SC 1.4.11 in both themes — --border-04 = #7f8da1/#6b7a90). Both are tunable
7716
- so a host can soften them where the default reads as a bright floating box
7717
- — e.g. a search field seated in the app-shell header over a flat-dark /
7718
- glass surface. */
7719
- background: var(--search-input-bg, var(--surface-s3));
7720
- border: 1px solid var(--search-input-border, var(--border-04));
7721
- border-radius: 10px;
7722
- padding: 10px 12px;
7723
- transition:
7724
- border-color var(--duration-fast, 120ms) var(--ease-out, ease-out),
7725
- box-shadow var(--duration-fast, 120ms) var(--ease-out, ease-out);
7726
- }
7727
-
7728
- .sn-SearchInput-module__field--ONU-p:focus-within {
7729
- border-color: var(--theme-primary-06);
7730
- outline: 3px solid var(--sophea-focus-halo);
7731
- outline-offset: 0;
7732
- }
7733
-
7734
- .sn-SearchInput-module__field-error--XjiQc {
7735
- border-color: var(--status-error-05, #dc2626);
7736
- }
7737
-
7738
- .sn-SearchInput-module__field-error--XjiQc:focus-within {
7739
- outline-color: rgba(220, 38, 38, 0.25);
7740
- }
7741
-
7742
- .sn-SearchInput-module__icon--I9nEG {
7743
- display: inline-flex;
7744
- align-items: center;
7745
- justify-content: center;
7746
- flex-shrink: 0;
7747
- color: var(--text-03, #6b7a90);
7748
- }
7749
-
7750
- .sn-SearchInput-module__spin--kpH-o {
7751
- animation: sn-SearchInput-module__sds-search-spin--cmFTn 900ms linear infinite;
7752
- }
7753
-
7754
- .sn-SearchInput-module__input--rhhzi {
7755
- flex: 1 1 auto;
7756
- min-width: 0;
7757
- border: 0;
7758
- background: transparent;
7759
- outline: none;
7760
- font: inherit;
7761
- font-size: 14px;
7762
- line-height: 1.4;
7763
- color: var(--text-05, #0f172a);
7764
- }
7765
-
7766
- /* Strip the WebKit search clear button — we ship our own. */
7767
- .sn-SearchInput-module__input--rhhzi::-webkit-search-cancel-button {
7768
- appearance: none;
7769
- }
7770
-
7771
- .sn-SearchInput-module__input--rhhzi::placeholder {
7772
- color: var(--text-04); /* placeholder is text: 4.5:1 AA — text-02 measured 2.0:1 dark / 2.4:1 light */
7773
- }
7774
-
7775
- .sn-SearchInput-module__input--rhhzi:disabled {
7776
- cursor: not-allowed;
7777
- opacity: 0.6;
7778
- }
7779
-
7780
- .sn-SearchInput-module__trailing--ZJbHB {
7781
- display: inline-flex;
7782
- align-items: center;
7783
- flex-shrink: 0;
7784
- color: var(--text-03, #6b7a90);
7785
- }
7786
-
7787
- .sn-SearchInput-module__clear--r3kgN {
7788
- display: inline-flex;
7789
- align-items: center;
7790
- justify-content: center;
7791
- flex-shrink: 0;
7792
- padding: 2px;
7793
- margin: -2px;
7794
- background: transparent;
7795
- border: 0;
7796
- border-radius: 999px;
7797
- color: var(--text-03);
7798
- cursor: pointer;
7799
- }
7800
-
7801
- .sn-SearchInput-module__clear--r3kgN:hover:not(:disabled) {
7802
- background: rgba(15, 23, 42, 0.08);
7803
- color: var(--text-05);
7804
- }
7805
-
7806
- .sn-SearchInput-module__clear--r3kgN:focus-visible {
7807
- outline: 2px solid var(--sophea-focus-ring);
7808
- outline-offset: 2px;
7809
- }
7810
-
7811
- .sn-SearchInput-module__clear--r3kgN:disabled {
7812
- opacity: 0.5;
7813
- cursor: not-allowed;
7814
- }
7815
-
7816
- .sn-SearchInput-module__hint--6W4as {
7817
- font-size: 12px;
7818
- color: var(--text-04);
7819
- }
7820
-
7821
- .sn-SearchInput-module__error--Ewib2 {
7822
- font-size: 12px;
7823
- color: var(--status-error-50, #dc2626);
7824
- }
7825
-
7826
- @keyframes sn-SearchInput-module__sds-search-spin--cmFTn {
7827
- to {
7828
- transform: rotate(360deg);
7829
- }
7830
- }
7831
-
7832
- @media (prefers-reduced-motion: reduce) {
7833
- .sn-SearchInput-module__field--ONU-p {
7834
- transition: none;
7835
- }
7836
- .sn-SearchInput-module__spin--kpH-o {
7837
- animation: none;
7838
- }
7839
- }
7840
8063
  .sn-PinInput-module__wrapper--3WAh7 {
7841
8064
  display: flex;
7842
8065
  flex-direction: column;