@usefidel/design-system 0.24.0 → 0.25.0

package/dist/index.css

@@ -3034,19 +3034,64 @@
   position: relative;
   display: inline-flex;
 }
+.fds-menu--block {
+  display: flex;
+  width: 100%;
+}
+.fds-menu--block > :first-child {
+  flex: 1;
+  min-width: 0;
+}
 .fds-menu__list {
   position: absolute;
-  top: calc(100% + 4px);
   z-index: 50;
   min-width: 200px;
-  padding: var(--spacing-1, 4px);
+  box-sizing: border-box;
   background: var(--color-surface-raised, #ffffff);
   border: 1px solid var(--color-border, #e5e5e5);
-  border-radius: var(--radius-md, 6px);
+  border-radius: var(--radius-lg, 8px);
   box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
 }
-.fds-menu__list:focus {
-  outline: none;
+.fds-menu__list {
+  animation: fds-menu-in var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+@keyframes fds-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--spacing-1, 4px) * -1));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.fds-menu__list--top {
+  animation-name: fds-menu-in-up;
+}
+@keyframes fds-menu-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(var(--spacing-1, 4px));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-menu__list {
+    animation: none;
+  }
+}
+.fds-menu__list--bottom {
+  top: calc(100% + var(--spacing-1, 4px));
+}
+.fds-menu__list--top {
+  bottom: calc(100% + var(--spacing-1, 4px));
+}
+.fds-menu__list--right {
+  top: 0;
+  left: calc(100% + var(--spacing-1, 4px));
 }
 .fds-menu__list--start {
   left: 0;
@@ -3054,14 +3099,82 @@
 .fds-menu__list--end {
   right: 0;
 }
+.fds-menu__list--wide {
+  width: 304px;
+}
+.fds-menu__items {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-1, 4px);
+}
+.fds-menu__items:focus {
+  outline: none;
+}
+.fds-menu__search {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  padding: 0 var(--spacing-3, 12px);
+  height: var(--size-control-md, 36px);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-menu__search > svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.fds-menu__search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  color: var(--color-text, #171717);
+}
+.fds-menu__search input::placeholder {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-menu__search input:focus {
+  outline: none;
+}
+.fds-menu__search input:disabled {
+  cursor: not-allowed;
+}
+.fds-menu__search:has(input:disabled) {
+  opacity: 0.5;
+}
+.fds-menu__label {
+  padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-1, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-menu__divider {
+  height: 1px;
+  margin: var(--spacing-1, 4px) calc(var(--spacing-1, 4px) * -1);
+  background: var(--color-border, #e5e5e5);
+}
+.fds-menu__empty {
+  padding: var(--spacing-2, 8px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  color: var(--color-text-tertiary, #737373);
+}
 .fds-menu__item {
   display: flex;
   align-items: center;
   gap: var(--spacing-2, 8px);
-  padding: var(--spacing-2, 8px) var(--spacing-2, 8px);
-  border-radius: var(--radius-sm, 4px);
+  padding: var(--spacing-2, 8px);
+  border-radius: var(--radius-md, 6px);
   font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
-  font-size: var(--font-size-text-sm, 14px);
+  font-size: var(--font-size-text-compact, 13px);
   line-height: var(--line-height-text-compact, 20px);
   color: var(--color-text, #171717);
   white-space: nowrap;
@@ -3077,15 +3190,49 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-.fds-menu__icon {
+.fds-menu__icon,
+.fds-menu__check {
   display: inline-flex;
+  flex-shrink: 0;
   width: 16px;
   height: 16px;
 }
+.fds-menu__icon {
+  color: var(--color-text-secondary, #525252);
+}
 .fds-menu__icon > svg {
   width: 100%;
   height: 100%;
 }
+.fds-menu__check {
+  color: var(--color-text, #171717);
+}
+.fds-menu__avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.fds-menu__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.fds-menu__title,
+.fds-menu__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fds-menu__description {
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-menu__trailing {
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+}
 
 /* src/components/Table/table.css */
 .fds-table {
@@ -3276,3 +3423,643 @@
     padding: var(--spacing-5, 20px) var(--spacing-6, 24px) var(--spacing-6, 24px);
   }
 }
+
+/* src/components/StatusDot/status-dot.css */
+.fds-status-dot {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-full, 9999px);
+}
+.fds-status-dot--running {
+  background: var(--color-info-strong, #2563eb);
+  animation: fds-status-dot-pulse 1.6s var(--ease-out, ease-out) infinite;
+}
+.fds-status-dot--idle {
+  background: var(--color-border-strong, #d4d4d4);
+}
+.fds-status-dot--failed {
+  background: var(--color-destructive, #eb2d2d);
+}
+.fds-status-dot--passed {
+  background: var(--color-success, #059669);
+}
+@keyframes fds-status-dot-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-status-dot--running {
+    animation: none;
+  }
+}
+
+/* src/components/ListLabel/list-label.css */
+.fds-list-label {
+  padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-1, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-tertiary, #737373);
+}
+
+/* src/components/Divider/divider.css */
+.fds-divider {
+  margin: 0;
+  border: 0;
+  flex-shrink: 0;
+  background: var(--color-border, #e5e5e5);
+}
+.fds-divider--horizontal {
+  height: 1px;
+  width: 100%;
+}
+.fds-divider--vertical {
+  width: 1px;
+  align-self: stretch;
+}
+
+/* src/components/Tooltip/tooltip.css */
+.fds-tooltip {
+  position: fixed;
+  z-index: 1100;
+  max-width: 240px;
+  padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--shadow-sm);
+  animation: fds-tooltip-in var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-tooltip--right {
+  transform: translateY(-50%);
+}
+.fds-tooltip--left {
+  transform: translate(-100%, -50%);
+}
+.fds-tooltip--top {
+  transform: translate(-50%, -100%);
+}
+.fds-tooltip--bottom {
+  transform: translateX(-50%);
+}
+@keyframes fds-tooltip-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* src/components/BrandButton/brand-button.css */
+.fds-brand-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-md, 36px);
+  height: var(--size-control-sm, 32px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  color: var(--color-text, #171717);
+  cursor: pointer;
+}
+.fds-brand-button:hover,
+.fds-brand-button:focus-visible {
+  background: var(--color-surface-hover, #ececec);
+}
+.fds-brand-button:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+}
+.fds-brand-button__mark,
+.fds-brand-button__hover {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.fds-brand-button__hover {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-brand-button__hover > svg {
+  width: 16px;
+  height: 16px;
+}
+.fds-brand-button:hover .fds-brand-button__mark,
+.fds-brand-button:focus-visible .fds-brand-button__mark {
+  opacity: 0;
+}
+.fds-brand-button:hover .fds-brand-button__hover,
+.fds-brand-button:focus-visible .fds-brand-button__hover {
+  opacity: 1;
+}
+
+/* src/components/SidebarItem/sidebar-item.css */
+.fds-sidebar-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  height: var(--size-control-sm, 32px);
+  padding: 0 0 0 calc(var(--size-control-md, 36px) / 2 - 8px);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--duration-instant, 80ms) ease, color var(--duration-instant, 80ms) ease;
+}
+.fds-sidebar-item:hover {
+  background: var(--color-surface-hover, #ececec);
+  color: var(--color-text, #171717);
+}
+.fds-sidebar-item:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+}
+.fds-sidebar-item--active,
+.fds-sidebar-item--active:hover {
+  background: var(--color-surface-raised, #ffffff);
+  color: var(--color-text, #171717);
+  box-shadow: var(--shadow-sm);
+}
+.fds-sidebar-item__icon,
+.fds-sidebar-item__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.fds-sidebar-item__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.fds-sidebar-item__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-sidebar-item--icon-only {
+  width: var(--size-control-md, 36px);
+}
+.fds-sidebar-item--icon-only .fds-sidebar-item__label {
+  opacity: 0;
+}
+
+/* src/components/Sidebar/sidebar.css */
+.fds-sidebar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  flex-shrink: 0;
+  width: 240px;
+  height: 100%;
+  padding: var(--spacing-3, 12px);
+  background: var(--color-surface, #f5f5f5);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  transition: width var(--duration-moderate, 280ms) var(--ease-out, ease-out);
+}
+.fds-sidebar--collapsed {
+  width: 60px;
+}
+.fds-sidebar__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+}
+.fds-sidebar__brand {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--size-control-sm, 32px);
+}
+.fds-sidebar__logo {
+  display: inline-flex;
+  align-items: center;
+  padding-left: var(--spacing-2, 8px);
+  white-space: nowrap;
+}
+.fds-sidebar__logo,
+.fds-sidebar__collapse,
+.fds-sidebar__expand {
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-sidebar__collapse {
+  display: inline-flex;
+}
+.fds-sidebar__expand {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.fds-sidebar--collapsed .fds-sidebar__logo,
+.fds-sidebar--collapsed .fds-sidebar__collapse {
+  opacity: 0;
+  pointer-events: none;
+}
+.fds-sidebar--collapsed .fds-sidebar__expand {
+  opacity: 1;
+  pointer-events: auto;
+}
+.fds-sidebar__action {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  height: var(--size-control-sm, 32px);
+  padding: 0 0 0 calc(var(--size-control-md, 36px) / 2 - 8px);
+  overflow: hidden;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-md, 6px);
+  background: var(--color-surface-raised, #ffffff);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--duration-instant, 80ms) ease, border-color var(--duration-instant, 80ms) ease;
+}
+.fds-sidebar__action:hover {
+  background: var(--color-surface-subtle, #fafafa);
+  border-color: var(--color-border-strong, #d4d4d4);
+}
+.fds-sidebar__action:active {
+  background: var(--color-surface-hover, #ececec);
+}
+.fds-sidebar__action:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-sidebar__action-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.fds-sidebar__action-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.fds-sidebar__action-label {
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-sidebar--collapsed .fds-sidebar__action-label {
+  opacity: 0;
+}
+.fds-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1, 4px) / 2);
+  min-width: 0;
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out), visibility 0s linear 0s;
+}
+.fds-sidebar__section--hidden {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out), visibility 0s linear var(--duration-quick, 150ms);
+}
+.fds-sidebar__section .fds-list-label {
+  white-space: nowrap;
+  overflow: hidden;
+}
+.fds-sidebar__footer {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-1, 4px) / 2);
+  margin-top: auto;
+}
+.fds-sidebar .fds-sidebar-item--icon-only,
+.fds-sidebar .fds-workspace-switcher--compact,
+.fds-sidebar .fds-avatar-label-group--compact {
+  width: 100%;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-sidebar,
+  .fds-sidebar * {
+    transition: none !important;
+  }
+}
+
+/* src/components/WorkspaceSwitcher/workspace-switcher.css */
+.fds-workspace-switcher {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  height: var(--size-control-md, 36px);
+  padding: 0 var(--spacing-2, 8px);
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--duration-instant, 80ms) ease;
+}
+.fds-workspace-switcher:hover {
+  background: var(--color-surface-hover, #ececec);
+}
+.fds-workspace-switcher[aria-expanded=true] {
+  background: var(--color-surface-raised, #ffffff);
+  border-color: var(--color-border, #e5e5e5);
+  box-shadow: var(--shadow-sm);
+}
+.fds-workspace-switcher:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+}
+.fds-workspace-switcher__text {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex: 1;
+  min-width: 0;
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-workspace-switcher__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fds-workspace-switcher__plan {
+  flex-shrink: 0;
+  padding: 0 var(--spacing-1, 4px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-sm, 4px);
+  font-size: var(--font-size-text-2xs, 11px);
+  line-height: var(--line-height-text-2xs, 16px);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-workspace-switcher__chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-left: auto;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-workspace-switcher--compact {
+  width: var(--size-control-md, 36px);
+}
+.fds-workspace-switcher--compact .fds-workspace-switcher__text {
+  opacity: 0;
+}
+.fds-workspace-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+  font-size: var(--font-size-text-2xs, 11px);
+  line-height: 1;
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+/* src/components/AvatarLabelGroup/avatar-label-group.css */
+.fds-avatar-label-group {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-1, 4px) var(--spacing-1, 4px) var(--spacing-1, 4px) calc((var(--size-control-md, 36px) - 24px) / 2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  text-align: left;
+  cursor: pointer;
+}
+.fds-avatar-label-group:hover,
+.fds-avatar-label-group[aria-expanded=true] {
+  background: var(--color-surface-hover, #ececec);
+}
+.fds-avatar-label-group:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: -2px;
+}
+.fds-avatar-label-group--compact {
+  width: var(--size-control-md, 36px);
+}
+.fds-avatar-label-group__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  transition: opacity var(--duration-quick, 150ms) var(--ease-out, ease-out);
+}
+.fds-avatar-label-group--compact .fds-avatar-label-group__text {
+  opacity: 0;
+}
+.fds-avatar-label-group__name,
+.fds-avatar-label-group__detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fds-avatar-label-group__name {
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-avatar-label-group__detail {
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+
+/* src/components/AppLayout/app-layout.css */
+.fds-app-layout {
+  display: flex;
+  height: 100vh;
+  height: 100dvh;
+  background: var(--color-surface, #f5f5f5);
+  overflow: hidden;
+}
+.fds-app-layout__panel {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  margin: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-2, 8px) 0;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-bg, #ffffff);
+  overflow: auto;
+}
+
+/* src/components/PageHeader/page-header.css */
+.fds-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-page-header__row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-4, 16px);
+}
+.fds-page-header__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  min-width: 0;
+}
+.fds-page-header__breadcrumb {
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-page-header__breadcrumb a {
+  color: inherit;
+  text-decoration: none;
+}
+.fds-page-header__breadcrumb a:hover {
+  color: var(--color-text, #171717);
+}
+.fds-page-header__title {
+  margin: 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xl, 20px);
+  line-height: var(--line-height-text-xl, 30px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-page-header__description {
+  margin: 0;
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex-shrink: 0;
+}
+
+/* src/components/Toast/toast.css */
+.fds-toast-region {
+  position: fixed;
+  top: var(--spacing-4, 16px);
+  right: var(--spacing-4, 16px);
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--spacing-2, 8px);
+  pointer-events: none;
+}
+.fds-toast-region > * {
+  pointer-events: auto;
+}
+.fds-toast {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-3, 12px);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  animation: fds-toast-in var(--duration-moderate, 280ms) var(--ease-out, ease-out);
+}
+.fds-toast__action {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-primary-text, #ffffff);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.fds-toast__close {
+  display: inline-flex;
+  padding: var(--spacing-1, 4px);
+  border: 0;
+  border-radius: var(--radius-sm, 4px);
+  background: none;
+  color: var(--color-white-alpha-60, rgba(255, 255, 255, 0.6));
+  cursor: pointer;
+}
+.fds-toast__close:hover {
+  color: var(--color-primary-text, #ffffff);
+  background: var(--color-white-alpha-10, rgba(255, 255, 255, 0.1));
+}
+.fds-toast__close > svg {
+  width: 14px;
+  height: 14px;
+}
+.fds-toast button:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+@keyframes fds-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--spacing-4, 16px));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-toast {
+    animation: none;
+  }
+}