@usefidel/design-system 0.18.0 → 0.19.0

package/dist/index.css

@@ -625,6 +625,46 @@
   flex-shrink: 0;
   color: var(--color-text-muted, #a3a3a3);
 }
+.fds-select__trigger--small {
+  min-height: 32px;
+  padding: 0 var(--spacing-2, 8px) 0 var(--spacing-3, 12px);
+  border-color: var(--color-border, #e5e5e5);
+  font-size: var(--font-size-text-sm, 14px);
+}
+.fds-select__trigger--small .fds-select__chevron {
+  color: var(--color-text, #171717);
+}
+.fds-select-field--inline,
+.fds-select-field--inline .fds-select {
+  width: auto;
+}
+.fds-select__trigger--inline {
+  width: auto;
+  min-height: 32px;
+  padding: 0 var(--spacing-2, 8px);
+  border-color: transparent;
+  background: transparent;
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-select__trigger--inline:hover:not(:disabled) {
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-select__trigger--inline:focus-visible,
+.fds-select__trigger--inline.fds-select__trigger--open {
+  border-color: transparent;
+  box-shadow: none;
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 0;
+}
+.fds-select__trigger--small,
+.fds-select__trigger--inline {
+  width: auto;
+}
+.fds-select__trigger--small .fds-select__value,
+.fds-select__trigger--inline .fds-select__value {
+  flex: 0 1 auto;
+}
 .fds-select__popover {
   position: absolute;
   top: calc(100% + 4px);
@@ -637,6 +677,16 @@
   box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
   overflow: hidden;
 }
+.fds-select__trigger--small + .fds-select__popover,
+.fds-select__trigger--inline + .fds-select__popover {
+  right: auto;
+  min-width: 260px;
+}
+.fds-select__trigger--small + .fds-select__popover--end,
+.fds-select__trigger--inline + .fds-select__popover--end {
+  left: auto;
+  right: 0;
+}
 .fds-select__search {
   padding: var(--spacing-2, 8px);
   border-bottom: 1px solid var(--color-border-light, #f5f5f5);
@@ -691,6 +741,19 @@
   flex-shrink: 0;
   color: var(--color-text-muted, #a3a3a3);
 }
+.fds-select__optBody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.fds-select__optDescription {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  color: var(--color-text-tertiary, #737373);
+}
 .fds-select__optText {
   display: inline-flex;
   align-items: baseline;
@@ -716,7 +779,7 @@
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
-  color: var(--color-accent, #ea580c);
+  color: var(--color-text, #171717);
 }
 .fds-select__hint,
 .fds-select__error {
@@ -1337,6 +1400,38 @@
         transparent);
   }
 }
+.fds-segmented--pill {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface, #f5f5f5);
+  box-shadow: none;
+}
+.fds-segmented--pill .fds-segmented__option {
+  padding: 5px 12px;
+  border-radius: var(--radius-md, 6px);
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-segmented--pill .fds-segmented__option[aria-selected=true] {
+  background: var(--color-surface-raised, #ffffff);
+  color: var(--color-text, #171717);
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-border, #e5e5e5);
+}
+.fds-segmented--pill .fds-segmented__option[aria-selected=true]::after {
+  display: none;
+}
+.fds-segmented--pill .fds-segmented__option:focus-visible {
+  border-radius: var(--radius-md, 6px);
+}
+@media (max-width: 640px) {
+  .fds-segmented--pill {
+    padding-right: 3px;
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+}
 
 /* src/components/Avatar/avatar.css */
 .fds-avatar {
@@ -1675,6 +1770,110 @@
   outline-offset: 2px;
   border-radius: var(--radius-xs, 2px);
 }
+.fds-multiselect--field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+}
+.fds-multiselect__fieldLabel {
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-label-sm, 14px);
+  line-height: var(--line-height-label-sm, 22px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__fieldBox {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  min-height: 44px;
+  padding: 6px var(--spacing-1, 4px) 6px var(--spacing-2, 8px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-md, 6px);
+  cursor: pointer;
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-multiselect__fieldBox--open,
+.fds-multiselect__fieldBox:focus-within {
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-multiselect__fieldBox--disabled {
+  background: var(--color-surface-subtle, #fafafa);
+  cursor: not-allowed;
+}
+.fds-multiselect__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fds-multiselect__placeholder {
+  padding-left: 4px;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-multiselect__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 3px 4px 3px 8px;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-surface-subtle, #fafafa);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--color-text-tertiary, #737373);
+  cursor: pointer;
+}
+.fds-multiselect__chipRemove:hover {
+  background: var(--color-surface-hover, #ececec);
+  color: var(--color-text, #171717);
+}
+.fds-multiselect__chipRemove:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 1px;
+}
+.fds-multiselect__fieldBoxToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  padding: 0 6px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.fds-multiselect__fieldBoxToggle:focus-visible {
+  outline: none;
+}
+.fds-multiselect__fieldBoxToggle .fds-multiselect__chevron {
+  margin-left: 0;
+}
+.fds-multiselect--field .fds-multiselect__popover {
+  left: 0;
+  right: auto;
+  min-width: 280px;
+}
 
 /* src/components/SearchInput/search-input.css */
 .fds-search {
@@ -1923,6 +2122,31 @@
   color: var(--color-primary-text, #ffffff);
   filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.13));
 }
+.fds-empty--compact {
+  gap: var(--spacing-4, 16px);
+  padding: var(--spacing-8, 32px) var(--spacing-6, 24px);
+}
+.fds-empty--compact .fds-empty__illustration {
+  min-height: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface-subtle, #fafafa);
+  border: 1px solid var(--color-border-light, #f5f5f5);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-empty--compact .fds-empty__illustration > svg {
+  width: 20px;
+  height: 20px;
+}
+.fds-empty--compact .fds-empty__text {
+  gap: var(--spacing-2, 8px);
+}
+.fds-empty--compact .fds-empty__title {
+  font-size: var(--font-size-text-md, 16px);
+  line-height: 24px;
+  letter-spacing: 0;
+}
 
 /* src/components/Callout/callout.css */
 .fds-callout {
@@ -2429,3 +2653,406 @@
     animation: none;
   }
 }
+
+/* src/components/Input/input.css */
+.fds-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  min-width: 0;
+}
+.fds-input__label {
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-label-sm, 14px);
+  line-height: var(--line-height-label-sm, 22px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-input__box {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  min-height: 44px;
+  padding: 0 var(--spacing-1, 4px) 0 var(--spacing-3, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-md, 6px);
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-input__box:focus-within {
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-input__box--error,
+.fds-input__box--error:focus-within {
+  border-color: var(--color-error, #b91c1c);
+}
+.fds-input__box--error:focus-within {
+  box-shadow: inset 0 0 0 1px var(--color-error, #b91c1c);
+}
+.fds-input__box--locked,
+.fds-input__box--locked:focus-within {
+  background: var(--color-surface, #f5f5f5);
+  border-color: var(--color-surface, #f5f5f5);
+  box-shadow: none;
+}
+.fds-input__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-input__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.fds-input__control {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 42px;
+  padding: 0 var(--spacing-2, 8px) 0 0;
+  border: 0;
+  background: transparent;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  color: var(--color-text, #171717);
+  text-overflow: ellipsis;
+}
+.fds-input__control:focus {
+  outline: none;
+}
+.fds-input__control::placeholder {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-input__box--locked .fds-input__control {
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: default;
+}
+.fds-input__control:disabled {
+  cursor: not-allowed;
+}
+.fds-input__trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.fds-input__hint,
+.fds-input__error {
+  margin: 0;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-sm, 22px);
+}
+.fds-input__hint {
+  color: var(--color-text-secondary, #525252);
+}
+.fds-input__error {
+  color: var(--color-error, #b91c1c);
+}
+
+/* src/components/IconButton/icon-button.css */
+.fds-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 6px);
+  background: transparent;
+  color: var(--color-text, #171717);
+  cursor: pointer;
+  transition: background-color var(--duration-instant, 80ms) ease, border-color var(--duration-instant, 80ms) ease;
+}
+.fds-icon-button:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-icon-button:disabled {
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: not-allowed;
+}
+.fds-icon-button--medium {
+  width: 44px;
+  height: 44px;
+}
+.fds-icon-button--small {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm, 4px);
+}
+.fds-icon-button__icon {
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+}
+.fds-icon-button--small .fds-icon-button__icon {
+  width: 16px;
+  height: 16px;
+}
+.fds-icon-button__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.fds-icon-button--outlined {
+  background: var(--color-surface-raised, #ffffff);
+  border-color: var(--color-border, #e5e5e5);
+}
+.fds-icon-button--outlined:hover:not(:disabled) {
+  background: var(--color-surface-subtle, #fafafa);
+  border-color: var(--color-border-strong, #d4d4d4);
+}
+.fds-icon-button--ghost {
+  color: var(--color-text-tertiary, #737373);
+}
+.fds-icon-button--ghost:hover:not(:disabled) {
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+}
+.fds-icon-button:active:not(:disabled) {
+  background: var(--color-surface-hover, #ececec);
+}
+
+/* src/components/Menu/menu.css */
+.fds-menu {
+  position: relative;
+  display: inline-flex;
+}
+.fds-menu__list {
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 50;
+  min-width: 200px;
+  padding: var(--spacing-1, 4px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-md, 6px);
+  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--start {
+  left: 0;
+}
+.fds-menu__list--end {
+  right: 0;
+}
+.fds-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  padding: 8px var(--spacing-2, 8px);
+  border-radius: var(--radius-sm, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text, #171717);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.fds-menu__item--active {
+  background: var(--color-surface, #f5f5f5);
+}
+.fds-menu__item--danger {
+  color: var(--color-error, #b91c1c);
+}
+.fds-menu__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fds-menu__icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+.fds-menu__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* src/components/Table/table.css */
+.fds-table {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-surface-raised, #ffffff);
+}
+.fds-table__table {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 20px;
+  color: var(--color-text, #171717);
+}
+.fds-table__table th {
+  padding: 12px var(--spacing-4, 16px);
+  background: var(--color-surface, #f5f5f5);
+  font-size: var(--font-size-text-xs, 12px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text-secondary, #525252);
+  text-align: left;
+  white-space: nowrap;
+}
+.fds-table__table td {
+  padding: 14px var(--spacing-4, 16px);
+  border-bottom: 1px solid var(--color-border-light, #f5f5f5);
+  vertical-align: middle;
+}
+.fds-table__table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.fds-table__table .fds-table__cell--end {
+  text-align: right;
+}
+.fds-table__table .fds-table__empty {
+  padding: var(--spacing-10, 40px) var(--spacing-4, 16px);
+}
+
+/* src/components/PricingCard/pricing-card.css */
+.fds-pricing-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 6px;
+  background: var(--color-surface-subtle, #fafafa);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-2xl, 16px);
+  color: var(--color-text, #171717);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-pricing-card__top {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-8, 32px) var(--spacing-8, 32px) var(--spacing-6, 24px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl, 12px);
+}
+.fds-pricing-card__eyebrow {
+  align-self: flex-start;
+  margin-bottom: var(--spacing-3, 12px);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm, 4px);
+  background: var(--color-surface, #f5f5f5);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: 18px;
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--color-text-on-neutral, #404040);
+}
+.fds-pricing-card__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  margin: 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 22px;
+  line-height: 30px;
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: -0.01em;
+}
+.fds-pricing-card__price {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin: var(--spacing-6, 24px) 0 0;
+}
+.fds-pricing-card__amount {
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: -0.02em;
+}
+.fds-pricing-card__period {
+  font-size: var(--font-size-text-md, 16px);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-pricing-card__description {
+  margin: var(--spacing-3, 12px) 0 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-pricing-card__action {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--spacing-6, 24px);
+}
+.fds-pricing-card__features {
+  padding: var(--spacing-6, 24px) var(--spacing-8, 32px) var(--spacing-8, 32px);
+}
+.fds-pricing-card__featuresTitle {
+  margin: 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  font-weight: var(--font-weight-medium, 500);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+.fds-pricing-card__intro {
+  margin: var(--spacing-4, 16px) 0 0;
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+  color: var(--color-text-secondary, #525252);
+}
+.fds-pricing-card__intro strong,
+.fds-pricing-card__intro b {
+  color: var(--color-text, #171717);
+  font-weight: var(--font-weight-medium, 500);
+}
+.fds-pricing-card__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+  margin: var(--spacing-5, 20px) 0 0;
+  padding: 0;
+  list-style: none;
+}
+.fds-pricing-card__feature {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3, 12px);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: 22px;
+}
+.fds-pricing-card__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-pricing-card--highlighted {
+  background: color-mix(in srgb, var(--color-accent-subtle, #ffedd5) 50%, var(--color-surface-raised, #ffffff));
+  border-color: transparent;
+}
+.fds-pricing-card--highlighted .fds-pricing-card__top {
+  border-color: var(--color-accent-muted, #fb923c);
+}
+.fds-pricing-card--highlighted .fds-pricing-card__eyebrow {
+  background: var(--color-accent-subtle, #ffedd5);
+  color: var(--color-accent-text, #c2410c);
+}
+.fds-pricing-card--highlighted .fds-pricing-card__check {
+  background: var(--color-accent-muted, #fb923c);
+  color: #ffffff;
+}
+@media (max-width: 600px) {
+  .fds-pricing-card__top {
+    padding: var(--spacing-6, 24px);
+  }
+  .fds-pricing-card__features {
+    padding: var(--spacing-5, 20px) var(--spacing-6, 24px) var(--spacing-6, 24px);
+  }
+}