@usefidel/design-system 0.25.1 → 0.26.0

package/dist/index.css

@@ -1631,6 +1631,28 @@
   width: 14px;
   height: 14px;
 }
+.fds-tag__remove {
+  display: inline-flex;
+  margin-right: calc(var(--spacing-1, 4px) * -1);
+  padding: 2px;
+  border: 0;
+  border-radius: var(--radius-sm, 4px);
+  background: none;
+  color: var(--color-text-tertiary, #737373);
+  cursor: pointer;
+}
+.fds-tag__remove:hover {
+  background: var(--color-surface-hover, #ececec);
+  color: var(--color-text, #171717);
+}
+.fds-tag__remove:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 1px;
+}
+.fds-tag__remove > svg {
+  width: 12px;
+  height: 12px;
+}
 
 /* src/components/MultiSelect/multi-select.css */
 .fds-multiselect {
@@ -4069,3 +4091,528 @@
     animation: none;
   }
 }
+
+/* src/components/Stepper/stepper.css */
+.fds-stepper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  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);
+}
+.fds-stepper__step {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-stepper__step:last-child {
+  flex: 0 0 auto;
+}
+.fds-stepper__step:not(:last-child)::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  margin-left: var(--spacing-2, 8px);
+  background: var(--color-border, #e5e5e5);
+}
+.fds-stepper__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-full, 9999px);
+  font-size: var(--font-size-text-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  transition: background-color var(--duration-quick, 150ms) ease, border-color var(--duration-quick, 150ms) ease;
+}
+.fds-stepper__marker > svg {
+  width: 14px;
+  height: 14px;
+}
+.fds-stepper__label {
+  white-space: nowrap;
+}
+.fds-stepper__step--done .fds-stepper__marker {
+  border-color: transparent;
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+}
+.fds-stepper__step--done {
+  color: var(--color-text-secondary, #525252);
+}
+.fds-stepper__step--current {
+  color: var(--color-text, #171717);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-stepper__step--current .fds-stepper__marker {
+  border-color: var(--color-primary, #171717);
+  background: var(--color-primary, #171717);
+  color: var(--color-primary-text, #ffffff);
+}
+
+/* src/components/NumberedSteps/numbered-steps.css */
+.fds-numbered-steps {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: fds-numbered-step;
+}
+.fds-numbered-steps__item {
+  position: relative;
+  display: flex;
+  gap: var(--spacing-4, 16px);
+  padding-bottom: var(--spacing-6, 24px);
+  counter-increment: fds-numbered-step;
+}
+.fds-numbered-steps__item:last-child {
+  padding-bottom: 0;
+}
+.fds-numbered-steps__item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: var(--spacing-6, 24px);
+  bottom: 0;
+  left: calc(var(--spacing-6, 24px) / 2);
+  width: 1px;
+  background: var(--color-border, #e5e5e5);
+}
+.fds-numbered-steps__marker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-6, 24px);
+  height: var(--spacing-6, 24px);
+  border-radius: var(--radius-full, 9999px);
+  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);
+  font-weight: var(--font-weight-semibold, 600);
+}
+.fds-numbered-steps__marker::after {
+  content: counter(fds-numbered-step);
+}
+.fds-numbered-steps__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  flex: 1;
+  min-width: 0;
+}
+
+/* src/components/OptionList/option-list.css */
+.fds-option-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-raised, #ffffff);
+  overflow: hidden;
+}
+.fds-option-list__label {
+  padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
+  background: var(--color-surface-subtle, #fafafa);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-2xs, 11px);
+  line-height: var(--line-height-text-2xs, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-option-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-3, 12px);
+  transition: background-color var(--duration-instant, 80ms) ease;
+}
+.fds-option-row + .fds-option-row {
+  border-top: 1px solid var(--color-border, #e5e5e5);
+}
+.fds-option-row:hover:not([data-disabled]) {
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-option-row--checked {
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-option-row > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+.fds-option-row > :first-child label {
+  cursor: pointer;
+}
+.fds-option-row[data-disabled] > :first-child label {
+  cursor: default;
+}
+.fds-option-row__meta {
+  flex-shrink: 0;
+  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);
+  color: var(--color-text-tertiary, #737373);
+}
+
+/* src/components/Checklist/checklist.css */
+.fds-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-checklist__title {
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-checklist__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 12px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.fds-checklist__item {
+  display: flex;
+  gap: var(--spacing-2, 8px);
+}
+.fds-checklist__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-full, 9999px);
+  color: var(--color-text, #171717);
+}
+.fds-checklist__item--done .fds-checklist__mark {
+  border-color: transparent;
+}
+.fds-checklist__mark > svg {
+  width: 14px;
+  height: 14px;
+}
+.fds-checklist__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.fds-checklist__label {
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-checklist__value {
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-checklist__item--done .fds-checklist__value {
+  color: var(--color-text, #171717);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+/* src/components/Drawer/drawer.css */
+.fds-drawer__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-2, 8px);
+  background: rgba(10, 10, 10, 0.42);
+  animation: fds-drawer-scrim-in var(--duration-moderate, 280ms) var(--ease-out, ease) both;
+}
+.fds-drawer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(520px, 100%);
+  height: 100%;
+  overflow: hidden;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  animation: fds-drawer-in var(--duration-moderate, 280ms) var(--ease-out, ease) both;
+}
+.fds-drawer:focus {
+  outline: none;
+}
+.fds-drawer__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-6, 24px) var(--spacing-6, 24px) var(--spacing-4, 16px);
+}
+.fds-drawer__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  min-width: 0;
+}
+.fds-drawer__title {
+  margin: 0;
+  font-size: var(--font-size-text-lg, 18px);
+  line-height: var(--line-height-text-lg, 28px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-drawer__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-drawer__close {
+  display: inline-flex;
+  padding: var(--spacing-1, 4px);
+  border: 0;
+  border-radius: var(--radius-md, 6px);
+  background: none;
+  color: var(--color-text-tertiary, #737373);
+  cursor: pointer;
+}
+.fds-drawer__close:hover {
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+}
+.fds-drawer__close:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-drawer__close > svg {
+  width: 16px;
+  height: 16px;
+}
+.fds-drawer__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 var(--spacing-6, 24px) var(--spacing-6, 24px);
+}
+.fds-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2, 8px);
+  padding: var(--spacing-4, 16px) var(--spacing-6, 24px);
+  border-top: 1px solid var(--color-border, #e5e5e5);
+  font-size: var(--font-size-text-compact, 13px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-drawer__footer > :first-child:not(button) {
+  margin-right: auto;
+}
+@keyframes fds-drawer-scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fds-drawer-in {
+  from {
+    transform: translateX(calc(100% + var(--spacing-2, 8px)));
+  }
+  to {
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-drawer,
+  .fds-drawer__scrim {
+    animation: none;
+  }
+}
+
+/* src/components/ResourceCard/resource-card.css */
+.fds-resource-card {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6, 24px);
+  padding: var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-resource-card--add {
+  border-style: dashed;
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-resource-card__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  flex: 1;
+  min-width: 0;
+}
+.fds-resource-card__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-resource-card__icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+.fds-resource-card__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.fds-resource-card__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1, 4px);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-resource-card__meta > svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.fds-resource-card__stats {
+  display: flex;
+  gap: var(--spacing-8, 32px);
+  margin: 0;
+}
+.fds-resource-card__stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  min-width: 96px;
+}
+.fds-resource-card__stat dt {
+  font-size: var(--font-size-text-2xs, 11px);
+  line-height: var(--line-height-text-2xs, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-resource-card__stat dd {
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-compact, 20px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-resource-card__action {
+  flex-shrink: 0;
+}
+
+/* src/components/PageSkeleton/page-skeleton.css */
+.fds-page-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6, 24px);
+}
+.fds-page-skeleton__tabs {
+  display: flex;
+  gap: var(--spacing-6, 24px);
+  padding-bottom: var(--spacing-3, 12px);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
+}
+.fds-page-skeleton__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 8px);
+}
+.fds-page-skeleton__table {
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  overflow: hidden;
+}
+.fds-page-skeleton__row {
+  display: grid;
+  grid-template-columns: repeat(var(--fds-page-skeleton-columns, 5), minmax(0, 1fr));
+  gap: var(--spacing-4, 16px);
+  align-items: center;
+  padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
+}
+.fds-page-skeleton__row + .fds-page-skeleton__row {
+  border-top: 1px solid var(--color-border, #e5e5e5);
+}
+.fds-page-skeleton__row--head {
+  background: var(--color-surface-subtle, #fafafa);
+  padding-top: var(--spacing-3, 12px);
+  padding-bottom: var(--spacing-3, 12px);
+}
+.fds-page-skeleton__cards {
+  display: grid;
+  grid-template-columns: repeat(var(--fds-page-skeleton-columns, 3), minmax(0, 1fr));
+  gap: var(--spacing-3, 12px);
+}
+.fds-page-skeleton__card {
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-page-skeleton__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5, 20px);
+}
+.fds-page-skeleton__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+}
+.fds-page-skeleton__split {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: var(--spacing-8, 32px);
+  align-items: start;
+}
+.fds-page-skeleton__main,
+.fds-page-skeleton__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+}
+@media (max-width: 1100px) {
+  .fds-page-skeleton__split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .fds-page-skeleton__cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}