feat(org-chart): add core cards and fixed-layout integration

packages/org-chart/src/styles/org-chart.css

@@ -0,0 +1,55 @@
+@import './design-tokens.css';
+@import './employee-card.css';
+@import './summary-sections.css';
+@import './org-chart-content.css';
+@import './org-chart-readonly.css';
+@import './org-chart-p3-summary.css';
+@import './employee-info-dialog.css';
+/* Standalone defaults are scoped to the shell; only OrgChart public variables
+   inherit across the Shadow DOM boundary. No host HM Theme is required. */
+:host { display: block; min-width: 0; max-width: 100%; font: inherit; }
+.hm-orgchart-shell { position: relative; min-width: 0; color: var(--hm-orgchart-resolved-fg-primary); font-family: var(--hm-orgchart-resolved-font-family); font-size: var(--hm-orgchart-resolved-font-size-base); line-height: 1.5; }
+.hm-orgchart-shell *, .hm-orgchart-shell *::before, .hm-orgchart-shell *::after { box-sizing: border-box; }
+.hm-orgchart-state:empty { display: none; }
+.hm-orgchart-state, .hm-orgchart-issues { padding: 12px; background: var(--hm-orgchart-resolved-bg-content); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-heading { margin-bottom: 16px; }
+.hm-orgchart-title { margin: 0; font-size: var(--hm-orgchart-resolved-font-size-title); line-height: 1.4; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
+.hm-orgchart-description, .hm-orgchart-date { margin: 4px 0; color: var(--hm-orgchart-resolved-fg-secondary); overflow-wrap: anywhere; }
+.hm-orgchart-viewport { width: 100%; max-width: 100%; min-width: 0; overflow: auto; padding: 8px 0; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-viewport:focus-visible, .hm-orgchart-toggle:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 2px; }
+.hm-orgchart-forest { display: flex; width: max-content; min-width: 100%; }
+.hm-orgchart-tree { flex: 0 0 auto; }
+.hm-orgchart-engine.orgchart { min-width: 100%; background-image: none; user-select: text; padding: 20px 16px 0; }
+.hm-orgchart-engine.orgchart .node { width: 244px; margin-right: 8px; margin-left: 8px; padding: 0; border: 0; background: none; text-align: left; }
+.hm-orgchart-engine.orgchart .node:hover, .hm-orgchart-engine.orgchart .node.focused { background: none; }
+.hm-orgchart-engine.orgchart .node .edge { display: none; }
+.hm-orgchart-engine.orgchart .hierarchy { text-align: center; }
+.hm-orgchart-engine.orgchart .hierarchy::before { border-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-engine.orgchart > ul > li > ul li > .node::before { background-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-engine.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after { background-color: var(--hm-orgchart-resolved-stroke-default); }
+.hm-orgchart-organization { width: 244px; padding: 12px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-resolved-bg-surface); }
+.hm-orgchart-kind { display: block; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-organization-name { margin: 2px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
+.hm-orgchart-domain-id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-node-count, .hm-orgchart-vacancy { margin: 8px 0; font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-employee { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
+.hm-orgchart-leader { padding: 8px; background: var(--hm-orgchart-resolved-bg-content); border-radius: var(--hm-orgchart-resolved-radius-container); }
+.hm-orgchart-avatar { position: relative; display: flex; flex: 0 0 32px; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--hm-orgchart-resolved-bg-subtle); color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hm-orgchart-employee-details { min-width: 0; }
+.hm-orgchart-person-name, .hm-orgchart-person-role, .hm-orgchart-status-label { display: block; overflow-wrap: anywhere; }
+.hm-orgchart-person-role, .hm-orgchart-status-label { font-size: 11px; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-toggle { display: block; width: 100%; margin-top: 12px; padding: 6px 8px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-resolved-bg-surface); color: var(--hm-orgchart-resolved-fg-primary); font: inherit; cursor: pointer; }
+.hm-orgchart-summary { margin-top: 16px; min-width: 0; }
+.hm-orgchart-summary-title { margin: 0 0 8px; font-size: 15px; }
+.hm-orgchart-raw-total, .hm-orgchart-policy { margin: 4px 0; }
+.hm-orgchart-policy { color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-summary table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 12px; }
+.hm-orgchart-summary caption { padding-bottom: 8px; text-align: left; color: var(--hm-orgchart-resolved-fg-secondary); }
+.hm-orgchart-summary th, .hm-orgchart-summary td { padding: 8px; border-bottom: 1px solid var(--hm-orgchart-resolved-stroke-default); text-align: left; overflow-wrap: anywhere; }
+.hm-orgchart-summary th { font-weight: 500; }
+.hm-orgchart-group-title { margin: 12px 0 4px; font-size: 13px; }
+.hm-orgchart-summary-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; }
+.hm-orgchart-summary-group dt { overflow-wrap: anywhere; }
+.hm-orgchart-summary-group dd { margin: 0; }
+@media (prefers-reduced-motion: reduce) { .hm-orgchart-engine.orgchart .node { transition-duration: 0.01ms; } }