@neo-design/foundations 1.0.0-rc.4

package/css/checkbox.css

@@ -0,0 +1,124 @@
+/* packages/foundations/css/checkbox.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  cursor: pointer;
+  min-height: 2.75rem;
+}
+
+.checkbox__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.75rem;
+  flex-shrink: 0;
+}
+
+.checkbox__wrapper input[type="checkbox"] {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.checkbox__control {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--neo-radius-xs);
+  border: var(--neo-stroke-xs) solid var(--border--base--default);
+  background: var(--fill--base--default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 100ms ease, border-color 100ms ease;
+}
+
+.checkbox__control svg {
+  display: none;
+  fill: var(--icon--base--contrast);
+  color: var(--icon--base--contrast);
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.checkbox__label {
+  font-size: var(--neo-type-body-lg-regular-size-rem);
+  font-weight: var(--neo-type-body-lg-regular-weight);
+  line-height: var(--neo-type-body-lg-regular-line-height-rem);
+  color: var(--text--base--default);
+}
+
+.checkbox:hover .checkbox__control {
+  border-color: var(--border--base--focus);
+}
+
+.checkbox--selected .checkbox__control,
+input[type="checkbox"]:checked + .checkbox__control {
+  background: var(--icon--base--default);
+  border-color: var(--icon--base--default);
+}
+
+.checkbox--selected .checkbox__control svg,
+input[type="checkbox"]:checked + .checkbox__control svg {
+  display: block;
+}
+
+.checkbox--indeterminate .checkbox__control {
+  background: var(--icon--base--default);
+  border-color: var(--icon--base--default);
+}
+
+input[type="checkbox"]:focus-visible + .checkbox__control {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 0.125rem;
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default);
+}
+
+.checkbox--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.checkbox--disabled .checkbox__control {
+  background: var(--fill--base--light);
+  border-color: var(--border--base--disabled);
+}
+
+.checkbox--selected.checkbox--disabled .checkbox__control,
+.checkbox--indeterminate.checkbox--disabled .checkbox__control {
+  background: var(--icon--base--disabled);
+  border-color: var(--icon--base--disabled);
+}
+
+.checkbox--disabled .checkbox__label {
+  color: var(--text--base--disabled);
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 0;
+}
+
+
+.checkbox--hidden-label .checkbox__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}

package/css/chips-group.css

@@ -0,0 +1,26 @@
+/* packages/foundations/css/chips-group.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.chips-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+  padding-block: var(--neo-space-none-rem);
+  padding-inline: var(--neo-space-none-rem);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.chips-group::-webkit-scrollbar { display: none; }
+
+.chips-group input[type="radio"] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/css/chips.css

@@ -0,0 +1,88 @@
+/* packages/foundations/css/chips.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.chip {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+  padding-inline: var(--neo-space-md-rem);
+  padding-block: var(--neo-space-sm-rem);
+  height: 32px;
+  border-radius: var(--neo-radius-pill);
+  border: var(--neo-stroke-xs) solid var(--border--base--default);
+  background: var(--fill--base--default);
+  font-size: var(--neo-type-body-md-medium-size-rem);
+  font-weight: var(--neo-type-body-md-medium-weight);
+  line-height: var(--neo-type-body-md-medium-line-height-rem);
+  color: var(--text--base--default);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
+}
+
+
+.chip svg,
+.chip [aria-hidden="true"] {
+  fill: var(--icon--base--default);
+  color: var(--icon--base--default);
+  width: var(--neo-icon-size-xs-rem);
+  height: var(--neo-icon-size-xs-rem);
+  flex-shrink: 0;
+}
+
+.chip:hover:not([disabled]):not(.chip--disabled):not([aria-pressed="true"]):not(.chip--selected):not(:has(input:checked)) {
+  background: var(--fill--primary--hover);
+  border-color: var(--fill--primary--hover);
+  color: var(--text--base--contrast);
+}
+
+.chip:hover:not([disabled]):not(.chip--disabled):not([aria-pressed="true"]):not(.chip--selected):not(:has(input:checked)) svg,
+.chip:hover:not([disabled]):not(.chip--disabled):not([aria-pressed="true"]):not(.chip--selected):not(:has(input:checked)) [aria-hidden="true"] {
+  fill: var(--icon--base--contrast);
+  color: var(--icon--base--contrast);
+}
+
+.chip[aria-pressed="true"],
+.chip--selected,
+.chip:has(input:checked) {
+  background: var(--fill--primary--active);
+  border-color: var(--fill--primary--active);
+  color: var(--text--base--contrast);
+}
+
+.chip[aria-pressed="true"] svg,
+.chip[aria-pressed="true"] [aria-hidden="true"],
+.chip--selected svg,
+.chip--selected [aria-hidden="true"],
+.chip:has(input:checked) svg,
+.chip:has(input:checked) [aria-hidden="true"] {
+  fill: var(--icon--base--contrast);
+  color: var(--icon--base--contrast);
+}
+
+.chip:focus-visible,
+.chip:has(input:focus-visible) {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 0.125rem;
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default);
+}
+
+.chip[disabled],
+.chip--disabled,
+.chip:has(input:disabled) {
+  background: var(--fill--base--disabled);
+  border-color: var(--border--base--disabled);
+  color: var(--text--base--disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.chip[disabled] svg,
+.chip--disabled svg,
+.chip:has(input:disabled) svg {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+.chip:has(input[type="radio"]) { position: relative; }
+

package/css/combobox.css

@@ -0,0 +1,229 @@
+/* packages/foundations/css/combobox.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.combobox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  position: relative;
+  width: 100%;
+}
+
+
+.combobox__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+}
+
+.combobox__label {
+  font-size: var(--neo-type-body-lg-medium-size-rem);
+  font-weight: var(--neo-type-body-lg-medium-weight);
+  line-height: var(--neo-type-body-lg-medium-line-height-rem);
+  color: var(--text--base--default);
+}
+
+
+.combobox__field {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-sm-rem);
+  min-height: 44px;
+  padding-block: var(--neo-space-sm-rem);
+  padding-inline: var(--neo-space-md-rem);
+  min-width: 160px;
+  border: var(--neo-stroke-xs) solid var(--border--base--default);
+  border-radius: var(--neo-radius-sm);
+  background: var(--fill--base--default);
+  width: 100%;
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+
+.combobox__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: var(--neo-type-body-lg-regular-size-rem);
+  font-weight: var(--neo-type-body-lg-regular-weight);
+  line-height: var(--neo-type-body-lg-regular-line-height-rem);
+  color: var(--text--base--default);
+  outline: none;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.combobox__input::placeholder {
+  color: var(--text--base--secondary);
+}
+
+.combobox__icon {
+  fill: var(--icon--base--default);
+  color: var(--icon--base--default);
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  flex-shrink: 0;
+}
+
+.combobox__clear {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-icon-size-lg-rem);
+  height: var(--neo-icon-size-lg-rem);
+  padding: 0;
+  border: none;
+  border-radius: var(--neo-radius-pill);
+  background: transparent;
+  cursor: pointer;
+}
+
+.combobox__clear:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 2px;
+}
+
+.combobox__clear svg {
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  fill: var(--icon--base--secondary);
+  color: var(--icon--base--secondary);
+}
+
+.combobox__chevron {
+  flex-shrink: 0;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  fill: var(--icon--base--secondary);
+  color: var(--icon--base--secondary);
+  transition: transform 150ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .combobox__chevron { transition: none; }
+}
+
+
+.combobox__helper,
+.combobox__feedback {
+  font-size: var(--neo-type-body-md-regular-size-rem);
+  font-weight: var(--neo-type-body-md-regular-weight);
+  line-height: var(--neo-type-body-md-regular-line-height-rem);
+}
+
+.combobox__helper   { color: var(--text--base--secondary); }
+.combobox__feedback { color: var(--text--semantic--error); }
+
+
+.combobox--active .combobox__field,
+.combobox--writing .combobox__field,
+.combobox--no-results .combobox__field {
+  border-width: var(--neo-stroke-sm);
+  border-color: var(--border--base--focus);
+}
+
+.combobox--active .combobox__chevron,
+.combobox--writing .combobox__chevron,
+.combobox--no-results .combobox__chevron {
+  transform: rotate(180deg);
+}
+
+.combobox--focus .combobox__field {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default),
+    0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--ring--default);
+}
+
+.combobox--filled .combobox__field {
+  border-width: var(--neo-stroke-xs);
+  border-color: var(--border--base--default);
+}
+
+.combobox--error .combobox__field {
+  border-width: var(--neo-stroke-sm);
+  border-color: var(--border--semantic--error-solid);
+}
+
+.combobox--error.combobox--focus .combobox__field {
+  box-shadow:
+    0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default),
+    0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--ring--default);
+}
+
+.combobox--error .combobox__label {
+  color: var(--text--semantic--error);
+}
+
+.combobox--read-only .combobox__field {
+  background: var(--fill--base--medium);
+  border-color: var(--border--base--default);
+  pointer-events: none;
+}
+
+.combobox--read-only .combobox__input {
+  cursor: default;
+}
+
+.combobox--disabled .combobox__field {
+  background: var(--fill--base--disabled);
+  border-color: var(--border--base--disabled);
+  pointer-events: none;
+}
+
+.combobox--disabled .combobox__label,
+.combobox--disabled .combobox__input,
+.combobox--disabled .combobox__helper {
+  color: var(--text--base--disabled);
+}
+
+.combobox--disabled .combobox__icon,
+.combobox--disabled .combobox__clear svg,
+.combobox--disabled .combobox__chevron {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+
+.menu-list__empty {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding-block: var(--neo-space-md-rem);
+  padding-inline: var(--neo-space-lg-rem);
+  font-size: var(--neo-type-body-lg-regular-size-rem);
+  font-weight: var(--neo-type-body-lg-regular-weight);
+  line-height: var(--neo-type-body-lg-regular-line-height-rem);
+  color: var(--text--base--secondary);
+  list-style: none;
+}
+
+.combobox__icon--tooltip {
+  width: var(--neo-icon-size-xs-rem);
+  height: var(--neo-icon-size-xs-rem);
+  flex-shrink: 0;
+}
+
+button.combobox__icon--tooltip {
+  padding: 0;
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+button.combobox__icon--tooltip { position: relative; }
+button.combobox__icon--tooltip::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--neo-icon-size-md-rem) - var(--neo-icon-size-xs-rem)) / -2);
+}
+
+.combobox__icon--tooltip > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/css/empty-state.css

@@ -0,0 +1,149 @@
+/* packages/foundations/css/empty-state.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.empty-state-shell {
+  container-type: inline-size;
+  container-name: empty-state;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--neo-space-lg-rem);
+  padding-block: var(--neo-space-xl-rem);
+  padding-inline: var(--neo-space-xl-rem);
+  border-radius: var(--neo-radius-md);
+  background: var(--surface--base--default);
+}
+
+
+@container empty-state (min-width: 720px) {
+  .empty-state {
+    gap: var(--neo-space-xl-rem);
+    padding-block: var(--neo-space-3xl-rem);
+    padding-inline: var(--neo-space-2xl-rem);
+  }
+}
+
+.empty-state__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--neo-space-md-rem);
+  width: 100%;
+  max-width: 480px;
+}
+
+@container empty-state (min-width: 720px) {
+  .empty-state__body { gap: var(--neo-space-lg-rem); }
+}
+
+.empty-state__icon-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--neo-space-none-rem);
+  width: 48px;
+  height: 48px;
+  padding-block: var(--neo-space-md-rem);
+  padding-inline: var(--neo-space-md-rem);
+  border-radius: var(--neo-radius-md);
+  background: var(--fill--base--light);
+  flex-shrink: 0;
+}
+
+@container empty-state (min-width: 720px) {
+  .empty-state__icon-box {
+    width: 64px;
+    height: 64px;
+    padding-block: var(--neo-space-lg-rem);
+    padding-inline: var(--neo-space-lg-rem);
+    border-radius: var(--neo-radius-lg);
+  }
+}
+
+.empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  color: var(--icon--base--default);
+  fill: var(--icon--base--default);
+  flex-shrink: 0;
+}
+
+.empty-state__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+@container empty-state (min-width: 720px) {
+  .empty-state__icon {
+    width: var(--neo-icon-size-lg-rem);
+    height: var(--neo-icon-size-lg-rem);
+  }
+}
+
+.empty-state__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--neo-space-none-rem);
+  width: 100%;
+}
+
+.empty-state__title {
+  text-align: center;
+  margin: 0;
+  color: var(--text--base--default);
+  font-size: var(--neo-type-body-lg-bold-size-rem);
+  font-weight: var(--neo-type-body-lg-bold-weight);
+  line-height: var(--neo-type-body-lg-bold-line-height-rem);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+
+@container empty-state (min-width: 720px) {
+  .empty-state__title {
+    font-size: var(--neo-type-title-sm-bold-size-rem);
+    font-weight: var(--neo-type-title-sm-bold-weight);
+    line-height: var(--neo-type-title-sm-bold-line-height-rem);
+  }
+}
+
+.empty-state__description {
+  text-align: center;
+  margin: 0;
+  color: var(--text--base--secondary);
+  font-size: var(--neo-type-body-md-regular-size-rem);
+  font-weight: var(--neo-type-body-md-regular-weight);
+  line-height: var(--neo-type-body-md-regular-line-height-rem);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+@container empty-state (min-width: 720px) {
+  .empty-state__description {
+    font-size: var(--neo-type-body-lg-regular-size-rem);
+    font-weight: var(--neo-type-body-lg-regular-weight);
+    line-height: var(--neo-type-body-lg-regular-line-height-rem);
+  }
+}
+
+.empty-state__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--neo-space-sm-rem);
+  flex-wrap: wrap;
+}

package/css/index.css

@@ -0,0 +1,36 @@
+/* packages/foundations/css/index.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+@import './alert.css';
+@import './aspect-ratio.css';
+@import './badge.css';
+@import './banner.css';
+@import './button.css';
+@import './button-icon.css';
+@import './checkbox.css';
+@import './chips.css';
+@import './chips-group.css';
+@import './combobox.css';
+@import './empty-state.css';
+@import './link.css';
+@import './menu.css';
+@import './modal-dialog.css';
+@import './modal-fullscreen.css';
+@import './radio-button.css';
+@import './select.css';
+@import './snackbar.css';
+@import './spinner.css';
+@import './tabs.css';
+@import './tag.css';
+@import './text-field.css';
+@import './toggle.css';
+@import './tooltip.css';
+
+.alert, .aspect-ratio, .badge, .notification, .banner, .btn, .checkbox, .checkbox-group,
+.chip, .chips-group, .combobox, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
+.modal-full, .radio, .radio-group, .select, .snackbar, .spinner, .tabs, .tag, .field, .toggle, .tooltip,
+.alert *, .aspect-ratio *, .badge *, .banner *, .btn *, .checkbox *, .chip *, .combobox *,
+.empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
+.tag *, .field *, .toggle *, .tooltip *,
+[role="tablist"], [role="tab"] {
+  box-sizing: border-box;
+}

package/css/link.css

@@ -0,0 +1,39 @@
+/* packages/foundations/css/link.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.link {
+  color: inherit;
+  font-weight: var(--neo-type-body-lg-bold-weight);
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  text-decoration-skip-ink: auto;
+  cursor: pointer;
+}
+
+.link:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--default);
+  border-radius: var(--neo-radius-xs);
+}
+
+.link[data-surface="inverse"]:focus-visible {
+  outline-color: var(--focus--ring--inverse);
+  box-shadow: 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--gap--inverse);
+}
+
+.link--disabled,
+.link:not([href]) {
+  color: var(--text--base--disabled);
+  pointer-events: none;
+  cursor: default;
+}
+
+.link--standalone {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+