@neo-design/foundations 1.0.0-rc.4

package/css/menu.css

@@ -0,0 +1,112 @@
+/* packages/foundations/css/menu.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.menu-anchor {
+  position: relative;
+  display: inline-block;
+}
+
+
+.menu-list {
+  position: absolute;
+  top: calc(100% + var(--neo-space-sm-rem));
+  left: 0;
+  width: 100%;
+  min-width: 200px;
+  z-index: 10;
+  list-style: none;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  background: var(--surface--base--default);
+  border: var(--neo-stroke-xs) solid var(--border--base--secondary);
+  border-radius: var(--neo-radius-sm);
+  box-shadow: var(--neo-elevation-md);
+  overflow: hidden;
+}
+
+.menu-list--scroll {
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.menu-list--scroll::-webkit-scrollbar {
+  width: 4px;
+}
+.menu-list--scroll::-webkit-scrollbar-track {
+  background: var(--fill--base--default);
+  border-radius: var(--neo-radius-pill);
+}
+.menu-list--scroll::-webkit-scrollbar-thumb {
+  background: var(--fill--base--medium);
+  border-radius: var(--neo-radius-pill);
+}
+
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-md-rem);
+  min-height: 40px;
+  padding-block: var(--neo-space-sm-rem);
+  padding-inline: var(--neo-space-lg-rem);
+  background: var(--fill--tertiary--default);
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background: var(--fill--tertiary--hover);
+}
+
+.menu-item:focus-visible {
+  outline: none;
+  border-radius: calc(var(--neo-radius-sm) - var(--neo-stroke-xs));
+  box-shadow:
+    inset 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--ring--default),
+    inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
+}
+
+.menu-item--active {
+  background: var(--fill--tertiary--active);
+}
+
+.menu-item--disabled {
+  background: var(--fill--base--disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.menu-item__label {
+  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;
+}
+
+.menu-item--disabled .menu-item__label {
+  color: var(--text--base--disabled);
+}
+
+.menu-item__icon {
+  flex-shrink: 0;
+  width: var(--neo-icon-size-md-rem);
+  height: var(--neo-icon-size-md-rem);
+  fill: var(--icon--base--default);
+  color: var(--icon--base--default);
+}
+
+.menu-item--disabled .menu-item__icon {
+  fill: var(--icon--base--disabled);
+  color: var(--icon--base--disabled);
+}
+
+
+.menu-divider {
+  height: var(--neo-stroke-xs);
+  margin: 0;
+  border: none;
+  background: var(--border--base--secondary);
+}

package/css/modal-dialog.css

@@ -0,0 +1,204 @@
+/* packages/foundations/css/modal-dialog.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--surface--base--overlay);
+}
+
+.modal-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  height: fit-content;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface--base--default);
+  border-radius: var(--neo-radius-xl);
+  width: calc(100% - 2 * var(--neo-space-lg-rem));
+  overflow: hidden;
+}
+
+.modal-dialog--xs { max-width: 440px;  max-height: 600px; }
+.modal-dialog--sm { max-width: 600px;  max-height: 700px; }
+.modal-dialog--md { max-width: 900px;  max-height: 740px; }
+.modal-dialog--lg { max-width: 1200px; max-height: 840px; }
+
+.modal-dialog--xs { --modal-dialog-gutter: var(--neo-space-lg-rem); }
+.modal-dialog--sm,
+.modal-dialog--md { --modal-dialog-gutter: var(--neo-space-xl-rem); }
+.modal-dialog--lg { --modal-dialog-gutter: var(--neo-space-2xl-rem); }
+
+.modal-dialog--xs { --modal-dialog-close-gutter: var(--neo-space-sm-rem); --modal-dialog-content-top: var(--neo-space-sm-rem);  --modal-dialog-content-bottom: var(--neo-space-lg-rem); }
+.modal-dialog--sm { --modal-dialog-close-gutter: var(--neo-space-sm-rem); --modal-dialog-content-top: var(--neo-space-sm-rem);  --modal-dialog-content-bottom: var(--neo-space-xl-rem); }
+.modal-dialog--md { --modal-dialog-close-gutter: var(--neo-space-lg-rem); --modal-dialog-content-top: var(--neo-space-none-rem); --modal-dialog-content-bottom: var(--neo-space-xl-rem); }
+.modal-dialog--lg { --modal-dialog-close-gutter: var(--neo-space-lg-rem); --modal-dialog-content-top: var(--neo-space-none-rem); --modal-dialog-content-bottom: var(--neo-space-xl-rem); }
+
+
+.modal-dialog__header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--neo-space-md-rem);
+  padding: var(--neo-space-lg-rem) var(--modal-dialog-close-gutter) var(--neo-space-lg-rem) var(--modal-dialog-gutter);
+}
+
+.modal-dialog__title {
+  flex: 1;
+  margin: 0;
+  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);
+  color: var(--text--base--default);
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+
+.modal-dialog__close {
+  position: absolute;
+  top: var(--neo-space-sm-rem);
+  right: var(--neo-space-sm-rem);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--neo-icon-size-xl-rem);
+  height: var(--neo-icon-size-xl-rem);
+  border-radius: var(--neo-radius-pill);
+}
+
+.modal-dialog__close:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 2px;
+}
+
+.modal-dialog__close svg {
+  fill: var(--icon--base--default);
+  color: var(--icon--base--default);
+  width: var(--neo-icon-size-sm-rem);
+  height: var(--neo-icon-size-sm-rem);
+}
+
+.modal-dialog--info     .modal-dialog__header { background: var(--fill--semantic--info--soft); }
+.modal-dialog--success  .modal-dialog__header { background: var(--fill--semantic--success--soft); }
+.modal-dialog--warning  .modal-dialog__header { background: var(--fill--semantic--warning--soft); }
+.modal-dialog--error .modal-dialog__header { background: var(--fill--semantic--error--soft); }
+
+.modal-dialog--brand    .modal-dialog__title,
+.modal-dialog--info     .modal-dialog__title,
+.modal-dialog--success  .modal-dialog__title,
+.modal-dialog--warning  .modal-dialog__title,
+.modal-dialog--error    .modal-dialog__title { flex: none; }
+
+.modal-dialog--brand    .modal-dialog__title { color: var(--text--base--brand); }
+.modal-dialog--info     .modal-dialog__title { color: var(--text--semantic--info); }
+.modal-dialog--success  .modal-dialog__title { color: var(--text--semantic--success); }
+.modal-dialog--warning  .modal-dialog__title { color: var(--text--semantic--warning); }
+.modal-dialog--error .modal-dialog__title { color: var(--text--semantic--error); }
+
+.modal-dialog--info .modal-dialog__icon,
+.modal-dialog--success .modal-dialog__icon,
+.modal-dialog--warning .modal-dialog__icon,
+.modal-dialog--error .modal-dialog__icon {
+  width: var(--neo-icon-size-3xl-rem);
+  height: var(--neo-icon-size-3xl-rem);
+  flex: none;
+}
+
+.modal-dialog--brand .modal-dialog__icon {
+  width: var(--neo-icon-size-4xl-rem);
+  height: var(--neo-icon-size-4xl-rem);
+  flex: none;
+}
+
+.modal-dialog--brand    .modal-dialog__header,
+.modal-dialog--info     .modal-dialog__header,
+.modal-dialog--success  .modal-dialog__header,
+.modal-dialog--warning  .modal-dialog__header,
+.modal-dialog--error .modal-dialog__header {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--neo-space-2xl-rem) var(--modal-dialog-gutter) var(--neo-space-xl-rem);
+}
+
+.modal-dialog--brand .modal-dialog__header {
+  padding-bottom: var(--neo-space-md-rem);
+}
+
+.modal-dialog--info     .modal-dialog__header,
+.modal-dialog--success  .modal-dialog__header,
+.modal-dialog--warning  .modal-dialog__header,
+.modal-dialog--error .modal-dialog__header {
+  border-bottom-left-radius: 50% 14px;
+  border-bottom-right-radius: 50% 14px;
+}
+
+
+.modal-dialog__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-lg-rem);
+  padding: var(--modal-dialog-content-top) var(--modal-dialog-gutter) var(--modal-dialog-content-bottom);
+}
+.modal-dialog__content:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--ring--default),
+    inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
+}
+
+.modal-dialog__description {
+  margin: 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);
+}
+
+.modal-dialog--brand    .modal-dialog__description,
+.modal-dialog--info     .modal-dialog__description,
+.modal-dialog--success  .modal-dialog__description,
+.modal-dialog--warning  .modal-dialog__description,
+.modal-dialog--error .modal-dialog__description {
+  text-align: center;
+}
+
+.modal-dialog__slot {
+  border-radius: var(--neo-radius-xs);
+}
+
+
+.modal-dialog__actions {
+  flex: none;
+  display: flex;
+  gap: var(--neo-space-md-rem);
+  padding: var(--neo-space-lg-rem) var(--modal-dialog-gutter) var(--modal-dialog-gutter);
+}
+
+.modal-dialog--xs .modal-dialog__actions {
+  flex-direction: column;
+}
+.modal-dialog--xs .modal-dialog__actions > .btn {
+  width: 100%;
+}
+.modal-dialog--sm .modal-dialog__actions,
+.modal-dialog--md .modal-dialog__actions,
+.modal-dialog--lg .modal-dialog__actions {
+  justify-content: flex-end;
+}

package/css/modal-fullscreen.css

@@ -0,0 +1,145 @@
+/* packages/foundations/css/modal-fullscreen.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.modal-full {
+  position: fixed;
+  inset: 0;
+  z-index: 1300;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  background: var(--surface--base--default);
+}
+
+.modal-full__header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--neo-space-none-rem);
+  height: 104px;
+  padding-block: var(--neo-space-xl-rem);
+  padding-inline: var(--neo-space-3xl-rem);
+  border-bottom: var(--neo-stroke-xs) solid var(--border--base--secondary);
+}
+
+.modal-full__title {
+  margin: 0;
+  flex: 1;
+  text-align: center;
+  color: var(--text--base--default);
+  font-size: var(--neo-type-title-md-bold-size-rem);
+  font-weight: var(--neo-type-title-md-bold-weight);
+  line-height: var(--neo-type-title-md-bold-line-height-rem);
+}
+
+.modal-full__back { position: absolute; left: var(--neo-space-3xl-rem); }
+.modal-full__close { position: absolute; right: var(--neo-space-3xl-rem); }
+
+.modal-full__actions .btn { flex: 0 0 auto; width: 240px; }
+
+.modal-full__close,
+.modal-full__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--icon--base--default);
+  cursor: pointer;
+}
+
+.modal-full__close:focus-visible,
+.modal-full__back:focus-visible {
+  outline: var(--neo-stroke-focus-ring-width) solid var(--focus--ring--default);
+  outline-offset: 2px;
+}
+
+.modal-full__close svg,
+.modal-full__back svg { width: 24px; height: 24px; }
+
+.modal-full__content {
+  display: grid;
+  grid-auto-rows: minmax(min-content, 1fr);
+  overflow-y: auto;
+  padding-inline: var(--neo-space-3xl-rem);
+  padding-block: var(--neo-space-none-rem) var(--neo-space-xl-rem);
+}
+
+.modal-full__content::-webkit-scrollbar { width: 8px; }
+.modal-full__content::-webkit-scrollbar-track { background: var(--fill--base--default); }
+.modal-full__content::-webkit-scrollbar-thumb { background: var(--fill--base--medium); border-radius: var(--neo-radius-pill); }
+.modal-full__content:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--ring--default),
+    inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
+}
+
+.modal-full__actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--neo-space-md-rem);
+  height: 88px;
+  padding-block: var(--neo-space-xl-rem);
+  padding-inline: var(--neo-space-3xl-rem);
+  border-top: var(--neo-stroke-xs) solid var(--border--base--secondary);
+}
+
+@media (max-width: 719px) {
+  .modal-full__header {
+    height: 60px;
+    padding: var(--neo-space-sm-rem);
+    border-bottom: none;
+  }
+
+  .modal-full__title {
+    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);
+  }
+
+  .modal-full__header {
+    justify-content: flex-start;
+    gap: var(--neo-space-sm-rem);
+  }
+
+  .modal-full__back,
+  .modal-full__close { position: static; }
+
+  .modal-full__title {
+    flex: 1;
+    text-align: center;
+    margin-inline-end: 0;
+  }
+
+  .modal-full__title:first-child { text-align: start; }
+
+  .modal-full__close,
+  .modal-full__back { width: 40px; height: 40px; }
+  .modal-full__close svg,
+  .modal-full__back svg { width: 20px; height: 20px; }
+
+  .modal-full__content[data-scroll="mid"],
+  .modal-full__content[data-scroll="bottom"] { border-top: var(--neo-stroke-xs) solid var(--border--base--secondary); }
+  .modal-full__content[data-scroll="top"],
+  .modal-full__content[data-scroll="mid"] { border-bottom: var(--neo-stroke-xs) solid var(--border--base--secondary); }
+
+  .modal-full__content {
+    padding-inline: var(--neo-space-lg-rem);
+    padding-block: var(--neo-space-none-rem) var(--neo-space-lg-rem);
+  }
+
+  .modal-full__actions {
+    border-top: none;
+    flex-direction: column-reverse;
+    justify-content: center;
+    height: 128px;
+    padding-block: var(--neo-space-md-rem) var(--neo-space-xl-rem);
+    padding-inline: var(--neo-space-lg-rem);
+  }
+
+  .modal-full__actions .btn { width: 100%; }
+}

package/css/radio-button.css

@@ -0,0 +1,132 @@
+/* packages/foundations/css/radio-button.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
+
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  cursor: pointer;
+  min-height: 2.75rem;
+}
+
+.radio__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.75rem;
+  flex-shrink: 0;
+}
+
+.radio__wrapper input[type="radio"] {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.radio__control {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--neo-radius-pill);
+  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;
+  position: relative;
+}
+
+.radio__dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: var(--neo-radius-pill);
+  background: var(--icon--base--contrast);
+  display: none;
+}
+
+.radio__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);
+}
+
+.radio:hover .radio__control {
+  border-color: var(--border--base--focus);
+}
+
+.radio--selected .radio__control,
+input[type="radio"]:checked + .radio__control {
+  background: var(--icon--base--default);
+  border-color: var(--icon--base--default);
+}
+
+.radio--selected .radio__dot,
+input[type="radio"]:checked + .radio__control .radio__dot {
+  display: block;
+}
+
+input[type="radio"]:focus-visible + .radio__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);
+}
+
+.radio--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.radio--disabled .radio__control {
+  background: var(--fill--base--light);
+  border-color: var(--border--base--disabled);
+}
+
+.radio--selected.radio--disabled .radio__control {
+  background: var(--icon--base--disabled);
+  border-color: var(--icon--base--disabled);
+}
+
+.radio--disabled .radio__label {
+  color: var(--text--base--disabled);
+}
+
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--neo-space-xs-rem);
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-width: 0;
+}
+
+.radio-group__legend {
+  margin: 0 0 var(--neo-space-xs-rem);
+  padding: 0;
+  color: var(--text--base--default);
+  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);
+}
+
+.radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.radio--hidden-label .radio__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}