@neo-design/foundations 1.0.0-rc.4

package/css/select.css

@@ -0,0 +1,181 @@
+/* packages/foundations/css/select.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  position: relative;
+  width: 100%;
+}
+
+
+.select__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+}
+
+.select__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);
+}
+
+
+.select__trigger {
+  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);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+
+.select__value {
+  flex: 1;
+  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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select__value--placeholder {
+  color: var(--text--base--secondary);
+}
+
+.select__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) {
+  .select__chevron { transition: none; }
+}
+
+
+.select__helper,
+.select__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);
+}
+
+.select__helper   { color: var(--text--base--secondary); }
+.select__feedback { color: var(--text--semantic--error); }
+
+
+.select__trigger:focus-visible,
+.select--focus .select__trigger {
+  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);
+}
+
+.select--active .select__trigger {
+  border-color: var(--border--base--focus);
+}
+
+.select--active .select__chevron {
+  transform: rotate(180deg);
+}
+
+.select--filled .select__value {
+  color: var(--text--base--default);
+}
+
+
+.select--error .select__trigger {
+  border-color: var(--border--semantic--error-solid);
+}
+
+.select--error .select__label {
+  color: var(--text--semantic--error);
+}
+
+.select--error .select__trigger:focus-visible,
+.select--error.select--focus .select__trigger {
+  border-color: var(--border--semantic--error-solid);
+  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);
+}
+
+.select--read-only .select__trigger {
+  background: var(--fill--base--medium);
+  border-color: var(--border--base--default);
+  cursor: default;
+  pointer-events: none;
+}
+
+.select--disabled .select__trigger {
+  background: var(--fill--base--disabled);
+  border-color: var(--border--base--disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.select--disabled .select__label {
+  color: var(--text--base--disabled);
+}
+
+.select--disabled .select__value,
+.select--disabled .select__value--placeholder {
+  color: var(--text--base--disabled);
+}
+
+.select--disabled .select__chevron {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+.select--disabled .select__helper {
+  color: var(--text--base--disabled);
+}
+
+
+.select__icon--tooltip {
+  width: var(--neo-icon-size-xs-rem);
+  height: var(--neo-icon-size-xs-rem);
+  flex-shrink: 0;
+}
+
+button.select__icon--tooltip {
+  padding: 0;
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+button.select__icon--tooltip { position: relative; }
+button.select__icon--tooltip::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--neo-icon-size-md-rem) - var(--neo-icon-size-xs-rem)) / -2);
+}
+
+.select__icon--tooltip > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/css/snackbar.css

@@ -0,0 +1,85 @@
+/* packages/foundations/css/snackbar.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.snackbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--neo-space-sm-rem);
+  max-width: 100%;
+  padding-block: var(--neo-space-md-rem);
+  padding-inline: var(--neo-space-lg-rem);
+  border-radius: var(--neo-radius-lg);
+  background: var(--fill--base--inverse);
+  color: var(--text--base--contrast);
+}
+
+.snackbar[hidden] { display: none; }
+
+.snackbar__message {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-sm-rem);
+  flex: none;
+  min-width: 0;
+  min-height: var(--neo-icon-size-lg-rem);
+  margin: 0;
+}
+
+.snackbar__icon {
+  flex-shrink: 0;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+}
+
+.snackbar__text {
+  min-width: 0;
+  color: var(--text--base--contrast);
+  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);
+}
+
+.snackbar__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-inline-start: var(--neo-space-sm-rem);
+}
+
+.snackbar__close {
+  flex-shrink: 0;
+  width: var(--neo-icon-size-lg-rem);
+  height: var(--neo-icon-size-lg-rem);
+  border-radius: var(--neo-radius-pill);
+}
+
+@media (max-width: 575px) {
+  .snackbar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: minmax(var(--neo-icon-size-lg-rem), auto);
+    row-gap: var(--neo-space-sm-rem);
+    column-gap: var(--neo-space-sm-rem);
+    width: 100%;
+  }
+  .snackbar__message {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
+    align-items: flex-start;
+    min-height: 0;
+    padding-block-start: var(--neo-space-xs-rem);
+  }
+  .snackbar__close { grid-column: 2; grid-row: 1; align-self: start; }
+  .snackbar__action {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: end;
+  }
+  .snackbar__text {
+    flex: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}

package/css/spinner.css

@@ -0,0 +1,21 @@
+/* packages/foundations/css/spinner.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.spinner {
+  display: inline-block;
+  border: 2px solid transparent;
+  border-top-color: var(--icon--base--default);
+  border-radius: var(--neo-radius-pill);
+  animation: neo-spin 0.8s linear infinite;
+}
+
+.spinner--small { width: 20px; height: 20px; }
+.spinner--medium { width: 24px; height: 24px; }
+.spinner--large { width: 32px; height: 32px; border-width: 3px; }
+
+@keyframes neo-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner { animation: none; }
+}

package/css/tabs.css

@@ -0,0 +1,126 @@
+/* packages/foundations/css/tabs.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+  background: var(--fill--base--default);
+}
+
+[role="tablist"] {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  position: relative;
+  background: var(--fill--base--default);
+  border-style: solid;
+  border-width: var(--neo-stroke-xs);
+  border-color: var(--border--base--secondary);
+  border-radius: var(--neo-radius-sm) var(--neo-radius-sm) 0 0;
+  box-shadow: var(--neo-elevation-md);
+}
+
+[role="tab"] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: var(--neo-space-sm-rem);
+  padding-inline: var(--neo-space-lg-rem);
+  padding-block: var(--neo-space-md-rem);
+  background: var(--fill--tertiary--default);
+  border: none;
+  cursor: pointer;
+  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--secondary);
+  position: relative;
+  white-space: nowrap;
+  transition: color 100ms ease, background 100ms ease;
+}
+
+[role="tab"]:first-child { border-top-left-radius: var(--neo-radius-sm); }
+[role="tab"]:last-child  { border-top-right-radius: var(--neo-radius-sm); }
+
+[role="tab"] svg {
+  fill: var(--icon--base--secondary);
+  color: var(--icon--base--secondary);
+  width: var(--neo-icon-size-sm-rem);
+  height: var(--neo-icon-size-sm-rem);
+  flex-shrink: 0;
+}
+
+[role="tab"]:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: var(--neo-stroke-xs);
+  background: var(--border--base--secondary);
+  z-index: 1;
+}
+
+[role="tab"]::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--neo-stroke-sm);
+  background: var(--border--base--default);
+  transition: background 100ms ease;
+}
+
+[role="tab"]:hover:not([aria-selected="true"]):not([aria-disabled="true"]) {
+  background: var(--fill--tertiary--hover);
+  color: var(--text--base--default);
+}
+
+[role="tab"][aria-selected="true"] {
+  background: var(--fill--tertiary--active);
+  color: var(--text--base--default);
+}
+
+[role="tab"][aria-selected="true"]::after {
+  background: var(--border--base--focus);
+}
+
+[role="tab"][aria-selected="true"] svg {
+  fill: currentColor;
+}
+
+[role="tab"]:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: calc(-1 * var(--neo-stroke-focus-ring-width));
+  box-shadow: inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
+  isolation: isolate;
+}
+
+[role="tab"]:focus-visible::before,
+[role="tab"]:focus-visible::after {
+  z-index: -1;
+}
+
+[role="tab"][aria-disabled="true"] {
+  color: var(--text--base--disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[role="tab"][aria-disabled="true"]::after {
+  background: var(--border--base--secondary);
+}
+
+[role="tab"][aria-disabled="true"] svg {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+[role="tabpanel"] {
+  padding-block: var(--neo-space-lg-rem);
+}
+
+[role="tabpanel"][hidden] {
+  display: none;
+}

package/css/tag.css

@@ -0,0 +1,38 @@
+/* packages/foundations/css/tag.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+  padding-inline: var(--neo-space-sm-rem);
+  padding-block: var(--neo-space-xs-rem);
+  background: var(--fill--base--light);
+  border: var(--neo-stroke-xs) solid var(--border--base--default);
+  border-radius: var(--neo-radius-xs);
+  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--secondary);
+  white-space: nowrap;
+}
+
+.tag svg,
+.tag [aria-hidden="true"] {
+  flex-shrink: 0;
+  fill: var(--icon--base--secondary);
+  color: var(--icon--base--secondary);
+  width: var(--neo-icon-size-sm-rem);
+  height: var(--neo-icon-size-sm-rem);
+}
+
+.tag--solid {
+  background: var(--fill--base--inverse);
+  border-color: var(--fill--base--inverse);
+  color: var(--text--base--contrast);
+}
+
+.tag--solid svg,
+.tag--solid [aria-hidden="true"] {
+  fill: var(--icon--base--contrast);
+  color: var(--icon--base--contrast);
+}

package/css/text-field.css

@@ -0,0 +1,224 @@
+/* packages/foundations/css/text-field.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  width: 100%;
+}
+
+.field__label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-xs-rem);
+}
+
+.field__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);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.field__label--required::after {
+  content: ' *';
+  color: var(--text--semantic--error);
+}
+
+.field__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-sm-rem);
+  min-height: 44px;
+  padding-inline: var(--neo-space-md-rem);
+  padding-block: var(--neo-space-sm-rem);
+  border: var(--neo-stroke-xs) solid var(--border--base--default);
+  border-radius: var(--neo-radius-sm);
+  background: var(--fill--base--default);
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+
+.field__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;
+}
+
+.field__input-wrapper:has(textarea),
+.field__input-wrapper--textarea {
+  box-sizing: border-box;
+  min-height: 112px;
+  padding-block: var(--neo-space-md-rem);
+  align-items: flex-start;
+}
+
+.field__input::placeholder {
+  color: var(--text--base--secondary);
+}
+
+.field__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;
+  flex-shrink: 0;
+}
+
+.field__icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.field__icon--tooltip {
+  width: var(--neo-icon-size-xs-rem);
+  height: var(--neo-icon-size-xs-rem);
+  flex-shrink: 0;
+}
+
+.field__icon--tooltip > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+button.field__icon,
+button.field__icon--tooltip {
+  padding: 0;
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: inherit;
+}
+
+button.field__icon--tooltip { position: relative; }
+button.field__icon--tooltip::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--neo-icon-size-md-rem) - var(--neo-icon-size-xs-rem)) / -2);
+}
+
+.field__prefix,
+.field__suffix {
+  flex-shrink: 0;
+  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);
+}
+
+
+.field--active .field__input-wrapper,
+.field--writing .field__input-wrapper {
+  border-width: var(--neo-stroke-sm);
+  border-color: var(--border--base--focus);
+}
+
+.field--focus .field__input-wrapper {
+  border-width: var(--neo-stroke-sm);
+  border-color: var(--border--base--focus);
+  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);
+}
+
+.field--filled .field__input-wrapper {
+  border-width: var(--neo-stroke-xs);
+  border-color: var(--border--base--default);
+}
+
+.field--error .field__input-wrapper {
+  border-width: var(--neo-stroke-sm);
+  border-color: var(--border--semantic--error-solid);
+}
+
+.field--error.field--focus .field__input-wrapper {
+  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);
+}
+
+.field--error .field__label {
+  color: var(--text--semantic--error);
+}
+
+.field__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);
+  color: var(--text--semantic--error);
+}
+
+.field--read-only .field__input-wrapper {
+  background: var(--fill--base--medium);
+  border-width: var(--neo-stroke-xs);
+  border-color: var(--border--base--default);
+}
+
+.field--read-only .field__input {
+  color: var(--text--base--default);
+  cursor: default;
+}
+
+.field--disabled .field__input-wrapper {
+  background: var(--fill--base--disabled);
+  border-width: var(--neo-stroke-xs);
+  border-color: var(--border--base--disabled);
+  pointer-events: none;
+}
+
+.field--disabled .field__label,
+.field--disabled .field__input,
+.field--disabled .field__prefix,
+.field--disabled .field__suffix,
+.field--disabled .field__helper {
+  color: var(--text--base--disabled);
+}
+
+.field--disabled .field__icon {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+.field__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--neo-space-sm-rem);
+}
+
+.field__helper {
+  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);
+  color: var(--text--base--secondary);
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.field__counter {
+  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);
+  color: var(--text--base--secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+