@kenlo/sds-design-system 0.9.9

package/components/Header/Header.css

@@ -0,0 +1,457 @@
+/* SDS Header.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Header/Header.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-header__nav-badge
+ *//* ============================================================
+   SDS Header
+   Height: 56px | bg: neutral-00 (white) | border-bottom: neutral-20
+   Layout: logo | nav (gap 24px) | [spacer] | actions (gap 16px)
+   ============================================================ */
+
+.sds-header {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  height: 56px;
+  /* Figma: px-[32px] py-[8px] */
+  padding: 0 var(--spacing-6);
+  background: var(--component-bg-color);
+  border-bottom: 1px solid var(--border-static-color);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  width: 100%;
+  box-sizing: border-box;
+}
+/* Logo */
+.sds-header__logo {
+  display: flex;
+  align-items: center;
+  margin-right: var(--spacing-6);
+  /* The slot holds whatever the consumer puts there, and on a 320px screen that can be
+     wider than the screen. It gives way before the header does: past the header's width
+     the page itself would scroll sideways over a logo, which is the consumer's content
+     winning an argument it should not be in.
+
+     `flex-shrink: 0` was here, which is what `min-width: 0` alone could not get past —
+     an item that refuses to shrink has no use for a floor. The actions keep theirs,
+     because a row of 32px buttons has nothing to give. */
+  flex-shrink: 1;
+  min-width: 0;
+}
+/* Context selector */
+.sds-header__context {
+  margin-right: var(--spacing-4);
+  flex-shrink: 0;
+}
+/* Nav wrapper — flex:1 so the Nav fills space between logo and actions, centered */
+.sds-header__nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
+  /* A flex item will not shrink past its content without this, so a nav with more items
+     than fit pushed the header — and the page — wider than the window instead of letting
+     the sds-nav inside it scroll. Measured with five groups in a 1018px window: 1025. */
+  min-width: 0;
+}
+/* "Novo" badge inside nav items */
+.sds-header__nav-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 6px;
+  background: var(--color-primary-50);
+  color: var(--color-white);
+  border-radius: var(--radius-full);
+  font-size: 10px;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.2px;
+}
+@keyframes sds-dropdown-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+/* Right actions — gap 16px (Figma: gap-[16px]) */
+.sds-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  /* Pushes actions to the right edge on its own — the nav's flex:1 spacer already
+     does this on desktop, but nav doesn't render at all on mobile, so actions needs
+     its own way to reach the right side regardless of whether nav exists. */
+  margin-left: auto;
+}
+/* FAQs link button — Manrope Bold 16px / primary-50 (Figma: font-bold text-16) */
+.sds-header__faqs {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.4px;
+  color: var(--color-primary-50-solid);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 120ms ease;
+  white-space: nowrap;
+}
+.sds-header__faqs:hover { background: var(--color-primary-10); }
+.sds-header__icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 11px;  /* soft, the install default — schemes at the end */
+  color: var(--color-neutral-60);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+  flex-shrink: 0;
+}
+.sds-header__icon-btn:hover {
+  background: var(--color-opacity-05);
+  color: var(--color-neutral-90);
+}
+.sds-header__icon-btn:active {
+  background: var(--color-opacity-10);
+}
+.sds-header__avatar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: var(--spacing-1);
+  transition: background 120ms ease;
+  flex-shrink: 0;
+}
+.sds-header__avatar-btn:hover { background: var(--color-opacity-05); }
+.sds-header__avatar-btn:active { background: var(--color-opacity-10); }
+.sds-header__action-wrapper {
+  position: relative;
+}
+/* Products panel — cross-product navigation */
+.sds-header__products-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-2));
+  right: 0;
+  width: 240px;
+  max-height: 400px;
+  overflow-y: auto;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-drop-md);
+  z-index: var(--z-floating);
+  padding: var(--spacing-2) 0;
+  animation: sds-dropdown-in 120ms ease;
+}
+.sds-header__products-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: 40px;
+  padding: 0 var(--spacing-4);
+  color: var(--color-neutral-80);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.sds-header__products-item:hover { background: var(--color-neutral-10); }
+.sds-header__products-item--active { color: var(--color-neutral-90); font-weight: var(--font-weight-bold); }
+/* Notifications panel */
+.sds-header__notifications-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-2));
+  right: 0;
+  width: 360px;
+  max-height: 480px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-drop-md);
+  z-index: var(--z-floating);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: sds-dropdown-in 120ms ease;
+}
+.sds-header__notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
+  border-bottom: 1px solid var(--border-static-color);
+  flex-shrink: 0;
+}
+.sds-header__notifications-title {
+  font-family: var(--font-family-base);
+  font-size: 15px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-neutral-90);
+}
+.sds-header__notifications-clear {
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary-50-solid);
+  cursor: pointer;
+  padding: 0;
+}
+.sds-header__notifications-clear:hover { text-decoration: underline; }
+.sds-header__notifications-list {
+  flex: 1;
+  overflow-y: auto;
+}
+.sds-header__notifications-empty {
+  padding: var(--spacing-6) var(--spacing-4);
+  text-align: center;
+}
+.sds-header__notification-item {
+  display: flex;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  border-bottom: 1px solid var(--color-neutral-10);
+  transition: background 120ms ease;
+  cursor: pointer;
+}
+.sds-header__notification-item:hover { background: var(--color-neutral-10); }
+.sds-header__notification-item--unread { background: var(--color-primary-10); }
+.sds-header__notification-item--unread:hover { background: var(--color-primary-20); }
+.sds-header__notification-content { flex: 1; min-width: 0; }
+.sds-header__notification-title {
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-90);
+  margin-bottom: var(--spacing-0-5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sds-header__notification-desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.sds-header__notification-time {
+  font-size: 11px;
+  color: var(--color-neutral-40);
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-top: var(--spacing-0-5);
+}
+/* Profile panel */
+.sds-header__profile-panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-2));
+  right: 0;
+  width: 240px;
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-drop-md);
+  z-index: var(--z-floating);
+  overflow: hidden;
+  animation: sds-dropdown-in 120ms ease;
+}
+.sds-header__profile-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+}
+.sds-header__profile-name {
+  font-size: 14px;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-neutral-90);
+}
+.sds-header__profile-code {
+  font-size: 11px;
+  color: var(--color-neutral-50);
+  margin-top: 1px;
+}
+.sds-header__profile-company {
+  margin-top: var(--spacing-0-5);
+}
+.sds-header__profile-menu {
+  padding: 6px 0;
+}
+.sds-header__profile-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  padding: 0 16px;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);  /* 16px */
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-80);
+  cursor: pointer;
+  text-align: left;
+  transition: background 120ms ease;
+}
+.sds-header__profile-item:hover { background: var(--color-neutral-10); }
+.sds-header__profile-item--danger { color: var(--color-error-50); }
+.sds-header__profile-item--danger:hover { background: var(--color-error-10); }
+.sds-header__profile-divider {
+  border: none;
+  border-top: 1px solid var(--border-static-color);
+  margin: var(--spacing-1) 0;
+}
+/* ── Focus rings — all interactive buttons ── */
+.sds-header__faqs,
+.sds-header__icon-btn,
+.sds-header__avatar-btn,
+.sds-header__notifications-clear,
+.sds-header__profile-item {
+  outline: none;
+}
+.sds-header__faqs:focus-visible,
+.sds-header__icon-btn:focus-visible,
+.sds-header__avatar-btn:focus-visible,
+.sds-header__notifications-clear:focus-visible,
+.sds-header__profile-item:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-header__notifications-panel,
+[data-theme="dark"] .sds-header__profile-panel,
+[data-theme="dark"] .sds-header__products-panel {
+  background: var(--color-neutral-10);
+  border-color: var(--border-interactive-color);
+}
+/* ── Mobile collapsed bar — the nav's flexible spacer is gone below 800px, so the
+   context selector (hug-width by default) must be allowed to shrink instead of
+   forcing the whole header row (and the page) into horizontal overflow ── */
+@media (max-width: 799px) {
+  .sds-header__context {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+/* The way into the navigation when the row of links is not rendered. Only present on a
+   narrow header, and it keeps its size: a row of 32px buttons has nothing to give. */
+.sds-header__nav-btn {
+  flex-shrink: 0;
+}
+
+/* ── Mobile fullscreen overlay — the shell for notifications, products and the avatar
+   menu once the header is narrow.
+
+   Not inside a media query, and not at 800px: the header measures its own width and
+   renders these instead of the dropdowns below OWN_WIDTH_MOBILE (680px). A header in a
+   narrow shell is narrow on a wide screen, which @media cannot see. ── */
+.sds-header__mobile-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal);
+  background: var(--component-bg-color);
+  display: flex;
+  flex-direction: column;
+}
+.sds-header__mobile-overlay-dismiss {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-4);
+}
+.sds-header__mobile-overlay-body {
+  flex: 1;
+  overflow-y: auto;
+}
+/* ── Mobile avatar menu — profile block, then one block per navItem, then FAQs ── */
+.sds-header__mobile-menu {
+  display: flex;
+  flex-direction: column;
+}
+.sds-header__mobile-divider {
+  border: none;
+  border-top: 1px solid var(--color-neutral-10);
+  width: 100%;
+  margin: 0;
+}
+.sds-header__mobile-menu-title {
+  display: block;
+  padding: var(--spacing-3) var(--spacing-4) var(--spacing-1);
+}
+.sds-header__mobile-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  padding: 0 var(--spacing-4);
+  border: none;
+  background: transparent;
+  color: var(--color-neutral-80);
+  text-decoration: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background 120ms ease;
+}
+.sds-header__mobile-row:hover { background: var(--color-neutral-10); }
+.sds-header__mobile-row--danger .sds-text--bodyMd { color: var(--color-error-50); }
+.sds-header__mobile-row--danger:hover { background: var(--color-error-10); }
+
+/* ── Which navigation is shown, before and after the header measures itself ──────────
+   Until `data-measured` appears, both are in the DOM and the viewport decides. That is
+   the best guess available without JavaScript, and it is the whole answer on a page where
+   JavaScript never arrives — which used to be a phone stuck with the desktop row of links.
+
+   Once the header has measured its own width, `data-narrow` decides instead, and it wins
+   because it is more specific. That is what makes a header inside a 400px drawer narrow on
+   a 1600px screen, which no media query can see. */
+@media (max-width: 680px) {
+  .sds-header:not([data-measured]) .sds-header__nav { display: none; }
+}
+@media (min-width: 681px) {
+  .sds-header:not([data-measured]) .sds-header__nav-btn { display: none; }
+}
+.sds-header[data-narrow="true"] .sds-header__nav { display: none; }
+.sds-header[data-narrow="false"] .sds-header__nav-btn { display: none; }
+
+/* ── Corner radius: the 40px family ───────────────────────────────────────────
+   A row in a menu, a select or a dropdown is 40px tall, which makes it the same control
+   as the Pill and the navButton — so it takes the same four values. Rafael, pointing at
+   the theme bar's own menu: these are reactive, but not in the right way; they should be
+   40px like the navButton and have the radius resolved here.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   `--radius-sm` was what they had, and it tops out at 16px — so `rounded` drew a rounded
+   rectangle where every other 40px control in the system drew a capsule. See Pill.css for
+   the arithmetic; the numbers are a fraction of the control's own height, which is what
+   keeps the family reading as one thing.
+
+   The bare value is `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to it. */
+[data-radius="flat"] .sds-header__icon-btn { border-radius: 0; }
+[data-radius="soft"] .sds-header__icon-btn { border-radius: 11px; }
+[data-radius="medium"] .sds-header__icon-btn { border-radius: 15px; }
+[data-radius="rounded"] .sds-header__icon-btn { border-radius: var(--radius-full); }